Chceli by ste navrhnúť pozadie divi Chcete vytvoriť animované rolovanie stránky pomocou masiek a vzorov? Tento návod je pre vás...
Pridanie animácie rolovania do divi a jeho masky a vzory pozadia sú užitočným dizajnérskym trikom, ktorý môže vdýchnuť nový život dizajnu pozadia vašej webovej stránky.
V tomto návode vám ukážeme, ako vytvoriť a animovať masky a vzory pozadia pomocou možností rolovania v Divi (nevyžaduje sa žiadny vlastný kód).
Aby sme to dosiahli, vytvoríme plávajúcu vrstvu pozadia pomocou čiary Divi, ktorú použijeme na animáciu masiek a vzorov pozadia, keď používateľ prechádza časťou obsahu.
Veríme, že sa vám výsledok bude páčiť.
Začnime!
prehľad
Tu je rýchla ukážka toho, ako bude vyzerať animácia posúvania pozadia v tomto návode.
Koncept
Koncept tohto dizajnu by nemal byť príliš ťažké pochopiť. Začneme sekciou, ktorá má gradientné pozadie.
Ďalej vytvoríme čiaru, ktorá je umiestnená (absolútne) tak, aby úplne pokrývala sekciu (ako prekrytie). Do riadku môžeme pridať vzor pozadia.
Ďalej môžeme do stĺpca pridať masku pozadia.
Potom pridáme rolovacie efekty do riadku a stĺpca (ako pri zmene mierky a otáčaní), čo animuje vzor a masku samostatne na pozadí sekcie.
Keď skryjeme pretečenie sekcie, vidíme len animáciu obsiahnutú v danej sekcii.
Začnime vytvorením stránky 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žite Divi Builder
potom kliknite na tlačidlo Začnite stavať (Stavať od nuly)
Potom budete mať prázdne plátno, aby ste mohli začať navrhovať v Divi.
Čítajte tiež: Divi: Ako používať "Gradient Builder" na skrášlenie vašich obrázkov
Ako vytvoriť animované masky a vzory pozadia s posúvaním pomocou Divi
Návrh pozadia sekcie
Najprv budeme ignorovať vytvorenie nového riadku a prejdeme priamo k úprave existujúcej predvolenej sekcie v nástroji na tvorbu tém.
Aby náš dizajn pozadia vyplnil prehliadač, musíme do sekcie pridať vertikálnu výšku. Jednoduchý spôsob, ako to urobiť, je pridať do sekcie minimálnu výšku.
Otvorte nastavenia sekcie. Na karte dizajn, aktualizujte minimálnu výšku a odstráňte výplň nasledovne:
- Okraj: 80 vh (hore a dole)
- Výplň: 0px (hore a dole)
Navrhovanie prechodu pozadia pre sekciu
Teraz môžeme do sekcie pridať vlastný prechod pozadia.
Ak chcete pridať prvé zarážky prechodu, uistite sa, že sú nastavenia sekcie otvorené na karte obsahĎalej vyberte kartu Prechod pozadia a kliknutím pridajte nový prechod. Tým sa pridajú dve predvolené farby prechodu. Pridajte nasledujúce zarážky prechodu s farbou a polohou takto:
- Zarážky prechodu:
- 0%: #4158d0
- 50%: #c850c0
- 100 %: #ffcc70
Potom zmeňte smer lineárneho gradientu:
- Smer gradientu: 270 stupňov
Pridajte riadky do sekcie
Teraz, keď je naša sekcia na mieste, pridajte do sekcie riadok s jedným stĺpcom. Tento riadok sa použije pre našu masku pozadia a animáciu posúvania vzoru.
Potom duplikujte riadok, ktorý ste práve vytvorili. Tento druhý (duplicitný) riadok sa použije pre náš obsah ako obvykle.
Teraz by ste mali mať horný riadok pre animáciu posúvania pozadia a riadok pre normálny obsah.
Prispôsobiť linku
Teraz, keď je gradient pozadia našej sekcie pripravený, môžeme sa zamerať na čiaru, ktorú použijeme pre animáciu rolovania pozadia.
Otvorte nastavenia linky. Na karte pokročilý, aktualizujte nasledovné:
- Pozícia: Absolútna
Vďaka tomu sa čiara bude prekrývať s časťou bez toho, aby v dokumente zaberala akýkoľvek skutočný priestor.
Teraz už len stačí aktualizovať výšku a šírku tak, aby pokrývali celú šírku a výšku sekcie. Tým sa vytvorí potrebné prekrytie a naša druhá vrstva s dizajnom pozadia.
Pod záložkou dizajn, aktualizujte možnosti veľkosti takto:
- Výška stĺpca Aquasize: ÁNO
- Šírka: 100 %
- Maximálna šírka: 100 %
- výška: 100%
- Výplň: 0px (hore a dole)
Teraz možno čiaru nevidíte, ale dokonale pokrýva pozadie celej sekcie.
Vytvorte vzor pozadia pre čiaru
V tomto príklade pridáme vzor Konfety ako pozadie čiary.
Otvorte nastavenia linky. V časti pozadia, vyberte kartu Vzor pozadia a aktualizujte nasledovné:
- Vzor pozadia: konfety
- Vzor:
- Farba: #f6bef7
- Veľkosť: Vlastná veľkosť
- Šírka: 35 vw
- Opakovať pôvod: Stred
POZNÁMKA Použitie jednotky dĺžky VW zabezpečí, že vzor sa bude prispôsobovať prehliadaču, čím sa zachová konzistentnosť a responzívnosť dizajnu.
Pridať efekty posúvania na riadok
Teraz, keď je náš vzor pozadia na mieste, môžeme do riadku pridať efekty posúvania.
Prejdite na kartu pokročilýV rámci možnosti Efekty posúvania, aktualizujte nasledovné:
Vyberte kartu Horizontálny pohyb a aktualizujte nasledovné:
- Povoliť horizontálny pohyb: ÁNO
- Počiatočný posun: 0,5 (pri 0 %)
- Stredný posun: 0 (od 40 % do 60 %)
- Posun na konci: -0,5 (pri 100 %)
Týmto sa vzor pozadia čiary posunie z 50 pixelov doľava na koniec o 50 pixelov doprava.
Vyberte kartu „Zväčšiť a zmenšiť mierku“ a aktualizujte nasledujúce nastavenia:
- Povoliť zväčšenie a zmenšenie: ÁNO
- Počiatočná mierka: 150 % (pri 0 %)
- Stredná mierka: 100 % (od 40 % do 60 %)
- Konečná mierka: 150 % (pri 100 %)
Týmto sa pri posúvaní zmení mierka vzoru pozadia čiary.
Vyberte kartu "Rotujúce " a aktualizujte nasledovné:
- Povoliť otáčanie: ÁNO
- Štartovacia rotácia: 10 stupňov (pri 0 %)
- Stredná rotácia: 0 stupňov (od 40 % do 60 %)
- Konečná rotácia: -10 stupňov (pri 100%)
KĽÚČOVÝ TIP: Rotáciu by ste mali obmedziť na minimum, inak riskujete zobrazenie medzier tam, kde čiara nepresahuje sekciu. Dobrým pravidlom je zväčšiť mierku, ak chcete zvýšiť rotáciu. To umožní čiare otáčať sa cez sekciu bez odhalenia okrajov.
Pridajte do stĺpca masku pozadia s efektmi posúvania
Keď je náš riadok hotový, môžeme pridať masku pozadia s efektmi posúvania do stĺpca v tom istom riadku. Na začiatok pridajme masku pozadia.
Ak to chcete urobiť, otvorte nastavenia stĺpca. Na karte Maska pozadia, aktualizujte nasledovné:
- Maska: Vrstva Blob
- Farba: #ffffff
- Transformácia masky: Horizontálne prevrátenie, Inverzia
Pridajte rolovacie efekty do stĺpca
Teraz, keď máme masku pozadia na mieste, môžeme do stĺpca pridať efekty posúvania. Majte na pamäti, že stĺpec už má efekty posúvania zdedené z nadradeného riadka.
Všetko, čo urobíme, je otáčať stĺpec v opačnom smere ako riadok, aby sme dosiahli väčšie oddelenie masky a vzoru počas trvania rolovania.
Prejdite na kartu pokročilý. V časti Možnosti Efekty posúvania, vyberte kartu Rotating a aktualizujte nasledovné:
- Povoliť otáčanie: ÁNO
- Štartovacia rotácia: -15 stupňov (pri 0%)
- Stredná rotácia: 0 stupňov (od 40 % do 60 %)
- Konečná rotácia: 15 stupňov (pri 100%)
Skryť pretečenie sekcie
V súčasnosti zostáva čiara viditeľná vždy, keď posúvanie spôsobí jej presah za hranice sekcie.
Aby sme to vyčistili, musíme skryť pretečenie sekcie. Ak to chcete urobiť, otvorte nastavenia sekcie. Na karte pokročilý, aktualizujte možnosti viditeľnosti takto:
- Horizontálne pretečenie: Skryté
- Vertikálne pretečenie: Skryté
Teraz to vyzerá lepšie.
Pozri tiež: Divi: 12 kombinácií masiek a vzorov pozadia
Pridanie obsahu do riadku vytvoreného na tento účel
V tejto fáze je maska pozadia a animácia posúvania vzoru dokončené. Už len musíme pridať požadovaný obsah do riadku, ktorý sme predtým vytvorili pre obsah.
V tomto príklade sme pridali fiktívny názov, aby sme videli, ako bude vyzerať animácia na pozadí so statickým textom.
Konečný výsledok
Pozrime sa na konečný výsledok nášho návrhu.
Stiahnite si DIVI teraz!!!
Záver
Je úžasné, aké jednoduché je vytvoriť také krásne pozadia s možnosťami pozadia v Divi. Navyše, pridanie animácie s efektmi posúvania v Divi vdýchne týmto návrhom nový život.
Pre iný vzhľad môžete na každej vrstve vyskúšať rôzne masky a vzory. Ak chcete viac inšpirácie, ako použiť masky a vzory Základné informácie nájdete v týchto 12 kombinácií masky a vzoru pozadia
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.
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.
...