Möchten Sie Hintergrundübergänge zwischen Elementen erstellen? Divi ?
Erstellen Sie nahtlose Hintergrunddesign-Übergänge zwischen Elementen Divi ist eine großartige Möglichkeit, das Design Ihres zu verbessern Website Divi.
Auf diese Weise können Sie einen Farbverlauf, ein Muster und eine Hintergrundmaske auf kreative Weise nahtlos zwischen einer Linie und einem Abschnitt überführen.
Sie können beispielsweise einen Muster- oder Maskenübergang in verschiedenen Farben haben, ohne die Gesamtausrichtung und das symmetrische Aussehen 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 Linie zu erstellen. Die Anwendung und Vielseitigkeit dieses Designs ist grenzenlos und bringt Divis Optionen für die Hintergrundgestaltung auf eine ganz neue Ebene!
Lassen Sie uns beginnen.
Übersicht
Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.
Hier sind einige andere Beispieldesigns, die mit nur wenigen einfachen Änderungen an Masken und Hintergrundmustern möglich sind.
Erstellen Sie eine neue Seite mit Divi Builder
Um zu beginnen, müssen Sie Folgendes tun:
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.
Erstellen eines nahtlosen Übergangs im Hintergrund zwischen einem Divi-Abschnitt und einer Linie
Erstellen einer Kopfzeile als Platzhalterinhalt
Lesen Sie auch: Divi: So erstellen Sie Tabs mit Hover-Effekt aus Zeilen
Bevor wir loslegen, müssen wir einen Header als hinzufügen Inhalt fiktiv. 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 Text in H1-Größe hinzu.
Unter der Registerkarte Design, aktualisieren Sie das Kopfzeilentextdesign wie gewünscht.
- Schriftart: Roboto Condensed
- Schriftdicke: fett
- Stil: TT
- Textausrichtung: Zentriert
- Textfarbe: #000000
- Überschriftentextgröße: 4vw
- Buchstabenabstand: 0.1em
- Zeilenhöhe: 1.3 m
Abschnitt Hintergrunddesign
Polsterung zum Abschnitt hinzugefügt
Sobald die gefälschte Kopfzeile vorhanden ist, öffnen Sie die Abschnittseinstellungen und aktualisieren Sie den Abstand wie folgt:
- Polsterung (oben und unten): 15vw
Hintergrundverlauf zum Abschnitt hinzugefügt
Jetzt, da wir mehr Platz zum Arbeiten haben, sind wir bereit, unser Hintergrunddesign zum Abschnitt hinzuzufügen. Unter der Registerkarte Hintergrundverlauf, fügen Sie die folgenden Verlaufspunkte hinzu:
- Gradientenstopps:
- 0 %: #4f0f75 (bei 0 %)
- 25 %: #2843c9 (bei 25 %)
- 50 %: #4ae2e0 (bei 50 %)
- 75 %: #3881ff (bei 75 %)
- 100 %: #4f0f75 (bei 100 %)
Hinzufügen eines Hintergrundmusters zum Abschnitt
Unter der Registerkarte Hintergrundmuster, aktualisieren Sie Folgendes:
- Muster: Diagonale Streifen
- Musterfarbe: rgba (79,15,117,0.23)
- Transformieren: Rotieren
- Mustergröße: Benutzerdefinierte Größe
- Breite: 7vw
- Höhe: 5vw
- Ursprung der Musterwiederholung: Mitte
Hinweis: Verwenden Sie für die Breite und Höhe des Musters unbedingt die VW-Längeneinheit. 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
Unter der Registerkarte Hintergrundmaske, fügen Sie Folgendes hinzu:
- Hintergrundmaske: Layer Blob
- Maskenfarbe: rgba(0,0,0,0.7)
- Maskenbreite: 100vw
- Position: Mitte
Hinweis: Genau wie beim Muster müssen wir die Maske mit der VW-Längeneinheit dimensionieren. Wir müssen auch der Maske eine zentrale Position geben.
Linie Hintergrunddesign
Kopieren Sie den Abschnittshintergrund und fügen Sie ihn in den Zeilenhintergrund ein
Um den Designprozess für den Linienhintergrund zu beschleunigen, kopieren Sie die Abschnittshintergrundeinstellungen.
Fügen Sie dann den Hintergrund in die vorhandene Zeile ein.
An dieser Stelle sieht man bereits, wie das Hintergrundmuster und die Maske auf der Linie nahtlos in den Hintergrund des Abschnitts übergehen.
Es sieht so aus, als hätte die Linie 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 Zeilengröße und Polsterung 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
- Maximale Breite: 75 VW
- Polsterung (oben, unten, links und rechts): 10vw
Passen Sie die Gradientenstopps auf der Linie an
Als Nächstes müssen wir die Farbverlaufsstopps auf dem Linienhintergrund anpassen, um einen nahtlosen Übergang in den Hintergrundverlauf des Abschnitts zu ermöglichen.
Unter der Registerkarte Hintergrundverlauf, behalten wir die drei mittleren Farbverlaufspunkte, die vom Abschnittshintergrund geerbt wurden) und entfernen den ersten und letzten Farbverlaufsstopp.
Stellen Sie dann den ersten Anschlag auf 0 % und den dritten Anschlag auf 100 % ein. Sobald Sie fertig sind, sollten Sie die folgenden Farbverläufe haben.
- Gradientenstopps
- 0 %: #2843c9
- 50 %: #4ae2e0
- 100%: #3881ff
Kästchenschatten zur Linie hinzufügen
Um dem Design ein wenig Auftrieb zu verleihen und den nahtlosen Übergang des Hintergrunds hervorzuheben, können wir der Reihe einen Kastenschatten hinzufügen.
- Box Shadow: siehe Screenshot
- Vertikale Position: 0px
- Box Shadow Blur Stärke: 4vw
- Schattenfarbe: rgba(0,0,0,0.5)
Passen Sie die Farbe des Linienhintergrundmusters an
Jetzt, da wir alle Hintergrundelemente an Ort und Stelle haben, können wir damit beginnen, die Farben für ein kreativeres Design anzupassen.
Unter der Option Hintergrundmuster Zeile, aktualisieren Sie Folgendes:
- Musterfarbe: rgba (255,255,255,0.23)
Passen Sie die Hintergrundmaskenfarbe der Linie an
Wir können auch die Maskenfarbe für die Linie aktualisieren, um das Design wirklich hervorzuheben.
Unter der Registerkarte Hintergrundmaske, aktualisieren Sie Folgendes:
- Maskenfarbe: #ffffff
- Maskentransformation: invertiert
Endergebnis
Lassen Sie uns das Endergebnis sehen.
Laden Sie DIVI jetzt herunter!!!
Weitere Möglichkeiten
Hier sind einige andere Beispieldesigns, die mit nur wenigen einfachen Änderungen an Masken und Hintergrundmustern möglich sind.
Siehe auch: Divi: So verwenden Sie den "Gradient Builder", um Ihre Bilder zu verschönern
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
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 der Breite des Browser-Darstellungsbereichs entspricht (von einer zentrierten Position auf der Seite). Sobald dies erledigt ist, können wir dasselbe einzeilige Hintergrunddesign verwenden. Danach haben wir nur noch ein paar Änderungen an Farbverlauf und Farben für ein tolles Design.
Hoffentlich wird diese Technik eine weitere nützliche Designfähigkeit für zukünftige Projekte hinzufügen.
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.
...
