Transformeer Elementor review slider naar grid met custom CSS

De huidige opties van Elementor om reviews te tonen zijn beperkt tot een slider. Dit is een leuke optie voor een start- of dienstenpagina, maar als je een speciale beoordelingspagina nodig hebt, is dit geen goede optie. Om ervoor te zorgen dat je dezelfde widget op je hele site kunt gebruiken; verandert deze tutorial de slider in een raster.

1. Wijs een custom ID toe aan de review widget

Om ervoor te zorgen dat de custom CSS die we gaan gebruiken geen invloed heeft op andere review widgets die u mogelijk gebruikt, gaan we een custom ID toewijzen aan de review widgets. Dit id wordt ‘custom-reviews’ genoemd.

2. Verwijder slider instellingen

Schakel alle slider opties in de widget instellingen uit.

3. Voeg custom CSS toe aan de widget

Add the following custom CSS to the widget.

				
					#custom-reviews .swiper-wrapper {
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
    transform: none !important; 
    cursor: auto;    
}
#custom-reviews .swiper-slide {
    width: 31.5% !important;
    margin-right: 0px !important;
    margin-bottom: 30px;
}
#custom-reviews .elementor-main-swiper {
    width: 100%;
}
				
			

4. Fix tablet en mobiel

Om ervoor te zorgen dat we overschakelen naar één item per rij op tablet of mobiele weergave, voeg de volgende custom CSS toe aan de widget.
				
					@media screen and (max-width: 1024px) {
#custom-reviews .swiper-slide {
    width: 47.5% !important;
}
}
@media screen and (max-width: 767px) {
#custom-reviews .swiper-slide {
    width: 100% !important;
}
}
				
			
Dat is het! Nog vragen? Stuur me dan een berichtje.