Želite li imati pozadinski gradijent Divi to se mijenja prilikom lebdenja?
Izrada web stranica svodi se na to da svaki detalj bude točan. Obraćanje pažnje na male detalje vašeg dizajna brzo će povećati kvalitetu vašeg web stranica.
S novim opcijama lebdenja Divi, možete jednostavno dodati male interakcije na svoj web stranica. Opcije lebdenja primjenjuju se na gotovo sve parametre dizajna. Možete, na primjer, neizravno promijeniti gradijentnu pozadinu dok lebdite kako biste stvorili lijep prijelaz.
To je upravo ono što ćemo vam pokazati u ovom vodiču. Osim gradijentnog prijelaza, također ćemo od nule stvoriti zadivljujući primjer dizajna koji ćete moći slobodno koristiti za bilo koju vrstu web stranica koje stvarate.
Idemo!
pregled
Prije nego što zaronimo u tutorijal, pogledajmo krajnji rezultat.
Počnimo dizajnirati s Divi
Vidi također: Divi: Kako stvoriti responzivni klizač harmonike
Dodajte odjeljak br. 1
razmak
Prvo što ćete morati napraviti je stvoriti novu stranicu ili otvoriti postojeću i dodati joj novi obični odjeljak. Otvorite postavke i dodajte prilagođene gornje i donje margine.
- Razmak (gornji i donji dio): 100 px
Dodajte redak 1
Struktura stupca
Nastavite dodavanjem novog retka koristeći sljedeću strukturu stupaca:
Zadana boja pozadine (Desktop) stupca 1
Bez dodavanja modula, otvorite postavke retka i dodajte sljedeću zadanu boju pozadine u stupac 1:
- Pozadina (radna površina): #e7ffa0
Boja pozadine stupca 1 pri lebdenju
Promijenite ovu boju pozadine pri lebdenju.
- Pozadina: #00020c
Pozadinski gradijent stupca 1
Također dodajte gradijent pozadinske boje u stupac 1. Primijetite da koristimo potpuno prozirnu boju. Ova boja će omogućiti da se vidi boja pozadine, koja se pak mijenja pri lebdenju.
- Boja 1 (20%): rgba(255,255,255,0)
- Boja 2 (100%): rgba(16,0,201,0.8)
- Vrsta gradijenta: linearni
- Smjer gradijenta: 50 stupnjeva
Boja pozadine stupca 2
Također dodajte boju pozadine u stupac 2.
- Pozadina: #ffffff
dimenzioniranje
Zatim idite na karticu dizajn i promijenite postavke veličine u opciji dimenzioniranje.
- Koristi prilagođenu širinu oluka: DA
- Širina oluka: 1
- Širina: 2000 px
razmak
Nastavite dodavanjem prilagođenih vrijednosti ispune u postavkama razmaka.
- Razmak (gornji i donji dio): 0 px
Razmak (2. stupac)
- Razmak (gornji i donji dio): 6vw (stolno računalo), 120 px (tablet i telefon)
- Razmak (lijevo i desno): 5vw (stolno računalo), 80px (tablet), 50px (telefon)
Kutija sjena
Također dajte nizu suptilnu kutijastu sjenu.
- Snaga zamućenja sjene okvira: 100 px
- Snaga širenja sjene okvira: -10px
prijelazi
Konačno, stvorit ćemo glatki gradijent pozadinskog prijelaza povećanjem trajanja prijelaza na kartici napredan.
- Trajanje prijelaza: 1100 ms
Dodajte modul slike u stupac 1
Prenesite sliku
Vrijeme je da počnete dodavati module! Dodajte modul slike u prvi stupac.
Gradijentna pozadina
Idite na postavke pozadine ovog modula slike i dodajte gradijentnu pozadinu. Ponovno koristimo potpuno prozirnu boju kako bismo omogućili drugim bojama da se vide.
- Boja 1(57%): rgba(50,217,255,0.66)
- Boja 2(100%): rgba(255,255,255,0)
- Vrsta gradijenta: Kružni
- Položaj gradijenta: vrh
razmak
Zatim modulu dodajte prilagođenu gornju podlogu.
- Podstava (gornja): 14vw
Dodajte tekstualni modul u stupac 2
Dodajte sadržaj
Prijeđimo na drugu kolonu! Prvi modul koji će nam trebati je tekstualni modul za naslov. Samo naprijed i dodajte a sadržaj naslov po izboru.
Postavke teksta zaglavlja
Zatim idite na postavke teksta zaglavlja i napravite neke promjene.
- Font: Abril Fatface
- Boja teksta: #000000
- Veličina teksta: 4 vw (stolno računalo), 60 px (tablet), 40 px (telefon)
Dodajte drugi tekstualni modul u stupac 2
Dodajte sadržaj
Drugi modul koji će nam trebati je još jedan tekstualni modul. Dodajte malo sadržaj po izboru.
Postavke teksta
Zatim idite na postavke teksta i promijenite poravnanje teksta.
- Poravnanje teksta: obostrano
dimenzioniranje
Također podesite širinu u postavkama veličine.
- Širina: 73% (stolno računalo), 100% (tablet i telefon)
razmak
Na kraju, dodajte prilagođene gornje i donje margine modulu da biste stvorili razmake.
- Margina (gornja i donja): 2,5 vw (stolno računalo), 50 px (tablet i telefon)
Dodajte modul gumba u stupac 2
Dodajte opis
Treći i posljednji modul koji će nam trebati u drugom stupcu je modul gumba. Dodajte kopiju po svom izboru.
Postavke gumba
Zatim promijenite postavke gumba.
- Koristi prilagođene stilove za gumb: DA
- Veličina teksta gumba: 1,2 vw (stolno računalo), 14 px (tablet i telefon)
- Boja teksta gumba: #ffffff
- Granice gradijenta 1 (0%): #9ea6ff
- Gradijent zaustavljanja 2 (100%): rgba(16,0,201,0.8)
- Upravljanje: 78 stupnjeva
- Širina obruba gumba: 0 piksela
- Radijus obruba: 30 px
- Razmak između slova: -1px
- Težina fonta: Ultra podebljano
- Stil fonta: TT (velika slova)
razmak
Dodajte i prilagođene vrijednosti ispunjavanja.
- Razmak (gornji i donji dio): 10 px
- Razmak (lijevo i desno): 40px
Kutija sjena
I primijenite suptilnu sjenu okvira na gumb.
- Snaga zamućenja sjene okvira: 40px
Pročitajte također: Kako prilagoditi modul "Countdown Timer" s GIF-om
Dodajte odjeljak br. 2
razmak
Sada kada smo završili prvi dio, prijeći ćemo na sljedeći. Dodajte novi uobičajeni odjeljak koristeći sljedeće prilagođene vrijednosti ispune:
- Razmak (gornji i donji dio): 100 px
Dodajte red u dva stupca
Struktura stupca
Nastavite dodavanjem novog retka u odjeljak pomoću sljedeće strukture stupaca:
Pozadina stupca 1
Bez dodavanja modula, otvorite postavke retka i dodajte sljedeću boju pozadine u stupac 1:
- Pozadina: #ffffff
Pozadina stupca 2 (radna površina)
Dodajte sljedeću boju pozadine u stupac 2.
- Pozadina (radna površina): #ffffff
Boja pozadine stupca 2 pri lebdenju
I promijenite ovu boju pozadine dok lebdite.
- Pozadina (prelazak): #3d02ff
Gradijent pozadine u 2 stupca
Također dodajte gradijentnu pozadinu stupcu.
- Granice gradijenta 1 (20%): rgba(255,255,255,0)
- Gradijentne granice 2 (100%): #ff7700
dimenzioniranje
Zatim idite na postavke veličine i napravite neke promjene.
- Koristi prilagođenu širinu oluka: DA
- Širina oluka: 1
- Širina: 2000 px
Razmak (linija)
Nastavite dodavanjem prilagođenih vrijednosti ispune u postavkama razmaka.
- Razmak (gornji i donji dio): 0 px
Razmak (1. stupac)
Promijenite postavke razmaka stupca 1
- Razmak (gornji i donji dio): 6vw (stolno računalo), 120 px (tablet i telefon)
- Razmak (lijevo i desno): 5vw (stolno računalo), 80px (tablet), 50px (telefon)
Kutija sjena
I također dodajte suptilnu sjenu okvira u ovaj red.
- Snaga zamućenja sjene okvira: 100px
- Snaga širenja sjene okvira: -10px
prijelazi
Na kraju, stvorite glatki prijelaz povećanjem trajanja prijelaza na kartici napredan.
- Trajanje prijelaza: 1100 ms
Duplicirani moduli linije 1
Budući da već imamo sve module koji su nam potrebni u prethodnom odjeljku, uštedjet ćemo vrijeme njihovim kloniranjem.
Postavite duplikate u stupce reda 2
I smjestite duplikate u novi redak na sljedeći način:
Uređivanje sadržaja
Obavezno promijenite sadržaj vaših modula.
Promjena pozadine gumba s gradijentom
Također promijenite gradijent pozadine gumba.
- Zaustavljanje gradijenta 0%: #ff653f
- Zaustavljanje gradijenta 100%: #0066ff
- Upravljanje: 39 stupnjeva
Promijenite sliku
Zamijenite sliku.
Promjena pozadinskog gradijenta
Na kraju, promijenite pozadinski gradijent modula Image.
- Zaustavljanje gradijenta 0%: rgba(0,2,12,0.66)
- Zaustavljanje gradijenta 57%: rgba(255,255,255,0)
pregled
Sad kad smo prošli kroz sve korake, bacimo posljednji pogled na krajnji rezultat.
Preuzmite DIVI odmah!!!
Zaključak
U ovom članku smo vam pokazali kako promijeniti pozadinu s gradijentom pri lebdenju Divi. Također smo od nule stvorili sjajan primjer koji koristi ovaj pristup.
Slobodni ste koristiti dizajn i umjetnička djela za bilo koju vrstu web stranice koju izradite.
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
