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.
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.
Als Nächstes fügen wir Abschnittsteiler hinzu, um die Form der Maske kreativ zu vervollständigen.
Erstellen Sie eine neue Seite mit Divi Builder
Gehen Sie im WordPress-Dashboard zu Seiten> Neu hinzufügen um eine neue Seite zu erstellen.
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)
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.
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
Unterteiler
- Teilerstil: Siehe Screenshot
- Höhe: 13 vw
- Teiler Flip: désactiver
Das Ergebnis
Hier ist das Ergebnis.
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.
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
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.
...