Mehrspaltige Listen in Elementor

Mit dem List-Icon Widget in Elementor lassen sich schöne Listen mit Icons in die Webseite einbauen. Was mir dabei aber fehlt, ist die Möglichkeit, lange Listen in mehrere Spalten aufzuteilen. In diesem Artikel zeige ich dir, wie du mit ein wenig CSS mehrspaltige Listen bekommst.

Hier gibt’s den Blogartikel auch als Video:
Ansonsten weiter runter scrollen zum CSS Code.

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Inhalt entsperren Erforderlichen Service akzeptieren und Inhalte entsperren

Natürlich kann man sich mit mehreren Spalten bzw. Containern nebeneinander spielen, so dass man eine lange Liste in mehrere Listen in Containern aufteilt und diese dann in den Breiten anpasst. Aber das ist in der Handhabung nicht so schön und erzeugt zusätzliche, meiner Meinung nach unnötig verschachtelte Codezeilen, die sich (natürlich minimal) auf die Ladezeit auswirken können.

Stattdessen erstellt man ganz einfach eine einzige Liste und setzt die Anzahl der Spalten mit ein wenig CSS Code. Du kannst den CSS-Code zum Beispiel im Reiter „Advanced“ unter „Custom CSS“ einfügen. Mit „selector“ wird dann immer das jeweilige Widget angesprochen.
(Du kannst dem Widget genauso auch eine Klasse vergeben und das CSS dann in deinem Theme mit der Klasse ansprechen)

In meinem Beispiel möchte ich 3 Spalten mit ein bisschen Abstand von 5% zwischen den Spalten:

selector{
    columns:3;
    column-gap: 5%;
}

und schon ist die Liste in 3 Spalten aufgeteilt. Die Anzahl der Einträge pro Spalte wird automatisch gesetzt.

Was man jetzt aber noch beachten muss, ist, dass die Liste nun auch auf kleineren Bildschirmen immer in 3 Spalten angezeigt wird und die Texte daher keinen Platz mehr haben.

Dafür erweitern wir das CSS noch mit 2 Media-Queries.

@media screen and (max-width:1024px){
    selector{
        columns:2;
    }
}

@media screen and (max-width:767px){
    selector{
        columns:1;
    }
}

Erklärung:
Bei einer Bildschirmgröße von maximal 1024px Breite (das ist der standardmäßig gesetzte „Tablet“ Breakpoint in Elementor) soll sich die Liste in 2 Spalten aufteilen und bei einer Bildschirmbreite von maximal 767px („mobile“ Breakpoint) wird die Liste einspaltig dargestellt.

Hat dir der Code geholfen? Schreib doch einen Kommentar!