Sind Sie mit der Erstellung atemberaubender Websites mit Divi vertraut? Sie sollten wahrscheinlich wissen, dass das Rasterlayout ein Kernmerkmal des Divi Builder ist. Normalerweise erstellen Sie zunächst eine Zeile und erstellen mehrere Spalten für diese Zeile. Wenn die Spalte an Ort und Stelle ist, fügen Sie hier Module hinzu. Wir können die Dinge weiter gehen lassen, indem wir mehr Raster für diese Module hinzufügen.
In diesem Tutorial wird erläutert, wie das Rasterlayout von Divi erweitert wird, indem CSS-Rasterlayouts für Divi-Module mit einer einzigen Spalte erstellt werden. Das CSS-Raster ist (mit CSS Flex) sehr beliebt, um responsive Raster für Inhalte mit nur wenigen CSS-Linien zu erstellen. Wir können dann alle unsere Module organisieren, um reaktionsfähig zu sein. Betrachten Sie dies als zusätzliches Layout für Module, die Sie einer Divi-Spalte hinzufügen können. Der gute Punkt hier ist, dass alle unsere verschachtelten Module die gleiche Höhe und Breite haben, ohne dass Polster- und Höhenwerte gesetzt werden müssen.
Endergebnisvorschau
Bevor wir beginnen, sehen wir uns an, was Sie am Ende dieses Tutorials erreichen können.
Erstellen eines benutzerdefinierten CSS-Rasterlayouts für Divi-Module
Teil 1: Hinzufügen der Module zu einer Divi-Säule
Eines der ersten Dinge, die wir tun müssen, ist, unsere Module in Rasterlayouts zu organisieren. Wir fügen alle Module, die wir verwenden möchten, zu unserer Spalte hinzu. Beginnen wir mit dem Erstellen einer neuen einspaltigen Zeile für den regulären Standardabschnitt.
Erstellen Sie erstaunliche Websites
Mit dem besten kostenlosen Seite Builder Elementor
Jetzt anfangen
Erstellen der Module
Innerhalb der Spalten wird das Textmodul hinzugefügt. Anschließend ändern wir die Inhaltseinstellungen wie folgt:
- Hinzufügen einer H2-Überschrift über dem Absatztext
- Hintergrundfarbe: #444444
Außerdem werden die Entwurfseinstellungen wie folgt aktualisiert:
- Textschriftart: Poppins
- Textfarbe: Licht
- Wählen Sie die Registerkarte H2 unter Überschrift Text
- Überschrift 2 Schriftstil: TT
- Polsterung: 10% oben, 10% unten, 10% links 10% rechts
HINWEIS: Um es sehr einfach zu machen, werden wir weiterhin mehrere Textmodule mit verschiedenen Hintergrundfarben verwenden, um eine Unterscheidung zwischen jedem Modul zu zeigen.
Wechseln Sie zur Ebenenansicht, und erstellen Sie das nächste Textmodul wie folgt:
- Duplizieren Sie das Textmodul.
- Öffnen Sie die Texteinstellungen für das doppelte Modul.
- Aktualisieren der HintergrundfarbeHintergrundfarbe: #4c6085
Sie können diesen Vorgang wie folgt wiederholen, um das dritte Textmodul zu erstellen:
- Duplizieren Sie das vorherige Textmodul.
- Öffnen Sie die Texteinstellungen für das doppelte Modul.
- Aktualisieren der HintergrundfarbeHintergrundfarbe: #39a0ed
Wir wiederholen den Vorgang noch einmal, um das vierte Textmodul wie folgt zu erstellen:
- Duplizieren Sie das vorherige Textmodul.
- Öffnen Sie die Texteinstellungen für das doppelte Modul.
- Aktualisieren der HintergrundfarbeHintergrundfarbe: #13c4a3
Um die nächsten vier Module zu erstellen, wählen Sie mit der Multiselect-Funktion alle vier Module aus. Kopieren Sie dann die Module in dieselbe Spalte, und fügen Sie sie ein, um insgesamt acht Textmodule zu erstellen.
Teil 2: Erstellen des CSS-RasterlayoutsFür die Module
Nun, da alle unsere Module hinzugefügt wurden, erstellen wir ein Raster für diese.
Zeileneinstellungen
In diesem Beispiel verwenden wir ein einspaltiges Layout, damit wir unser Modulraster in einem Layout mit voller Breite anzeigen können. Nun müssen wir die Zeileneinstellungen aktualisieren, um sicherzustellen, dass die Zeile die gesamte Breite der Seite hat. Wir müssen auch die Standardrinnenbreite herausnehmen, damit unseren Modulen keine zusätzlichen Ränder hinzugefügt werden.
Öffnen Sie die Zeileneinstellungen, und aktualisieren Sie Folgendes:
- Gutter breite: 1
- Breite: 100%
- Max.-Breite: 100%
Hinzufügen von CSS-Raster zur Spalte zum Erstellen des Rasterlayouts für die Module
Dies ist ein wichtiger Schritt im Tutorial, in dem das Layout für die Module mithilfe der CSS Grid-Eigenschaft erstellt wird.
Dazu fügen wir der Spalte drei Zeilen CSS hinzu, die das Layout unserer Module bestimmen.
Öffnen Sie die Spalteneinstellungen, und fügen Sie unter der erweiterten Registerkarte das folgende CSS in das Hauptelement ein:
display:grid;grid-template-columns: 25% 25% 25% 25%;grid-auto-rows: auto;
Die erste Zeile von CSS legt den Inhalt (oder Module) nach dem CSS-Rastermodul.
Anzeige:Grid
In der zweiten Zeile von CSS definieren wir die Spaltenvorlage des Rasters. In diesem Fall hat unser Raster vier Spalten mit einer Breite von 25 %.
Grid-Template-Spalten: 25% 25% 25% 25%
In der dritten Zeile werden die Zeilen erwähnt, die automatisch generiert werden. Dies bedeutet, dass die Höhe jeder Zeile durch die vertikale Höhe des Inhalts (oder der Module) innerhalb der Zeile bestimmt wird.
Grid-auto-rows: auto
Adjust Grid Layout on Mobile
Jetzt müssen wir auch das Rasterlayout auf mobilen Geräten nach Bedarf anpassen.
Um dies tun zu können, müssen wir nur einige CSS zu Tablets und Mobilgeräten hinzufügen, die die Anzahl der Spalten und die Breite jeder Spalte ändern.
In diesem Beispiel ändern wir das Rasterlayout für die Module auf Tablets in zwei Spalten mit einer Breite von jeweils 50 %.
Öffnen wir die Responsive-Optionen, wählen Sie die Tablett-Registerkarte unter dem Hauptelement aus 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 der Registerkarte Telefon Hauptelement ein:
display:grid;grid-template-columns: 100%;grid-auto-rows: auto;
Teil 3: Änderungen an den Grid-Modulen vornehmen
Hinzufügen eines neuen Moduls zum Grid und wie es reagiert
Nun, da wir jedes Modul zum Grid haben, werden, wenn wir weitere Module hinzufügen, das andere nach rechts verschoben und 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 Content-Mengen reagiert
In der Zwischenzeit haben alle Module die gleiche Menge an Inhalten, so dass wir nicht wirklich sehen können, wie das Raster mit Modulen mit unterschiedlichen Höhen umgehen wird. Um zu sehen, wie dies funktioniert, ändern Sie die Menge des Absatztextes in den einzelnen Modulen. Beachten Sie, dass die Module die gleiche Höhe wie das Modul mit dem größten Inhalt in derselben Zeile beibehalten. Von nun an wird die Höhe der Zeile auch durch das Modul mit dem meisten Inhalt (oder vertikaler Höhe) bestimmt.
Ändern der Position von Modulen auf dem Raster
Die Elemente des CSS-Rasters können über das integrierte Nummerierungssystem im Rastermodul positioniert werden. Jede Zeile im Raster stellt eine Zahl dar. Bei den Spalten beginnen die Zeilennummern bei 1 und fahren horizontal fort. Jede Zeilennummer befindet sich am Anfang und am Ende jeder Spalte. Für unsere Spaltenstruktur beginnt die Zeilennummer also von 1 auf der linken Seite der ersten Spalte und endet bei 5 rechts in der vierten Spalte. Und da wir drei Zeilen haben, beginnen die Zeilennummern für Zeilen bei 1 oben in der ersten Zeile und bis 4 am unteren Rand der dritten Zeile.
Wenn wir die Position eines Moduls (oder Rasterelements) im CSS Grid ändern möchten, können wir festlegen, wo ein bestimmtes Modul in das Raster gesetzt werden soll. Dadurch wird die Standardplatzierung des Moduls im Raster überschrieben.
In diesem Beispiel verschieben wir das erste Textmodul an eine andere Position. Dazu müssen wir dem Modul nur 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 Zeile von CSS definiert die Position des Moduls horizontal, indem das Modul anwies, in Spalte Zeile 2 zu beginnen und in Spalte Zeile 4 zu enden.
Rasterspalte: 2/4
Die zweite Zeile von CSS definiert die Position des Moduls (oder Rasterelements) vertikal, indem das Modul anwies, in Zeile 2 zu beginnen und in Zeile 3 zu enden.
Gitterreihe: 2/3
Für Tablet- und Telefonanzeigen bringen wir das Modul zurück an den ursprünglichen Ort. Dies ist hilfreich, um Ihren Hauptkopf oben auf der Seite zu halten.
Wählen Sie dazu die Tablett-Registerkarte unter der Responsive-Option für das Hauptelement aus, und fügen Sie das folgende CSS ein:
grid-column: auto;grid-row: auto;
Nun wird die Position des Moduls zum ursprünglichen (automatischen) Fluss der Rasterelemente zurückkehren.
Lassen Sie uns fortfahren und ein paar weitere Module (oder Rasterelemente) mit dieser Methode positionieren.
Wir positionieren nun das dritte Textmodul (jetzt in der zweiten Spalte der obersten Zeile) an einer neuen festgelegten Position innerhalb des Rasters. Diese neue Position beginnt in Spalte 1 und endet in Spalte Zeile 2 und beginnt auch in Zeile 2 und endet in Zeile 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;
Wir können jetzt die Position für Mobilgeräte ändern, indem wir das folgende CSS für Tablet hinzufügen:
grid-column: auto;grid-row: auto;
Für unsere letzte Modifikation positionieren wir das siebte Modul an einem neuen Set-Standort innerhalb des Rasters. Diese neue Position beginnt in Spalte Zeile 4 und endet in Spaltenzeile 5 und beginnt auch in Zeile 2 und endet in Zeile 4.
Öffnen wir dazu die Einstellungen für das siebte Textmodul und fügen das folgende benutzerdefinierte CSS in das Hauptelement ein:
grid-column: 4/5;grid-row: 2/4;
Fügen Sie nun das folgende CSS für Tablet-Anzeige ein.
grid-column: auto;grid-row: auto;Ausrichten von Modulinhalten (oder Rasterelement)-Inhalten an Center
Sie sind wahrscheinlich müde von Der Unterweisung, aber wenn wir hier aufhören, werden wir eine hilfreiche Möglichkeit verpassen, unsere Modulinhalte vertikal auszurichten (oder zu zentrieren). Die vertikalzentrierte Modulinhalte sind ein schönes Merkmal eines Rasterlayouts, da es alles symmetrischer und ästhetisch ansprechender macht.
Daher können wir einen CsS-Ausschnitt hinzufügen, der die flex CSS-Eigenschaft verwendet, um den Inhalt in der Mitte auszurichten und zu rechtfertigen. Wir müssen diesen Ausschnitt zu jedem der Module hinzufügen. Mit Multi-Select können wir alle Module (oder Rasterelemente) auswählen, die noch nicht über benutzerdefiniertes CSS für das Hauptelement verfügen (da wir diese Module nicht mit benutzerdefinierten Positionen überschreiben möchten). Öffnen Sie dann die Elementeinstellungen, indem Sie die Einstellungen für eines der ausgewählten Module öffnen. Fügen Sie unter der Registerkarte Erweitert das folgende CSS in das Hauptelement ein:
display:flex;flex-direction:column;align-items:center;justify-content:center;
Wir können nun einzeln zu unseren anderen drei Modulen (Modul #1, #3 und #7) zurückkehren und zusätzlich zu dem CSS, mit dem dem Modul eine benutzerdefinierte Position im Raster erhalten hat, den gleichen CSS-Ausschnitt hinzufügen. Stellen Sie sicher, dass Sie den CSS-Ausschnitt unter dem vorhandenen CSS für Desktop und Tablet hinzufügen.
Endergebnis
So sieht das aus, was wir bisher gemacht haben.
Können Sie feststellen, wie sich die Module (oder Rasterelemente) auf unterschiedlichen Browserbreiten für ein ansprechendes Design problemlos anpassen.
Reales Beispiel mit verschiedenen Modulen und Designs
Wenn Sie ein echtes Beispiel mit diesem Rastersystem sehen möchten, können Sie verschiedene Module verwenden. Hier ist, was Sie mit dieser Technik erstellen können. Dies ist im Fitness Gym Layout Pack verfügbar.
In All Yours Now
In diesem Tutorial haben wir an der Erstellung eines CSS-Rasterlayouts für Divi-Module gearbeitet. Während der Prozess auf einige benutzerdefinierte CSS verlassen, ist es überraschenderweise nicht so viel, angesichts der leistungsstarken Ergebnisse, die wir von ihm haben können. Es ist schön, das Layout aller Ihrer Module auf Spaltenebene steuern zu können, wenn dies für einzigartigere Divi-Layouts erforderlich ist. Wenn Sie ein CSS-Süchtiger sind und weiter tauchen möchten, sollten Sie sich Diese vollständige Anleitung ansehen, um mehr Möglichkeiten zu prüfen.
Wir werden uns freuen, also sehen Sie, wie erfolgreich Sie mit auf der Kommentare Abschnitt sind.
