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

Viele Grüße,

Steffi

Hier Weiterlesen:

Du möchtest Tipps, rund
um Brand Strategie und Design?

Dann trag dich in meinen Newsletter ein und erhalte ca. 1 mal im Monat wertvolle Inhalte für dein Business 

Elementor-Icon-Liste
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
Website-Checkliste

Trage dich jetzt in meinen Newsletter ein