Želite li koristiti efekte sjene i lebdenja u Divi stvoriti sadržaj interaktivni i ističu se web stranica ?
Provjerite svoje web stranica izdvajanje od sličnih web stranica može biti teško. Ali kad jednom stignete tamo, gotovo je uvijek vrijedno truda i razmišljanja koji su u to uloženi.
Pokazat ćemo vam kako kreirati sadržaj interaktivni pri izradi web stranica s Divi.
Idemo!
pregled
Prije nego što zaronimo u ovaj vodič, pogledajmo na brzinu rezultate koje možete očekivati.
Stolno računalo
Mobilni
Krenimo u realizaciju s Divi!
Vidi također: Divi: Kako stvoriti izbornik s kotačićem pri lebdenjul
Dodajte novi odjeljak
Boja pozadine
Napravite novu stranicu ili otvorite postojeću i dodajte joj uobičajeni odjeljak. Otvorite postavke odjeljka i promijenite boju pozadine.
- Pozadina: #03006d
razmak
Zatim idite na postavke razmaka odjeljaka i promijenite ih na sljedeći način:
- Razmak (gornji i donji dio): 50 px
Dodajte novi redak
Struktura stupca
Nastavite dodavanjem novog retka u odjeljak koristeći sljedeću strukturu stupaca.
dimenzioniranje
Zatim idite na postavke veličine i pustite da linija ispuni cijelu širinu zaslona.
- Koristi prilagođenu širinu oluka: DA
- Širina oluka: 1
- Širina: 100%
razmak
Promijenimo i sljedeće postavke razmaka:
- Ispuna (desno): 9vw (stolno računalo), 5vw (tablet i telefon)
- Podstava (desno): 5vw (tablet i telefon)
Dodajte tekstualni modul u stupac 1
Dodajte sadržaj
Nakon što završite s uređivanjem postavki retka, dodajte prvi tekstualni modul u stupac 1.
Dodajte prvi znak kao tekst odlomka. Onda sadržaj koje želite prikazati kao tekst popisa.
Postavke teksta (stolno računalo)
Zatim idite na karticu dizajni promijenite zadane postavke teksta odlomka. Pazite da koristite istu boju za tekst odjeljka i pozadinu.
- Težina fonta: Ultra podebljano
- Boja teksta: #03006d
- Veličina teksta: 27vw (stolno računalo), 0vw (tablet i telefon)
- Visina linije: 1,1 em
- Sjena teksta: Vidi snimanje
- Snaga zamućenja sjene: 0,01 em
- Boja sjene: #ffffff
- Poravnanje teksta: lijevo
Postavke teksta pri lebdenju
Da bismo stvorili lijep efekt lebdenja, morat ćemo promijeniti ove postavke teksta odlomka lebdenja.
- Boja teksta (prelazak pokazivačem): #ffffff
- Boja sjene (prelazak) : rgba (255,255,255,0)
Postavke popisa (stolno računalo)
Nastavite odlaskom na postavke popisa.
- Težina fonta: svijetlo
- Boja teksta popisa: #ffffff
- Veličina teksta popisa: 0px (stolno računalo), 18px (tablet i telefon)
- Stilski položaj: Krug
- Pozicija stila neuređenog popisa: izvana
- Neuređena uvlaka stavke popisa: 0px
Popis postavki teksta pri lebdenju (Hover)
Želimo da se tekst popisa pojavi kada lebdite. Zbog toga ćemo promijeniti veličinu teksta dok lebdimo.
- Veličina teksta neuređenog popisa (prelazak pokazivačem): 18 px
razmak
Nastavite odlaskom na postavke razmaka modula i tamo napravite neke promjene.
- Margina (donja): 50 px (tablet i telefon)
- Margina (desno): -4vw (stolno računalo), 0vw (tablet i telefon)
Klonirajte tekstualni modul 4 puta i postavite duplikate u preostale stupce
Sada kada smo završili s modificiranjem prvog modula u stupcu 1, klonirajte modul četiri puta. Zatim postavite svaki od duplikata u preostale stupce. Modificirat ćemo svaki od duplikata kako bi odgovarao onome što želimo.
Promijenite modul Tekst u stupcu 2
Uređivanje sadržaja
Otvorite duplikat u stupcu 2 i uredite sadržaj.
Promjena razmaka
Zatim idite na postavke razmaka i promijenite prilagođene vrijednosti margina.
- Margina (donja): 50 px (tablet i telefon)
- Margina (lijeva i desna): -2vw (stolno računalo), 0vw (tablet i telefon)
- Desna margina: -2vw (stolno računalo), 0vw (tablet i telefon)
Promijenite modul Tekst u stupcu 3
Uređivanje sadržaja
Također promijenite sadržaj duplikata u stupcu 3.
Promjena razmaka
S postavkama razmaka u kartici dizajna.
- Margina (lijevo): 2,5 vw
- Margina (desna): 1,5 vw
Izmijenite modul Tekst u stupcu 4
Uređivanje sadržaja
Nastavite tako da otvorite postavke modula Tekst u koloni 4 i tamo uredite sadržaj.
Promjena razmaka
Zatim idite na karticu Dizajn i promijenite prilagođene vrijednosti margina u postavkama razmaka.
- Margina (lijevo): -6vw
- Margina (desna): 2vw
Izmijenite modul Tekst u stupcu 5
Sadržaj
Napravite mjesta za posljednji duplikat. Uredite sadržaj u području sadržaja.
Promjena razmaka
S prilagođenim postavkama razmaka.
- Margina (lijevo): -7vw
- Margina (desna): 3vw
pregled
Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.
Pročitajte također: Divi : Kako prilagoditi košaricu i ikone pretraživanja modula "Izbornik pune širine".
Biro
Mobilni
Preuzmite DIVI odmah!!!
Zaključak
Znamo koliko je važno osigurati da vaš web stranica izdvaja se od ostalih web stranica. Uz Divi ugrađene opcije, možete biti kreativni koliko želite.
Ovaj je članak primjer kako možete stvoriti interaktivni sadržaj lebdeći mišem.
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.
...
