So werden Sie kreativ mit Divi's 6-Spalten-Reihen- und Viewport-Einheiten

Die Vielfalt der Säulenstrukturen von Divi ermöglicht es Ihnen, im Grunde jedes Design zu erstellen, das Sie sich vorstellen. Und obwohl es am einfachsten ist, die Spaltenstrukturen in ihrer ursprünglichen Form zu verwenden, können Sie noch einen Schritt weiter gehen, indem Sie die Designelemente in einer 6-spaltigen Reihe mit Ansichtsfenstereinheiten kombinieren.

Sie könnten zum Beispiel eine Collage erstellen. Sie müssen überhaupt keine Bildbearbeitungssoftware verwenden! Darüber hinaus können Sie jedes der Bilder in einer separaten Lightbox öffnen lassen. In diesem Beitrag zeigen wir Ihnen, wie Sie alle oben genannten Schritte nur mit den integrierten Optionen von Divi ausführen können.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Sich nähern

• Wir entfernen die gesamte Bundstegbreite zwischen dem Abschnitt, der Zeile und den Spalten, damit wir jedem Modul manuell benutzerdefinierte Ränder und Abstände hinzufügen können (mithilfe von Ansichtsfenstereinheiten).
• Viewport-Einheiten stellen sicher, dass die Positionierung von Designelementen bei allen Desktop-Bildschirmgrößen gleich bleibt
• Wir werden die Abstandseinstellungen jedes Designelements individuell an das gesamte Collagendesign anpassen
• Dank der reaktionsschnellen Optionen in Divi können wir sicherstellen, dass die oben genannten Einstellungen nicht für Tablet und Telefon gelten

Beginnen wir mit dem Erstellen

Backend-Vorschau

Dies ist das Endergebnis aus Backend-Perspektive:

Neuen Abschnitt hinzufügen

Als erstes müssen Sie eine neue Seite erstellen oder eine vorhandene öffnen und einen regulären Abschnitt hinzufügen.

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen. Dies ist ein wichtiger Schritt in diesem Tutorial. Durch Entfernen aller standardmäßigen Rand- und Abstandswerte zwischen Abschnitt, Zeile und Modulen können wir jedem Designelement mithilfe von Ansichtsfenstereinheiten manuell Abstände hinzufügen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Fügen Sie der Zeile auch einige benutzerdefinierte linke und rechte Auffüllungen hinzu.

• Linke Polsterung: 6.5vw
• Rechte Polsterung: 6.5vw

Titeltextmodul zu Spalte 6 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Wir beginnen mit dem Hinzufügen eines Titel-Textmoduls zu Spalte 6. Fügen Sie eine Kopie der Überschrift 2 Ihrer Wahl hinzu.

Überschriftstexteinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die Überschriftentexteinstellungen des Moduls.

• Überschrift 2 Schriftart: Battambang
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textgröße: 4,2 vw (Desktop), 10 vw (Tablet), 8 vw (Telefon)
• Überschrift 2 Buchstabenabstand: -1px

Abstand

Fügen Sie einige benutzerdefinierte Abstandswerte hinzu, damit diese Zeile die 6. und 5. Spalte der Zeile überlappt.

• Oberer Rand: 10vw
• Linker Rand: -8vw (Desktop), 0vw (Tablet & Telefon)
• Rechter Rand: -50vw (Tablet & Telefon)

Beschreibungstextmodul zu Spalte 6 hinzufügen

Inhalt hinzufügen

Das nächste Modul, das wir in Spalte 6 benötigen, ist ein Beschreibungstextmodul. Fügen Sie einen Inhalt Ihrer Wahl hinzu.

Abstand

Gehen Sie dann zu den Abstandseinstellungen und schieben Sie dieses Modul ebenfalls nach links.

• Oberer Rand: 2vw
• Linker Rand: -8vw (Desktop), 0vw (Tablet & Telefon)
• Rechter Rand: -50vw (Tablet), -3vw (Telefon)

Schaltflächenmodul zu Spalte 6 hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das in Spalte 6 benötigt wird, ist ein Tastenmodul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Tasteneinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die Schaltflächeneinstellungen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextfarbe: #ffffff
• Breite des Tastenrahmens: 1px
• Farbe des Knopfrahmens: #000000
• Schaltflächenrandradius: 0px
• Tastenabstand der Buchstaben: -2px

Abstand

Und wieder müssen wir dafür sorgen, dass dieses Modul Spalte 5 und 6 überlappt, indem wir benutzerdefinierte Randwerte in den Abstandseinstellungen verwenden.

• Obere Marge: 2vw (Desktop), 5vw (Tablet), 10vw (Telefon)
• Linker Rand: -8vw (Desktop), 0vw (Tablet & Telefon)
• Rechter Rand: -50vw (Tablet & Telefon)
• Linke Polsterung: 30px
• Rechte Polsterung: 30px

Bildmodul Nr. 1 zu Spalte 1 hinzufügen

Bildabmessungen

Es ist an der Zeit, die verschiedenen Bildmodule hinzuzufügen! Das von uns neu erstellte Beispiel ist zu 100 % responsiv, wenn Sie nur Bilder mit einer Breite von 880 Pixeln und einer Höhe von 1320 Pixeln verwenden . Wenn Sie also genau das gleiche Beispiel von Grund auf neu erstellen möchten, sollten Sie Bilder mit diesem bestimmten Maßsatz verwenden. Wenn Sie dies jedoch für jede Art von Satz von Bildabmessungen durchführen möchten, müssen Sie die Ansichtsfenstereinheiten jedes Bildmoduls manuell an das Gesamtdesign anpassen.

Bild hochladen

Jede der drei ersten Spalten zählt zwei Bildmodule. Fügen Sie das erste Bildmodul zu Spalte 1 hinzu.

Abstand

Gehen Sie dann zu den Abstandseinstellungen und vergrößern Sie das Bild mithilfe von Ansichtsfenstereinheiten.

• Obere Marge: 0,5 vw (nur Tablet und Telefon)
• Unterer Rand: 0,5 vw (nur Tablet und Telefon)
• Linker Rand: -5vw (Desktop), 0.5vw (Tablet & Telefon)
• Rechter Rand: -2vw (Desktop), 0.5vw (Tablet & Telefon)

Bildmodul #2 zu Spalte 1 hinzufügen

Bild hochladen

Laden Sie auch das zweite Bildmodul in Spalte 1 hoch.

Abstand

Und ändern Sie auch die Abstandseinstellungen dieses Moduls.

• Obere Marge: 0,4 vw (Desktop), 0,5 vw (Tablet und Telefon)
• Unterer Rand: 0,5 vw (nur Tablet und Telefon)
• Linker Rand: -8.1vw (Desktop), 0.5vw (Tablet & Telefon)
• Rechter Rand: 3,7 vw (Desktop), 0,5 vw (Tablet & Telefon)
• Linke Polsterung: 3vw (Desktop), 0vw (Tablet & Telefon)
• Rechte Polsterung: 3vw (Desktop), 0vw (Tablet & Telefon)

Bildmodul #3 zu Spalte 2 hinzufügen

Bild hochladen

Auf zur zweiten Spalte! Fügen Sie ein neues Bildmodul hinzu und laden Sie ein Bild hoch.

Abstand

Fahren Sie fort, indem Sie benutzerdefinierte Rand- und Abstandswerte in den Abstandseinstellungen verwenden, um die Größe des Bildes zu reduzieren.

• Obere Marge: 0,5 vw (nur Tablet und Telefon)
• Unterer Rand: 0,5 vw (nur Tablet und Telefon)
• Linker Rand: -0.5vw (Desktop), 0.5vw (Tablet & Telefon)
• Rechter Rand: 0,5 vw (nur Tablet und Telefon)
• Linke Polsterung: 3vw (Desktop), 0vw (Tablet & Telefon)
• Rechte Polsterung: 3vw (Desktop), 0vw (Tablet & Telefon)

Bildmodul #4 zu Spalte 2 hinzufügen

Bild hochladen

Fügen Sie auch in Spalte 2 ein zweites Bildmodul hinzu.

Abstand

Ändern Sie hier auch die Abstandseinstellungen.

• Oberer Rand: 0.5vw
• Unterer Rand: 0,5 vw (nur Tablet und Telefon)
• Linker Rand: -0.5vw (Desktop), 0.5vw (Tablet & Telefon)
• Rechter Rand: 0,5 vw (nur Tablet und Telefon)
• Linke Polsterung: 3vw (Desktop), 0vw (Tablet & Telefon)
• Rechte Polsterung: 3vw (Desktop), 0vw (Tablet & Telefon)

Bildmodul Nr. 5 zu Spalte 3 hinzufügen

Bild hochladen

Weiter zur nächsten und letzten Spalte. Fügen Sie das erste Bildmodul hinzu.

Abstand

Ändern Sie als nächstes die Abstandseinstellungen des Bildmoduls. Diese Werte helfen, die Größe des Bildes zu erhöhen, wie Sie im Druckbildschirm unten sehen können.

• Obere Marge: 0,5 vw (nur Tablet und Telefon)
• Unterer Rand: 0,5 vw (nur Tablet und Telefon)
• Linker Rand: -2,5 vw (Desktop), 0,5 vw (Tablet und Telefon)
• Rechter Rand: -17,5 vw (Desktop), 0,5 vw (Tablet & Telefon)

Bildmodul #6 zu Spalte 3 hinzufügen

Bild hochladen

Fügen Sie das nächste und letzte Bildmodul in Spalte 3 hinzu.

Abstand

Und ändern Sie die gesamte Position, indem Sie benutzerdefinierte Randwerte hinzufügen. Aus reaktionsfähigen Gründen fügen wir dieses Modul zu Spalte 3 anstelle von Spalte 2 hinzu.

• Obere Marge: -26,7 vw (Desktop), 0,5 vw (Tablet und Telefon)
• Unterer Rand: 0,5 vw (nur Tablet und Telefon)
• Linker Rand: -20.5vw (Desktop), 0.5vw (Tablet & Telefon)
• Rechter Rand: 17,3 vw (Desktop), 0,5 vw (Tablet & Telefon)

Lightbox für Bildmodul #1 aktivieren

Sobald Sie alle Bilder an Ort und Stelle haben, können Sie die Lightbox-Option in den Einstellungen des ersten Bildmoduls aktivieren.

• In Lightbox öffnen: Ja

Lightbox-Option kopieren und auf alle Bilder im Abschnitt anwenden

Nachdem Sie die Lightbox-Option für das erste Bildmodul aktiviert haben, können Sie diese Option kopieren und in alle anderen Bildmodule im Abschnitt einfügen.

Hinzufügen von Randradius zum Bildmodul Nr. 1

Fügen Sie auch dem ersten Bildmodul einige abgerundete Ecken hinzu.

Erweitern Sie den Randradius auf alle Bilder im Abschnitt

Und erweitern Sie diese abgerundeten Ecken auf alle Bildmodule im Abschnitt, um Zeit zu sparen.

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Abschließende Gedanken

Die Möglichkeiten, die Sie mit der neuen 6-Säulen-Reihe von Divi haben, sind endlos. In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit den 6-spaltigen Zeilen- und Ansichtsfenstereinheiten eine atemberaubende und einzigartige Collage erstellen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!