Er is een manier nodig om een scrolleffect met afbeeldingen te creëren Elementor ? In dit artikel helpen we u bij het creëren van een scrolleffect met afbeeldingen met Elementor op uw webpagina's.
Met het scroll-effect voor afbeeldingen kunt u de volledige afbeelding onthullen wanneer de gebruiker over de afbeeldingen zweeft. Wanneer u een website bezoekt die websitesjablonen verkoopt, kunt u het volledige voorbeeld van de sjablonen zien met functies voor het scrollen van afbeeldingen.
Met deze functies kunt u uw gebruikers eenvoudig de volledige weergave van de website laten zien in een kleine ruimte. Als u een volledige afbeelding van een website wilt weergeven, neemt dit normaal gesproken veel ruimte op uw webpagina's in beslag. Bovendien heeft het invloed op de vormgeving van je website.
Maar met het foto-scrolleffect kunt u op een aantrekkelijke manier meer foto's toevoegen die gemakkelijk de aandacht van het publiek kunnen trekken.
Maak een afbeeldingscrolleffect in Elementor
Elementor biedt geen widget om het scroll-effect voor afbeeldingen toe te voegen. U moet dus het effect toevoegen met behulp van aangepaste CSS. Aangepaste CSS-functie is alleen beschikbaar met Elementor Pro. Zorg er dus voor dat je hebt geüpgraded naar Elementor Pro.
Open nu een pagina met de Elementor-editor en klik op het pluspictogram om een sectie toe te voegen.
Nu moet je de kolom voor je sectie selecteren. Hier selecteren we de sectie met één kolom.
Klik nu op het pictogram voor het bewerken van secties en stel in het tabblad Lay-out de minimale hoogte in op 500.
Voeg nu vanuit de blokwidget het binnenste sectieblok toe aan uw gemaakte sectie en verwijder de standaardkolom. Klik met de rechtermuisknop op het kolombewerkingspictogram en klik op de verwijderoptie om de hoofdkolom te verwijderen.
Ga opnieuw naar de bewerkingsoptie van het binnenste gedeelte en stel in het lay-outtabblad de minimale hoogte in op 500, zoals we eerder hebben laten zien.
Ga nu naar het stijltabblad van het binnenste gedeelte en stel de achtergrond in als klassiek vanuit de achtergrondoptie. Vervolgens moet je je achtergrondafbeelding toevoegen. Stel vanuit de optie afbeeldingspositie de positie van de afbeelding in met Midden boven. Stel de optie in vanuit de herhaaloptie no-repeat en de grootte zoals deksel.
Ga nu naar tabblad vergevorderd om aangepaste CSS toe te voegen. Voeg in het aangepaste CSS-veld de volgende code toe:
selector{ -webkit-overgang: easy-in-out 3s !belangrijk; overgang: gemakkelijk in-uit 3s !belangrijk; } selector:hover{ background-position: center bottom !important; }
U kunt de overgangswaarde wijzigen om het schuifeffect van afbeeldingen te wijzigen. Als u meerdere afbeeldingen met hetzelfde effect wilt toevoegen, kunt u de kolom dupliceren en vervolgens de achtergrondafbeelding wijzigen.
Conclusie
Door het proces te volgen, kunt u met behulp van de paginabuilder een scrolleffect voor afbeeldingen aan uw website toevoegen Elementor. U kunt onze andere artikelen bekijken om te leren:
- Hoe gebruik je Elementor-blokken in de Gutenberg-editor?
- Elementor vs Divi vs SeedProd – Wat is beter?
- Geschiedenis gebruiken om acties ongedaan te maken en opnieuw uit te voeren in Elementor
- Hoe maak je een Elementor-website supersnel
- Hoe maak je een interactieve cirkel in Elementor
We hopen dat dit artikel nuttig voor u zal zijn. Als je dit artikel leuk vindt, like dan onze Facebook-pagina om op de hoogte te blijven.
