Trebam način za stvaranje efekta pomicanja slike Elementor ? U ovom ćemo vas članku uputiti kako stvoriti efekt pomicanja slike koristeći Elementor na svojim web stranicama.
Efekt pomicanja slike omogućit će vam da otkrijete cijelu sliku kada korisnik prijeđe pokazivačem iznad slika. Kada posjetite web mjesto koje prodaje predloške web mjesta, možete vidjeti potpuni pregled predložaka sa značajkama efekta pomicanja slike.
S ovim značajkama možete jednostavno prikazati svojim korisnicima potpuni prikaz web stranice na malom prostoru. Obično, ako želite prikazati punu sliku web stranice, ona će zauzeti puno prostora na vašim web stranicama. Štoviše, to utječe na dizajn vaše web stranice.
Ali s efektom pomicanja slike, možete dodati više slika na atraktivan način koji može lako privući pozornost publike.
Stvorite efekt pomicanja slike u Elementoru
Elementor ne nudi widget za dodavanje efekta pomicanja slike. Dakle, trebate dodati efekt koristeći prilagođeni CSS. Prilagođena CSS značajka dostupna je samo s Elementor profesionalac Stoga provjerite jeste li nadogradili na Elementor Pro.
Sada otvorite stranicu s uređivačem Elementor i kliknite ikonu plus da biste dodali odjeljak.
Sada trebate odabrati stupac za svoj odjeljak. Ovdje odabiremo odjeljak s jednim stupcem.
Sada kliknite na ikonu za uređivanje odjeljka i na kartici izgleda postavite minimalnu visinu na 500.
Sada iz widgeta za blok dodajte blok unutarnjeg odjeljka u svoj stvoreni odjeljak i uklonite zadani stupac. Desnom tipkom miša kliknite ikonu za uređivanje stupca i kliknite opciju brisanja za brisanje glavnog stupca.
Ponovno idite na opciju uređivanja unutarnjeg odjeljka i na kartici izgleda postavite minimalnu visinu na 500 kao što smo ranije pokazali.
Sada se prebacite na karticu stila unutarnjeg odjeljka i postavite pozadinu kao klasičnu iz opcije pozadine. Zatim trebate dodati svoju pozadinsku sliku. Iz opcije položaja slike postavite položaj slike prema Vrhunski centar. U opciji ponavljanja postavite opciju nema-ponoviti i veličina poput pokriti.
Sada prijeđite na karticu napredan za dodavanje prilagođenog CSS-a. U prilagođeno CSS polje dodajte sljedeći kod:
selektor{ -webkit-transition: ease-in-out 3s !važno; prijelaz: lakoća unutra-van 3s !važno; } selector:hover{ background-position: center bottom !important; }
Možete promijeniti vrijednost prijelaza kako biste promijenili učinak pomicanja slika. Ako želite dodati više slika s istim efektom, možete duplicirati stupac i zatim promijeniti pozadinsku sliku.
Zaključak
Slijedeći postupak, moći ćete dodati efekt pomicanja slike na svoju web stranicu pomoću alata za izradu stranica Elementor. Možete provjeriti naše druge članke da biste saznali:
- Kako koristiti Elementor blokove u Gutenberg editoru?
- Elementor vs Divi vs SeedProd – Što je bolje?
- Kako koristiti povijest za poništavanje i ponavljanje radnji u Elementoru
- Kako napraviti Elementor web stranicu super brzom
- Kako stvoriti interaktivni krug u Elementoru
Nadamo se da će vam ovaj članak biti koristan. Ako vam se sviđa ovaj članak, lajkajte našu Facebook stranicu kako biste ostali povezani.
