Möchten Sie Ihre DIVI-Blog-Seite als mehrspaltiges Raster anzeigen?
Das Blog-Modul von Divi kann Blog-Beiträge in voller Breite oder in einem Rasterlayout anzeigen. Wenn Sie das Rasterlayout wählen, können Sie maximal drei Spalten haben.
In diesem Tutorial, mit nur ein paar CSS-Schnipseln, Ihr Blog wird zu einem schönen mehrspaltigen Rasterlayout. Darüber hinaus sind die Spalten in allen Browsergrößen flüssig und reaktionsfähig, sodass Sie sich keine Gedanken über die Aktualisierung dieser Medienabfragen oder Reaktionseinstellungen machen müssen.
Sie können auch unseren Artikel konsultieren, um mehr zu erfahren So erstellen Sie eine Blog-Seite mit dem DIVI Blog-Modul.
Übersicht
Bevor wir zu diesem Tutorial springen, werfen wir zunächst einen Blick auf das Ergebnis, das wir erzielen möchten.
Laden Sie DIVI jetzt herunter!!!
Konfigurieren eines Blog-Moduls mit einem Vollbild-Layout
Das Blog-Modul von DIVI kann verwendet werden, um überall auf Ihrem Blog einen Blog hinzuzufügen Website. Es macht es wirklich einfach, eine Blog-Seite in Divi zu erstellen. Alles, was Sie tun müssen, ist, der Seite mit dem Divi Builder ein Blog-Modul hinzuzufügen.
Für dieses Tutorial werden wir ein vorgefertigtes Blog-Layout von einem von verwenden kostenlose Layoutpakete von DIVI, das bereits ein Blog-Modul mit einem grundlegenden Stil enthält.
So laden Sie das vorgefertigte Blog-Layout:
- Erstellen Sie eine neue Seite aus dem WordPress-Dashboard
- Geben Sie ihm einen relevanten Namen und klicken Sie auf „Divi Builder verwenden“.
- Klicken Sie auf „Layout auswählen“
- Geben Sie in die Suchleiste „Modedesigner“ ein und wählen Sie das Layout „Modedesigner-Blogseite“.
- Stellen Sie sicher, dass Sie das Blog-Layout auswählen und klicken Sie dann auf „Layout auswählen“.
Suchen Sie nach dem Laden des Layouts das Blog-Modul, das zum Anzeigen von Blog-Beiträgen verwendet wird, und öffnen Sie die Einstellungen.
Stellen Sie die Anzahl der Beiträge ein
Aktualisieren Sie in den Blog-Einstellungen die Inhalt um die Anzahl der Beiträge auf 10 zu begrenzen. (Dies hat hauptsächlich ästhetische Gründe, da unser Raster letztendlich zwei Reihen mit fünf Blogbeiträgen umfassen wird.)
- Anzahl der Positionen: 10
Wählen Sie Vollbild-Layout
Da wir unseren Blog mit CSS Grid in Spalten anordnen werden, müssen wir sicherstellen, dass das Layout des Blog-Moduls 'Vollbild' (nicht 'Gitter'). Dadurch wird sichergestellt, dass Blogbeiträge in ihrer normalen Seitenreihenfolge vertikal gestapelt werden.
Um das Layout des Blog-Moduls zu ändern, öffnen Sie die Moduleinstellungen und öffnen Sie unter der Registerkarte Stil das Dropdown-Menü Vorlage und wählen Sie Vollbild .
Jetzt erstreckt sich jeder Blogbeitrag über die volle Breite der Spalte (oder des übergeordneten Containers).
Fügen wir Blogbeiträgen einen Rahmen hinzu. Aktualisieren Sie die Rahmenoptionen wie folgt:
- Randbreite: 1px
- Rahmenfarbe: rgba (150,104,70,0.35)
Hinzufügen einer benutzerdefinierten CSS-Klasse zum Blog-Modul
Um dieses spezielle Blog-Modul (nicht ein anderes) effektiv mit unserem CSS anzusprechen, müssen wir unserem Modul eine benutzerdefinierte CSS-Klasse zuweisen. 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 Vollbild-Layout eingerichtet ist, können wir unser benutzerdefiniertes CSS hinzufügen.
Wir werden ein Code-Modul unter dem Blog-Modul einfügen, um der Seite CSS hinzuzufügen.
Fügen Sie im Code-Eingabefeld die erforderlichen Style-Tags hinzu, um CSS-Code zu umschließen, der einer Seite hinzugefügt wird.
Fügen Sie innerhalb der Stil-Tags das folgende CSS-Code-Snippet ein:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
Die erste CSS-Zeile präsentiert die Inhalt (oder Module) in Rasterform.
display: grid;Die zweite CSS-Zeile definiert das Rasterspaltenmodell.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));Die dritte Reihe bestimmt den Abstand zwischen Rasterelementen.
gap : 20px ;An diesem Punkt ist das fünfspaltige responsive Grid einsatzbereit. Wenn Sie keine Paginierung oder Rahmen für Ihre Blog-Posts verwenden möchten, können Sie hier aufhören.
Hier ist das bisherige Ergebnis.
Rasterelemente anpassen
Dann können wir ein paar CSS-Zeilen hinzufügen, die auf die Rasterelemente abzielen, sodass sie oben in jeder Zeile ausgerichtet sind und etwas Polsterung haben.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Grid-Paginierung entfernt
Wenn Sie derzeit Paginierung im Blog-Modul aktiviert haben, wird sie als letztes Rasterelement im CSS-Raster behandelt. Um die Paginierung vollständig 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%);
}
Schauen wir uns das bisherige Ergebnis an!
Tipp: Passen Sie die Größe aller vorgestellten Bilder (oder Miniaturansichten) an
An dieser Stelle bemerken Sie möglicherweise die Inkonsistenz in der Höhe der Bilder, die in jedem Blog-Beitrag enthalten sind. Wenn Sie möchten, dass sie alle die gleiche 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;
}
Mit einem oberen inneren Rand von 56,25 % 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
Und hier ist eine letzte Vorschau auf unser Blog-Modul mit unseren neuen Spalten und unserem neuen Raster. Und wie wir sehen können, reagiert das Grid vollständig.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Es ist vollbracht ! Wir haben Ihnen in diesem Tutorial gezeigt, wie Sie Ihre Blogbeiträge in Spalten anordnen.
Wir konnten das gesamte Divi-Blog-Modul in ein fließendes fünfspaltiges Layout umstrukturieren. Ich hoffe, das spart Ihnen Zeit und gibt Ihnen mehr Möglichkeiten, schöne Blogseiten zu erstellen. Sie können sich auch beraten lassen So erstellen Sie eine Blog-Seite mit dem Blog-Modul von Divi
Siehe auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
