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

8. September 2021
Lesedauer: 2 Minuten

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

Bildschirmfoto 2021 09 08 um 11.57.07

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

Deine Steffi

Hier Weiterlesen

Herzlich Willkommen in
meinem Inner Circle.

Hier wirfst du einen Blick hinter die Kulissen und erhältst wertvolle Tipps rund um Design & Business und bekommst alle Infos zu neuen Angeboten & freien Kapazitäten. 
Wenn du einmal monatlich vielmehr insights erhalten möchtest, trage dich hier ein:

Aktueller Beitrag

Elementor-Icon-Liste
Stefanie-Friedel

Hi, ich bin Steffi

Ich bin Brand & Webdesign Mentorin und teile in meinem Blog Strategien und Design-Tipps für dein Business. 

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
Elementor-Icon-Liste
Stefanie-Friedel

Hi, ich bin Steffi

Ich bin Brand & Webdesign Mentorin und teile in meinem Blog Strategien und Design-Tipps für dein Business. 

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
Website-Checkliste

Trage dich jetzt in meinen Newsletter ein