So erstellen Sie ein CSS-Grid-Layout für Divi-Module
Veröffentlicht: 2021-04-02Für diejenigen, die bereits mit dem Erstellen von Websites in Divi vertraut sind, ist das Erstellen benutzerdefinierter Rasterlayouts ein Kernaspekt des Divi Builder. Erstellen Sie einfach eine Zeile und wählen Sie aus mehreren integrierten Spaltenlayouts für diese Zeile. Sobald das Spaltenlayout vorhanden ist, fügen wir einfach die gewünschten Inhalte/Module in jede Spalte ein. Aber was wäre, wenn wir ein zusätzliches Rasterlayout für diese Module wünschen würden?
In diesem Tutorial werden wir untersuchen, wie man die Rasterlayouts von Divi erweitert, indem man CSS-Rasterlayouts für Divi-Module innerhalb einer einzelnen Spalte erstellt. Die CSS Grid-Eigenschaft (zusammen mit CSS Flex) ist eine beliebte Methode, um mit nur wenigen CSS-Zeilen vorhersehbare und reaktionsschnelle Grid-Layouts für Inhalte zu erstellen. Damit können wir alle Module in einer Spalte in einem vollständig responsiven Raster organisieren. Betrachten Sie es als zusätzliches Rasterlayout für Module, das Sie jeder Divi-Spalte hinzufügen können. Aber eines der besten Dinge an dieser Technik ist, dass jedes benachbarte Modul die gleiche Höhe und Breite hat, ohne dass Sie dies mit benutzerdefinierten Padding- oder Höhenwerten für jedes Modul versuchen müssen.
Vielleicht ist es am besten, wir springen einfach ein und zeigen Ihnen, wie das funktioniert.
Lass uns anfangen!
Vorgeschmack
Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.
Und hier ist ein Blick auf die gleiche Technik mit verschiedenen Modulen und Designs aus dem Fitness Gym Layout Pack.
Laden Sie das Layout KOSTENLOS herunter
Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. 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 einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.
Kostenlos herunterladen
Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.
Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!
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 Import und wählen Sie die Download-Datei von Ihrem Computer.
Klicken Sie dann auf die Schaltfläche Importieren.
Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.
Kommen wir zum Tutorial, ja?
Was Sie brauchen, um loszulegen
Um zu beginnen, müssen Sie Folgendes tun:
- Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
- Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
- Wählen Sie die Option „Von Grund auf neu erstellen“.
Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.
Erstellen eines benutzerdefinierten CSS-Rasterlayouts für Divi-Module
Teil 1: Hinzufügen der Module zu einer Divi-Spalte
Bevor wir unsere Module in einem Raster-Layout organisieren, fügen wir zuerst alle Module hinzu, die wir zu unserer Spalte verwenden möchten.
Erstellen Sie zunächst eine neue einspaltige Zeile im standardmäßigen regulären Abschnitt im Divi Builder.
Erstellen der Module
Fügen Sie in der Spalte der Zeile ein neues Textmodul hinzu. Aktualisieren Sie dann die Inhaltseinstellungen des Moduls wie folgt:
- Fügen Sie eine H2-Überschrift über dem Absatztext des Standardtextkörperinhalts hinzu
- Hintergrundfarbe: #333333
Aktualisieren Sie dann die Designeinstellungen wie folgt:
- Textschriftart: Poppins
- Textfarbe: Hell
- Wählen Sie die Registerkarte H2 unter Überschriftstext
- Überschrift 2 Schriftstil: TT
- Polsterung: 10 % oben, 10 % unten, 10 % links 10 % rechts
HINWEIS : Der Einfachheit halber werden wir bei der Verwendung mehrerer Textmodule mit verschiedenen Hintergrundfarben bleiben, um einen Unterschied zwischen den einzelnen Modulen anzuzeigen. Aber wie ich später erklären werde, können Sie jede beliebige Kombination von Modulen verwenden (Blurb-Module, Call-to-Action-Module, Kontaktformular-Module usw.).
Öffnen Sie die Ebenenansicht (optional) und erstellen Sie den nächsten Textbaustein wie folgt:
- Duplizieren Sie das Textmodul.
- Öffnen Sie die Texteinstellungen für das duplizierte Modul.
- Aktualisieren Sie die Hintergrundfarbe
- Hintergrundfarbe: #4c6085
Wiederholen Sie diesen Vorgang, um den dritten Textbaustein wie folgt zu erstellen:
- Duplizieren Sie das vorherige Textmodul.
- Öffnen Sie die Texteinstellungen für das duplizierte Modul.
- Aktualisieren Sie die Hintergrundfarbe
- Hintergrundfarbe: #39a0ed
Wiederholen Sie diesen Vorgang noch einmal, um den vierten Textbaustein wie folgt zu erstellen:
- Duplizieren Sie das vorherige Textmodul.
- Öffnen Sie die Texteinstellungen für das duplizierte Modul.
- Aktualisieren Sie die Hintergrundfarbe
- Hintergrundfarbe: #13c4a3
Um die nächsten vier Module zu erstellen, verwenden Sie die Multiselect-Funktion, um alle vier Module auszuwählen. Kopieren Sie dann die Module und fügen Sie sie in dieselbe Spalte ein, um insgesamt acht Textmodule zu erstellen.
Teil 2: Erstellen des CSS-Grid-Layouts für die Module
Nachdem unsere Module nun vorhanden sind, können wir unser CSS-Grid für diese Module erstellen.
Zeileneinstellungen
In diesem Beispiel verwenden wir ein einspaltiges Layout, damit wir unser Modulraster in einem Layout mit voller Breite anzeigen können. Daher müssen wir die Zeileneinstellungen aktualisieren, um sicherzustellen, dass die Zeile die volle Breite der Seite umfasst. Wir müssen auch die standardmäßige Bundstegbreite herausnehmen, damit unseren Modulen keine zusätzlichen Ränder hinzugefügt werden.
Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:
- Dachrinnenbreite: 1
- Breite: 100%
- Max-Breite: 100%
CSS-Raster zur Spalte hinzufügen, um das Raster-Layout für die Module zu erstellen
Dies ist der Schlüsselschritt im Tutorial, der das Layout für die Module mithilfe der CSS-Grid-Eigenschaft erstellt.
Dazu fügen wir der Spalte drei CSS-Zeilen hinzu, die das Layout unserer Module bestimmen.
Öffnen Sie die Spalteneinstellungen und fügen Sie unter der Registerkarte "Erweitert" das folgende CSS in das Hauptelement ein:
display:grid; grid-template-columns: 25% 25% 25% 25%; grid-auto-rows: auto;
Die erste CSS-Zeile legt den Inhalt (oder die Module) gemäß dem CSS-Grid-Modul an.
Anzeige: Gitter
Die zweite CSS-Zeile definiert die Spaltenvorlage des Rasters. In diesem Fall hat das Raster vier Spalten mit jeweils 25 % Breite (siehe Screenshot oben).
Raster-Vorlagen-Spalten: 25% 25% 25% 25%
Die dritte CSS-Zeile gibt an, dass Zeilen bei Bedarf automatisch generiert werden, wobei die Größe (oder Höhe) auf auto gesetzt ist. Dies bedeutet, dass die Höhe jeder Zeile durch die vertikale Höhe des Inhalts (oder der Module) innerhalb der Zeile bestimmt wird (siehe Screenshot oben).
Raster-Auto-Reihen: auto
Rasterlayout auf Mobilgeräten anpassen
Wir müssen auch das Rasterlayout auf mobilen Geräten nach Bedarf anpassen.
Dazu müssen wir einfach jedem Tablet oder Handy zusätzliches CSS hinzufügen, das die Anzahl der Spalten und die Breite jeder Spalte ändert.
In diesem Beispiel ändern wir das Rasterlayout für die Module auf dem Tablet in zwei Spalten mit jeweils 50 % Breite.
Öffnen Sie die Responsive-Optionen und wählen Sie die Registerkarte Tablet unter dem Hauptelement und fügen Sie das folgende CSS ein:
display:grid; grid-template-columns: 50% 50%; grid-auto-rows: auto;
Für die Telefonanzeige möchten wir ein einspaltiges Layout. Um dies zu erstellen, fügen Sie das folgende CSS unter dem Telefon-Tab Hauptelement ein:
display:grid; grid-template-columns: 100%; grid-auto-rows: auto;
Teil 3: Änderungen an den Rasterelementen (oder Modulen) vornehmen
Hinzufügen eines neuen Moduls zum Grid und wie es reagiert
Da sich nun jedes Modul innerhalb des CSS-Rasters befindet, werden durch das Hinzufügen eines neuen Moduls die anderen Module nach rechts verschoben und bei Bedarf automatisch neue Zeilen erstellt.
Da wir für dieses Layout sowieso ein weiteres Modul benötigen, duplizieren Sie das erste Textmodul, um zu sehen, wie sich die anderen Module innerhalb des Rasters anpassen.
Wie Grid auf Module mit unterschiedlichen Inhalten reagiert
Im Moment haben alle Textmodule den gleichen Inhalt, daher ist es schwer zu erkennen, wie das Rasterlayout Module mit unterschiedlichen Inhalten handhabt. Um zu sehen, wie dies funktioniert, ändern Sie die Menge des Absatztextes in jedem Modul. Beachten Sie, dass die Module die gleiche Höhe wie das Modul mit dem meisten Inhalt in derselben Zeile behalten. Und auch die Zeilenhöhe wird durch das Modul mit dem meisten Inhalt (bzw. der vertikalen Höhe) bestimmt.
Ändern der Position von Modulen (oder Rasterelementen)
CSS Grid-Elemente können mit dem eingebauten Zeilennummerierungssystem des Grid-Moduls positioniert werden. Jede Linie im Raster steht für eine Zahl. Bei den Spalten beginnen die Zeilennummern bei 1 und laufen horizontal weiter. Jede Zeilennummer steht am Anfang und Ende jeder Spalte. Bei unserer vierspaltigen Struktur beginnt die Zeilennummer also bei 1 links von der ersten Spalte und endet bei 5 rechts von der vierten Spalte. Und da wir drei Reihen haben, beginnen die Zeilennummern für Reihen bei 1 oben in der ersten Reihe und fahren bis 4 unten in der dritten Reihe fort.
Um die Position eines Moduls (oder Rasterelements) in CSS Grid zu ändern, können wir festlegen, wo ein bestimmtes Modul im Raster platziert werden soll. Dadurch wird die Standardplatzierung des Moduls im Raster überschrieben.
In diesem Beispiel verschieben wir den ersten Textbaustein an eine andere Position. Dazu müssen wir dem Modul zwei CSS-Zeilen hinzufügen.
Öffnen Sie die Einstellungen für das erste Textmodul und fügen Sie das folgende benutzerdefinierte CSS in das Hauptelement ein:
grid-column: 2/4; grid-row: 2/3;
Die erste CSS-Zeile definiert die Position des Moduls (oder des Rasterelements) horizontal, indem das Modul angewiesen wird, auf Spaltenzeile 2 zu beginnen und auf Spaltenzeile 4 zu enden.
Rasterspalte: 2/4
Die zweite CSS-Zeile definiert die Position des Moduls (oder Rasterelements) vertikal, indem dem Modul mitgeteilt wird, dass es in Zeile 2 beginnen und in Zeile 3 enden soll.
Rasterreihe: 2/3
Für Tablet- und Telefondisplays möchten wir das Modul wieder an den ursprünglichen Ort bringen. Dies ist hilfreich, um Ihre Hauptüberschrift oben auf der Seite zu halten.
Wählen Sie dazu die Registerkarte Tablet unter der Option Responsive für das Hauptelement aus und fügen Sie das folgende CSS ein:
grid-column: auto; grid-row: auto;
Jetzt geht die Position des Moduls zurück zum ursprünglichen (automatischen) Fluss der Rasterelemente.
Lassen Sie uns mit dieser Methode einige weitere Module (oder Rasterelemente) positionieren.
Den dritten Textbaustein (jetzt in der zweiten Spalte der oberen Reihe) positionieren wir an einer neu eingestellten Stelle im Raster. Diese neue Position beginnt bei Spaltenzeile 1 und endet bei Spaltenzeile 2 und beginnt auch bei Zeilenzeile 2 und endet bei Zeilenzeile 4.
Öffnen Sie dazu die Einstellungen für das dritte Textmodul und fügen Sie das folgende benutzerdefinierte CSS in das Hauptelement ein:
grid-column: 1/2; grid-row: 2/4;
Jetzt können wir die Position wieder auf das Handy ändern, indem wir das folgende CSS für Tablet hinzufügen:
grid-column: auto; grid-row: auto;
Für unsere letzte benutzerdefinierte Modulrasterplatzierung positionieren wir das siebte Textmodul (jetzt in der letzten Spalte der zweiten Zeile) an einer neuen festgelegten Position innerhalb des Rasters. Diese neue Position beginnt bei Spalte Zeile 4 und endet bei Spalte Zeile 5 und beginnt auch bei Zeile Zeile 2 und endet bei Zeile Zeile 4.
Öffnen Sie dazu die Einstellungen für das siebte Textmodul und fügen Sie das folgende benutzerdefinierte CSS in das Hauptelement ein:
grid-column: 4/5; grid-row: 2/4;
Fügen Sie dann das folgende CSS für die Tablet-Anzeige wie bei den vorherigen Modulen ein.
grid-column: auto; grid-row: auto;
Modul- (oder Rasterelement-)Inhalt an Zentrieren ausrichten
Wir könnten hier aufhören, aber wir würden eine hilfreiche Möglichkeit verpassen, unseren Modulinhalt vertikal auszurichten (oder zu zentrieren). Die vertikale Zentrierung des Modul- (oder Rasterelements) ist eine praktische Funktion eines Rasterlayouts, da es alles symmetrischer und ästhetisch ansprechender macht.
Dazu können wir ein CSS-Snippet hinzufügen, das die Flex-CSS-Eigenschaft verwendet, um den Inhalt in der Mitte auszurichten und auszurichten. Wir müssen dieses Snippet zu jedem der Module hinzufügen. Dazu können wir Multiselect verwenden, um alle Module (oder Rasterelemente) auszuwählen, die noch kein benutzerdefiniertes CSS für das Hauptelement haben (wir möchten diese Module nicht mit benutzerdefinierten Positionen überschreiben). Öffnen Sie anschließend die Elementeinstellungen, indem Sie die Einstellungen für eines der ausgewählten Module öffnen. Fügen Sie auf der Registerkarte Erweitert das folgende CSS in das Hauptelement ein:
display:flex; flex-direction:column; align-items:center; justify-content:center;
Jetzt können wir zu unseren anderen drei Modulen (Modul #1, #3 und #7) einzeln zurückkehren und den gleichen CSS-Schnipsel zusätzlich zu dem CSS hinzufügen, das verwendet wurde, um dem Modul eine benutzerdefinierte Position im Raster zu geben. Stellen Sie sicher, dass Sie das CSS-Snippet unter dem vorhandenen CSS für Desktop und Tablet hinzufügen.
CSS zum ersten Textmodul hinzufügen
CSS zum dritten Textmodul hinzufügen
CSS zum siebten Textmodul hinzufügen
Endergebnis
Hier ist das Endergebnis unseres benutzerdefinierten CSS-Rasterlayouts für unsere Textmodule.
Beachten Sie, wie sich die Module (oder Rasterelemente) für ein ansprechendes responsives Design reibungslos an verschiedene Browserbreiten anpassen.
Beispiel mit verschiedenen Modulen und Designs
Es ist schwer, das volle Potenzial der Verwendung von CSS-Raster zu erkennen, um Modullayouts nur mit Textmodulen zu erstellen. Also dachte ich, ich zeige Ihnen ein Design, das ich erstellt habe, indem ich die gleichen Schritte in diesem Tutorial mit verschiedenen Modulen und Designelementen aus unserem Fitness Gym Layout Pack anwende.
Hier ist es…
Ich habe auch dieses Layout zusammen mit dem Textmodul-Layout mit dem kostenlosen Download am Anfang dieses Beitrags eingefügt.
Fühlen Sie sich frei, es für eine Spritztour zu nehmen!
Abschließende Gedanken
In diesem Tutorial haben wir Ihnen gezeigt, wie Sie ein CSS-Rasterlayout für Divi-Module erstellen. Obwohl der Prozess auf einigen benutzerdefinierten CSS basiert, ist dies überraschenderweise nicht so viel, wenn man bedenkt, dass es leistungsstarke Ergebnisse liefern kann. Es ist schön, das Layout all Ihrer Module auf Spaltenebene steuern zu können, wenn Sie es für einzigartigere Divi-Layouts benötigen. Weitere Informationen zum CSS-Raster finden Sie in dieser vollständigen Anleitung, um weitere Möglichkeiten zu prüfen.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!