Chcete použít efekty stínu a vznášení? divi vytvořit obsah interaktivní a vyniknout Webové stránky ?
Ujistěte se, že vaše Webové stránky odlišit se od podobných webů může být obtížné. Ale jakmile se tam dostanete, téměř vždy to stojí za námahu a myšlení.
Ukážeme vám, jak vytvořit obsah interaktivní při vytváření webových stránek s divi.
Pojďme!
přehled
Než se ponoříme do tohoto tutoriálu, pojďme se rychle podívat na výsledek, který můžete očekávat.
Stolní počítač
Mobilní aplikace
Pusťme se do realizace s Divi!
Viz také: Divi: Jak vytvořit nabídku rotujícího kolečka při vznášeníl
Přidejte novou sekci
Barva pozadí
Vytvořte novou stránku nebo otevřete existující a přidejte na ni běžnou sekci. Otevřete nastavení sekce a změňte barvu pozadí.
- Pozadí: #03006d
vzdálenost
Poté přejděte na nastavení mezer sekcí a změňte je následovně:
- Výplň (nahoře a dole): 50px
Přidat nový řádek
Struktura kolony
Pokračujte přidáním nového řádku do sekce pomocí následující struktury sloupců.
dimenzování
Poté přejděte do nastavení velikosti a nechte čáru vyplnit celou šířku obrazovky.
- Použít vlastní šířku okapu: ANO
- Šířka žlabu: 1
- Šířka: 100 %
vzdálenost
Změňme také následující nastavení mezer:
- Polstrování (vpravo): 9vw (stolní počítač), 5vw (tablet a telefon)
- Polstrování (vpravo): 5VW (tablet a telefon)
Přidejte textový modul do sloupce 1
Přidat obsah
Po dokončení úprav nastavení řádku přidejte první modul Text do sloupce 1.
Přidejte první znak jako odstavcový text. Poté, obsah který chcete zobrazit jako text seznamu.
Nastavení textu (počítač)
Poté přejděte na kartu Designa změnit výchozí nastavení textu odstavce. Ujistěte se, že používáte stejnou barvu pro text sekce a pozadí.
- Tloušťka písma: Ultra Bold
- Barva textu: #03006d
- Velikost textu: 27vw (stolní počítač), 0vw (tablet a telefon)
- Výška řádku: 1,1 em
- Stín textu: Viz zachycení
- Síla rozostření stínu: 0,01 em
- Barva stínu: #ffffff
- Zarovnání textu: doleva
Nastavení textu kurzorem
Chcete-li vytvořit pěkný efekt přechodu, budeme muset změnit tato nastavení textu odstavců při najetí.
- Barva textu (Hover): #ffffff
- Barva stínu (Hover): rgba (255,255,255,0)
Nastavení seznamu (počítač)
Pokračujte přechodem do nastavení výpisu.
- Hmotnost písma: Lehká
- Barva textu seznamu: #ffffff
- Velikost textu seznamu: 0 pixelů (počítač), 18 pixelů (tablet a telefon)
- Poloha stylu: Kruh
- Pozice stylu neuspořádaného seznamu: Vně
- Neuspořádané odsazení položky seznamu: 0px
Nastavení textu seznamu při umístění kurzoru (Hover)
Chceme, aby se text seznamu zobrazil při umístění kurzoru myši. To je důvod, proč změníme velikost textu při najetí myší.
- Velikost textu neuspořádaného seznamu (umístění kurzoru): 18 pixelů
vzdálenost
Pokračujte přechodem do nastavení rozteče modulů a tam také proveďte nějaké změny.
- Okraj (dole): 50 pixelů (tablet a telefon)
- Okraj (vpravo): -4vw (počítač), 0vw (tablet a telefon)
Klonujte textový modul 4krát a umístěte duplikáty do zbývajících sloupců
Nyní, když jsme dokončili úpravu prvního modulu ve sloupci 1, naklonujte modul čtyřikrát. Poté umístěte každý z duplikátů do zbývajících sloupců. Každý z duplikátů upravíme tak, aby odpovídal tomu, co chceme.
Změňte modul Text ve sloupci 2
Upravit obsah
Otevřete duplikát ve sloupci 2 a upravte obsah.
Změňte rozestup
Dále přejděte na nastavení mezer a změňte hodnoty vlastních okrajů.
- Okraj (dole): 50 pixelů (tablet a telefon)
- Okraj (levý a pravý): -2vw (počítač), 0vw (tablet a telefon)
- Pravý okraj: -2vw (stolní počítač), 0vw (tablet a telefon)
Změňte modul Text ve sloupci 3
Upravit obsah
Změňte také obsah duplikátu ve sloupci 3.
Změňte rozestup
S nastavením mezer na kartě návrh.
- Marže (vlevo): 2,5 vw
- Marže (vpravo): 1,5 vw
Upravte modul Text ve sloupci 4
Upravit obsah
Pokračujte otevřením nastavení modulu Text ve sloupci 4 a upravte obsah také tam.
Změňte rozestup
Dále přejděte na kartu Návrh a změňte hodnoty vlastních okrajů v nastavení mezer.
- Okraj (vlevo): -6vw
- Marže (vpravo): 2vw
Upravte modul Text ve sloupci 5
Obsah
Uvolněte místo pro poslední duplikát. Upravte obsah v oblasti obsahu.
Změňte rozestup
S vlastním nastavením mezer.
- Okraj (vlevo): -7vw
- Marže (vpravo): 3vw
přehled
Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.
Čtěte také: divi : Jak přizpůsobit košík a ikony vyhledávání modulu „Nabídka plné šířky“.
Kancelář
Mobilní aplikace
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Víme, jak důležité je zajistit, aby vaše Webové stránky odlišuje od ostatních webů. S vestavěnými možnostmi Divi můžete být kreativní, jak chcete.
Tento článek je příkladem toho, jak můžete vytvořit interaktivní obsah po najetí myší.
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
