U ovom tekstu ćete videti kako u okviru Elementora, možete uz pomoć jednostavnog CSS koda napraviti kutije na izvlačenje(slide out boxes) koje mogu da se primene na bilo koju vrstu sadržaja.
Prva stvar koju je potrebno uraditi je da napravimo ugneždenu sekciju prevlačeći kolone u trenutnu sekciju i stilizovati pozadinu. Pod opcijom Advanced dodaćemo malo razmaka od vrha i dna sekcije a pod opcijom Style ubacićemo neku sliku za pozadinu, gde ćemo takođe za Position postaviti atribut Center Center, kod Repeat ćemo postaviti No-repeat i kod Size ćemo postaviti Cover.
U okviru sekcije vidimo da je kreirana kolona a u okviru nje postoji ugneždena sekcija. Kod ugneždene sekcije ćemo obrisati jednu kolonu koja nam nije potrebna a preostalu ćemo stilizovati. Pod opcijom Advanced ćemo dodati razmak, zatim pod Style ćemo je stilizovati dodajući boju i zaobliti joj krajeve pod opcijom Border i tako smo dobili prvu sekciju. Zatim ćemo joj dodati naslov i ubaciti malo teksta.
Sledeća stvar koju ćemo uraditi je kopiranje sekcije i malo ćemo je izmeniti kako bi ih razlikovali, brisanjem jednog dela teksta, dodavanjem dugmeta i slično, šta vam može pasti na pamet. Tako smo dobili 2 različite sekcije i sada je potrebno da primenimo neke CSS klase pomoću kojih možemo da promenimo stil sekcija koristeći određeni CSS kod. Prvo što je potrebno uraditi je da svim sekcijama dodamo CSS klasu, tako što ćemo kliknuti na sekciju i pod opcijom Advanced pronaći polje CSS Classes i uneti naziv klase koji želimo.
Nakon što smo uradili prethodno, potrebno je to sačuvati i krećemo na dodavanje CSS koda. Može se uneti na više različitih mesta, na više sekcija, ali je najbolje uneti ga u temu, kako bi mogli da koristimo globalno i to ćemo uraditi pod opcijom Customize, u okviru koje ćete naći Custom CSS/JS kao na slici ispod.
Potrebno je pod Custom CSS/JS ukucati određeni kod, na osnovu CSS klasa sekcija koje smo koristili. Budite pažljivi prilikom davanja imena klasa tim sekcijama, da ne bi bili u situaciji da nešto ne radi dobro kad otkucate CSS kod. CSS kod je prikazan na sledećoj slici, u okviru kojeg su db-hover-scale, db-hover-box i db-hover-slideout nazivi klasa, ako ste ih drugačije nazvali koristite svoje nazive.
Kada ste otkucali CSS kod, videti kako treba da izgleda sekcija pored, u početku će vam prvo gornja sekcija biti prekrivena donjom, kako bi to rešili, da gornja prekrije donju, potrebno je da izmenite stranicu uz Elementor. To ćete rešiti tako što ćete u okviru gornje sekcije izmenite Z-index pod opcijom Advanced i dodeliti mu vrednost 1. Na taj način gornja sekcija prekriva donju kao na slici iznad, a na sledećoj slici ćete videti šta se prikazuje kada pređete mišem preko sekcija.
Uz prilično jednostavan CSS kod, dobili ste lep i kreativan izgled sekcija. Nadam se da vam je ovaj tekst bio od koristi i da ste naučili nešto novo, ako vas interesuje čitanje još saveta za samostalni rad, možete ih pogledati na našem blogu, a u slučaju da želite da se konsultujete sa profesionalcima, kliknite na ovaj link.
Izvor: youtube
