Chceli by ste vytvoriť sekciu Hrdina v divi ktorý je tekutý namiesto tradičného responzívneho?
Sekcia Hrdina a webové stránky je jedným z najlepších kandidátov na fluidný dizajn. Na rozdiel od tradičného responzívneho dizajnu, ktorý sa prispôsobuje rôznym bodom prerušenia, sa fluidný dizajn hladko prispôsobuje výrezu prehliadača a udržuje dizajn konzistentný na akomkoľvek zariadení. Koniec koncov, sekcia Hero je prvá vec, ktorú používatelia vidia na a webové stránky.
V tomto návode vám ukážeme, ako vytvoriť celú sekciu fluidného hrdinu divi. Kľúčom k vytvoreniu tohto premenlivého dizajnu je pridať veľkosť premenlivého koreňového písma ku každému z použitých modulov a potom začleniť jednotku dĺžky em (kto je vzhľadom na veľkosť písma hlavného tela ) v nastaveniach modulu.
Začnime!
prehľad
Tu je rýchly pohľad na dizajn, ktorý vytvoríme v tomto návode.
Všimnite si, ako sa plynulé prevedenie plynulo prispôsobuje šírke okna prehliadača.
Vytvorte novú stránku pomocou Divi Builder
Ak chcete začať, budete musieť urobiť nasledovné:
Na hlavnom paneli WordPress prejdite na Stránky> Pridať nové vytvoriť novú stránku.
Dajte tomu názov, ktorý vám dáva zmysel, a kliknite Použitie divi Staviteľ
potom kliknite na tlačidlo Začnite stavať (Stavať od nuly)
Potom budete mať prázdne plátno, na ktorom môžete začať navrhovať divi.
Čítajte tiež: Divi: Ako vytvoriť sekciu Hero s modulom Fullwidth Header
Ako navrhnúť sekciu Fluid Hero v Divi
Nastavenia sekcií
Ak chcete začať, aktualizujme existujúce nastavenia dizajnu sekcie. Otvorte nastavenia sekcie a aktualizujte nasledovné:
- Zarážky prechodu:
- 30 %: #ff2000
- 30 %: #121212
- Smer gradientu: 45°
Pod záložkou dizajn, aktualizujte výplň:
- Výplň: 0px hore, 0px dole
Vytvorte čiaru
Potom do sekcie pridajte riadok s jedným stĺpcom.
Nastavenie linky
Otvorte nastavenia linky a na karte aktualizujte nasledujúce dizajn :
- Šírka odkvapu: 1
- Šírka: 100 %
- Maximálna šírka: 1 pixelov
- Minimálna výška: 100 Vh (stolný počítač), žiadna (tablet a telefón)
- Výplň: 0px (horná a dolná časť)
Vytvorte plynulý text hlavičky s okrajom
Teraz, keď sú sekcia a riadok dokončené, môžeme pridať plynulý text hlavičky do sekcie Hero. Do modulu Text tiež pridáme plynulé orámovanie pre kreatívny dizajnový prvok.
Pridajte textový modul
Ak chcete vytvoriť text nadpisu a orámovanie, pridajte do stĺpca nový modul Text.
Nastavenia textu
Pod záložkou obsah, aktualizujte ho obsah tela s nasledujúcim HTML kódom:
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
Aby boli prvky návrhu plynulé, musíme najprv do modulu pridať veľkosť fluidného koreňového písma pomocou funkcie CSS Clamp().
Pod záložkou pokročilý, prilepte nasledujúci útržok CSS:
font-size: clamp(32px, 4.1vw, 70px);
Pod záložkou dizajn, aktualizujte nasledujúce nastavenia dizajnu textu hlavičky:
- Text nadpisu:
- Typ: H1
- Písmo: Montserrat
- Hmotnosť písma: Ťažká
- Farba: #ffffff
- Veľkosť: 1 em
- Vzdialenosť medzi písmenami: 0,1 em
- Výška riadku: 1,2 em
Aktualizujte tiež výplň mod takto:
- Polstrovanie: 1. (hore, dole, vľavo a vpravo)
Ak chcete vytvoriť dizajn tekutého okraja, aktualizujte nasledujúce:
- Šírka okraja: 1 em
- Farba orámovania: #ffffff
- Farba spodného okraja: číra
- Farba ľavého okraja: číra
Vytvorenie okraja zvýraznenia
Na vytvorenie okraja akcentu môžeme duplikovať existujúci modul Text.
Vymaž to obsah existujúcej karosérie a aktualizujte konštrukčné parametre takto:
- Maximálna šírka: 6,5 cm
- Výška: 3,25 em
- Šírka okraja: 0,5 em
- Farba orámovania: #ff2000
Ak chcete umiestniť okraj s diakritikou, pridajte absolútnu polohu s posunom rovným šírke okraja v module Text nadpisu (1 em).
Pod záložkou pokročilý, aktualizujte nasledujúce možnosti pozície:
- Pozícia: Absolútna
- Umiestnenie: vpravo hore
- Vertikálny posun: 1 m
- Horizontálny posun: 1 m
Vytvorte text titulkov
Pod text nadpisu pridáme plynulý text titulkov. Keďže tento text je menší, pridáme menšiu veľkosť tekutého koreňového písma.
Pridajte nový textový modul
Ak chcete vytvoriť text titulkov, pridajte nový modul Text pod existujúci modul Text hlavičky.
Môžete pridať niektoré výplňové textové vety takto:
- Obsah: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pridajte veľkosť tekutého koreňového písma
Ďalej musíme pridať novú premenlivú veľkosť písma, ktorá funguje lepšie pre malý text. Na karte Rozšírené prilepte nasledujúci útržok CSS pod hlavný prvok:
font-size: clamp(14px, 1.4vw, 24px);
Nastavenia textového dizajnu
Pod záložkou dizajn, aktualizujte nasledovné:
- Text:
- Hmotnosť písma: polotučné
- Farba: #ffffff
- Veľkosť: 1 em
- Výška: 1,6 em
Potom aktualizujte veľkosť a medzery takto:
- Maximálna šírka: 19 cm
- Okraj: 2 em (dole), automaticky (vľavo), 5 em (vpravo)
Vytvorte tlačidlo tekutiny
Ak chcete vytvoriť plynulé tlačidlo, pridajte nový modul Tlačidlo pod modul Text titulkov.
Potom aktualizujte text tlačidla tak, aby znel „7 Day Free Tral“.
Pridajte veľkosť tekutého koreňového písma
Ďalej musíme pridať novú premenlivú veľkosť písma vhodnú pre tlačidlo.
Pod záložkou pokročilý, prilepte nasledujúci útržok CSS pod hlavný prvok:
font-size: clamp(20px, 2.35vw, 40px);
Nastavenia dizajnu tlačidiel
Pod záložkou dizajn, aktualizujte nasledovné:
- Zarovnanie tlačidiel: vpravo
- Použiť vlastnú veľkosť pre tlačidlo: ÁNO
- Farba textu tlačidla: #ff2000
- Zarážky prechodu:
- Farba 1 25%: číra
- Farba 2 25 %: #ffffff
- Smer gradientu: 45 stupňov
- Tlačidlo:
- Šírka okraja: 0 pixelov
- Polomer okraja: 0 pixelov
- Písmo: Montserrat
- Hmotnosť písma: hrubá
- Štýl: kurzíva
- Zobraziť ikonu tlačidla: ÁNO
- Ikona: šípka v tvare trojuholníka doprava (pozri snímku obrazovky)
- Umiestnenie ikony: vpravo
- Okraj: 8 em (vpravo)
- Polstrovanie: 0,2 em (hore a dole), 1,5 em (vľavo), 1 em (vpravo)
Vytvorte obrázok pre sekciu Hrdina
So všetkými obsah sekcie Hrdina na správnu veľkosť stránky, sme pripravení pridať obrázok sekcie Hrdina na ľavú stranu. Ak to chcete urobiť, najprv pridajte modul Image pod tlačidlo.
Otvorte nastavenia obrázka a nahrajte obrázok.
Nastavenia dizajnu obrazu
Pod záložkou dizajn, aktualizujte nasledujúce nastavenia:
- Zarovnanie obrázka: vľavo (stolný počítač a tablet), stred (telefón)
- Maximálna šírka: 48 % (stolný počítač a tablet), 70 % (telefón)
- Výplň: 4 % (vľavo)
Nakoniec priraďte obrázku absolútnu polohu s posunom pomocou jednotky dĺžky vmin takto:
- Pozícia: absolútna (stolný počítač a tablet), relatívna (telefón)
- Umiestnenie: vľavo hore (stolný počítač a tablet)
- Vertikálny posun: 30vmin (stolný počítač a tablet), 0px (telefón)
Konečný výsledok
Tu je konečný výsledok na živej stránke.
Pozri tiež: Divi: Ako používať masky a vzory pozadia pre sekciu hrdinov
Plynulý dizajn sa tak plynulo prispôsobuje šírke okna prehliadača.
Stiahnite si DIVI teraz!!!
záver
Pridanie plynulého dizajnu do sekcie Hrdina môže byť praktickým spôsobom, ako zabezpečiť, aby horná časť záhybu bola krásne konzistentná vo všetkých veľkostiach prehliadača, bez toho, aby ste museli aktualizovať dizajn v bodoch, konkrétnych zastávkach alebo používať mediálne dopyty.
Dúfajme, že táto technika pridá ďalšiu užitočnú dizajnérsku zručnosť pre budúce projekty.
Tiež dúfame, že vás tento tutoriál inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.
Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
