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

Das Blog-Modul von Divi kann Blog-Beiträge entweder in voller Breite oder in einem Rasterlayout anzeigen. Wenn Sie das Rasterlayout wählen, können Sie maximal drei Spalten haben. In diesem Tutorial werden wir untersuchen, wie Sie die Leistungsfähigkeit von CSS Grid mit dem Divi Blog-Modul kombinieren, um eine beliebige Anzahl von Spalten zu erstellen. Mit nur wenigen CSS-Schnipseln verwandelt sich Ihr Blog in ein wunderschönes mehrspaltiges Rasterlayout. Außerdem werden die Spalten bei allen Browsergrößen flüssig reagieren, sodass Sie sich keine Gedanken über die Aktualisierung dieser Medienabfragen oder Responsive-Einstellungen machen müssen. Nach der CSS-Grid-Magie haben Sie immer noch die integrierten Blog-Modul-Einstellungen, um das Blog visuell ohne weiteres benutzerdefiniertes CSS zu gestalten. Wenn Sie also nach mehr Spalten für Ihren Divi-Blog suchen, wird dies den Zweck erfüllen und mehr.

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Und hier ist ein Codepen, der das CSS-Grid-Layout demonstriert, das wir dem Blog-Modul hinzufügen werden.

Laden Sie das Layout KOSTENLOS herunter

Um das Blog-Modul-Design aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugriff auf den Download zu erhalten, müssen Sie sich mit dem unten stehenden Formular in unsere Divi Daily-E-Mail-Liste eintragen. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf „Herunterladen“. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich für den Divi-Newsletter an und wir senden Ihnen per E-Mail eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer erstaunlicher und kostenloser Divi-Ressourcen, Tipps und Tricks. Folgen Sie uns und Sie werden in kürzester Zeit ein Divi-Meister sein. Wenn Sie bereits abonniert sind, geben Sie unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf Herunterladen, um auf das Layoutpaket zuzugreifen.

DOWNLOAD

Sie haben sich erfolgreich angemeldet. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugriff auf kostenlose wöchentliche Divi-Layoutpakete zu erhalten!

Abonnieren Sie unseren Youtube-Kanal

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte „Importieren“ und wählen Sie die Download-Datei von Ihrem Computer aus.

Klicken Sie dann auf die Importschaltfläche.

Anschließend ist das Abschnittslayout in Divi Builder verfügbar.

Kommen wir zum Tutorial, sollen wir?

So ändern Sie die Anzahl der Spalten im Divi-Blog-Modul mithilfe von CSS Grid

Warum CSS-Grid?

Es gibt viele Möglichkeiten, Spaltenlayouts für das Blog-Modul mit CSS zu erstellen. Aber für diesen Fall ist es am sinnvollsten, CSS Grid zu verwenden. Die CSS-Grid-Eigenschaft ist eine beliebte Methode, um mit nur wenigen CSS-Zeilen vorhersagbare und ansprechende Rasterlayouts für Inhalte zu erstellen. Damit können wir alle Blog-Modulkarten in einem vollständig ansprechenden Raster organisieren. Kurz gesagt, es bietet eine einfache und vollständige Lösung zum Hinzufügen eines beliebigen Spaltenlayouts für Ihren Divi-Blog. Tatsächlich haben wir es auch verwendet, um ein Rasterlayout für Divi-Module zu erstellen.

Wenden wir uns nun dem Blog-Modul zu.

Einrichten eines Blog-Moduls mit einem Layout in voller Breite

Das Divi Blog-Modul kann verwendet werden, um einen Blog überall auf Ihrer Website hinzuzufügen. Das macht es wirklich einfach, eine Blog-Seite in Divi zu erstellen. Alles, was Sie tun müssen, ist, der Seite mit Divi Builder ein Blog-Modul hinzuzufügen.

Für dieses Tutorial verwenden wir eine vorgefertigte Blogseitenvorlage aus einem unserer kostenlosen Layoutpakete, die bereits ein Blogmodul mit einigen grundlegenden Stilen enthält. Um das vorgefertigte Blog-Seitenlayout auf Ihre Seite zu laden, öffnen Sie das Einstellungsmenü unten und öffnen Sie das Popup Aus Bibliothek hinzufügen. Suchen und finden Sie von dort aus das Layout der Fashion Design Blog-Seite und laden Sie es auf die Seite.

Suchen Sie nach dem Laden des Layouts das Blog-Modul, das zum Anzeigen der Blog-Posts verwendet wird, und öffnen Sie die Blog-Modul-Einstellungen.

Stellen Sie die Beitragsanzahl ein

Aktualisieren Sie in den Blog-Einstellungen den Inhalt, um die Anzahl der Beiträge auf 10 zu begrenzen. (Dies geschieht hauptsächlich aus ästhetischen Gründen, da unser Raster schließlich zwei Reihen mit fünf Blog-Beiträgen auf dem Desktop enthalten wird.)

• Beitragsanzahl: 10

Wählen Sie Layout in voller Breite

Da wir das Spaltenlayout für unseren Blog mit CSS Grid erstellen werden, müssen wir sicherstellen, dass das Layout des Blogmoduls die volle Breite hat (nicht Raster). Dadurch wird sichergestellt, dass die Blogbeiträge vertikal in ihrer normalen Reihenfolge des Dokuments/der Seite gestapelt werden.

Um das Layout des Blog-Moduls zu ändern, öffnen Sie die Einstellungen des Blog-Moduls und öffnen Sie auf der Registerkarte „Design“ das Dropdown-Menü „ Layout “ und wählen Sie „ Fullwidth “ aus.

Jetzt sollte jeder Blogbeitrag die volle Breite der Spalte (oder des übergeordneten Containers) umfassen.

Lassen Sie uns nur aus Spaß einen Rahmen zu den Blogbeiträgen hinzufügen, damit wir eine bessere Vorstellung davon bekommen, wie unser Rasterlayout aussehen wird, wenn wir unser CSS hinzufügen. Aktualisieren Sie die Rahmenoptionen wie folgt:

• Randbreite: 1px
• Rahmenfarbe: rgba (150,104,70,0,35)

Hinzufügen der benutzerdefinierten CSS-Klasse zum Blog-Modul

Um dieses spezielle Blog-Modul (und kein anderes) effizient mit unserem CSS anzusprechen, müssen wir unserem Modul eine benutzerdefinierte CSS-Klasse geben. Fügen Sie auf der Registerkarte „Erweitert“ die folgende CSS-Klasse hinzu:

• CSS-Klasse: et-blog-css-grid

Erstellen des mehrspaltigen Layouts mit CSS Grid

Nachdem unser Blog-Modul nun mit einem Layout in voller Breite eingerichtet ist, können wir unser benutzerdefiniertes CSS hinzufügen. Im Moment werden wir ein Codemodul verwenden, um das CSS zur Seite hinzuzufügen. Aber wenn wir fertig sind, können Sie das CSS jederzeit an Ihren bevorzugten Ort verschieben (wie das benutzerdefinierte CSS in den Designoptionen oder die style.css Ihres untergeordneten Designs).

Fügen Sie ein neues Codemodul unter dem Blogmodul hinzu.

Fügen Sie im Code-Eingabefeld die erforderlichen Stil- Tags hinzu, die zum Umschließen von CSS-Code erforderlich sind, der einer Seite hinzugefügt wird.

Fügen Sie innerhalb der Stil- Tags das folgende CSS-Snippet ein:

.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

Die erste CSS-Zeile legt den Inhalt (oder die Module) gemäß dem CSS-Rastermodul an.

Anzeige: Raster;

Die zweite CSS-Zeile definiert die Spaltenvorlage des Rasters.

Grid-Template-Columns: repeat(auto-fill, minmax(200px, 1fr));

Die dritte Zeile bestimmt den Abstand zwischen den Rasterelementen (z. B. Bundstegbreite).

Abstand: 20px;

Wie die CSS-Rasterspalten funktionieren

In diesem Fall fügt das Grid nach Bedarf wiederholt Spalten hinzu, um den verbleibenden Platz des Grid-Containers zu füllen. Jede Spalte hat eine minimale Breite von 200 Pixel und eine maximale Breite von 1 fr (was genau das gleiche wie auto ist). Dies bedeutet, dass das Raster 5 Spalten hat, wenn der übergeordnete Container (die Divi Row/Column) seine maximale Breite von 1080 Pixel hat. Jede Spalte hat eine Breite von 200 Pixel (die Mindestbreite), was 1000 Pixel entspricht. Addieren Sie die 4 Gitterlücken von 20px und Sie erhalten insgesamt 1080px. Sobald der Darstellungsbereich das Raster unter die 1080 Pixel drückt, übernimmt die Magie des CSS-Rasters und füllt jeden verfügbaren Platz mit Blog-Beiträgen, bis sie eine Breite von 200 Pixel erreichen. Neue Zeilen werden standardmäßig automatisch erstellt, wenn sie benötigt werden.

Um mehr Spalten zu erhalten, können Sie entweder den Mindestwert von 200 Pixel auf einen kleineren Wert ändern oder die maximale Breite der Divi-Zeile auf etwas größer als 1080 Pixel erhöhen.

Hier ist ein Codepen, der die CSS-Grid-Layout-Funktion demonstriert, die wir hier hinzugefügt haben.

An diesem Punkt ist das fünfspaltige responsive Grid einsatzbereit. Tatsächlich haben Sie nicht vor, Paginierung oder Rahmen für Ihre Blog-Posts zu verwenden, Sie können genau hier aufhören.

Hier das bisherige Ergebnis.

Gestalten Sie die Blog-Postkarte (oder das Rasterelement)

Als Nächstes können wir ein paar CSS-Zeilen hinzufügen, die auf die Rasterelemente (oder Blog-Postkarten) abzielen, sodass sie am oberen Rand jeder Zeile ausgerichtet sind und ein wenig Abstand haben.

.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

Paginierung aus dem Raster entfernen

Wenn Sie derzeit Paginierung im Blogmodul aktiviert haben, wird sie als letztes Rasterelement im CSS-Raster behandelt. Um die Paginierung ganz aus dem Raster zu entfernen, können wir ihr eine absolute Position geben und sie direkt unter dem Blog-Modul platzieren. Fügen Sie dazu das folgende CSS hinzu:

.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

Jetzt befinden sich die Paginierungslinks sicher außerhalb des Rasters, sodass es nicht auf verschiedenen Ansichtsfensterbreiten verschoben wird.

Schauen wir uns das bisherige Ergebnis an!

Bonus-Tipp: Passen Sie die Größe aller vorgestellten Bilder (oder Miniaturansichten) an

An dieser Stelle bemerken Sie möglicherweise die Höheninkonsistenz der vorgestellten Bilder auf jeder Blog-Postkarte. Wenn Sie möchten, dass sie alle dieselbe Höhe haben, können Sie dafür auch zusätzliches CSS verwenden.

.et-blog-css-grid .entry-featured-image-url {
  padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  object-fit: cover;
}

Das erste Snippet zielt auf den vorgestellten Bildcontainer ab und fügt einen Prozentsatz an Polsterung hinzu, der im Wesentlichen die Höhe des Bildcontainers anpasst. Aber das erste Snippet funktioniert erst, wenn wir das vorgestellte Bild so positionieren, dass es perfekt zentriert in den Bildcontainer passt. Dazu geben wir dem Bild eine absolute Position und verwenden „object-fit:cover“, damit sich das Bild über die volle Breite und Höhe des Containers erstreckt.

Mit 56,25 % oberer Polsterung sollten wir für alle unsere Bilder ein Seitenverhältnis von 16:9 erhalten.

Passen Sie die Polsterung des Bildcontainers an, um das gewünschte Seitenverhältnis für Ihr Bild zu erhalten.

Endergebnis

Hier ist ein weiterer Blick auf das gesamte CSS, das wir mit einigen Kommentaren zum Codemodul hinzugefügt haben.

/* create css grid column template */
.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
/* style css grid item or blog post */
.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

/* remove pagination from blog module grid with absolute position */
.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

/* Resize Featured Image Thumbnails */
.et-blog-css-grid .entry-featured-image-url {
  padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  object-fit: cover;
}

Und hier ist ein letzter Blick auf unser Blog-Modul mit unseren neuen Spalten und dem Rasterlayout.

Abschließende Gedanken

Es überrascht mich immer wieder, was mit CSS Grid mit nur wenigen CSS-Zeilen erreicht werden kann. In diesem Fall konnten wir das gesamte Divi-Blogmodul in ein fließendes fünfspaltiges Layout umstrukturieren. Das Beste daran ist, dass Sie sich keine Gedanken über die Verwendung von Medienabfragen machen müssen! Hoffentlich sparen Sie dadurch Zeit und haben mehr Möglichkeiten, schöne Blogseiten zu erstellen.

Ich freue mich darauf, von dir in den Kommentaren zu hören.

Beifall!