So kombinieren Sie Hintergrundmasken mit Abschnittsteilern in Divi

Die Kombination von Hintergrundmasken mit Abschnittsteilern in Divi fügt einem bereits mächtigen Arsenal an Hintergrunddesignoptionen eine weitere Ebene der Kreativität hinzu. Wenn Sie nicht viel Erfahrung mit den Hintergrundoptionen von Divi haben, verpassen Sie definitiv etwas. Eine praktische und dennoch leistungsstarke Option gibt Ihnen die Möglichkeit, Ihrem Hintergrundverlauf (oder Bild) mit nur wenigen Klicks eine Hintergrundmaske hinzuzufügen. Zusätzlich zu den Hintergrundoptionen geben Abschnittsteiler den Benutzern auch die Möglichkeit, ihre Hintergrunddesigns zu verbessern.

In diesem Tutorial zeigen wir Ihnen, wie Sie Hintergrundmasken mit Abschnittsteilern in Divi kombinieren. Wir geben Ihnen Schritt-für-Schritt-Anleitungen, wie Sie mit dieser Technik ein Hintergrunddesign für einen Divi-Abschnitt erstellen. Außerdem behandeln wir sogar, wie Sie mit nur wenigen einfachen Anpassungen einige alternative Designs erstellen können.

Genießen!

Vorgeschmack

Hier ist ein kurzer Blick auf die Designs aus diesem Tutorial.

Das Konzept

Das Grundkonzept für dieses Tutorial besteht darin, eine Hintergrundmaske und Abschnittsteiler zu kombinieren, um noch einzigartigere Maskenformen zu erstellen.

Zuerst fügen wir eine Hintergrundmaske hinzu.

Dann fügen wir Abschnittsteiler hinzu, um die Maskenform auf kreative Weise zu ergänzen.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Gewinnen
Um auf den Download zugreifen zu können, müssen Sie sich mit dem unten stehenden Formular in unsere Divi Daily-E-Mail-Liste eintragen. Als neu
Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der
Liste, geben Sie unten einfach 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 für den Divi-Newsletter an und wir senden Ihnen per E-Mail eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer erstaunlicher und kostenloser Divi-Ressourcen, Tipps und Tricks. Folgen Sie uns und Sie werden in kürzester Zeit ein Divi-Meister sein. Wenn Sie bereits abonniert sind, geben Sie unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf Herunterladen, um auf das Layoutpaket zuzugreifen.

DOWNLOAD

Sie haben sich erfolgreich angemeldet. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugriff auf kostenlose wöchentliche Divi-Layoutpakete zu erhalten!

Gehen Sie wie folgt vor, um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren:

1. Navigieren Sie zur Divi-Bibliothek.
2. Klicken Sie oben auf der Seite auf die Schaltfläche Importieren.
3. Wählen Sie im Portabilitäts-Popup die Registerkarte Import aus
4. Wählen Sie die Download-Datei von Ihrem Computer aus (stellen Sie sicher, dass Sie die Datei zuerst entpacken und die JSON-Datei verwenden).
5. Klicken Sie dann auf die Importschaltfläche.

Anschließend ist das Abschnittslayout in Divi Builder verfügbar.

Kommen wir zum Tutorial, sollen wir?

Was Sie für den Einstieg benötigen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Design.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (Visual Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.
4. Jetzt haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen!

So kombinieren Sie Hintergrundmasken und Trennwände in Divi

1. Abschnittsgröße und Abstand hinzufügen

Zu Beginn werden wir dem vorhandenen Abschnitt im Builder Größe und Abstand hinzufügen. Wir werden das Hinzufügen einer Zeile oder eines beliebigen Inhalts zurückhalten, damit wir uns auf das Hintergrunddesign des Abschnitts konzentrieren können

Öffnen Sie die Einstellungen für den Abschnitt. Aktualisieren Sie auf der Registerkarte Design die Größe und den Abstand wie folgt:

• Mindestgröße: 50 vw
• Polsterung: 0 Pixel oben, 0 Pixel unten

Die Verwendung der VW-Längeneinheit für die Höhe mag seltsam erscheinen. Da wir jedoch die VW-Längeneinheit verwenden werden, um unsere Hintergrundelemente zu dimensionieren, stellt dies sicher, dass das Design flüssig auf verschiedene Browserbreiten skaliert wird.

2. Erstellen Sie den Hintergrundverlauf

Sobald der Abschnitt eine gewisse Höhe hat, können wir den Hintergrundverlauf zum Abschnitt hinzufügen. Dadurch erhalten wir eine Hintergrundfarbe, damit wir die Kombination aus Hintergrundmaske und Trennwand später präsentieren können.

Klicken Sie auf der Registerkarte „Inhalt“ unter den Hintergrundoptionen auf die Registerkarte „Hintergrundverlauf“. Fügen Sie dann wie folgt einen Farbverlauf hinzu:

• Farbstopp 1: #1a2a6c (bei 20 %)
• Farbstopp 2: #b21f1f (bei 60 %)
• Farbstopp 2: #fdbb2d (bei 100 %)

3. Erstellen Sie die Hintergrundmaske

Jetzt, da wir einen Farbverlauf haben, können wir eine Hintergrundmaske erstellen.

Aktualisieren Sie auf der Registerkarte Hintergrundmaske Folgendes:

• Maske: Chevrons
• Maskenfarbe: #000
• Maskentransformation: Invertiert
• Seitenverhältnis der Maske: Siehe Screenshot

4. Fügen Sie die Abschnittshintergrundteiler hinzu

Sobald unsere Maske vorhanden ist, können wir die Maskierungsform weiter ändern, indem wir Abschnittsteiler verwenden. In diesem Beispiel fügen wir oben und unten einen halbkreisförmigen Abschnittsteiler hinzu. Dadurch wird die Hintergrundmaske zusammengedrückt, damit sie eher wie ein ausgefallenes Pfeildesign aussieht.

Klicken Sie dazu auf die Registerkarte Design und fügen Sie die folgenden Trennwände hinzu:

Fügen Sie zuerst einen oberen Teiler unter der Registerkarte Oben hinzu.

• Teilerstil: Siehe Screenshot
• Teilerfarbe: #000
• Teilerhöhe: 10vw

Fügen Sie als Nächstes eine untere Trennlinie unter der Registerkarte Unten hinzu.

• Teilerstil: Siehe Screenshot
• Teilerfarbe: #000
• Teilerhöhe: 10vw
• Teiler-Flip: Vertikaler Flip

Das Ergebnis

Hier das bisherige Ergebnis.

Optimieren der Hintergrundoptionen und Trennwände für mehr Designs

Jetzt, da Sie die Grundidee haben, können wir leicht mit den Abschnittsteilern der Hintergrundoptionen herumspielen, um weitere Designs zu erstellen.

Alternatives Design Nr. 1

Für unser erstes alternatives Design werden wir die vorhandene Hintergrundmaske drehen und die halbkreisförmigen Abschnittsteiler durch Dreiecke ersetzen.

Öffnen Sie dazu die vorhandenen Abschnittseinstellungen, klicken Sie auf die Registerkarte Hintergrundmaske und aktualisieren Sie Folgendes:

• Maskentransformation: Vertikal spiegeln, drehen
• Seitenverhältnis der Maske: Siehe Screenshot

Aktualisieren Sie als Nächstes die Abschnittsteiler wie folgt:

Oberer Teiler

• Teilerstil: Siehe Screenshot
• Teilerhöhe: 13vw

Unterteiler

• Teilerstil: Siehe Screenshot
• Teilerhöhe: 13vw
• Divider Flip: deaktivieren

Das Ergebnis

Hier ist das Ergebnis.

Alternatives Design Nr. 2

Für unser zweites und letztes alternatives Design werden wir die Chevrons-Maske durch die Diagonal Bars 2-Maske ersetzen und ihr auch einen neuen oberen Teiler geben, um dem Design einen subtilen Swooshing-Effekt hinzuzufügen.

Öffnen Sie dazu die vorhandenen Abschnittseinstellungen, klicken Sie auf die Registerkarte Hintergrundmaske und aktualisieren Sie Folgendes:

• Maske: Diagonale Balken 2
• Maskentransformation: Horizontale Spiegelung
• Seitenverhältnis der Maske: Siehe Screenshot

Aktualisieren Sie als Nächstes die Abschnittsteiler wie folgt:

Oberer Teiler

• Teilerstil: Siehe Screenshot
• Divider Flip: Horizontaler Flip

Unterteiler

• Teilerstil: Keine

Das Ergebnis

Hier ist das Ergebnis.

Endgültige Ergebnisse

Um Ihnen eine bessere Vorstellung davon zu geben, wie diese Hintergründe mit einigen Inhalten aussehen werden, habe ich eine einspaltige Zeile mit einer großen Überschrift hinzugefügt, die in der Mitte des Abschnitts positioniert ist. Ich habe auch ein zusätzliches Design für jedes hinzugefügt, das ein Bild mit einem Mischmodus enthält.

Schau sie dir an!

Um die für den Inhalt und die Bilder verwendeten Einstellungen zu erkunden, können Sie das kostenlose Layout für dieses Tutorial (siehe oben) herunterladen, das jedes der Designs enthält.

Abschließende Gedanken

Das Kombinieren von Masken und Abschnittsteilern für Hintergrunddesigns eröffnet mehr Möglichkeiten zum Erstellen einzigartiger Formen für diese integrierten Masken. Fühlen Sie sich frei, verschiedene Kombinationen auf eigene Faust zu erkunden. Hoffentlich wird dies für Ihre eigene Website oder Ihr nächstes Projekt nützlich sein.

Ich freue mich darauf, von dir in den Kommentaren zu hören.

Prost!