Aveți nevoie de o modalitate de a crea un efect de defilare a imaginii Elementor ? În acest articol, vă vom ghida să creați un efect de defilare a imaginii folosind Elementor pe paginile dvs. web.
Efectul de defilare a imaginii vă va permite să dezvăluiți întreaga imagine atunci când utilizatorul trece cu mouse-ul peste imagini. Când vizitați un site web care vinde șabloane de site, puteți vedea previzualizarea completă a șabloanelor cu funcții de efect de defilare a imaginii.
Cu aceste funcții, puteți afișa cu ușurință utilizatorilor dvs. vizualizarea completă a site-ului web într-un spațiu mic. În mod normal, dacă doriți să afișați o imagine completă a unui site web, acesta va ocupa mult spațiu pe paginile dvs. web. Mai mult, afectează designul site-ului dvs.
Dar, cu efectul de defilare a imaginii, puteți adăuga mai multe imagini într-un mod atractiv, care poate atrage cu ușurință atenția publicului.
Creați efect de defilare a imaginii în Elementor
Elementor nu oferă un widget pentru a adăuga efectul de defilare a imaginii. Deci, trebuie să adăugați efectul folosind CSS personalizat. Funcția CSS personalizată este disponibilă numai cu Elementor Pro. Așa că asigurați-vă că ați făcut upgrade la Elementor Pro.
Acum deschideți o pagină cu editorul Elementor și faceți clic pe pictograma plus pentru a adăuga o secțiune.
Acum trebuie să selectați coloana pentru secțiunea dvs. Aici selectăm secțiunea cu o singură coloană.
Acum faceți clic pe pictograma de editare a secțiunii și în fila aspect setați înălțimea minimă la 500.
Acum, din widgetul bloc, adăugați blocul secțiunii interioare la secțiunea creată și eliminați coloana implicită. Faceți clic dreapta pe pictograma de editare a coloanei și faceți clic pe opțiunea de ștergere pentru a șterge coloana principală.
Accesați din nou opțiunea de editare a secțiunii interioare și, în fila de aspect, setați înălțimea minimă la 500, așa cum am arătat mai devreme.
Acum treceți la fila de stil a secțiunii interioare și setați fundalul ca clasic din opțiunea de fundal. Apoi, trebuie să adăugați imaginea de fundal. Din opțiunea de poziție a imaginii, setați poziția imaginii prin Centrul de sus. Din opțiunea de repetare, setați opțiunea fără repetare iar dimensiunea ca acoperi.
Acum comută la filă avansat pentru a adăuga CSS personalizat. În câmpul CSS personalizat, adăugați următorul cod:
selector{ -webkit-transition: ease-in-out 3s !important; tranziție: ease-in-out 3s !important; } selector:hover{ fundal-poziție: centru jos !important; }
Puteți modifica valoarea de tranziție pentru a modifica efectul de defilare al imaginilor. Dacă doriți să adăugați mai multe imagini cu același efect, puteți duplica coloana și apoi modifica imaginea de fundal.
Concluzie
Urmând procesul, veți putea adăuga un efect de defilare a imaginii pe site-ul dvs. folosind generatorul de pagini Elementor. Puteți consulta celelalte articole ale noastre pentru a afla:
- Cum să utilizați blocurile Elementor în editorul Gutenberg?
- Elementor vs Divi vs SeedProd – Care este mai bun?
- Cum să utilizați istoricul pentru a anula și a reface acțiuni în Elementor
- Cum să faci un site web Elementor super rapid
- Cum se creează un cerc interactiv în Elementor
Sperăm că acest articol vă va fi de folos. Dacă vă place acest articol, vă rugăm să dați like paginii noastre de Facebook pentru a rămâne conectat.
