Elementor Icon-Liste-Widget: So kannst du Icons vertikal ausrichten

Lesedauer: 2 Minuten
Elementor-Icon-Liste

Seit dem letzten Elementor Update haben sich vielen Einstellungen geändert. 
Eine wesentliche Änderung betrifft das Icon-Liste Widget. 

Icon-Liste-Widget

Der Vorher-Nachher-Vergleich

Eine große Veränderung ist die Ausrichtung der Icons, wenn der Inhalt mehrzeilig ist. Vorher wurde das Icon am Anfang der Zeile ausgerichtet. Nun wird es zentriert:

Elementor Icon Liste Vorher

Vor dem Update – Icons sitzen oben ausgerichtet

Nach dem Update – Icons sitzen zentriert

Durch die zentrierte Ausrichtung, kann man den Inhalt leider nicht mehr gut lesen. 

Momentan gibt es im Elementor Page Builder leider nicht die Möglichkeit diese Einstellung zu ändern. 

Deshalb findet ihr hier ein einfaches Tutorial, wie ihr die Elementor-Icon-Liste Icons mit Hilfe von CSS Ändern vertikal an den Text ausrichten könnt.

So kannst du die Icons vertikal ausrichten:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Mit Hilfe dieses Codes werden die Icons vertikal ausgerichtet:

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

Kopiere diesen CSS Code und füge ihn bei beim Widget unter Erweitert>eigenes CSS ein

Mit Hilfe dieses CSS-Codes kannst du den Innenabstand (Padding) einstellen:

				
					.elementor-icon-list-icon
{padding: 10px 0px 0 0 !important;
}

				
			

Ergänze bei den 10px die passende Zahl für deine Schriftgröße/Icon

Viele Grüße,

Steffi

Dir hat der Beitrag gefallen? Dann teile ihn gerne!

Share on facebook
teilen
Share on whatsapp
schicken
Share on pinterest
merken
Share on email
mailen

Melde dich hier
zu meinem Newsletter an:

Hier Weiterlesen:

Webdesignerin Stefanie Friedel

Hey, ich bin Steffi

In meinem Webdesign-Blog bekommst du Tipps rund um deine Website.

Website-Checkliste

Die beste Zeit zum erstellen deiner Website ist jetzt! 

Werbehinweis(*)

Hierbei handelt es sich um einen Affiliate-Link, das heißt, wenn du auf der verlinkten Website etwas kaufst, erhalte ich eine kleine Provision. Ich verwende solche Links ausschließlich, wenn ich selbst mit dem Tool arbeite, absolut überzeugt davon bin und von Herzen empfehlen möchte.  Für dich entstehen dadurch natürlich keine zusätzlichen Kosten! Du hilfst unterstützt mich dabei bei meiner Arbeit.  Danke ❤

Glossar
Website-Checkliste

Hole dir die kostenlose
Website-Checkliste

Trage dich jetzt in meinen Newsletter ein