So mischen Sie Ihre Kopfzeile und Ihren Text mit dem Post-Content-Modul und den Abschnittstrennern von Divi

Inzwischen haben wir uns alle an den eingebauten Abschnittsteiler von Divi gewöhnt. Sie tragen dazu bei, den von uns erstellten Websites das gewisse Extra zu verleihen. Sie dienen auch als fließender Übergang zwischen zwei verschiedenen Abschnitten, aber mit Divis Theme Builder ist der Ansatz zum Erstellen dieses Übergangs etwas anders. In diesem Beitrag führen wir Sie durch die Schritte, die Sie unternehmen müssen, um dorthin zu gelangen. Sie können die JSON-Vorlagendatei 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 die Abschnittstrenner-Seitenvorlage KOSTENLOS herunter

Um die kostenlose Seitenvorlage für Abschnittsteiler in die Hände zu bekommen, müssen Sie sie 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!

Abonnieren Sie unseren Youtube-Kanal

1. Gehen Sie zu Divi Theme Builder und fügen Sie eine neue Vorlage hinzu

Gehe zum Divi Theme Builder

Beginnen Sie mit dem Divi Theme Builder.

Neue Vorlage für Seiten hinzufügen

Legen Sie dort eine neue Vorlage an, indem Sie auf das Plus-Symbol klicken.

Wählen Sie „Alle Seiten“, wenn der Mischeffekt auf alle Ihre Seiten angewendet werden soll. Sie können denselben Effekt auch für andere Vorlagentypen verwenden, aber Sie müssen den oberen Abschnittsteiler in jede Ihrer Vorlagen separat einfügen. Nachdem Sie eine neue Vorlage erstellt haben, beginnen Sie mit der Erstellung des benutzerdefinierten Headers.

2. Erstellen Sie einen benutzerdefinierten Header

Abschnittseinstellungen

Hintergrund mit Farbverlauf

Innerhalb des Vorlageneditors werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und fügen Sie einen Verlaufshintergrund hinzu.

• Farbe 1: #d13232
• Farbe 2: #fc6a3c

Abstand

Fügen Sie dem Abschnitt auch benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 1vw (Desktop), 2vw (Tablet & Telefon)
• Untere Polsterung: 1vw (Desktop), 2vw (Tablet & Telefon)

Z-Index

Und um sicherzustellen, dass Ihr Header über allen Inhalten im Vordergrund bleibt, erhöhen wir den Z-Index in den Sichtbarkeitseinstellungen.

• Z-Index: 99999

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie Ihrem Abschnitt eine neue Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

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

Abstand

Entfernen Sie auch alle oberen und unteren Polster.

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

Hauptelement

Zu guter Letzt zentrieren Sie Ihren Spalteninhalt und lassen Sie die Spalten auf kleineren Bildschirmgrößen nebeneinander liegen, indem Sie dem Hauptelement Ihrer Zeile zwei einzelne Zeilen CSS-Code hinzufügen.

display: flex;
align-items: center;

Bildmodul zu Spalte 1 hinzufügen

Logo hochladen

Nachdem Sie alle Abschnitts- und Zeileneinstellungen vorgenommen haben, können Sie Module hinzufügen, beginnend mit einem Bildmodul in Spalte 1. Laden Sie ein Logo mit transparentem Hintergrund hoch.

Ausrichtung

Wechseln Sie dann zur Registerkarte Design des Moduls und ändern Sie die Bildausrichtung.

• Bildausrichtung: Mitte

Größe

Ändern Sie auch die Breite des Moduls über verschiedene Bildschirmgrößen hinweg.

• Breite: 6vw (Desktop), 13vw (Tablet), 17vw (Telefon)

Menümodul zu Spalte 2 hinzufügen

Menü auswählen

In der zweiten Spalte benötigen wir ein Menümodul. Wählen Sie ein Menü Ihrer Wahl.

Hintergrundfarbe entfernen

Fahren Sie fort, indem Sie die Hintergrundfarbe des Moduls entfernen.

Layout

Wechseln Sie zur Registerkarte Design und ändern Sie das Layout.

• Stil: Linksbündig
• Richtung des Dropdown-Menüs: Abwärts

Menütext

Als nächstes formatieren Sie den Menütext entsprechend:

• Menüschrift: Oswald
• Menüschriftstärke: Leicht
• Menüschriftart: Großbuchstaben
• Menütextfarbe: #ffffff (Desktop), #202332 (Tablet & Telefon)
• Menütextgröße: 0.8vw (Desktop), 2vw (Tablet), 2.5vw (Telefon)
• Menübuchstabenabstand: 0.1vw

Dropdown-Menü

Ändern Sie auch die Farbe der Dropdown-Menüzeile in den Dropdown-Menüeinstellungen.

• Farbe der Dropdown-Menüzeile: #ffffff

Symbole

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie ein weißes Hamburger-Menüsymbol verwenden.

• Farbe des Hamburger-Menüsymbols: #ffffff

Schaltflächenmodul zu Spalte 3 hinzufügen

Kopie hinzufügen

Auf zur letzten Spalte! Dort brauchen wir nur ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Ausrichtung

Wechseln Sie zur Design-Registerkarte des Moduls und ändern Sie die Schaltflächenausrichtung.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Fahren Sie fort, indem Sie die Schaltfläche in den Schaltflächeneinstellungen gestalten.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 0.6vw (Desktop), 1vw (Tablet), 1.5vw (Telefon)
• Schaltflächentextfarbe: #000000
• Hintergrundfarbe der Schaltfläche: #FFFFFF
• Breite des Tastenrahmens: 0px

• Schaltflächenrandradius: 100px
• Tastenabstand der Buchstaben: 2px
• Schaltflächenschrift: Open Sans
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: Großbuchstaben

Abstand

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie benutzerdefinierte Auffüllungen für verschiedene Bildschirmgrößen hinzufügen.

• Obere Polsterung: 0.8vw (Desktop), 1.6vw (Tablet), 2.2vw (Telefon)
• Untere Polsterung: 0,8 vw (Desktop), 1,6 vw (Tablet), 2,2 vw (Telefon)
• Linke Polsterung: 1,5 vw (Desktop), 2,5 vw (Tablet), 3,5 vw (Telefon)
• Rechte Polsterung: 1,5 vw (Desktop), 2,5 vw (Tablet), 3,5 vw (Telefon)

3. Bauen Sie einen benutzerdefinierten Körper und fügen Sie einen oberen Teiler hinzu

Nachdem Sie den benutzerdefinierten Header Ihrer Vorlage fertiggestellt haben, können Sie mit dem Erstellen des benutzerdefinierten Hauptteils beginnen.

Abschnittseinstellungen

Oberteiler

Sie werden wieder einen Abschnitt auf der Seite bemerken. Öffnen Sie diesen Abschnitt und fügen Sie einen oberen Teiler hinzu.

• Teilerstil: In Liste suchen
• Teilerfarbe: #fc6a3c
• Teilerhöhe: 6vw
• Teiler Horizontale Wiederholung: 15x
• Teiler Flip: Vertikal
• Teileranordnung: Über dem Abschnittsinhalt

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

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

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie Ihrem Abschnitt eine neue Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Größe

Öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen wie folgt:

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

Abstand

Entfernen Sie auch alle standardmäßigen oberen und unteren Polster.

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

Modul für Post-Inhalte zur Spalte hinzufügen

Damit Ihr gesamter Seiteninhalt angezeigt wird, müssen Sie Ihrer Zeile ein Post-Content-Modul hinzufügen. Dieses Modul stellt das Layout dar, das Sie mit Divi auf der Seite selbst erstellt haben. Wenn Sie diesen Übergang zu einer Produktseite hinzufügen, beispielsweise einer Vorlage mit dynamischem Inhalt, erfolgt ein anderer Ansatz. Das einzige, was Sie sich merken sollten, ist, dass Sie dem ersten Abschnitt des Hauptteils Ihrer Vorlage einen oberen Teiler hinzufügen müssen. Stellen Sie sicher, dass die Farbe Ihres Teilers mit der Farbe Ihres globalen Header-Hintergrunds übereinstimmt.

3. Builder-Änderungen speichern und Ergebnis anzeigen

Sobald Sie den Hauptteil Ihrer Vorlage fertiggestellt haben, können Sie die Änderungen speichern und das Ergebnis auf Ihrer Website anzeigen!

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 die Kopfzeile und den Hauptteil Ihrer Vorlage mit den Abschnittstrennern von Divi und dem Post-Content-Modul zusammenführen. Der Trennerübergang gilt sofort für alle Ihre Seiten. 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.