Hoe maak je een verticale afbeeldingscarrousel op WordPress met Elementor

Muneeb WordPress-zelfstudies Jan 21, 2022

Een diavoorstelling van foto's of informatie die kijkers kunnen kiezen door op een knop te drukken waarmee ze vooruit of achteruit in de diavoorstelling gaan, wordt een beeldcarrousel genoemd. Het fleurt het algemene uiterlijk van uw website op en helpt bij het promoten van essentiële diensten.

Aantrekkelijke foto's kunnen nieuwe bezoekers naar uw site lokken door meteen hun aandacht te trekken. Deze tutorial laat je zien hoe je Elementor kunt gebruiken om een verticale afbeeldingscarrousel op WordPress te maken.

Hoe maak je een Elementor verticale afbeeldingscarrousel?

Maak eerst een passende afbeelding voor uw Elementor Vertical Smooth Carousel. Je hebt een afbeelding nodig die al je foto's bevat. Met Crello , een Canva-achtig programma, kun je er een maken, maar elke beeldbewerkingssoftware zou voldoende moeten zijn.

Dit heeft natuurlijk het nadeel dat het niet dynamisch is, en het kan onhandig zijn wanneer slechts een paar van de foto's moeten worden gewijzigd. Het biedt echter een aantal voordelen. Het produceert een carrousel met alleen CSS zonder JS-vereisten. De animatie is erg soepel, met zeer weinig CPU-gebruik. In een notendop, het is ongelooflijk effectief, hoewel een beetje onhandig.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Geef uw kolom vervolgens de verticale naamkolom als een klasse.
Stel de Widgets-ruimte voor die kolom in op 0 in de Kolom- en lay-outinstellingen .

Add an image element to that column and choose the picture you made. Voeg een afbeeldingselement toe aan die kolom en kies de afbeelding die je hebt gemaakt. Assign the class carousel vertical to the picture element . Wijs de klassencarrousel verticaal toe aan het afbeeldingselement .

Maak alles precies zoals u het wilt en repliceer het vervolgens. In die kolom heb je er twee nodig, elk met identieke parameters. En dan kunt u doorgaan met het gebruik van de onderstaande CSS-code. U kunt deze code overal gebruiken om de wijzigingen aan te brengen.

.carouselvertical {
    animation: 10s linear 0s infinite normal none running vloop;
}

.verticalcolumn 

Er is veel commentaar bij de code, zodat u voldoende kunt begrijpen en waar nodig wijzigingen kunt aanbrengen. Met behulp van deze code kunt u met succes een Elementor verticale carrousel maken.

5 beste afbeeldingscarrousel-plug-ins

1. Postcarrousel voor Elementor

Post Carousel For Elementor van iThemelandCo is een Elementor-add-on-plug-in waarmee je verbazingwekkend creatieve mediacarrousels kunt maken met zijn kant-en-klare carrousellay-outs. De plug-in integreert perfect met Elementor en biedt 19 vooraf gebouwde lay-outs. Deze lay-outs zijn volledig aanpasbaar en kunnen eenvoudig worden aangepast aan uw behoeften met behulp van het slepen en neerzetten van de Elementor.

Productcarrousel voor Elementor

Product Carousel For Elementor is een andere Elementor-add-on-plug-in die expliciet is ontworpen voor e-commercewinkels om hun producten in een carrousel te presenteren. De plug-in biedt 12+ carrouselbesturingselementen zoals Autoplay, Slide to scroll, Pause on hover, etc. De plug-in reageert zeer goed op alle soorten apparaten en je kunt zoveel carrousels maken als je wilt. Bovendien is het een 100% meertalige plug-in, wat betekent dat het werkt, zelfs als uw website in een andere taal is vertaald.

3. Snelle carrousel voor Elementor

Fast Carousel For Elementor is een Elementor-add-on-plug-in die beweert snel genoeg te zijn om binnen een minuut een carrousel voor je te bouwen. Hoe indrukwekkend het ook klinkt, het biedt ook verschillende soorten galerijen en meer dan tien unieke stijlen. De plug-in is uitgerust met meer dan vijf carrouselbedieningen en biedt daarnaast aangepaste kleuropties bij elke carrousel. Voor een snelle oplossing is dit misschien de beste keuze voor een beeldcarrousel.

We hopen dat je deze tutorial nuttig vond bij het verbeteren van je website. Zorg ervoor dat je met ons meedoet op onze Facebook  en Twitter om tutorials te krijgen die je WordPress-reis leuk en gemakkelijk maken.

Divi WordPress Theme