Chceli by ste mať v pozadí gradient divi mení sa to pri vznášaní?
Vytváranie webových stránok je o tom, aby ste sa uistili, že každý detail je správny. Venovanie pozornosti malým detailom vášho dizajnu rýchlo zvýši kvalitu vášho webové stránky.
S novými možnosťami vznášania divi, môžete jednoducho pridať malé interakcie na svojom webové stránky. Možnosti prechodu sa vzťahujú na takmer všetky parametre návrhu. Môžete napríklad nepriamo zmeniť pozadie s prechodom pri prechode myšou, aby ste vytvorili pekný prechod.
To je presne to, čo vám ukážeme v tomto návode. Okrem prechodu prechodom vytvoríme aj úžasný príklad dizajnu od začiatku, ktorý budete môcť voľne použiť pre akýkoľvek typ webové stránky ktoré vytvoríte.
Poďme!
prehľad
Pred ponorením sa do tutoriálu sa pozrime na konečný výsledok.
Začnime navrhovať s Divi
Pozri tiež: Divi: Ako vytvoriť citlivý akordeónový posúvač
Pridajte časť # 1
vzdialenosť
Prvá vec, ktorú budete musieť urobiť, je vytvoriť novú stránku alebo otvoriť existujúcu a pridať na ňu novú pravidelnú sekciu. Otvorte nastavenia a pridajte vlastný horný a dolný okraj.
- Výplň (horná a dolná časť): 100 pixelov
Pridajte riadok 1
Štruktúra stĺpca
Pokračujte pridaním nového riadka s použitím nasledujúcej štruktúry stĺpcov:
Predvolená farba pozadia (pracovná plocha) stĺpca 1
Zatiaľ bez pridania modulov, otvorte nastavenia riadkov a pridajte nasledujúcu predvolenú farbu pozadia do stĺpca 1:
- Pozadie (počítač): #e7ffa0
Farba pozadia stĺpca 1 pri umiestnení kurzora myši
Zmeňte túto farbu pozadia pri umiestnení kurzora myši.
- Pozadie: #00020c
Stĺpec 1 prechod pozadia
Do stĺpca 1 pridajte aj farbu pozadia s prechodom. Všimnite si, že používame úplne priehľadnú farbu. Táto farba umožní presvitať farbu pozadia, ktorá sa zmení pri umiestnení kurzora myši.
- Farba 1 (20 %): rgba (255,255,255,0 XNUMX XNUMX)
- Farba 2 (100 %): rgba (16,0,201,0.8 XNUMX XNUMX)
- Typ gradientu: Lineárny
- Smer gradientu: 50 stupňov
Farba pozadia stĺpca 2
Pridajte tiež farbu pozadia do stĺpca 2.
- Pozadie: #ffffff
dimenzovanie
Potom prejdite na kartu dizajn a zmeňte nastavenia veľkosti v možnosti Dimenzovanie.
- Použiť vlastnú šírku odkvapu: ÁNO
- Šírka odkvapu: 1
- Šírka: 2000 pixelov
vzdialenosť
Pokračujte pridaním vlastných hodnôt výplne do nastavení medzier.
- Výplň (horná a dolná časť): 0 pixelov
Medzery (stĺpec 2)
- Výplň (horná a dolná časť): 6vw (stolný počítač), 120 pixelov (tablet a telefón)
- Výplň (ľavý a pravý): 5vw (stolný počítač), 80px (tablet), 50px (telefón)
Shadow Box
A tiež dať riadku jemný tieň boxu.
- Sila rozmazania rámčeka: 100 pixelov
- Sila rozpätia tieňa rámčeka: -10px
prechody
Nakoniec vytvoríme plynulý prechod pozadia s prechodom zvýšením trvania prechodu na karte pokročilý.
- Trvanie prechodu: 1100 ms
Pridajte modul Image do stĺpca 1
Nahrajte obrázok
Je čas začať pridávať moduly! Pridajte modul Image do prvého stĺpca.
Gradient pozadia
Prejdite na nastavenia pozadia tohto modulu obrázka a pridajte pozadie s prechodom. Opäť používame úplne priehľadnú farbu, aby presvitali ostatné farby.
- Farba 1 (57 %): rgba (50,217,255,0.66)
- Farba 2 (100 %): rgba (255,255,255,0)
- Typ prechodu: Kruhový
- Pozícia gradientu: hore
vzdialenosť
Potom do modulu pridajte vlastné horné čalúnenie.
- Polstrovanie (hore): 14vw
Pridajte textový modul do stĺpca 2
Pridajte obsah
Prejdime do druhého stĺpca! Prvý modul, ktorý budeme potrebovať, je Textový modul pre titulok. Pokračujte a pridajte a obsah názov výberu.
Nastavenia textu hlavičky
Ďalej prejdite na nastavenia textu hlavičky a vykonajte nejaké zmeny.
- Písmo: Abril Fatface
- Farba textu: #000000
- Veľkosť textu: 4 vw (stolný počítač), 60 px (tablet), 40 px (telefón)
Pridajte druhý textový modul do stĺpca 2
Pridajte obsah
Druhý modul, ktorý budeme potrebovať, je ďalší modul Text. Pridajte nejaké obsah podľa výberu.
Nastavenia textu
Ďalej prejdite na nastavenia textu a zmeňte zarovnanie textu.
- Zarovnanie textu: Zarovnané
dimenzovanie
Šírku upravte aj v nastaveniach veľkosti.
- Šírka: 73 % (stolný počítač), 100 % (tablet a telefón)
vzdialenosť
Nakoniec pridajte vlastný horný a dolný okraj modulu, aby ste vytvorili medzery.
- Okraj (hore a dole): 2,5 vw (počítač), 50 px (tablet a telefón)
Pridajte modul Button do stĺpca 2
Pridať popis
Tretím a posledným modulom, ktorý budeme potrebovať v druhom stĺpci, je modul Button. Pridajte kópiu podľa vlastného výberu.
Nastavenia tlačidiel
Potom zmeňte nastavenia tlačidiel.
- Použiť vlastné štýly pre tlačidlo: ÁNO
- Veľkosť textu tlačidla: 1,2 vw (stolný počítač), 14 px (tablet a telefón)
- Farba textu tlačidla: #ffffff
- Zarážky gradientu 1 (0 %): #9ea6ff
- Zarážky prechodu 2 (100 %): rgba (16,0,201,0.8)
- Riadenie: 78 stupňov
- Šírka okraja tlačidla: 0 pixelov
- Polomer okraja: 30 pixelov
- Medzera medzi písmenami: -1px
- Hmotnosť písma: Ultra Bold
- Štýl písma: TT (veľké písmená)
vzdialenosť
Pridajte aj vlastné hodnoty výplne.
- Výplň (horná a dolná časť): 10 pixelov
- Výplň (vľavo a vpravo): 40 pixelov
Shadow Box
A na gombík naneste jemný tieň boxu.
- Sila rozmazania rámčeka: 40px
Čítajte tiež: Ako prispôsobiť modul „Časovač odpočítavania“ pomocou GIF
Pridajte časť # 2
vzdialenosť
Teraz, keď sme dokončili prvú časť, prejdeme na ďalšiu. Pridajte novú bežnú sekciu pomocou nasledujúcich vlastných hodnôt výplne:
- Výplň (horná a dolná časť): 100 pixelov
Pridajte riadok do dvoch stĺpcov
Štruktúra stĺpca
Pokračujte pridaním nového riadka do sekcie pomocou nasledujúcej štruktúry stĺpcov:
Pozadie stĺpca 1
Zatiaľ bez pridania modulov, otvorte nastavenia riadkov a pridajte nasledujúcu farbu pozadia do stĺpca 1:
- Pozadie: #ffffff
Pozadie stĺpca 2 (počítač)
Pridajte nasledujúcu farbu pozadia do stĺpca 2.
- Pozadie (počítač): #ffffff
Farba pozadia stĺpca 2 pri umiestnení kurzora myši
A zmeniť túto farbu pozadia pri umiestnení kurzora myši.
- Pozadie (vznášanie): #3d02ff
2 stĺpcové gradientné pozadie
Do stĺpca tiež pridajte pozadie s prechodom.
- Zarážky prechodu 1 (20 %): rgba (255,255,255,0)
- Gradient Stops 2 (100 %): #ff7700
dimenzovanie
Ďalej prejdite na nastavenia veľkosti a vykonajte nejaké zmeny.
- Použiť vlastnú šírku odkvapu: ÁNO
- Šírka odkvapu: 1
- Šírka: 2000 pixelov
Medzery (riadok)
Pokračujte pridaním vlastných hodnôt výplne do nastavení medzier.
- Výplň (horná a dolná časť): 0 pixelov
Medzery (stĺpec 1)
Zmeňte nastavenia rozstupov stĺpca 1
- Výplň (horná a dolná časť): 6vw (stolný počítač), 120 pixelov (tablet a telefón)
- Výplň (ľavý a pravý): 5vw (stolný počítač), 80px (tablet), 50px (telefón)
Shadow Box
A tiež pridajte do tohto radu jemný tieň boxu.
- Sila rozmazania rámčeka: 100px
- Sila rozpätia tieňa rámčeka: -10px
prechody
Nakoniec vytvorte plynulý prechod zvýšením trvania prechodu na karte pokročilý.
- Trvanie prechodu: 1100 ms
Duplicitné moduly riadku 1
Keďže všetky potrebné moduly už máme v predchádzajúcej časti, ušetríme si čas ich klonovaním.
Umiestnite duplikáty do riadku 2 stĺpcov
A umiestnite duplikáty do nového riadku takto:
upraviť obsah
Uistite sa, že ste zmenili obsah vašich modulov.
Zmena pozadia tlačidla s prechodom
Zmeňte tiež gradient pozadia tlačidla.
- Zastavenie prechodu 0 %: #ff653f
- Gradient Stops 100%: #0066ff
- Smer: 39 stupňov
Zmeniť obrázok
Vymeňte obrázok.
Zmeňte gradient pozadia
Nakoniec upravte gradient pozadia modulu Obrázok.
- Zastavenie prechodu 0%: rgba(0,2,12,0.66)
- Zastavenie prechodu 57%: rgba(255,255,255,0)
prehľad
Teraz, keď sme prešli všetkými krokmi, poďme sa naposledy pozrieť na konečný výsledok.
Stiahnite si DIVI teraz!!!
záver
V tomto článku sme vám ukázali, ako zmeniť pozadie s prechodom pri umiestnení kurzora myši divi. Vytvorili sme tiež skvelý príklad od začiatku, ktorý používa tento prístup.
Môžete voľne použiť dizajn a umelecké diela pre akýkoľvek typ webovej stránky, ktorú vytvoríte.
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.
...
