Besoin d’un moyen de créer un effet de défilement d’image dans Elementor ? Dans cet article, nous vous guiderons pour créer un effet de défilement d’images à l’aide d’Elementor sur vos pages web.
Bildrullningseffekten låter dig avslöja hela bilden när användaren håller muspekaren över bilderna. När du besöker en webbplats som säljer webbplatsmallar kan du se hela förhandsvisningen av mallarna med funktioner för bildrullningseffekter.
Med dessa funktioner kan du enkelt visa dina användare hela webbplatsen på ett litet utrymme. Normalt, om du vill visa en fullständig bild av en webbplats, kommer den att ta upp mycket utrymme på dina webbsidor. Dessutom påverkar det designen av din webbplats.
Men med bildrullningseffekt kan du lägga till fler bilder på ett attraktivt sätt som enkelt kan fånga publikens uppmärksamhet.
Skapa bildrullningseffekt i Elementor
Elementor tillhandahåller ingen widget för att lägga till bildrullningseffekt. Så du måste lägga till effekten med anpassad CSS. Anpassad CSS-funktion är endast tillgänglig med Elementor Proffs. Så se till att du har uppgraderat till Elementor Proffs.
Maintenant, ouvrez une page avec l’éditeur Elementor et cliquez sur l’icône plus pour ajouter une section.
Nu måste du välja kolumnen för din sektion. Här väljer vi avsnittet med en kolumn.
Klicka nu på ikonen för avsnittsredigering och ställ in minimihöjden på 500 på layoutfliken.
Lägg nu till det inre sektionsblocket från blockwidgeten till din skapade sektion och ta bort standardkolumnen. Högerklicka på kolumnredigeringsikonen och klicka på raderingsalternativet för att ta bort huvudkolumnen.
Gå till redigeringsalternativet för den inre sektionen igen och i layoutfliken ställ in minimihöjden till 500 som vi visade tidigare.
Byt nu till stilfliken i den inre delen och ställ in bakgrunden som klassisk från bakgrundsalternativet. Därefter måste du lägga till din bakgrundsbild. Från alternativet bildposition ställer du in bildens position med Översta mitten. Ställ in alternativet från upprepningsalternativet no-repeat och storleken som täcka.
Byt nu till flik advanced för att lägga till anpassad CSS. Lägg till följande kod i det anpassade CSS-fältet:
selector{ -webkit-transition: ease-in-out 3s !viktigt; övergång: lätt-in-ut 3s !viktigt; } selector:hover{ bakgrundsposition: mitten nedre !viktigt; }
Du kan ändra övergångsvärdet för att ändra rullningseffekten för bilder. Om du vill lägga till flera bilder med samma effekt kan du duplicera kolumnen och sedan ändra bakgrundsbilden.
Slutsats
Genom att följa processen kommer du att kunna lägga till en bildrullningseffekt på din webbplats med hjälp av sidbyggaren Elementor. Du kan kolla in våra andra artiklar för att lära dig:
- Hur använder man Elementor-block i Gutenberg-redigeraren?
- Elementor vs Divi vs SeedProd – Vilket är bättre?
- Hur man använder historik för att ångra och göra om åtgärder i Elementor
- Hur man gör en Elementor-webbplats supersnabb
- Hur man skapar en interaktiv cirkel i Elementor
Vi hoppas att den här artikeln kommer att vara användbar för dig. Om du gillar den här artikeln, gilla vår Facebook-sida för att hålla kontakten.
