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 🙂
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%;
}
}Verwandte Artikel
Mehr Divi-Tricks und WordPress-Tutorials gibt es in der OIT Knowledgebase.
CSS-Beispiele für gängige Layouts
.et_pb_blog_grid .et_pb_ajax_pagination_container > .column_parent { width: 50% !important; } – Erzwingt zwei gleichbreite Spalten, egal ob Desktop, Tablet oder Mobile.
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.
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.
Hast du eine Frage zu diesem Artikel?
Schreib uns – wir antworten in der Regel innerhalb eines Werktages.