JetEngine Listing Grid vertikal sortieren (Alphabetische Reihenfolge in Spalten)
Wenn Beiträge oder Einträge in einem JetEngine Listing Grid alphabetisch sortiert werden, erfolgt die Darstellung standardmäßig von links nach rechts. Bei längeren Listen wirkt das schnell unübersichtlich, da die Reihenfolge zeilenweise aufgebaut wird.
Mit einem kleinen CSS-Snippet lässt sich das Layout so verändern, dass die Liste von oben nach unten innerhalb einer Spalte läuft. Erst wenn eine Spalte gefüllt ist, beginnt die nächste. Dadurch bleibt die alphabetische Reihenfolge logisch lesbar – ähnlich wie bei einer klassischen Liste oder einem Zeitungs-Layout.
Wichtig: Das Snippet verändert nur die Darstellung, nicht die eigentliche Sortierung. Diese erfolgt weiterhin über die Query in JetEngine.
selector .jet-listing-grid__items {
display: block !important;
column-count: 3;
column-gap: 40px;
}
selector .jet-listing-grid__item {
display: inline-block !important;
width: 100%;
break-inside: avoid;
margin-bottom: 10px;
}Was macht der Code?
Das Snippet nutzt das CSS Multi-Column Layout, um das normale JetEngine Grid umzubauen.
.jet-listing-grid__items
- display: block deaktiviert das Standard-Grid von JetEngine
- column-count erzeugt mehrere vertikale Spalten
- column-gap definiert den Abstand zwischen den Spalten
.jet-listing-grid__item
- sorgt dafür, dass jedes Element sauber in die Spalten fließt
- verhindert mit break-inside: avoid, dass ein Eintrag zwischen zwei Spalten aufgeteilt wird
Das Ergebnis ist eine vertikale Liste pro Spalte, statt einer horizontalen Grid-Reihenfolge.
Wichtige Einstellungen im Listing Grid Widget
Damit das CSS korrekt funktioniert, sollten im JetEngine Listing Grid Widget folgende Einstellungen gesetzt sein:
- Layout: Grid
- Columns: 1
- Equal Height: deaktiviert
- Masonry: deaktiviert
Der Grund: Das Snippet ersetzt das Standard-Grid durch ein eigenes Spaltenlayout. Wenn Masonry oder Equal Height aktiv sind, kann es zu Layoutproblemen kommen.
Wo wird der Code eingefügt?
Am einfachsten wird das Snippet direkt im Elementor Widget eingefügt.
- Listing Grid Widget auswählen
- Tab Erweitert → Custom CSS öffnen
- Den Code dort einfügen
Der Vorteil:
Der Code wirkt nur auf dieses Listing Grid und beeinflusst keine anderen Listings auf der Seite.
Hinweis zur Sortierung (Query)
Die eigentliche Reihenfolge kommt weiterhin aus der JetEngine Query. Dort kannst du beispielsweise sortieren nach:
- Titel (alphabetisch)
- Meta-Feld
- Datum
- Custom Query
Das CSS verändert nur die Darstellung der bereits sortierten Ergebnisse.
Beispiel:
Standard JetEngine Grid
A B C
D E F
G H IA D G
B E H
C F ISpalten anpassen
column-count: 2;
column-count: 3;
column-count: 4;Fazit
Dieses Snippet ist besonders hilfreich für alphabetische Listen, beispielsweise:
- Dienstleistungen
- Städte
- Glossare
- Kategorien
- Verzeichnisse
Die vertikale Darstellung verbessert die Lesbarkeit deutlich und sorgt für eine logische Reihenfolge – ohne Änderungen an der JetEngine Query oder am Listing Template.