Divi: Najlepšia WordPress tému všetkých čias!

viac Stahovanie 901.000, Divi je najobľúbenejšia WordPress tému na svete. Je kompletný, ľahko použiteľný a je dodávaný s viac než 62 bezplatnými šablónami.

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.

vytvárať plynulé prechody pozadia medzi prvkami Divi

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.

vytvárať plynulé prechody pozadia medzi prvkami Divi
vytvárať plynulé prechody pozadia medzi prvkami Divi
vytvárať plynulé prechody pozadia medzi prvkami Divi

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.

Divi čiary prevedené na tabulátory

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)

Divi čiary prevedené na tabulátory

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

Než začneme, musíme pridať hlavičku ako zástupný obsah. Ak chcete začať, pridajte riadok s jedným stĺpcom do predvolenej sekcie stránky.

Ľahko vytvorte svoje webové stránky pomocou Elementoru

Elementor vám umožňuje vytvárať Jednoducho a zadarmo akýkoľvek dizajn webovej stránky alebo blogu s profesionálnym vzhľadom. Prestaňte platiť veľa za webovú stránku, ktorú môžete urobiť sami.

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.

Chcete predávať svoje produkty na internete?

Stiahnite si zadarmo WooCommerce, najlepšie doplnky elektronického obchodu na predaj vašich fyzických a digitálnych produktov na WordPress a jednoduché vytvorenie vášho online obchodu. Ideálne pre začiatočníkov.

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.

vytvárať plynulé prechody pozadia medzi prvkami Divi

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.

vytvárať plynulé prechody pozadia medzi prvkami Divi

Pozri tiež: Divi: Ako používať "Gradient Builder" na skrášlenie vašich obrázkov

vytvárať plynulé prechody pozadia medzi prvkami Divi
vytvárať plynulé prechody pozadia medzi prvkami Divi

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.

...

%d bloggerov sa páči táto stránka: