So erweitern Sie Module, um einzigartige Spaltenlayouts in Divi . zu erstellen
Veröffentlicht: 2018-10-04Jede neue Seite, die Sie mit dem Divi Builder entwerfen, ist mit einer Reihe verschiedener Spaltenlayouts strukturiert. Divi enthält integrierte Spaltenlayouts für jede Zeile, die von einer Spalte bis hin zu sechs Spalten reicht. Manchmal haben Sie jedoch das Bedürfnis, diese Spalten für noch einzigartigere Layouts anzupassen. Heute zeige ich Ihnen einen kreativen Weg, genau das zu tun.
In diesem Tutorial zeige ich Ihnen eine einfache Entwurfstechnik, mit der Sie Module mit negativen Rändern erweitern können, um mehr als eine Spalte zu belegen. Mit dieser Technik können Sie einige einzigartige benutzerdefinierte Layouts entwerfen, die Sie möglicherweise nicht für möglich gehalten haben.
Lass uns anfangen.
Vorgeschmack
Um ein besseres Verständnis davon zu bekommen, was wir bauen werden, ist hier eine Vorher-Nachher-Version des Designs, das diese Technik verwendet.
Vor
Dies ist das Layout-Design, ohne benutzerdefinierte Ränder zu verwenden, um Module auf andere Spalten zu erweitern.
Nach
Dies ist das Layout nach Erweiterung der beiden Bildbausteine und der drei Textbausteine mit den Nummern „01“, „03“ und „05“.
Die Änderung ist subtil, aber Sie sollten sehen können, dass sich die Module erweitert haben, um die benachbarte Spalte zu besetzen. Und das einzige, was dazu benötigt wird, ist eine einfache Margin-Einstellung von -100%.
Und das Ergebnis auf dem Tablet ist noch spannender.
Das Konzept verstehen
Standardmäßig hat jedes Divi-Modul eine Breite von 100 %, was bedeutet, dass jedes Modul, das Sie in einer Spalte platzieren, die gesamte Breite der Spalte umfasst, in der es sitzt. Die Bundstegbreite wird von Divi verwendet, um den Abstand zwischen den einzelnen Spalten zu bestimmen. Für dieses Tutorial ist es daher wichtig, die Gutter-Breite auf 1 zu setzen, um diesen Platz zu entfernen.
Hier ist eine Illustration, wie sich jedes Modul über die gesamte Breite einer Spalte in einer Reihe mit einer Bundstegbreite von 1 erstreckt.
Wenn Sie einem Modul nun einen negativen Rand (links oder rechts) hinzufügen, können Sie dieses Modul problemlos so erweitern, dass es mehr als eine Spalte belegt. Auf diese Weise können Sie benutzerdefinierte Spaltenlayouts für Ihre Seite erstellen, die Sie möglicherweise nicht berücksichtigt haben.
In dieser Abbildung können Sie sehen, dass durch Hinzufügen eines linken Rands von -100 % zum Modul in Spalte 5 das Modul nach links erweitert wird, um sowohl Spalte 5 als auch Spalte 4 zu belegen.
Und einer der Vorteile bei der Verwendung des sechsspaltigen Layouts besteht darin, dass das Design auf dem Tablet gut erhalten bleibt.
Auch aufgrund der Spaltenreihenfolge von links nach rechts sollten Module generell nach links erweitert werden, damit der Inhalt nicht hinter der Spalte versteckt wird. Dies gilt insbesondere, wenn Sie eine Hintergrundfarbe haben. Wenn Sie also auf das Problem stoßen, dass Modulinhalte hinter einer Spalte versteckt sind, erweitern Sie das Modul wahrscheinlich in die falsche Richtung.
Warum ein sechsspaltiges Layout verwenden?
Es gibt drei Hauptgründe für die Verwendung eines sechsspaltigen Layouts für diese Designtechnik. Der erste Grund ist, dass Sie mehr Spalten haben, mit denen Sie arbeiten können. Der zweite Grund ist, dass sechsspaltige Layouts auf dem Tablet in ein dreispaltiges Layout umgewandelt werden, wodurch die Designelemente wirklich gut erhalten bleiben. Der dritte Grund ist, dass die Spalten auf Mobilgeräten ihre Reihenfolge beibehalten, sodass die Hintergrundfarben der Spalten gleich bleiben. Dies ist hilfreich für Rasterlayouts.
Dieses Design funktioniert auch mit dem Spaltenlayout 1/2 1/6 1/6 1/6 und dem Spaltenlayout 1/6 1/6 1/6 1/2, da beide die drei Spalten auch auf dem Tablet beibehalten.
Umsetzung des Designs
Um zu zeigen, wie diese Designtechnik funktioniert, werde ich Sie durch den Prozess der Erstellung eines einfachen Rasterlayouts für die Produktpräsentation führen. Anschließend zeige ich Ihnen, wie Sie Module in andere Spalten erweitern, um ein benutzerdefiniertes Layout-Design zu erstellen.
Einrichten Ihres Abschnitts und Ihrer Zeilen
Erstellen Sie zunächst eine neue Seite und stellen Sie den Visual Builder bereit. Wählen Sie dann „Von Grund auf neu erstellen“. Dann fahren Sie fort und fügen Sie Ihrem ersten Abschnitt ein Spaltenlayout von 1/2 1/6 1/6 1/6 hinzu.
Aktualisieren Sie dann die Zeileneinstellungen wie folgt:
Hintergrundfarbe: #222831
Dachrinnenbreite: 1
Spaltenhöhen ausgleichen: JA
Benutzerdefinierter Rand: 0px oben, 0px unten
Benutzerdefiniertes Padding: 0px oben, 0px unten
Einstellungen speichern.
Da alle drei Zeilen für dieses Design diese Zeileneinstellungen teilen. Gehen Sie vor, um die Zeile zu duplizieren, um eine zweite Zeile zu erstellen. Ändern Sie dann die zweite Zeile in ein sechsspaltiges Layout.
Um die dritte Zeile zu erstellen, duplizieren Sie einfach die zweite Zeile.
Module zu Zeile 1 hinzufügen
Fügen Sie in der ersten Spalte der obersten ersten Zeile einen Textbaustein mit den folgenden Einstellungen hinzu:
Textfarbe: Hell
Text Textgröße: 16px
Benutzerdefinierte Polsterung: 2vw oben, 2vw unten, 2vw links, 2vw rechts
Fügen Sie in der zweiten Spalte der ersten Zeile ein Klappenmodul mit den folgenden Einstellungen hinzu:
Titel: [Titel eingeben]
Inhalt: [löschen]
Symbol: [Symbol auswählen]
Symbolfarbe: #eeeeee
Symbolschriftgröße: 50px
Textfarbe: Hell
Textausrichtung: Mitte
Benutzerdefinierte Polsterung: 3vw oben, 2vw unten
Einstellungen speichern
Fügen Sie in der dritten Spalte ein Bild hinzu.
In der letzten Spalte möchten wir sie leer lassen, damit wir das Bildmodul erweitern können, um auch diese Spalte zu füllen. Aber wir wollen es nicht komplett leer lassen, damit die Spalte beim Stapeln auf dem Handy aktiv ist. Am einfachsten ist es also, ein Teilermodul hinzuzufügen und den Teiler nicht anzuzeigen. Dann können wir den Trenner für das Smartphone ausblenden.
Aktualisieren Sie die Teilereinstellungen wie folgt:
Teiler anzeigen: NEIN
Deaktivieren auf: Telefon
Hinzufügen von Modulen zu den Zeilen 2 und 3
Kommen wir nun zu Zeile 2. Kopieren Sie in die erste Spalte das erstellte Klappenmodul und fügen Sie es in die zweite Spalte der ersten Zeile ein. Ändern Sie dann das Symbol und den Titeltext in eine schwarze Farbe.
Fügen Sie dann in der zweiten Spalte ein Textmodul mit dem Folgenden hinzu:
Inhalt:
<h2>Product</h2> 01
Text Textfarbe: #ffffff
Text Textgröße: 50px
Textzeilenhöhe: 1em
Textausrichtung: Rechts
Überschrift 2 Textausrichtung: Links
Überschrift 2 Textfarbe: #ffffff
Überschrift 2 Zeilenhöhe: 3em
Benutzerdefinierte Polsterung: 2vw oben, 2vw unten, 2vw links, 2vw rechts
Als nächstes Kopieren Sie das soeben erstellte Textmodul und fügen Sie es in Spalte 4 und Spalte 6 ein.
Sie können das gleiche Textmodul auch in Spalte 3, Spalte 5 und Spalte 6 von Zeile 3 einfügen. Danach können Sie mit dem Inline-Editor die Nummern jedes der Textmodule ändern, damit Sie sehen können, wie diese Module aufeinander stapeln später mobil.
Fügen Sie in Spalte 2 von Zeile 3 ein weiteres Bild hinzu.
Füllen Sie danach alle leeren Spalten in Ihrem gesamten Abschnitt mit einer Trennlinie aus, indem Sie die Trennlinie, die Sie in Zeile 1 erstellt haben, kopieren und einfügen.
So sollte Ihr Layout an dieser Stelle aussehen (die leeren Quadrate stellen ein Teilermodul dar):
Hinzufügen einer negativen Marge zum Erweitern von Modulen auf andere Spalten
An diesem Punkt können wir mit der Erweiterung unserer Module mit negativer Marge beginnen. Dieser Vorgang ist äußerst einfach durchzuführen.
Öffnen Sie die Bildmoduleinstellungen für das Bild in der ersten Zeile. Da wir das Bild nach rechts erweitern möchten, fügen wir einen rechten Rand von -100% hinzu.
Fügen Sie als Nächstes dem Textmodul in Zeile 2, Spalte 3 einen linken Rand von -100 % hinzu.
Kopieren Sie nun die Modulstile und fügen Sie diese in die Textbausteine in Zeile 2, Spalte 6 und auch in den Textbaustein in Zeile 3, Spalte 5 ein.
Es bleibt nur noch das Bild in Zeile 3, Spalte 2 zu erweitern. Aktualisieren Sie das Bildmodul mit einem benutzerdefinierten Rand von -100% Left.
Hinzufügen von Hintergrundfarben zu Ihren Spalten
Die letzte Phase des Designs besteht darin, Ihren Spalten Hintergrundfarben hinzuzufügen. Fügen Sie für die erste (obere) Zeile Folgendes hinzu:
Spalte 1 Hintergrundfarbe: #393e46
Fügen Sie für die zweite Zeile Folgendes hinzu:
Spalte 1 Hintergrundfarbe: #eeeeee
Spalte 4 Hintergrundfarbe: #7971ea
Spalte 5 Hintergrundfarbe: #393e46
Spalte 6 Hintergrundfarbe: #393e46
Und für die letzte Zeile fügen Sie Folgendes hinzu:
Spalte 3 Hintergrundfarbe: #7971ea
Spalte 6 Hintergrundfarbe: #7971ea
Das war's für das Desktop-Design. Lassen Sie uns nun sicherstellen, dass die Dinge auf dem Handy gut aussehen.
Anpassen des Layouts für das Smartphone-Display
Im Moment sieht das aktuelle Layout auf Desktop und Tablet gut aus, aber die negativen Ränder, die wir hinzugefügt haben, müssen auf dem Smartphone angepasst werden.
Normalerweise, wenn ich den negativen Rand auf dem Smartphone korrigieren wollte, würde ich den linken Rand in den Moduleinstellungen für Smartphone-Geräte einfach auf 0% setzen. Für Bildschirmgrößen zwischen 479px und 767px Breite ist jedoch noch eine Anpassung erforderlich. Aus diesem Grund können Sie den negativen Rand auf dem Smartphone am besten mit einem benutzerdefinierten CSS-Snippet beheben.
Gehen Sie zu den Seiteneinstellungen und fügen Sie das folgende benutzerdefinierte CSS auf der Registerkarte "Erweitert" hinzu:
/** Fixes negative margins on smartphone**/
@media only screen and (max-width: 479px){
.et_pb_module {
margin-left: 0%!important;
margin-right: 0%!important;
}
}
Dieses CSS-Snippet setzt den rechten und linken Rand aller Module auf 0 %, wenn die Bildschirmgröße 479 Pixel oder weniger beträgt. Das behebt das Problem gut!
Schauen wir uns nun das endgültige Design an.
Abschließende Gedanken
Die Verwendung von negativem Rand zum Erweitern von Modulen kann eine bequeme Möglichkeit sein, einzigartige Layout-Designs auf Desktop und Tablet zu erhalten, ohne auf eine Menge CSS zurückgreifen zu müssen, um die Standardspalten-Layouts von Divi zu ändern. Und eines meiner Lieblingsdinge an dieser Designtechnik ist, wie schön das Layout auf dem Tablet aussieht. Hoffentlich wird es für Ihr nächstes Projekt nützlich sein. Wenn überhaupt, hilft es immer, ein tieferes Verständnis von Divi zu bekommen.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!