Verwenden von Spaltenkonturen, um Ihr Divi-Designraster hervorzuheben

Die eingebaute Elementstruktur von Divi kann auf traditionelle Weise verwendet werden, um verschiedene Abschnitte, Zeilen, Spalten und Module zu definieren und zu gestalten. Sie können aber auch kreativ verwendet werden, um die Designstrukturen auf Ihrer Seite zu verbessern. In diesem Tutorial zeigen wir Ihnen, wie Sie Spaltenkonturen verwenden, um Ihr Divi-Designraster hervorzuheben. Wir widmen eine absolut positionierte Zeile, um die schönen Hintergrundspaltenkonturen zu erstellen und sie mit anderen Zeilen in unserem Abschnitt zusammenzuführen. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Spaltenumriss-Layout KOSTENLOS herunter

Um das kostenlose Spaltenumriss-Layout 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.

Laden Sie die Dateien herunter

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.

HERUNTERLADEN

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!

Beginnen wir mit der Neuerstellung!

Neuen Abschnitt hinzufügen

Überläufe

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und setzen Sie die Überläufe auf ausgeblendet. Dadurch wird sichergestellt, dass nichts über den Abschnittscontainer hinausgeht, insbesondere die Spaltenumrisse, die wir später im Tutorial hinzufügen werden.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Zeile 1 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 wie folgt:

• Breite: 100%
• Maximale Breite: 100%
• Zeilenausrichtung: Rechts

Abstand

Als Nächstes verschieben wir die Zeile mit einigen benutzerdefinierten Größeneinstellungen auf die rechte Seite der Seite auf dem Desktop.

• Oberer Rand: 200px
• Linke Polsterung: 47 % (Desktop), 6 % (Tablet), 10 % (Telefon)
• Rechte Polsterung: 6 % (Tablet), 10 % (Telefon)

Grenze

Wir vervollständigen die allgemeinen Zeileneinstellungen, indem wir einen oberen und unteren Rand hinzufügen.

• Obere und untere Randbreite: 4px
• Farbe des oberen und unteren Rands: #bdffed

Spalte 1 Einstellungen

Abstand

Nachdem Sie die allgemeinen Zeileneinstellungen abgeschlossen haben, öffnen Sie die Einstellungen der ersten Spalte und fügen Sie einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 12%
• Untere Polsterung: 12%
• Linke Polsterung: 3%
• Rechte Polsterung: 3%

Spalte 2 Einstellungen

Abstand

Öffnen Sie als nächstes die Einstellungen der zweiten Spalte und verwenden Sie die folgenden Abstandseinstellungen dafür:

• Obere Polsterung: 12%
• Untere Polsterung: 12%
• Linke Polsterung: 5 % (Desktop), 20 % (Tablet), 15 % (Telefon)
• Rechte Polsterung: 5 % (Desktop), 20 % (Tablet), 15 % (Telefon)

Textmodul Nr. 1 zu Spalte 1 hinzufügen

H2-Inhalt hinzufügen

Zeit zum Hinzufügen von Modulen, beginnend mit einem Textmodul mit H2-Inhalten in Spalte 1.

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H2-Texteinstellungen entsprechend:

• Überschrift 2 Schriftart: Source Code Pro
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textfarbe: rgba(35,38,211,0.46)
• Überschrift 2 Textgröße: 4vw (Desktop), 60px (Tablet), 50px (Telefon)
• Überschrift 2 Buchstabenabstand: 5px

• Überschrift 2 Textschatten horizontale Länge: 0.05em
• Überschrift 2 Textschatten Vertikale Länge: 0.07em
• Überschrift 2 Textschattenfarbe: #bdffed

Vertikale Bewegung

Wir werden auch etwas vertikale Bewegung hinzufügen.

• Vertikale Bewegung aktivieren: Ja
• Startversatz: 2
• Mittenversatz: 0
• Endversatz: -2
• Bewegungseffekt-Trigger: Mitte des Elements

Textmodul #2 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fügen Sie ein weiteres Textmodul direkt unter dem vorherigen hinzu und fügen Sie einen Beschreibungsinhalt Ihrer Wahl ein.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:

• Textfont: Source Code Pro
• Textfarbe: rgba(35,38,211,0.76)
• Textgröße: 15px
• Textzeilenhöhe: 2em

Vertikale Bewegung

Wir werden auch für dieses Modul etwas vertikale Bewegung verwenden.

• Vertikale Bewegung aktivieren: Ja
• Startversatz: 2
• Mittenversatz: 0
• Endversatz: -2
• Bewegungseffekt-Trigger: Mitte des Elements

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

Das letzte Modul, das wir in Spalte 1 benötigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Tasteneinstellungen

Wechseln Sie zur Design-Registerkarte des Moduls und gestalten Sie die Schaltfläche wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextfarbe: #2326d3
• Schaltflächenrandradius: 0px

• Schaltflächenschriftart: Source Code Pro
• Schaltflächensymbol anzeigen: Ja
• Platzierung der Schaltflächensymbole: Links
• Nur Symbol beim Hover für Schaltfläche anzeigen: Nein

Abstand

Fügen Sie dann einige benutzerdefinierte Auffüllungswerte hinzu.

• Obere Polsterung: 20px
• Untere Polsterung: 20px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Vertikale Bewegung

Und vervollständigen Sie die Moduleinstellungen, indem Sie etwas vertikale Bewegung hinzufügen.

• Vertikale Bewegung aktivieren: Ja
• Startversatz: 2
• Mittenversatz: 0
• Endversatz: -2
• Bewegungseffekt-Trigger: Mitte des Elements

Bildmodul zu Spalte 2 hinzufügen

Bild im Verhältnis 1:1 hochladen

In Spalte 2 benötigen wir als einziges Modul ein Image-Modul. Laden Sie ein Bild im Verhältnis 1:1 hoch.

Größe

Wechseln Sie zur Design-Registerkarte des Moduls und erzwingen Sie die volle Breite des Bildes.

• Volle Breite erzwingen: Ja

Grenze

Wir verwandeln das Bild in einen Kreis, indem wir als nächstes einige abgerundete Ecken hinzufügen.

• Alle Ecken: 50vw

Box Schatten

Dann fügen wir einen Boxschatten hinzu.

• Horizontale Position des Kastenschattens: 30px
• Vertikale Position des Kastenschattens: 30px
• Schattenfarbe: rgba (38,255,197,0.3)

Vertikale Bewegung

Und wir vervollständigen die Moduleinstellungen, indem wir etwas vertikale Bewegung hinzufügen.

• Vertikale Bewegung aktivieren: Ja
• Startversatz: -2
• Mittenversatz: 0
• Endversatz: 2
• Bewegungseffekt-Trigger: Mitte des Elements

Ganze Zeile zweimal klonen

Sobald Sie die erste Zeile abgeschlossen haben, können Sie sie zweimal klonen.

Alle Inhalte und Bilder ändern

Stellen Sie sicher, dass Sie alle doppelten Inhalte und Bilder ändern.

Unteren Rand zur letzten Zeile hinzufügen

Und öffnen Sie die Einstellungen der letzten Zeile, gehen Sie zu den Abstandseinstellungen und fügen Sie einen unteren Rand hinzu.

• Unterer Rand: 200px

Weisen Sie den Spaltenkonturen eine neue Zeile (am Anfang des Abschnitts) zu

Spaltenstruktur

Nachdem wir nun die allgemeinen Zeilen erstellt haben, ist es an der Zeit, die Spaltenumrisse hinzuzufügen. Dazu fügen wir oben in unserem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Öffnen Sie die Zeileneinstellungen, gehen Sie zum Design-Tab und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 90%
• Maximale Breite: 100%

Abstand

Wir entfernen auch alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Position

Wechseln Sie dann zur Registerkarte Erweitert und positionieren Sie die gesamte Zeile neu. Indem wir die Position auf absolut setzen, entfernen wir den Containerplatz, der von der Zeile innerhalb der Seite eingenommen wird.

• Position: Absolut
• Ort: Top Center

Alle Spalten Hauptelement CSS Breite

Sobald die allgemeinen Zeileneinstellungen vorgenommen wurden, ist es an der Zeit, die Spalten zu gestalten. Fügen Sie zunächst jeder Spalte eine benutzerdefinierte Breite hinzu, indem Sie eine Zeile CSS-Code im Hauptelement der Zeile verwenden. Dies wird uns helfen, die Spaltenstruktur auf kleineren Bildschirmgrößen beizubehalten.

width: 20% !important;

Spalte 1 Einstellungen

Abstand

Öffnen Sie dann die Einstellungen von Spalte 1 und ändern Sie die Abstandswerte für verschiedene Bildschirmgrößen.

• Obere Polsterung: 150 Vh (Desktop), 250 Vh (Tablet & Telefon)
• Untere Polsterung: 150 Vh (Desktop), 250 Vh (Tablet & Telefon)

Grenze

Fügen Sie auch einen linken Rand hinzu.

• Breite des linken Rands: 5px
• Farbe des linken Rands: #bdffed
• Linker Randstil: Gestrichelt

Spalte 2 Einstellungen

Hintergrundfarbe

Als Nächstes öffnen wir die Einstellungen von Spalte 2 und fügen eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #b5fff1

Grenze

Wir werden auch einen rechten Rand verwenden.

• Breite des rechten Rands: 4px
• Farbe des rechten Rands: #bdffed
• Rechter Rahmenstil: Solid

Spalte 3 Einstellungen

Grenze

In der dritten Spalte verwenden wir einen rechten Rahmen mit den folgenden Einstellungen:

• Breite des rechten Rands: 4px
• Farbe des rechten Rands: rgba(35,38,211,0,12)
• Rechter Randstil: Gestrichelt

Spalte 4 Einstellungen

Grenze

Dann öffnen wir die Einstellungen von Spalte 4 und ändern die Rahmeneinstellungen entsprechend:

• Breite des rechten Rands: 4px
• Farbe des rechten Rands: #bdffed
• Rechter Rahmenstil: Solid

Spalte 5 Einstellungen

Grenze

Wir vervollständigen die Spalteneinstellungen, indem wir auch Spalte 5 einen rechten Rahmen hinzufügen.

• Breite des rechten Rands: 4px
• Farbe des rechten Rands: rgba(35,38,211,0,12)
• Rechter Randstil: Gestrichelt

Trennmodul zu Spalte 1 & 2 hinzufügen

Sichtweite

In der mobilen Vorschau zu Beginn dieses Beitrags konnten Sie ein etwas anderes Ergebnis als auf dem Desktop feststellen. Wir lassen nur zu, dass die Spaltenumrisse von Spalte 1 und 2 angezeigt werden, indem wir diesen spezifischen Spalten ein Trennmodul hinzufügen. Stellen Sie sicher, dass Sie beide Trennwände in den Sichtbarkeitseinstellungen ausblenden und fertig!

• Teiler anzeigen: Nein

Vorschau

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

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit den integrierten Spalten von Divi kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie Spaltenumrisse verwenden, um Ihr Divi-Designraster hervorzuheben. Dieser Ansatz hilft, ein einzigartiges Design zu erstellen, ohne dass zusätzliche Bildbearbeitungssoftware erforderlich ist. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.