5 Beispiele für mit Divi . erstellte Abschnittslayouts im redaktionellen Stil

Die neuen Divi-Optionen bieten unzählige Möglichkeiten. Module, Zeilen und Spalten befähigen sich gegenseitig mehr denn je auf dem Weg zu einem beeindruckenden und benutzerfreundlichen Webdesign. Es kann unter anderem bemerkenswerte Abschnitte im redaktionellen Stil erstellen. Und genau das zeigen wir Ihnen in diesem Beitrag; 5 verschiedene Layouts für redaktionelle Abschnitte, die Sie auf verschiedenen Websites verwenden können. Der beste Teil? Der Beitrag erfolgt nur mit den richtigen Einstellungen für jedes Modul, jede Zeile und jede Spalte.

Werfen wir einen Blick auf die fünf Beispiele, die wir Ihnen zeigen, wie Sie sie erstellen.

Erstes Beispiel

Desktop

Handy, Mobiltelefon

Zweites Beispiel

Desktop

Handy, Mobiltelefon

Drittes Beispiel

Desktop

Handy, Mobiltelefon

Viertes Beispiel

Desktop

Handy, Mobiltelefon

Fünftes Beispiel

Desktop

Handy, Mobiltelefon

5 Beispiele für mit Divi . erstellte Abschnittslayouts im redaktionellen Stil

Abonnieren Sie unseren Youtube-Kanal

Beginnen Sie mit der Erstellung des ersten Beispiels

Beginnen wir mit der Erstellung unseres ersten Layouts im Editor-Stil.

Neuen Abschnitt hinzufügen

Fügen Sie eine neue Seite hinzu, aktivieren Sie den Divi Builder und wechseln Sie zu Visual Builder. Sobald Sie sich im Visual Builder befinden, fügen Sie einen Standardabschnitt hinzu.

Dreispaltige Zeile hinzufügen

Innerhalb dieses Standardabschnitts benötigen wir eine dreispaltige Zeile.

Hintergrund mit Farbverlauf

Öffnen Sie die Zeileneinstellungen und fügen Sie den folgenden Farbverlaufshintergrund hinzu:

• Erste Farbe: #636363
• Zweite Farbe: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 0%
• Endposition: 47%

Spalte 2 Hintergrundfarbe

Wir müssen auch '#d8d8d8' als Hintergrundfarbe für Spalte 2 festlegen.

Größe

Wechseln Sie zur Registerkarte Design und verwenden Sie die folgenden Einstellungen für die Unterkategorie Dimensionierung:

• Benutzerdefinierte Breite verwenden: Ja
• Benutzerdefinierte Breite: 100%
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Öffnen Sie die Unterkategorie Abstand und fügen Sie '50px' zum oberen, rechten, unteren und linken Abstand der zweiten Spalte hinzu.

Bildmodul für die erste Spalte

Hintergrund mit Farbverlauf

Fügen Sie der ersten Spalte der Zeile ein Bild hinzu und verwenden Sie dafür den folgenden Verlaufshintergrund:

• Erste Farbe: rgba(255,255,255,0)
• Zweite Farbe: #086191
• Verlaufstyp: Linear
• Verlaufsrichtung: 107deg
• Startposition: 60%
• Endposition: 60%

Ausrichtung

Gehen Sie zur Registerkarte Design, verwenden Sie die linke Bildausrichtung und aktivieren Sie die Option "Bild immer auf dem Handy zentrieren".

Abstand

Öffnen Sie dann die Unterkategorie Abstand und verwenden Sie die folgenden Einstellungen für Rand und Abstand:

• Oberer Rand: 100px (Desktop), 0px (Tablet und Telefon)
• Obere Polsterung: 20px
• Untere Polsterung: 20px

Textmodul für die zweite Spalte

Texteinstellungen

Fügen Sie als Nächstes ein Textmodul zur zweiten Spalte der Zeile hinzu. Wechseln Sie zur Registerkarte Design und verwenden Sie die folgenden Einstellungen für die Unterkategorie Text:

• Schriftgröße des Textes: 12px
• Textfarbe: #000000
• Textausrichtung: Mitte

Größe

Öffnen Sie die Unterkategorie Dimensionierung, verwenden Sie eine Breite von '84 %' und wählen Sie die mittlere Modulausrichtung.

Abstand

Schließlich fügen Sie '50px' am oberen und unteren Rand hinzu.

Bildmodul für die dritte Spalte

Hintergrund mit Farbverlauf

Fügen Sie der dritten Spalte ein weiteres Bildmodul hinzu und verwenden Sie den folgenden Verlaufshintergrund:

• Erste Farbe: #a36100
• Zweite Farbe: rgba(255,255,255,0)
• Verlaufstyp: Linear
• Verlaufsrichtung: 73deg
• Startposition: 40%
• Endposition: 40%

Ausrichtung

Gehen Sie zur Registerkarte Design, wählen Sie die linke Bildausrichtung aus und aktivieren Sie die Option "Bild immer auf dem Handy zentrieren".

Abstand

Schließlich fügen Sie den folgenden benutzerdefinierten Rand und die folgenden Auffüllungen hinzu:

• Oberer Rand: 300px (Desktop), 0px (Tablet und Telefon)
• Obere Polsterung: 20px
• Untere Polsterung: 20px

Ergebnis

Schauen wir uns das Ergebnis auf dem Desktop noch einmal an:

Und auf dem Handy:

Beginnen Sie mit der Erstellung des zweiten Beispiels

Das zweite Beispiel sieht auf dem Desktop so aus:

Neuen Abschnitt hinzufügen

Fügen Sie zunächst einen neuen Standardabschnitt hinzu.

Zweispaltige Zeile hinzufügen

Fügen Sie dann eine zweispaltige Zeile hinzu.

Spalte 2 Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen und fügen Sie '#ededed' als Hintergrundfarbe für Spalte 2 hinzu.

Größe

Wechseln Sie zur Registerkarte Design und nehmen Sie die folgenden Änderungen vor, die für die Unterkategorie Größenanpassung gelten:

• Benutzerdefinierte Breite verwenden: Ja
• Benutzerdefinierte Breite: 100%
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Bildmodul für die erste Spalte

Ausrichtung

Fügen Sie der ersten Spalte ein Bildmodul hinzu, verwenden Sie die linke Bildausrichtung und aktivieren Sie die Option "Bild immer auf dem Handy zentrieren".

Abstand

Öffnen Sie die Unterkategorie Abstand und verwenden Sie die folgenden Einstellungen:

• Oberer Rand: 100px (Desktop), 0px (Tablet und Telefon)
• Obere Polsterung: 0px
• Untere Polsterung: 0px

Textmodul für die zweite Spalte

Texteinstellungen

Fügen Sie dann in der zweiten Spalte ein Textmodul hinzu und wenden Sie die folgenden Einstellungen auf die Unterkategorie Text an:

• Textschriftart: Lato
• Schriftgröße des Textes: 12px
• Textfarbe: #000000
• Textzeilenhöhe: 2.2em
• Textausrichtung: Mitte

Größe

Öffnen Sie die Unterkategorie Größenanpassung und wenden Sie eine Breite von '75%' an.

Abstand

Stellen Sie abschließend sicher, dass die folgenden Einstellungen für die Unterkategorie Abstand gelten:

• Obere Marge: 120px (Desktop), -80 (Tablet & Telefon)
• Linker Rand: -240px (Desktop), 80 (Tablet), 45 (Telefon)
• Polsterung oben, rechts, unten und links: 50 Pixel (Desktop und Tablet), 20 Pixel (Telefon)

Ergebnis

Sobald Sie fertig sind, werden Sie das folgende Design auf dem Desktop bemerken:

Und auf dem Handy:

Beginnen Sie mit der Erstellung des dritten Beispiels

Als nächstes haben wir das folgende Beispiel, das so aussieht:

Neuen Abschnitt hinzufügen

Fügen Sie erneut einen neuen Standardabschnitt hinzu.

Zweispaltige Zeile hinzufügen

Die Spaltenstruktur, die wir für diese Zeile benötigen, ist die folgende:

Spalte 1 Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen und verwenden Sie '#e8e8e8' als Hintergrundfarbe für Spalte 1.

Spalte 2 Hintergrund mit Farbverlauf

Der benötigte Verlaufshintergrund für die zweite Spalte ist der folgende:

• Erste Farbe: #e8e8e8
• Zweite Farbe: rgba(255,255,255,0)
• Spalte 2 Gradiententyp: Linear
• Spalte 2 Gradientenrichtung: 147deg
• Spalte 2 Startposition: 25%
• Spalte 2 Endposition: 9%

Größe

Öffnen Sie die Unterkategorie Dimensionierung und verwenden Sie die folgenden Einstellungen:

• Benutzerdefinierte Breite verwenden: Ja
• Benutzerdefinierte Breite: 100%
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Schließlich fügen Sie '70px' zum oberen und unteren Abstand der ersten Spalte hinzu.

Bildmodul für die erste Spalte

Ausrichtung

Fügen Sie der ersten Spalte ein Bildmodul hinzu, verwenden Sie die linke Bildausrichtung und aktivieren Sie die Option "Bild immer auf dem Handy zentrieren".

Abstand

Öffnen Sie die Unterkategorie Abstand und fügen Sie am linken Rand '-300px' hinzu.

Textmodul für die zweite Spalte

Hintergrundfarbe

Fügen Sie der zweiten Spalte ein Textmodul hinzu und verwenden Sie '#3d3d3d' als Hintergrundfarbe.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und verwenden Sie die folgenden Einstellungen für die Unterkategorie Text:

• Textschriftart: Lato
• Schriftgröße des Textes: 12px
• Textfarbe: #FFFFFF
• Textzeilenhöhe: 2.2em
• Textausrichtung: Mitte

Größe

Öffnen Sie die Unterkategorie Sizing und verwenden Sie '75%' für die Breite.

Abstand

Verwenden Sie schließlich die folgenden Einstellungen für die Unterkategorie Abstand:

• Obere Marge: 130px (Desktop), -200 (Tablet und Telefon)
• Linker Rand: -180px (Desktop), 80 (Tablet), 50 (Telefon)
• Polsterung oben, rechts, unten und links: 50 Pixel (Desktop und Tablet), 20 Pixel (Telefon)

Ergebnis

Nach Fertigstellung sieht das Ergebnis auf dem Desktop so aus:

Und so auf dem Handy:

Beginnen Sie mit der Erstellung des vierten Beispiels

Das vierte Beispiel, das wir erstellen, sieht so aus:

Neuen Abschnitt hinzufügen

Beginnen Sie damit, der Seite, an der Sie arbeiten, einen Standardabschnitt hinzuzufügen.

Zweispaltige Zeile hinzufügen

Fügen Sie dann eine zweispaltige Zeile hinzu.

Größe

Öffnen Sie die Unterkategorie Dimensionierung und nehmen Sie die folgenden Änderungen vor:

• Benutzerdefinierte Breite verwenden: Ja
• Benutzerdefinierte Breite: 60%
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Erste Spalte Erstes Bildmodul

Ausrichtung

Fügen Sie der ersten Spalte ein Bildmodul hinzu, verwenden Sie die richtige Bildausrichtung und aktivieren Sie die Option "Bild immer auf dem Handy zentrieren".

Größe

Gehen Sie zur Unterkategorie Sizing dieses Bildmoduls, verwenden Sie eine Breite von '89%' und wählen Sie die richtige Modulausrichtung aus.

Sichtweite

Gehen Sie zur Registerkarte Erweitert und deaktivieren Sie das Bildmodul auf Telefon und Tablet. Wir werden dies für 3 der verwendeten Bildmodule tun. Sie können selbst entscheiden, welches auf Tablet und Telefon erscheinen soll, in unserem Fall ist das das Bild in der rechten oberen Ecke.

Erste Spalte Zweites Bildmodul

Ausrichtung

Fügen Sie ein weiteres Bildmodul hinzu, verwenden Sie die richtige Bildausrichtung und aktivieren Sie die Option "Bild immer auf dem Handy zentrieren".

Grenze

Scrollen Sie nach unten und verwenden Sie den folgenden Rahmen:

• Rand verwenden: Ja
• Rahmenfarbe: #FFFFFF
• Rahmenbreite: 5px
• Rahmenstil: Solid

Sichtweite

Gehen Sie schließlich zur Registerkarte Erweitert und deaktivieren Sie das Bildmodul auf Telefon und Tablet.

Zweite Spalte Erstes Bildmodul

Ausrichtung

Fügen Sie das nächste Bildmodul in die zweite Spalte ein, verwenden Sie die linke Bildausrichtung und aktivieren Sie die Option "Bild immer auf dem Handy zentrieren".

Grenze

Scrollen Sie nach unten, öffnen Sie die Unterkategorie Rahmen und nehmen Sie die folgenden Einstellungen vor:

• Rand verwenden: Ja
• Rahmenfarbe: #FFFFFF
• Rahmenbreite: 4px
• Rahmenstil: Solid

Zweite Spalte Zweites Bildmodul

Ausrichtung

Fügen Sie das letzte Bildmodul in die zweite Spalte ein, verwenden Sie die linke Bildausrichtung und aktivieren Sie die Option "Bild immer auf dem Handy zentrieren".

Größe

Öffnen Sie dann die Unterkategorie Dimensionierung, verwenden Sie eine Breite von '89%' und wählen Sie die linke Modulausrichtung aus.

Sichtweite

Deaktivieren Sie dieses Bildmodul auch auf Telefon und Tablet.

Zeile mit einer Spalte hinzufügen

Wenn Sie mit der vorherigen Zeile fertig sind, fahren Sie fort und fügen Sie eine weitere hinzu. Diesmal benötigt die Zeile nur eine Spalte.

Größe

Gehen Sie zur Registerkarte Design der Zeileneinstellungen, aktivieren Sie die Option 'Benutzerdefinierte Breite verwenden' und verwenden Sie '581px' als benutzerdefinierte Breite.

Textmodul

Hintergrundfarbe

Fügen Sie dieser neuen Zeile ein Textmodul hinzu und wählen Sie 'rgba(255,255,255,0.92)' als Hintergrundfarbe aus.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und nehmen Sie die folgenden Einstellungen vor, die für die Unterkategorie Text gelten:

• Textschriftart: Lato
• Schriftgröße des Textes: 12px
• Textfarbe: #000000
• Textzeilenhöhe: 2.2em
• Textausrichtung: Mitte

Größe

Öffnen Sie dann die Unterkategorie Dimensionierung, fügen Sie '75%' zur Breite hinzu und wählen Sie die mittlere Modulausrichtung.

Abstand

Nehmen Sie abschließend die folgenden Einstellungen für die Unterkategorie Abstand vor:

• Obere Marge: -580px (Desktop), -200 (Tablet und Telefon)
• Linker Rand: – 180px (Desktop), 80 (Tablet), 50 (Telefon)
• Oben, rechts, unten und links Polsterung: 50px

Ergebnis

Sobald Sie fertig sind, können Sie das folgende Ergebnis auf dem Desktop sehen:

Und folgendes auf dem Handy:

Beginnen Sie mit der Erstellung des fünften Beispiels

Das letzte Beispiel, das wir Ihnen zeigen, wie Sie es neu erstellen, ist das folgende:

Abschnitt in voller Breite hinzufügen

Beginnen Sie damit, Ihrer Seite einen Abschnitt in voller Breite hinzuzufügen.

Bildmodul in voller Breite

Fügen Sie in diesem Abschnitt mit voller Breite ein Bildmodul mit voller Breite hinzu.

Neuen Abschnitt hinzufügen

Fügen Sie direkt unter dem vorherigen Abschnitt einen weiteren Abschnitt hinzu. Diesmal muss der Abschnitt Standard statt voller Breite sein.

Dreispaltige Zeile hinzufügen

Fügen Sie diesem neuen Standardabschnitt eine dreispaltige Zeile hinzu.

Spalte 1, 2 & 3 Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen und weisen Sie den Spalten folgende Hintergrundfarben zu:

• Spalte 1: #eaeaea
• Spalte 2: rgba(12,113,195,0.17)
• Spalte 3: rgba(131,0,233,0,09)

Größe

Wechseln Sie zur Registerkarte Design und nehmen Sie die folgenden Änderungen an der Unterkategorie Dimensionierung vor:

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

Abstand

Öffnen Sie dann die Unterkategorie Abstand, fügen Sie '-60px' zum oberen Rand und '50px' zum unteren Abstand jeder Spalte hinzu.

Textmodul für die erste Spalte

Hintergrundfarbe

Fahren Sie fort, indem Sie ein Textmodul zur ersten Spalte hinzufügen und 'rgba(255,255,255,0.89)' als Hintergrundfarbe verwenden.

Texteinstellungen

Gehen Sie auf die Registerkarte Design und nehmen Sie die folgenden Einstellungen vor, die für die Unterkategorie Text gelten:

• Textschriftart: Lato
• Schriftgröße des Textes: 12px
• Textfarbe: #000000
• Textzeilenhöhe: 2.2em
• Textausrichtung: Mitte

Grenze

Öffnen Sie die Unterkategorie Rahmen und nehmen Sie die folgenden Einstellungen vor:

• Rand verwenden: Ja
• Rahmenfarbe: #FFFFFF
• Rahmenbreite: 17px
• Rahmenstil: Solid

Größe

Verwenden Sie dann eine Breite von '75%' und wählen Sie die mittlere Modulausrichtung in der Unterkategorie Dimensionierung aus.

Abstand

Öffnen Sie zuletzt die Unterkategorie Abstand und nehmen Sie die folgenden Einstellungen vor:

• Oberer Rand: -300px (Desktop), 0px (Tablet und Telefon)
• Oben, rechts, unten, links Polsterung: 50 Pixel (Desktop und Tablet), 20 Pixel (Telefon)

Textmodul zweimal klonen und in andere zwei Spalten platzieren

Fahren Sie fort und klonen Sie das Textmodul zweimal. Platzieren Sie dann jeden der Klone in den beiden verbleibenden Spalten.

Textmodul Abstand der zweiten Spalte ändern

Wir müssen den oberen Rand des Textmoduls in der zweiten Spalte in '-220px' ändern.

Textmodul für die dritte Spalte ändern

Gleiches gilt für das Textmodul in der dritten Spalte, aber der Wert ist stattdessen '-140px'.

Ergebnis

Und hier haben Sie das Ergebnis auf dem Desktop:

Und auf dem Handy:

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen einige schöne und lustige Abschnittslayouts im redaktionellen Stil gezeigt, die Sie auf Ihrer eigenen Website verwenden können. Diese Beispiele zeigen, wie flexibel die Optionen von Divi sind und wie kreativ Sie werden können. Wenn Sie Fragen oder Anregungen haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich unten hinterlassen!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!

Ausgewähltes Bild von Julia Tim / shutterstock.com