So erstellen Sie nahtlose Hintergrunddesign-Übergänge zwischen Divi-Elementen

Das Erstellen nahtloser Übergänge im Hintergrunddesign zwischen Divi-Elementen ist eine großartige Möglichkeit, das Design Ihrer Divi-Website zu verbessern. Die Idee ist, passende Hintergrunddesigns (sowohl für eine Reihe als auch für einen Abschnitt) zu erstellen, die die gleiche Größe und Position in Bezug auf die Browserbreite haben (unter Verwendung von vw-Längeneinheiten). Auf diese Weise können Sie einen Hintergrundverlauf, ein Muster und eine Maske auf kreative Weise nahtlos zwischen einer Reihe und einem Abschnitt überführen. Sie könnten beispielsweise ein Muster oder eine Maske in verschiedene Farben übergehen lassen, ohne die Gesamtausrichtung und den symmetrischen Aspekt des Designs zu verlieren.

In diesem Lernprogramm verwenden wir die integrierten Hintergrunddesignoptionen von Divi, um einen nahtlosen Hintergrunddesignübergang zwischen einem Divi-Abschnitt und einer Reihe zu erstellen. Die Anwendung und Vielseitigkeit dieses Designs sind grenzenlos und bringen Divis Hintergrunddesignoptionen auf eine ganz neue Ebene!

Lass uns anfangen.

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Hier sind ein paar weitere Beispieldesigns, die mit nur wenigen einfachen Änderungen an den Hintergrundmasken und -mustern möglich sind.

Laden Sie das Layout KOSTENLOS herunter

Um das Design aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugriff auf den Download zu erhalten, müssen Sie sich mit dem unten stehenden Formular in unsere Divi Daily-E-Mail-Liste eintragen. 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 unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf „Herunterladen“. 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“.

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

Erstellen eines nahtlosen Hintergrunddesign-Übergangs zwischen einem Divi-Abschnitt und einer Reihe

Teil 1: Erstellen einer Überschrift als Mock-Content

Bevor wir mit der Gestaltung unserer Hintergründe beginnen, müssen wir eine Überschrift als Scheininhalt hinzufügen. Fügen Sie zunächst eine einspaltige Zeile zum Standardabschnitt der Seite hinzu.

Fügen Sie dann der Zeile einen Textbaustein hinzu.

Fügen Sie dem Hauptinhalt eine H1-Überschrift hinzu.

Aktualisieren Sie auf der Registerkarte „Design“ das Design des Überschriftentexts nach Belieben. Für dieses Design ist es hilfreich, eine VW-Längeneinheit für die Größe des Überschriftentexts hinzuzufügen, damit er sich fließend mit dem Rest des Designs skalieren lässt.

2. Gestaltung des Schnitthintergrunds

Hinzufügen von VW Padding zum Abschnitt

Sobald die Scheinüberschrift vorhanden ist, öffnen Sie die Abschnittseinstellungen und aktualisieren Sie den Abstand wie folgt:

• Polsterung: 15vw oben, 15vw unten

Hinzufügen des Hintergrundverlaufs zum Abschnitt

Jetzt, da wir mehr Platz zum Arbeiten haben, können wir unser Hintergrunddesign dem Abschnitt hinzufügen. Fügen Sie auf der Registerkarte Verlauf die folgenden Verlaufsstopps hinzu:

• Gradient Stop 1: #4f0f75 (bei 0%)
• Gradient Stop 2: #2843c9 (bei 25 %)
• Gradient Stop 3: #4ae2e0 (bei 50 %)
• Gradient Stop 4: #3881ff (bei 75%)
• Gradient Stop 5: #4f0f75 (bei 100 %)

Hinzufügen eines Hintergrundmusters zum Abschnitt

Aktualisieren Sie auf der Registerkarte Muster Folgendes:

• Muster: Diagonale Streifen
• Musterfarbe: rgba (79,15,117,0,23)
• Mustertransformation: Drehen
• Mustergröße: Benutzerdefinierte Größe
• Musterbreite: 7vw
• Musterhöhe: 5vw
• Ursprung der Musterwiederholung: Mitte

Hinweis: Achten Sie darauf, die VW-Längeneinheit für die Musterbreite und -höhe zu verwenden. Stellen Sie außerdem sicher, dass der wiederholte Ursprung auf „Mitte“ eingestellt ist. Dadurch bleibt das Hintergrundmuster an der gleichen Stelle wie das Hintergrundmuster, das wir später der Reihe hinzufügen werden.

Hinzufügen einer Hintergrundmaske zum Abschnitt

Fügen Sie auf der Registerkarte Maske Folgendes hinzu:

• Hintergrundmaske: Layer Blob
• Maskenfarbe: rgba(0,0,0,0.7)
• Maskengröße: 100vw
• Maskenposition: Mitte

Hinweis: Genau wie beim Schnittmuster müssen wir der Maske eine Größe mit der VW-Längeneinheit geben. Wir müssen der Maske auch eine Mittelposition geben.

3. Entwerfen des Zeilenhintergrunds

Kopieren Sie den Abschnittshintergrund und fügen Sie ihn in den Zeilenhintergrund ein

Um das Entwerfen des Zeilenhintergrunds zu beschleunigen, kopieren Sie die Hintergrundeinstellungen des Abschnitts.

Fügen Sie dann den Hintergrund in die vorhandene Zeile ein.

An dieser Stelle können Sie bereits sehen, wie das Hintergrundmuster und die Maske auf der Zeile nahtlos in den Abschnittshintergrund übergehen. Es sieht so aus, als hätte die Zeile einen transparenten Hintergrund, aber es handelt sich tatsächlich um dasselbe Muster und dieselbe Maske, die im Abschnitt mit derselben Größe und Position verwendet werden.

Passen Sie Größe und Polsterung der Zeile mit VW an

Als nächstes müssen wir unserer Zeile eine benutzerdefinierte Breite unter Verwendung der VW-Längeneinheit geben. Aktualisieren Sie Folgendes:

• Breite: 75vw
• Max-Breite: 75vw
• Polsterung: 10vw oben, 10vw unten, 10vw links, 10vw rechts

Übersicht über Abstände und Größenangaben in VW-Längeneinheiten

Bisher haben wir Abstands- und Positionswerte in unserem Layout mit der VW-Längeneinheit hinzugefügt. Hier ist eine kurze Darstellung der aktuell verwendeten Werte.

Bisher haben wir einen nahtlosen Übergang zwischen dem Zeilenhintergrund und dem Abschnittshintergrund für die Muster und Masken. Als Nächstes aktualisieren wir den Hintergrundverlauf der Zeile, sodass er ebenfalls nahtlos ist.

Passen Sie die Verlaufsstopps in der Reihe an

Als Nächstes müssen wir die Farbverlaufsstopps auf dem Zeilenhintergrund anpassen, um einen nahtlosen Übergang in den Hintergrundverlauf des Abschnitts zu ermöglichen. Auf der Registerkarte „Farbverlauf“ behalten wir die drei mittleren Farbverlaufsstopps bei, die vom Abschnittshintergrund geerbt wurden, und löschen den ersten und letzten Farbverlaufsstopp. Positionieren Sie dann den ersten Anschlag auf 0 % und den dritten Anschlag auf 100 %. Sobald Sie fertig sind, sollten Sie die folgenden Farbverläufe haben.

• Gradient Stop 1: #2843c9 (bei 0%)
• Gradient Stop 2: #4ae2e0 (bei 50 %)
• Gradient Stop 3: #3881ff (bei 100%)

Rahmenschatten zur Reihe hinzufügen

Um dem Design etwas Höhe zu verleihen und den nahtlosen Übergang des Hintergrunds hervorzuheben, können wir der Reihe einen Kastenschatten hinzufügen.

• Box Shadow: siehe Screenshot
• Vertikale Position des Box-Schattens: 0px
• Box Shadow Blur Stärke: 4vw
• Box-Schattenfarbe: rgba(0,0,0,0.5)

Passen Sie die Farbe des Zeilenhintergrundmusters an

Jetzt, da wir alle Hintergrundelemente an der richtigen Stelle haben, können wir damit beginnen, die Farben für ein kreativeres Design anzupassen. Aktualisieren Sie unter der Musteroption für die Zeile Folgendes:

• Musterfarbe: rgba (255,255,255,0,23)

Passen Sie die Hintergrundmaskenfarbe der Zeile an

Wir können auch die Maskenfarbe für die Reihe aktualisieren, um das Design wirklich hervorzuheben! Aktualisieren Sie auf der Registerkarte „Maske“ Folgendes:

• Maskenfarbe: #ffffff
• Maskentransformation: Invertiert

Endergebnis

Schauen wir uns das Endergebnis an.

Weitere Möglichkeiten

Hier sind ein paar weitere Beispieldesigns, die mit nur wenigen einfachen Änderungen an den Hintergrundmasken und -mustern möglich sind.

Abschließende Gedanken

Der Schlüssel zum Erstellen nahtloser Übergänge im Hintergrunddesign in Divi besteht darin, diese VW-Längeneinheiten mit Bedacht zu verwenden. Zuerst müssen wir ein Abschnittshintergrunddesign erstellen, das mit der Breite des Browser-Ansichtsfensters skaliert (von einer zentrierten Position auf der Seite). Sobald dies erledigt ist, können wir dasselbe Hintergrunddesign für eine Reihe verwenden. Danach müssen wir nur noch ein paar Anpassungen an Farbverlauf und Farben vornehmen, um ein tolles Design zu erhalten. Hoffentlich wird diese Technik eine weitere nützliche Designfähigkeit für zukünftige Projekte hinzufügen

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

Prost!