Wie gebe ich einem Divi-Blog eine bestimmte Spaltenanzahl vor?

Im Divi Blog-Modul unter Design → Layout die Spaltenanzahl wählen (1-4 Spalten). Für benutzerdefinierte Spaltenanzahlen nutze Custom CSS mit grid-template-columns oder flexbox.

DIVI: Einem DIVI-Blog die Spaltenanzahl vorgeben

Marius Marzian • 08. September 2020 • 3 Min. Lesezeit

Bildschirmfoto 2020 09 08 Um 19.37.16 1024x524 2

SEO-Experte

Marius Marzian

OIT GmbH

Profil ansehen

Das Blog-Modul in Divi zeigt Beiträge standardmäßig im Grid-Layout mit einer vom Theme bestimmten Spaltenzahl. Wer mehr Kontrolle will – etwa zweispaltig auf Tablet statt drei, oder konsequent einspaltig auf einer News-Liste – kann die Spaltenzahl per CSS explizit festlegen.

Die Grundeinstellungen in einem Blog bei DIVI erlauben nicht die Auswahl der Spalten. Durch unseren CSS-Code kannst du das aber ändern 🙂

In den Screenshots findest du die notwendigen Optionen

Diesen Code kannst du für 3 Spalten nutzen:

.cu-blog .et_pb_salvattore_content[data-columns]::before {
	content: '3 .column.size-1of4' !important;
}
@media only screen and ( min-width: 981px ) {
	.cu-blog .column.size-1of4 {
	    width: 32%!important;
	    margin-right: 1%;
	}
}

… diesen Code für 4 Spalten:

.cu-blog .et_pb_salvattore_content[data-columns]::before {
	content: '4 .column.size-1of4' !important;
}
@media only screen and ( min-width: 981px ) {
	.cu-blog .column.size-1of4 {
	    width: 24%!important;
	    margin-right: 1%;
	}
}

… diesen Code für 2 Spalten:

.cu-blog .et_pb_salvattore_content[data-columns]::before {
	content: '2 .column.size-1of4' !important;
}
@media only screen and ( min-width: 981px ) {
	.cu-blog .column.size-1of4 {
	    width: 49%!important;
	    margin-right: 1%;
	}
}

CSS-Beispiele für gängige Layouts

2-Spalten auf allen Geräten

.et_pb_blog_grid .et_pb_ajax_pagination_container > .column_parent { width: 50% !important; } – Erzwingt zwei gleichbreite Spalten, egal ob Desktop, Tablet oder Mobile.

Responsiv: 3 → 1

Kombiniere den 3-Spalten-CSS für Desktop mit einer @media (max-width:767px) Regel auf 100 % Breite – so bleibt das Grid auf Mobile lesbar und nutzt den vollen Viewport.

CSS Custom-ID nutzen

Vergib dem Blog-Modul unter „Erweitert → CSS-ID" eine eindeutige ID wie #news-grid. So gilt dein CSS nur für dieses Modul und beeinflusst keine anderen Blog-Widgets auf der gleichen Seite.