Blog Spalten ändern

von tom | Nov. 2024 | CSS

So ändern Sie die Anzahl der Spalten im Blog-Modul

Quelle: https://help.elegantthemes.com/en/articles/2310880-how-to-change-the-number-of-columns-in-the-blog-module

Erfahren Sie, wie Sie die Anzahl der Spalten im Blog-Modul ändern, um Ihre Beiträge in einem Rasterformat anzuzeigen, das Ihren Designvorlieben entspricht.

Durch Anpassen der Spaltenanzahl in Ihrem Blogmodul können Sie ein optisch ansprechenderes und übersichtlicheres Layout für Ihre Blogbeiträge erstellen.

In diesem Artikel führen wir Sie durch den Prozess zum Ändern der Spaltenanzahl im Blog-Modul mithilfe von benutzerdefiniertem CSS-Code.

Standardmäßig zeigt das Blog-Modul 3 Spalten mit Beiträgen pro Zeile an, wenn auf der Seite keine Seitenleiste vorhanden ist:

Ändern Sie die Anzahl der Spalten im Blog-Modul mithilfe des Rasterlayouts

Öffnen Sie die Einstellungen des Blog-Moduls, indem Sie auf das Zahnradsymbol klicken
Gehen Sie zur Registerkarte „Design“ → „Layout“ und wählen Sie „Raster“
Gehen Sie zur Registerkarte Erweitert → CSS-ID und -Klassen → CSS-Klasse
Legen Sie die CSS-Klasse dt-4-columns-blog fest

5. Fügen Sie in Divi → Designoptionen → Registerkarte „Allgemein“ → Benutzerdefiniertes CSS den folgenden CSS-Code hinzu:

CSS-Code

@media (min. Breite: 981px) { 
.dt-4-columns-blog .et_pb_salvattore_content[Datenspalten]::vorher { 
Inhalt: '4 .column.size-1of4' !wichtig; 
} 
.dt-4-columns-blog .column.size-1of4 { 
Breite: 24 % !wichtig; 
Rand rechts: 1 %; 
} 
.dt-4-columns-blog .et_pb_post { 
Rand unten: 11px; 
} 
}

@media (min. Breite: 981px) {

.dt-4-columns-blog .et_pb_salvattore_content[Datenspalten]::vorher {

Inhalt: '4 .column.size-1of4' !wichtig;

}

.dt-4-columns-blog .column.size-1of4 {

Breite: 24 % !wichtig;

Rand rechts: 1 %;

}

.dt-4-columns-blog .et_pb_post {

Rand unten: 11px;

}

Das Ergebnis ist im folgenden Screenshot zu sehen:

Ändern Sie die Anzahl der Spalten im Blog-Modul mithilfe des Vollbreitenlayouts

Öffnen Sie die Einstellungen des Blog-Moduls, indem Sie auf das Zahnradsymbol klicken
Gehen Sie zur Registerkarte Design → Layout und wählen Sie Volle Breite
Gehen Sie zur Registerkarte „Erweitert“ → „Benutzerdefiniertes CSS“ → „Freiform-CSS“
Kopieren/einfügen Sie den folgenden CSS-Code:

Hinweise:

Der obige CSS-Code verwendet CSS Grid und CSS-Variablen. Wenn der Code zur Registerkarte „Erweitert“ → „Benutzerdefiniertes CSS“ → „Freiform-CSS“ hinzugefügt wird , kennzeichnet die Syntaxprüfung viele der Regeln als ungültig. Bitte ignorieren Sie das.
Wenn Sie die Anzahl der Spalten ändern müssen, ändern Sie den Wert der Eigenschaft –no-of-columns in jeder der Medienabfragen.
Der obige Code ändert das Vollbildlayout des Blogmoduls wie folgt:

4-Spalten-Layout auf dem Desktop
3-Spalten-Layout auf dem Tablet
1 Spaltenlayout auf dem Telefon

CSS-Code

@media (min. Breite: 981px) { 
selector.et_pb_module { 
--Anzahl der Spalten: 4; 
--Gutter: 20px; 
--Padding: 19px; 
} 
} 
@media (min. Breite: 768px) und (max. Breite: 980px) { 
selector.et_pb_module { 
--Anzahl der Spalten: 3; 
--Gutter : 20px; --Padding 
: 19px; 
} 
} 
@media (max. Breite: 767px) { 
selector.et_pb_module { 
--Anzahl der Spalten: 1; 
--Gutter: 20px; 
--Padding: 19px; 
} 
} 
selector.et_pb_module .et_pb_ajax_pagination_container { 
Anzeige: Raster; 
Rastervorlagenspalten: Wiederholung (var (--Anzahl der Spalten), 1fr); 
Lücke: var (--Gutter); 
} 
Selektor.et_pb_module .et_pb_post { 
Rand unten: 0; 
Rahmen: 1px durchgezogen #d8d8d8; 
Polsterung: var (--Padding); 
} 
Selektor.et_pb_module .et_pb_post .entry-featured-image-url { 
Anzeige: Block; 
Rand: calc (-1 * var (--Padding)) calc (-1 * var (--Padding)) var (--Padding) calc (-1 * var (--Padding)) 
} 
Selektor.et_pb_module .et_pb_ajax_pagination_container div: letztes Kind { 
Rasterspalte: Spanne var (--Anzahl der Spalten); 
}

@media (min. Breite: 981px) {

selector.et_pb_module {

--Anzahl der Spalten: 4;

--Gutter: 20px;

--Padding: 19px;

}

@media (min. Breite: 768px) und (max. Breite: 980px) {

selector.et_pb_module {

--Anzahl der Spalten: 3;

--Gutter : 20px; --Padding

: 19px;

}

@media (max. Breite: 767px) {

selector.et_pb_module {

--Anzahl der Spalten: 1;

--Gutter: 20px;

--Padding: 19px;

}

selector.et_pb_module .et_pb_ajax_pagination_container {

Anzeige: Raster;

Rastervorlagenspalten: Wiederholung (var (--Anzahl der Spalten), 1fr);

Lücke: var (--Gutter);

}

Selektor.et_pb_module .et_pb_post {

Rand unten: 0;

Rahmen: 1px durchgezogen #d8d8d8;

Polsterung: var (--Padding);

}

Selektor.et_pb_module .et_pb_post .entry-featured-image-url {

Anzeige: Block;

Rand: calc (-1 * var (--Padding)) calc (-1 * var (--Padding)) var (--Padding) calc (-1 * var (--Padding))

}

Selektor.et_pb_module .et_pb_ajax_pagination_container div: letztes Kind {

Rasterspalte: Spanne var (--Anzahl der Spalten);

}

Das Ergebnis ist im folgenden Screenshot zu sehen:

← Preistabelle anpassen HTML Sonderzeichen →