Mit Divi . verstecken Sie Ihre Kopie elegant unter den Abschnittsteilern in einem atemberaubenden Design

Die integrierten Optionen von Divi ermöglichen es Ihnen, eine bestimmte Designeinstellung für mehrere Zwecke zu verwenden, was wiederum die Kreativität anregt. Heute werden wir Abschnittstrenner auf einzigartige Weise verwenden, um die Kopie Ihrer Website elegant zu verbergen. Dies ist eine großartige Möglichkeit, Ihrer Seite zusätzliche Interaktion hinzuzufügen, ohne dass benutzerdefinierten Code erforderlich ist. Wir erstellen ein schönes Beispiel von Grund auf neu und Sie können auch die JSON-Datei des Beispiels 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 Layout KOSTENLOS herunter

Um das kostenlose 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!

Abschnitt 1 hinzufügen

Als Erstes müssen Sie der Seite, an der Sie gerade arbeiten, einen neuen regulären Abschnitt hinzufügen.

Neue Zeile hinzufügen

Spaltenstruktur

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

Textmodul zur Spalte hinzufügen

H2-Inhalt hinzufügen

Das erste Modul, das wir in dieser Zeile benötigen, ist ein Textmodul mit H2-Inhalten.

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H2-Texteinstellungen.

• Überschrift 2 Schriftart: Playfair Display
• Überschrift 2 Schriftstärke: Regular
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textgröße: 70px (Desktop), 40px (Tablet), 30px (Telefon)

Trennmodul zur Spalte hinzufügen

Sichtweite

Das zweite und letzte Modul, das wir in dieser Reihe benötigen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Wir ändern auch die Linienfarbe im Design-Tab.

• Linienfarbe: #000000

Größe

Gehen Sie zu den Größeneinstellungen und wenden Sie die folgenden Einstellungen an:

• Teilergewicht: 5px
• Breite: 27%
• Modulausrichtung: Mitte

Abschnitt 2 hinzufügen

Hintergrundfarbe

Fügen Sie Ihrer Seite den zweiten regulären Abschnitt hinzu, öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #f7f7f7

Überlauf

Stellen Sie sicher, dass Sie den Abschnittsüberlauf auch in der Registerkarte Erweitert ausblenden. Dadurch wird sichergestellt, dass nichts den Abschnittscontainer übertrifft.

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

Übergänge

Später in diesem Beitrag erstellen wir einen Hover-Übergang. Um einen reibungslosen Ablauf zu gewährleisten, verlängern wir die Übergangsdauer auf der Registerkarte "Erweitert".

• Übergangsdauer: 800ms

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 lassen Sie die Zeile die gesamte Breite des Abschnittscontainers einnehmen, indem Sie die folgenden Einstellungen anwenden:

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

Textmodul Nr. 1 zur Spalte hinzufügen

H3-Inhalt hinzufügen

Es ist Zeit, mit dem Hinzufügen von Modulen zu beginnen, beginnend mit einem Textmodul. Geben Sie H3-Inhalte Ihrer Wahl ein.

H3-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H3-Texteinstellungen.

• Überschrift 3 Schriftart: Playfair Display
• Überschrift 3 Textausrichtung: Mitte
• Überschrift 3 Textfarbe: #000000
• Überschrift 3 Textgröße: 3vw (Desktop), 6vw (Tablet), 7vw (Telefon)

Trennmodul zur Spalte hinzufügen

Sichtweite

Das zweite Modul, das wir in dieser Reihe benötigen, ist ein Teilermodul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Ändern Sie auch die Farbe des Teilers.

• Linienfarbe: #000000

Abstand

Und fügen Sie einen benutzerdefinierten oberen und unteren Rand hinzu, um Platz zu schaffen.

• Oberer Rand: 2vw
• Unterer Rand: 2vw

Textmodul zur Spalte hinzufügen

Inhalt hinzufügen

Das nächste Modul, das wir brauchen, ist ein weiteres Textmodul. Fügen Sie einen Absatzinhalt Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen.

• Textschriftart: Open Sans
• Textausrichtung: Mitte
• Textfarbe: #777777
• Textgröße: 0,8 vw (Desktop), 1,7 vw (Tablet), 2,2 vw (Telefon)
• Textzeilenhöhe: 1.8em

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Randwerte hinzu.

• Linker Rand: 3vw (Desktop), 7vw (Tablet), 10vw (Telefon)
• Rechter Rand: 3vw (Desktop), 7vw (Tablet & Telefon)

Schaltflächenmodul zur Spalte hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das wir in dieser Reihe benötigen, ist ein Button-Modul. Geben Sie eine Kopie Ihrer Wahl ein.

Ausrichtung

Ändern Sie die Schaltflächenausrichtung auf der Registerkarte Design.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Fahren Sie fort, indem Sie die Schaltflächeneinstellungen gestalten.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Schaltflächentextfarbe: #000000
• Breite des Tastenrahmens: 1px
• Schaltflächenrandradius: 0px
• Schaltflächenschrift: Playfair Display

Abstand

Und fügen Sie auch einige benutzerdefinierte Abstandswerte hinzu.

• Oberer Rand: 2vw
• Obere Polsterung: 1vw
• Untere Polsterung: 1vw
• Linke Polsterung: 3vw (Desktop), 6vw (Tablet), 8vw (Telefon)
• Rechte Polsterung: 3vw (Desktop), 6vw (Tablet), 8vw (Telefon)

Zusätzliche Abschnittseinstellungen

Standard oberer Teiler

Nachdem Sie alle Module zum Abschnitt hinzugefügt haben, ist es an der Zeit, einige zusätzliche Abschnittseinstellungen durchzugehen. Öffnen Sie die Abschnittseinstellungen, gehen Sie zum Design-Tab und fügen Sie den folgenden oberen Teiler hinzu:

• Teilerstil: In Liste suchen
• Teilerfarbe: #e8e8e8
• Teilerhöhe: 7000px
• Teiler Flip: Vertikal
• Teileranordnung: Über dem Abschnittsinhalt

Hover-Top-Teiler

Ändern Sie die Teilerhöhe beim Schweben.

• Teilerhöhe: 0px

Unterteiler

Fügen Sie auch einen unteren Teiler hinzu.

• Teilerstil: In Liste suchen
• Teilerfarbe: #5c26ff
• Teilerhöhe: 600px
• Teileranordnung: Über dem Abschnittsinhalt

Schwebender Bodenteiler

Und entfernen Sie die Teilerhöhe beim Schweben.

• Teilerhöhe: 0px

Abstand

Wie Sie in der Vorschau dieses Beitrags sehen können, drehen wir diesen Abschnitt in einem Kreis. Dazu müssen wir zunächst einige benutzerdefinierte Rand- und Abstandswerte für verschiedene Bildschirmgrößen hinzufügen:

• Linker Rand: 10vw (Desktop), 11vw (Tablet), 0vw (Telefon)
• Rechter Rand: 47vw (Desktop), 11vw (Tablet), 0vw (Telefon)
• Obere Polsterung: 8vw (Desktop), 15vw (Tablet), 16vw (Telefon)
• Untere Polsterung: 8vw (Desktop), 15vw (Tablet), 16vw (Telefon)

Grenze

Fahren Sie fort, indem Sie '50vw' zu jeder der Ecken hinzufügen, um den Abschnitt in einen Kreis zu verwandeln. Wir fügen auch einen Rahmen mit den folgenden Einstellungen hinzu:

• Randbreite: 1px
• Rahmenfarbe: rgba(255,255,255,0)

Grenze schweben

Ändern Sie die Rahmenfarbe beim Schweben.

• Randfarbe: #000000

Abschnitt zweimal klonen

Nachdem Sie alle Abschnittseinstellungen vorgenommen haben, können Sie den Abschnitt zweimal klonen.

Duplikat Nr. 1 ändern

Farbe des oberen Teilers ändern

Wir werden beide Abschnittsduplikate ändern, beginnend mit dem ersten. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Farbe des oberen Teilers.

• Teilerfarbe: #5c26ff

Farbe des unteren Teilers ändern

Ändern Sie auch die Farbe des unteren Teilers.

• Teilerfarbe: #ff3a5e

Abstand ändern

Gehen Sie dann zu den Abstandseinstellungen und stellen Sie sicher, dass die folgenden Werte gelten:

• Obere Marge: -20vw (Desktop), 0vw (Tablet & Telefon)
• Linker Rand: 47vw (Desktop), 11vw (Tablet), 0vw (Telefon)
• Rechter Rand: 10vw (Desktop), 11vw (Tablet), 0vw (Telefon)

Duplikat Nr. 2 ändern

Farbe des oberen Teilers ändern

Öffnen Sie die Einstellungen des zweiten Duplikats und ändern Sie die obere Teilerfarbe.

• Teilerfarbe: #ff3a5e

Farbe des unteren Teilers ändern

Ändern Sie auch die Farbe des unteren Teilers.

• Teilerfarbe: #e8e8e8

Abstand ändern

Und ändern Sie auch hier die Abstandswerte.

• Obere Marge: -20vw (Desktop), 0vw (Tablet & Telefon)
• Unterer Rand: 7vw
• Linker Rand: 10vw (Desktop), 11vw (Tablet), 0vw (Telefon)
• Rechter Rand: 47vw (Desktop), 11vw (Tablet), 0vw (Telefon)

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 Ihre Kopie unter den Abschnittstrennern elegant ausblenden können. Dies ist eine großartige Möglichkeit, einige der intuitiven integrierten Optionen von Divi auf eine andere Weise zu verwenden, als Sie es gewohnt sind. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, auch Ihre eigenen alternativen Designs mit dieser Technik zu erstellen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

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.