Chceli by ste dať tomu svojmu iný rozmer webové stránky s maskou pozadia divi Lepkavý?
Lepivé možnosti z divi vám umožní vytvoriť množstvo rôznych dizajnov pre vaše webové stránky. Dnešný tutoriál pridáva zoznam vecí, ktoré môžete urobiť. Dúfajme, že to pomôže rozprúdiť vašu kreativitu.
Ukážeme vám, ako vytvoriť lepiacu masku na pozadie.
Tento tutoriál kombinuje lepivé možnosti divi s režimami miešania filtrov.
prehľad
Pred ponorením sa do tohto tutoriálu sa pozrime na výsledok na rôznych veľkostiach obrazovky.
kancelária
Mobilné
Vytvorte dizajn v Divi
Pridajte novú sekciu
Obrázok pozadia
Začnite pridaním novej sekcie na stránku, na ktorej pracujete.
- Nahrajte obrázok na pozadí podľa vlastného výberu.
- Veľkosť obrázka na pozadí: obálka
vzdialenosť
Prejdite na kartu Návrh sekcie a odstráňte predvolené nastavenia rozstupov nižšie:
- Výplň (horná a dolná časť): 0 pixelov
Preteky
Potom skryte pretečenia sekcie na karte pokročilý.
- Horizontálne pretečenie: Skryté
- Vertikálne pretečenie: Skryté
Pridajte riadok #1
Štruktúra stĺpca
Pokračujte pridaním nového riadka s použitím nasledujúcej štruktúry stĺpcov:
dimenzovanie
Bez pridania akýchkoľvek modulov otvorte nastavenia linky a podľa toho zmeňte nastavenia veľkosti:
- Šírka: 100 %
- Maximálna šírka: 100 %
vzdialenosť
Odstráňte tiež všetky predvolené okraje.
- Výplň (horná a dolná časť): 0 pixelov
filtre
K tomuto riadku pridávame aj režim prelínania. Tento režim prelínania nám pomôže vytvoriť masku neskôr v návode.
- Režim miešania: Obrazovka
Z-index
Aby sme sa uistili, že tento riadok zostane pod druhým riadkom, ktorý pridáme do sekcie, zmeníme z-index na karte pokročilý.
- Index Z: 9
Parametre stĺpca
Ďalej otvoríme nastavenia stĺpcov.
Farba pozadia
Používame úplne bielu farbu pozadia.
- Farba pozadia: #ffffff
Hlavný prvok CSS
K hlavnému prvku v záložke pridáme aj hodnotu výšky pokročilý.
height: 100vh;
Pridajte do riadku modul "Text".
Ponechajte oblasť obsahu prázdnu
Po dokončení nastavení riadkov pridajte do jeho stĺpca modul Text.
Opustite zónu obsah prázdny. Namiesto toho používame tento modul na vytvorenie tvaru, ktorý odhaľuje časť obrázka na pozadí sekcie.
Farba pozadia
Pre tento modul použijeme tmavšiu farbu pozadia.
- Farba pozadia: #0b3835
dimenzovanie
Ďalej prejdeme na kartu dizajn a upravte parametre veľkosti takto:
- Šírka:
- Desktop: 20vw
- Tablet a telefón: 70 vw
- Výška:
- Desktop: 30Vh
- Tablet a telefón: 10Vh
vzdialenosť
Pridáme tiež horný okraj.
- Marža (hore): 3vh
Hranica
A zahrnieme aj zaoblené rohy.
- Zaoblené rohy: 15px
Pridajte riadok 2
Štruktúra stĺpca
Pokračujte pridaním ďalšieho riadku do sekcie pomocou nasledujúcej stĺpcovej štruktúry:
dimenzovanie
Otvorte nastavenia linky a vykonajte nasledujúce zmeny v možnostiach Dimenzovanie nasledujúce:
- Šírka: 100 %
- Maximálna šírka: 100 %
Z-index
Zvýšte tiež z-index riadku. To pomôže zabezpečiť, aby obsah riadku zostáva nad predchádzajúcim riadkom.
- Z index: 12
Pridajte do riadku modul "Text".
Pridajte obsah H2
Je čas pridať moduly, počnúc prvým textovým modulom, ktorý obsahuje obsah H2 podľa vlastného výberu.
Nastavenia textu H2
Prispôsobte nastavenia textu H2 nasledovne:
- Písmo: Playfair Display
- Zarovnanie textu: na stred
- Farba textu: #0b3835
- Veľkosť:
- Pracovná plocha: 150 pixelov
- Tablet a telefón: 45px
- Výška riadku: 1,2 em
dimenzovanie
Ďalej prejdite na nastavenia veľkosti a použite nasledujúce nastavenia:
- Maximálna šírka: 980 pixelov
- Modul zarovnania: Stred
vzdialenosť
Zahrňte aj záporný horný okraj.
Pridajte do riadku modul "tlačidlo".
Pridať obsah na tlačidlo
Ďalším a posledným modulom, ktorý potrebujeme v tomto riadku, je modul Button. Pridajte obsah podľa vlastného výberu.
Zarovnanie tlačidiel
Prepnúť na kartu dizajn modulu a upravte zarovnanie tlačidla.
- Zarovnanie tlačidiel: Stred
Nastavenia tlačidiel
Ďalej prejdite na nastavenia tlačidiel a použite nasledujúce štýly:
- Použiť vlastné štýly pre tlačidlo: Áno
- Veľkosť textu tlačidla: 15px
- Farba textu tlačidla: #ffffff
- Farba pozadia tlačidla: #000000
- Šírka okraja tlačidla: 0 pixelov
- Polomer okraja tlačidla: 100 pixelov
- Písmo tlačidla: Montserrat
- Hmotnosť písma tlačidla: polotučné
- Štýl písma: TT
vzdialenosť
K nastaveniam medzier pridávame aj vlastné hodnoty okrajov a výplní.
- Marža (dole): 60vh
- Výplň (horná a dolná časť): 15 pixelov
- Výplň (vľavo a vpravo): 40 pixelov
Aplikujte lepkavé efekty
Otvorte riadok #1
Teraz, keď sme vytvorili základ nášho dizajnu, je čas použiť lepkavé štýly. Otvorte nastavenia prvého riadku.
Použite lepivé možnosti
Prejdite na kartu pokročilý a použite nasledujúce trvalé nastavenia:
- Sticky Position: Stick to Top
- Spodný lepivý limit: Sekcia
- Odsadenie od okolitých lepkavých prvkov: ÁNO
- Predvolené a lepiace štýly prechodu: ÁNO
Možnosti lepenia textového modulu
Teraz, keď je čiara lepkavá, môžeme použiť štýly na modul Text vo vnútri čiary. Otvorte nastavenia modulu.
Sticky Size
Ďalej prejdite na nastavenia veľkosti a použite nasledujúce hodnoty veľkosti:
- Šírka (Sticky): 80 vw
- Výška (Sticky): 90vh
Čas prechodu
Nakoniec prejdite na kartu pokročilý a predĺžiť trvanie prechodu.
- Trvanie prechodu: 500 ms
prehľad
Teraz, keď sme prešli všetkými krokmi, poďme sa konečne pozrieť na to, ako to vyzerá na rôznych veľkostiach obrazovky.
kancelária
Stiahnite si DIVI teraz!!!
Mobilné
Stiahnite si DIVI teraz!!!
záver
V tomto článku sme vám opäť ukázali, ako byť kreatívny s lepiacimi možnosťami Divi.
Konkrétne sme vám ukázali, ako skombinovať nastavenia filtra Divi a možnosti lepenia.
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.
...
