Chcete vytvoriť prechody na pozadí medzi prvkami? divi ?
Vytvorte plynulé prechody dizajnu pozadia medzi prvkami divi je skvelý spôsob, ako vylepšiť svoj dizajn webové stránky divi.
To vám umožní plynule prechádzať prechodom, vzorom a maskou pozadia medzi čiarou a sekciou kreatívnym spôsobom.
Môžete mať napríklad prechod vzoru alebo masky v rôznych farbách bez straty celkového zarovnania a symetrického vzhľadu dizajnu.
V tomto návode použijeme vstavané možnosti dizajnu pozadia Divi na vytvorenie plynulého prechodu dizajnu pozadia medzi sekciou Divi a čiarou. Aplikácia a všestrannosť tohto dizajnu sú neobmedzené a posúvajú možnosti dizajnu pozadia Divi na úplne novú úroveň!
Začnime.
prehľad
Tu je rýchly pohľad na dizajn, ktorý vytvoríme v tomto návode.
Tu je niekoľko ďalších vzorových návrhov, ktoré sú možné len niekoľkými jednoduchými zmenami masiek a vzorov pozadia.
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ž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.
Vytvorenie plynulého prechodu na pozadí medzi sekciou Divi a čiarou
Vytvorenie hlavičky ako zástupného obsahu
Čítajte tiež: Divi: Ako vytvoriť karty s efektom vznášania z čiar
Predtým, ako skočíme, musíme pridať hlavičku ako obsah fiktívne. Ak chcete začať, pridajte riadok s jedným stĺpcom do predvolenej sekcie stránky.
Potom pridajte do riadku textový modul.
Pridajte text veľkosti H1.
Pod záložkou dizajn, podľa potreby aktualizujte dizajn textu hlavičky.
- Písmo: Roboto Condensed
- Hrúbka písma: tučné
- Štýl: TT
- Zarovnanie textu: na stred
- Farba textu: #000000
- Veľkosť textu nadpisu: 4vw
- Vzdialenosť medzi písmenami: 0.1 em
- Výška riadku: 1.3 m
Návrh pozadia sekcie
Do sekcie bola pridaná výplň
Keď je falošná hlavička na mieste, otvorte nastavenia sekcie a aktualizujte medzery takto:
- Polstrovanie (hore a dole): 15vw
Do sekcie bol pridaný prechod pozadia
Teraz, keď máme viac priestoru na prácu, sme pripravení pridať náš dizajn pozadia do sekcie. Pod záložkou Prechod pozadia, pridajte nasledujúce body prechodu:
- Zarážky prechodu:
- 0%: #4f0f75 (pri 0%)
- 25 %: #2843c9 (pri 25 %)
- 50 %: #4ae2e0 (pri 50 %)
- 75 %: #3881ff (pri 75 %)
- 100%: #4f0f75 (pri 100%)
Pridanie vzoru pozadia do sekcie
Pod záložkou Vzor pozadia, aktualizujte nasledovné:
- Vzor: Diagonálne pruhy
- Farba vzoru: rgba (79,15,117,0.23)
- Transformácia: Otočiť
- Veľkosť vzoru: Vlastná veľkosť
- Šírka: 7vw
- Výška: 5vw
- Pôvod opakovania vzoru: Stred
Poznámka: Nezabudnite použiť jednotku dĺžky VW pre šírku a výšku vzoru. A tiež sa uistite, že ste nastavili opakovaný pôvod na „stred“. Vzor pozadia tak zostane na rovnakom mieste ako vzor pozadia, ktorý do riadka pridáme neskôr.
Pridanie masky pozadia do sekcie
Pod záložkou Maska pozadia, pridajte nasledovné:
- Maska pozadia: Vrstva Blob
- Farba masky: rgba (0,0,0,0.7)
- Šírka masky: 100vw
- Pozícia: Stred
Poznámka: Rovnako ako pri vzore, aj tu potrebujeme veľkosť masky pomocou jednotky dĺžky VW. Musíme tiež dať maske centrálnu polohu.
Návrh čiarového pozadia
Skopírujte a prilepte pozadie sekcie na pozadie riadku
Ak chcete urýchliť proces návrhu pozadia čiary, skopírujte nastavenia pozadia sekcie.
Potom prilepte pozadie na existujúci riadok.
V tomto bode už môžete vidieť, ako vzor pozadia a maska na čiare plynule prechádzajú na pozadie sekcie.
Vyzerá to, že čiara má priehľadné pozadie, ale v skutočnosti je to rovnaký vzor a maska použitá v sekcii s rovnakou veľkosťou a polohou.
Upravte veľkosť riadkov a výplň pomocou VW
Ďalej musíme nášmu radu priradiť vlastnú šírku pomocou jednotky dĺžky VW. Aktualizujte nasledovné:
- Šírka: 75vw
- Maximálna šírka: 75vw
- Polstrovanie (hore, dole, vľavo a vpravo): 10vw
Upravte zarážky gradientu na linke
Ďalej musíme upraviť zarážky prechodu na pozadí čiary pre plynulý prechod do prechodu pozadia sekcie.
Pod záložkou Prechod pozadia, ponecháme tri stredné body prechodu zdedené z pozadia sekcie) a odstránime prvú a poslednú zarážku prechodu.
Potom nastavte prvú zarážku na 0 % a tretiu zarážku na 100 %. Po dokončení by ste mali mať nasledujúce prechody.
- Prechodové zarážky
- 0%: #2843c9
- 50 %: #4ae2e0
- 100%: #3881ff
Pridajte tieň rámčeka na čiaru
Aby sme dizajn trochu pozdvihli a zdôraznili plynulý prechod pozadia, môžeme do radu pridať tieň boxu.
- Box Shadow: pozri snímku obrazovky
- Vertikálna pozícia: 0px
- Box Shadow Blur Strength: 4vw
- Farba tieňa: rgba (0,0,0,0.5)
Upravte farbu vzoru pozadia čiary
Teraz, keď máme všetky prvky pozadia na svojom mieste, môžeme začať upravovať farby pre kreatívnejší dizajn.
Pod možnosťou Vzor pozadia riadok, aktualizujte nasledovné:
- Farba vzoru: rgba (255,255,255,0.23)
Upravte farbu masky pozadia
Môžeme tiež aktualizovať farbu masky pre linku, aby dizajn skutočne vynikol.
Pod záložkou Maska pozadia, aktualizujte nasledovné:
- Farba masky: #ffffff
- Transformácia masky: obrátená
Konečný výsledok
Pozrime sa na konečný výsledok.
Stiahnite si DIVI teraz!!!
Viac možností
Tu je niekoľko ďalších vzorových návrhov, ktoré sú možné len niekoľkými jednoduchými zmenami masiek a vzorov pozadia.
Pozri tiež: Divi: Ako používať "Gradient Builder" na skrášlenie vašich obrázkov
Stiahnite si DIVI teraz!!!
záver
Kľúčom k vytvoreniu plynulých prechodov dizajnu pozadia v Divi je rozumné používanie týchto jednotiek dĺžky VW.
Najprv musíme vytvoriť dizajn pozadia sekcie, ktorý bude zodpovedať šírke výrezu prehliadača (zo stredovej polohy na stránke). Po dokončení môžeme použiť rovnaký jednoriadkový dizajn pozadia. Potom už máme len nejaké vylepšenia gradientu a farieb pre úžasný dizajn.
Dúfajme, že táto technika pridá ďalšiu užitočnú dizajnérsku zručnosť pre budúce projekty.
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.
...
