Chceli by ste použiť masky a vzory pre svoju sekciu Hrdina v divi ?
Diviho nové masky a vzory pozadia sú jednou z našich najlepších nových dizajnových funkcií. Každú z masiek a vzorov je možné skombinovať s inými prvkami pozadia (ako sú farby, obrázky a prechody) a vytvoriť tak nespočetné množstvo jedinečných kombinácií len niekoľkými kliknutiami.
Dnes vám ukážeme, ako ho používať divi a jeho nové masky a vzory pozadia na vytvorenie sekcie hrdinov.
V tomto návode sa budeme zaoberať dôležitými krokmi potrebnými na vytvorenie masiek a vzorov pozadia.
Dokonca si ukážeme, ako umiestniť obrázky na pozadí tak, aby vyhovovali dizajnu masky. Toto by vám malo poskytnúť outils musíte vytvoriť perfektnú sekciu Hero pre vašu stránku za pár minút.
prehľad
Tu je rýchly pohľad na dizajn, ktorý vytvoríme v tomto návode.
Čítajte tiež: Divi: Ako vytvoriť responzívnu mriežku obrázkov s odkazmi a efektmi vznášania
Príklad sekcie Hrdina s bielou maskou a vzorom.
Tu je tmavá verzia tej istej sekcie Hero s čiernou maskou a vzorom.
S týmto dizajnom môžete ľahko meniť masky a pozície masky len niekoľkými kliknutiami!
Vytvorte novú stránku pomocou Divi Builder
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.
Ako používať Diviho masky a vzory pozadia v sekcii hrdinov
1. Vytvorte štruktúru rozloženia
Pre túto sekciu pre hrdinu použijeme klasickú štruktúru rozloženia s názvom a výzvou na akciu vľavo a obrázkom (alebo vizuálnym dizajnom) vpravo.
V tomto príklade bude náš vizuálny dizajn vytvorený pomocou možností pozadia Divi. Ale skôr, ako sa dostaneme k hrubej veci, musíme vytvoriť riadok s dvoma stĺpcami, aby sme ušetrili miesto na pravej strane stránky, aby sme mohli predviesť masky na pozadí našej sekcie a dizajn vzoru.
2. Pridajte názov a výzvu na akciu
V ľavom stĺpci (stĺpec 1) pridajte textový modul pre svoj hlavný nadpis, textový modul pre text titulkov a modul tlačidlo pre vaše tlačidlo.
3. Pridajte do sekcie zvislé medzery
Aby náš dizajn pozadia vyzeral vysoký a krásny, musíme sekcii pridať vertikálnu výšku. Jednoduchý spôsob, ako to urobiť, je pridať výplň do hornej a dolnej časti sekcie. Majte na pamäti, že musíme upraviť čalúnenie na obrazovke tabletu a telefónu, aby sme vytvorili priestor pre náš dizajn pozadia, keď sú stĺpce naskladané vertikálne.
Otvorte nastavenia sekcie. Na karte návrhu aktualizujte výplň takto:
- Vypchávka:
- Pracovná plocha: horná 20vw, spodná 20vw
- Tablet: horný 8vw, spodný 48vw
- Telefón: horný 8vw, spodný 70vw
4. Pridajte obrázok na pozadí a prechod
Ďalej môžeme do sekcie pridať obrázok na pozadí a prechod. Majte na pamäti, že hlavný ústredný bod obrázka na pozadí bude odhalený na pravej strane sekcie, takže použite obrázok, ktorý má na pravej strane to, čo chcete vidieť.
V tomto príklade používame obrázok s panorámou mesta. Pravá strana obrazu má bližšie a lepšie vyzerajúce budovy, takže to funguje naozaj dobre.
Pod záložkou Obrázok na pozadí, nahrajte obrázok na pozadí sekcie.
V Divi môžete jednoducho pridať farebný prechod na obrázok na pozadí. Pod záložkou Prechod pozadia, pridajte na pozadie sekcie nasledujúci prechod:
- Zarážky prechodu:
- 0%: #3e22ff
- 100%: jasné
- Štvorcový prechod nad obrázkom na pozadí: ÁNO
5. Vytvorte vzor pozadia pre sekciu
Teraz, keď máme pripravený obrázok na pozadí a prechod, môžeme pridať vzor pozadia na dokončenie dizajnu.
V tomto príklade použijeme jemný vzor, ktorý len pridá trochu textúry, aby získal jedinečnejší vzhľad.
Pod záložkou Vzory pozadia, aktualizujte nasledovné:
- Vzor pozadia: Všívané
TRICK: Pri vzoroch na pozadí je zvyčajne najlepšie, aby boli jemné. Skúste použiť vlastné veľkosti pre menšie návrhy a potom znížte nepriehľadnosť farieb.
6. Vytvorte masku pozadia pre sekciu
S naším vzorom pozadia sme konečne pripravení otestovať úplne novú masku pozadia pre náš dizajn. Na výber je množstvo možností a variácií. V tomto príklade použijeme plástovú masku.
Pod záložkou Maska pozadia, aktualizujte nasledovné:
- Maska: Honeycomb
- Farba masky: #ffffff
- Veľkosť: Obal
7. Upravte polohu obrázka na pozadí
Keďže používame masku pozadia, časť nášho obrázka na pozadí je maskovaná (alebo „maskovaná“).
V tomto príklade sa uistíme, že pravý dolný okraj obrázku je najviac viditeľný a posunieme ho trochu doprava, aby sa zobrazilo viac budov.
Na karte Obrázok aktualizujte nasledovné:
- Pozícia obrázka na pozadí: Vpravo dole
- Obrázok na pozadí Horizontálny posun: -4vw
8. Použite režim prelínania
Jedným zo spôsobov, ako byť kreatívny so všetkými týmito prvkami pozadia, je pridať režim prelínania. Režimy prelínania je možné pridať do ktorejkoľvek z možností pozadia a možno ich použiť na kreatívne miešanie viacerých vrstiev pozadia (obrázok, prechod, maska atď.).
V tomto príklade zmiešame obrázok pozadia s farbou prechodu. Ak to chcete urobiť, kliknite na kartu Obrázok na pozadí a pridajte režim prelínania na zmiešanie farby prechodu s obrázkom na pozadí takto:
- Prelínanie obrázkov na pozadí: Násobenie
9. Upravte masku pozadia pre mobil
Je dôležité zabezpečiť, aby dizajn masky pozadia vyzeral skvele aj na mobilných zariadeniach. Našťastie vstavané možnosti tento proces uľahčujú.
Nezabudnite, že sme už pridali ďalšie čalúnenie na tablete a telefóne, aby sme vytvorili priestor pre náš dizajn pozadia.
Teraz všetko, čo musíme urobiť, je použiť možnosti transformácie pozadia a pomeru strán na úpravu masky pre mobil.
Pod záložkou Maska pozadia, povoľte responzívne možnosti a aktualizujte nasledovné:
Tabletová verzia
- Transformácia masky: Prevrátiť vertikálne, Prevrátiť horizontálne, Otočiť
- Pomer strán masky: štvorcový
Verzia telefónu
- Transformácia masky: Prevrátiť vertikálne, Prevrátiť horizontálne, Otočiť
- Pomer strán masky: Portrét
Výsledok
Pozrite si dizajn, ktorý sme doteraz vytvorili.
Stolný počítač
Verzia pre tablety
Verzia telefónu
10. Vytvorte tmavú verziu
Ak chcete tmavú verziu tohto dizajnu, stačí zmeniť farbu masky pozadia na tmavú farbu (napríklad čiernu).
Potom zmeňte farbu vzoru na čiernu.
Potom zmeňte názov a text titulkov na biely. A možno budete chcieť aktualizovať aj farbu tlačidla.
Takto vyzerá tmavá verzia.
Konečné výsledky
Pozri tiež: Divi: Ako prispôsobiť odkaz „Prečítaj si viac“ na blogu
Tu je ďalší pohľad na naše konečné výsledky.
Stiahnite si DIVI teraz!!!
záver
Navrhnite si sekciu Hrdina webové stránky je skvelá zábava masky a vzory pozadia od Divi. Možnosti pozadia sa dajú ľahko zmeniť, aby ste získali dokonalý dizajn. A existuje množstvo ďalších možností, ktoré môžete použiť (napríklad režimy prelínania) na vytvorenie ešte jedinečnejších pozadí.
Okrem toho môžete pridať masky a vzory do akéhokoľvek prvku Divi, nielen do sekcií. Takže príjemné experimentovanie!
Dúfame, že vás tento návod 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, konzultujte nášho sprievodcu na internete 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.
...
