De iconenlijst (of ‘icon list’) van Elementor is een prachtige widget om op je WordPress website te gebruiken. Zeker voor een lijst met korte regels! Maar wanneer je wat langere teksten in je lijst zet waardoor een item meerdere regels beslaat, ziet het er niet meer uit.

De standaard verticale uitlijning van de iconen is namelijk in het midden van het lijstitem. In de afbeelding zie je hoe dit eruit ziet.

Iconen verticaal uitlijnen met css code

Met een stukje css code kun je ervoor zorgen dat de iconen in je lijst verticaal bovenin uitgelijnd worden.

Maar een iconenlijst in de Elementor page builder, zorg dat je de widget geselecteerd hebt en klik in het Elementor menu op het tabblad ‘Geavanceerd’. Voer bij ‘Custom CSS’ onderstaande CSS code in.

/* Icoontjes in een icon list bovenaan uitlijnen */

.elementor-widget .elementor-icon-list-item, .elementor-widget .elementor-icon-list-item a {
align-items: flex-start;
}

.elementor-icon-list-text {
position:relative;
top:-8px;
}

Check in de afbeelding het resultaat van dit stukje code. Veel mooier toch?!

Je kunt de code optimaliseren voor jouw lijst door te spelen met het getal -8.