Möchten Sie die Hintergrundmasken und das Trennzeichen kombinieren? Divi erhabene und einzigartige Hintergründe haben?

Die Kombination von Hintergrundmasken mit Abschnittsteilern in Divi fügt einem bereits mächtigen Arsenal an Optionen für die Hintergrundgestaltung eine weitere Ebene der Kreativität hinzu. 

Zusätzlich zu den Hintergrundoptionen ermöglichen Abschnittsteiler den Benutzern auch, ihre Hintergrunddesigns zu verbessern.

In diesem Tutorial zeigen wir Ihnen, wie Sie Hintergrundmasken mit Abschnittstrennern kombinieren Divi. Wir geben Ihnen Schritt-für-Schritt-Anleitungen, wie Sie mit dieser Technik ein Hintergrunddesign für einen Divi-Bereich erstellen. 

Außerdem erklären wir Ihnen sogar, wie Sie mit nur wenigen einfachen Änderungen alternative Designs erstellen können.

Fangen wir an!

Übersicht

Hier ist eine Vorschau der Zeichnungen in diesem Tutorial.

Kombinieren Sie Hintergrundmasken und Divi-Trennzeichen
Kombinieren Sie Hintergrundmasken und Divi-Trennzeichen
Kombinieren Sie Hintergrundmasken und Divi-Trennzeichen

Das Konzept

Das Grundkonzept dieses Tutorials besteht darin, eine Hintergrundmaske und Abschnittsteiler zu kombinieren, um noch einzigartigere Maskenformen zu erstellen.

Zuerst fügen wir eine Hintergrundmaske hinzu.

Kombinieren Sie Hintergrundmasken und Divi-Trennzeichen

Als Nächstes fügen wir Abschnittsteiler hinzu, um die Form der Maske kreativ zu vervollständigen.

Kombinieren Sie Hintergrundmasken und Divi-Trennzeichen

Erstellen Sie eine neue Seite mit Divi Builder

Gehen Sie im WordPress-Dashboard zu Seiten> Neu hinzufügen um eine neue Seite zu erstellen.

Divi-Linien in Tabulatoren umgewandelt

Geben Sie ihm einen für Sie sinnvollen Titel und klicken Sie darauf Verwenden Sie Divi Builder

klicken Sie dann auf Beginnen Sie mit dem Bauen (Von Grund auf neu erstellen)

Divi-Linien in Tabulatoren umgewandelt

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Kombinieren Sie Hintergrundmasken und Trennwände in Divi

Abschnittsgröße und Abstand hinzufügen

Zunächst fügen wir die Größe und den Abstand zum vorhandenen Abschnitt im Konstruktor hinzu. Wir werden das Hinzufügen einer oder aller Zeilen unterbrechen Inhalt So können wir uns auf die Gestaltung des Hintergrunds des Abschnitts konzentrieren.

Bereichseinstellungen öffnen. Unter der Registerkarte Design, aktualisieren Sie die Größe und den Abstand wie folgt:

  • Mindesthöhe: 50 vw
  • Polsterung (oben und unten): 0px

Erstellen Sie den Hintergrundverlauf

Sobald der Abschnitt eine bestimmte Höhe hat, können wir den Hintergrundverlauf zum Abschnitt hinzufügen.

Unter der Registerkarte InhaltKlicken Sie auf die Registerkarte Hintergrundverlauf unter Hintergrundoptionen. Fügen Sie dann wie folgt einen Farbverlauf hinzu:

  • Gradientenstopps
    •  20 %: #1a2a6c
    • 60 %: #b21f1f
    • 100 %: #fdbb2d

Erstellen Sie die Hintergrundmaske

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

Unter der Registerkarte Hintergrundmaske, aktualisieren Sie Folgendes:

  • Maske: Fischgrät
  • Maskenfarbe: #000000
  • Transformieren: Invertiert
  • Seitenverhältnis der Maske: siehe Screenshot

Abschnittstrenner hinzufügen (Teiler)

Wenn unsere Maske vorhanden ist, können wir die Form der Maske mithilfe von Abschnittsteilern weiter modifizieren. 

In diesem Beispiel fügen wir oben und unten einen halbkreisförmigen Abschnittsteiler hinzu. Dadurch wird die Hintergrundmaske so komprimiert, dass sie eher wie ein ausgefallenes Pfeildesign aussieht.

Klicken Sie dazu auf die Registerkarte Design und fügen Sie die folgenden Trennzeichen hinzu:

Fügen Sie zuerst ein oberes Trennzeichen unter der Registerkarte hinzu Top.

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

Fügen Sie als Nächstes ein unteres Trennzeichen unter der Registerkarte hinzu Boden.

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

Das Ergebnis

Hier ist das bisherige Ergebnis.

Kombinieren Sie Hintergrundmasken und Divi-Trennzeichen

Passen Sie Hintergrundoptionen und Trennlinien für mehr Design an

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

Siehe auch: Divi: So verwenden Sie den "Gradient Builder", um Ihre Bilder zu verschönern

Alternatives Design Nr. 1

Für unser erstes alternatives Design drehen wir die vorhandene Hintergrundmaske. Als nächstes ersetzen wir die halbkreisförmigen Abschnittsteiler durch Dreiecke.

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

  • Maskentransformation: vertikales Flip, Rotation
  • Seitenverhältnis der Maske: siehe Screenshot

Aktualisieren Sie als Nächstes die Abschnittstrennzeichen wie folgt:

Oberer Teiler

  • Teilerstil: Siehe Screenshot
  • Teilerhöhe: 13 vw
Divi-Trennzeichen

Unterteiler

  • Teilerstil: Siehe Screenshot
  • Höhe: 13 vw
  • Teiler Flip: désactiver

Das Ergebnis

Hier ist das Ergebnis.

Kombinieren Sie Hintergrundmasken und Divi-Trennzeichen

Alternatives Design Nr. 2

Für unser zweites und letztes alternatives Design werden wir die Maske ersetzen Sparren durch die Maske Diagonalstäbe 2 und gib ihm auch einen neuen oberen Teiler.

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

  • Maske: Diagonale Balken 2
  • Maskentransformation: horizontaler Flip
  • Seitenverhältnis: siehe Screenshot

Aktualisieren Sie als Nächstes die Abschnittstrennzeichen wie folgt:

Oberer Teiler

  • Teilerstil: Siehe Screenshot
  • Teiler-Flip: Horizontaler Flip

Unterteiler

  • Teilerstil: Keine

Das Ergebnis

Hier ist das Ergebnis.

Kombinieren Sie Hintergrundmasken und Divi-Trennzeichen

Endergebnisse

Um Ihnen eine bessere Vorstellung davon zu geben, wie diese Hintergründe aussehen werden Inhalthaben wir einer Spalte eine Zeile mit einem Titel hinzugefügt.

Lesen Sie auch: Divi: So erstellen Sie eine klebrige Hintergrundmaske

Kombinieren Sie Hintergrundmasken und Divi-Trennzeichen
Kombinieren Sie Hintergrundmasken und Divi-Trennzeichen
Kombinieren Sie Hintergrundmasken und Divi-Trennzeichen

Laden Sie DIVI jetzt herunter!!!

Zusammenfassung

Die Kombination von Masken und Abschnittsteilern für Hintergrunddesigns eröffnet mehr Möglichkeiten, einzigartige Formen für diese integrierten Masken zu erstellen. 

Fühlen Sie sich frei, verschiedene Kombinationen auf eigene Faust zu erkunden. 

Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.

Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.

Zögern Sie nicht, auch unseren Leitfaden zu konsultieren WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...