Chcete vytvořit sekci Hrdina v divi který je tekutý místo tradičního responzivního?
Sekce Hrdina a Webové stránky je jedním z nejlepších kandidátů na fluidní design. Na rozdíl od tradičního responzivního designu, který se přizpůsobuje různým bodům přerušení, se fluidní design plynule přizpůsobuje výřezu prohlížeče a udržuje design konzistentní na jakémkoli zařízení. Sekce Hrdina je totiž to první, co uživatelé na a Webové stránky.
V tomto tutoriálu vám ukážeme, jak vytvořit celou sekci fluidního hrdiny divi. Klíčem k vytvoření tohoto proměnlivého designu je přidat velikost proměnlivého kořenového písma ke každému z použitých modulů a poté začlenit jednotku délky em (kdo je vzhledem k velikosti písma kořenového těla ) v nastavení modulu.
Začněme!
přehled
Zde je rychlý pohled na design, který vytvoříme v tomto tutoriálu.
Všimněte si, jak se proměnlivý design plynule přizpůsobuje šířce okna prohlížeče.
Vytvořte novou stránku pomocí Divi Builder
Chcete-li začít, budete muset provést následující:
Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.
Dejte tomu název, který vám dává smysl, a klikněte Použijte divi Stavitel
poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)
Poté budete mít prázdné plátno, na kterém můžete začít navrhovat divi.
Čtěte také: Divi: Jak vytvořit sekci Hero s modulem Fullwidth Header
Jak navrhnout sekci Fluid Hero v Divi
Nastavení sekce
Pro začátek aktualizujme stávající nastavení návrhu pro sekci. Otevřete nastavení sekce a aktualizujte následující:
- Přechodové zastávky:
- 30 %: #ff2000
- 30 %: #121212
- Směr gradientu: 45 stupňů
Na kartě Design, aktualizujte výplň:
- Odsazení: 0px nahoře, 0px dole
Vytvořte čáru
Dále do sekce přidejte řádek s jedním sloupcem.
Nastavení linky
Otevřete nastavení linky a na kartě aktualizujte následující Design :
- Šířka žlabu: 1
- Šířka: 100 %
- Maximální šířka: 1 pixelů
- Minimální výška: 100 Vh (počítač), žádná (tablet a telefon)
- Odsazení: 0px (nahoře a dole)
Vytvořte plynulý text záhlaví s okrajem
Nyní, když jsou sekce a řádek kompletní, můžeme přidat plynulý text záhlaví do sekce Hrdina. Do modulu Text také přidáme proměnlivé ohraničení pro kreativní designový prvek.
Přidejte textový modul
Chcete-li vytvořit text nadpisu a ohraničení, přidejte do sloupce nový modul Text.
Nastavení textu
Na kartě Obsah, aktualizujte to obsah těla s následujícím kódem HTML:
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
Aby byly prvky návrhu plynulé, musíme nejprve do modulu přidat velikost fluidního kořenového písma pomocí funkce CSS Clamp().
Na kartě pokročilý, vložte následující fragment CSS:
font-size: clamp(32px, 4.1vw, 70px);
Na kartě Design, aktualizujte následující nastavení návrhu textu záhlaví:
- Text nadpisu:
- Typ: H1
- Písmo: Montserrat
- Hmotnost písma: Těžká
- Barva: #ffffff
- Velikost: 1 em
- Vzdálenost mezi písmeny: 0,1 em
- Výška řádku: 1,2 em
Aktualizujte také výplň modu následovně:
- Polstrování: 1. (nahoře, dole, vlevo a vpravo)
Chcete-li vytvořit návrh ohraničení tekutiny, aktualizujte následující:
- Šířka okraje: 1 m
- Barva ohraničení: #ffffff
- Barva spodního okraje: čirá
- Barva levého okraje: čirá
Vytvoření akcentního okraje
Chcete-li vytvořit rámeček zvýraznění, můžeme duplikovat stávající modul Text.
Smazat to obsah stávající karoserie a aktualizujte parametry návrhu následovně:
- Maximální šířka: 6,5 cm
- Výška: 3,25 em
- Šířka okraje: 0,5 em
- Barva ohraničení: #ff2000
Chcete-li umístit zvýrazněné ohraničení, přidejte absolutní polohu s posunem rovným šířce ohraničení v modulu Text nadpisu (1em).
Na kartě pokročilý, aktualizujte následující možnosti pozice:
- Pozice: Absolutní
- Umístění: vpravo nahoře
- Vertikální posun: 1 m
- Horizontální posun: 1 m
Vytvořte text titulků
Pod text titulku přidáme plynulý text titulků. Protože je tento text menší, přidáme menší velikost proměnlivého kořenového písma.
Přidejte nový textový modul
Chcete-li vytvořit text titulku, přidejte nový modul Text pod stávající modul Text záhlaví.
Můžete přidat některé výplňové textové věty takto:
- Obsah: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Přidejte velikost tekutého kořenového písma
Dále musíme přidat novou proměnlivou velikost písma, která funguje lépe pro malý text. Na kartě Upřesnit vložte následující úryvek CSS pod hlavní prvek:
font-size: clamp(14px, 1.4vw, 24px);
Nastavení návrhu textu
Na kartě Design, aktualizujte následující:
- Text:
- Tloušťka písma: Polotučné
- Barva: #ffffff
- Velikost: 1 em
- Výška: 1,6 em
Poté aktualizujte velikost a mezery následovně:
- Maximální šířka: 19 cm
- Okraj: 2 em (dole), automaticky (vlevo), 5 em (vpravo)
Vytvořte tlačítko tekutiny
Chcete-li vytvořit proměnlivé tlačítko, přidejte nový modul Tlačítko pod modul Text titulků.
Dále aktualizujte text tlačítka tak, aby zněl „7denní bezplatná trasa“.
Přidejte velikost tekutého kořenového písma
Dále musíme přidat novou proměnlivou velikost písma vhodnou pro tlačítko.
Na kartě pokročilý, vložte následující fragment CSS pod hlavní prvek:
font-size: clamp(20px, 2.35vw, 40px);
Nastavení designu tlačítka
Na kartě Design, aktualizujte následující:
- Zarovnání tlačítek: vpravo
- Použít vlastní velikost pro tlačítko: ANO
- Barva textu tlačítka: #ff2000
- Přechodové zastávky:
- Barva 1 25 %: čirá
- Barva 2 25 %: #ffffff
- Směr gradientu: 45 stupňů
- Knoflík :
- Šířka okraje: 0 pixelů
- Poloměr okraje: 0 pixelů
- Písmo: Montserrat
- Tloušťka písma: tlustá
- Styl: kurzíva
- Zobrazit ikonu tlačítka: ANO
- Ikona: šipka vpravo ve tvaru trojúhelníku (viz snímek obrazovky)
- Umístění ikony: vpravo
- Okraj: 8 em (vpravo)
- Polstrování: 0,2 em (nahoře a dole), 1,5 em (vlevo), 1 em (vpravo)
Vytvořte obrázek pro sekci Hrdina
Se všemi obsah sekce Hrdina na správnou velikost stránky, jsme připraveni přidat obrázek sekce Hrdina na levé straně. Chcete-li to provést, nejprve přidejte pod tlačítko Image modul.
Otevřete nastavení obrázku a nahrajte obrázek.
Nastavení designu obrázku
Na kartě Design, aktualizujte následující nastavení:
- Zarovnání obrázku: vlevo (stolní počítač a tablet), střed (telefon)
- Maximální šířka: 48 % (stolní počítač a tablet), 70 % (telefon)
- Polstrování: 4 % (vlevo)
Nakonec dejte obrázku absolutní polohu s posunem pomocí jednotky délky vmin takto:
- Pozice: Absolutní (stolní počítač a tablet), relativní (telefon)
- Umístění: vlevo nahoře (počítač a tablet)
- Vertikální posun: 30vmin (stolní počítač a tablet), 0px (telefon)
Konečný výsledek
Zde je konečný výsledek na živé stránce.
Viz také: Divi: Jak používat masky a vzory pozadí pro sekci Hrdina
Plynulý design se tak plynule přizpůsobí šířce okna prohlížeče.
Stáhněte si DIVI hned teď!!!
Proč investovat do čističky vzduchu?
Přidání proměnlivého designu do sekce Hrdina může být praktickým způsobem, jak zajistit, aby horní část záhybu byla krásně konzistentní ve všech velikostech prohlížeče, aniž byste museli aktualizovat design v určitých bodech, zastávkách nebo používat dotazy na média.
Doufejme, že tato technika přidá další užitečnou designovou dovednost pro budoucí projekty.
Také 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 projektů vytváření internetových stránek.
Neváhejte se také podívat na našeho průvodce na 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.
...
