10 Hintergrunddesign-Tricks jetzt mit den neuen Hintergrundeinstellungen von Divi möglich

Seit der Veröffentlichung von Divis neuem Interface für Hintergrundoptionen ist Divi noch leistungsfähiger geworden. Die neuen Features haben viele neue Gestaltungsmöglichkeiten eröffnet. Heute werde ich einige neue Design-Tricks vorstellen, die Sie vielleicht noch nicht kennen, und ich kann Sie hoffentlich dazu inspirieren, einige tolle Hintergrunddesigns zu erstellen.

Es gibt unzählige Kombinationen und Mischungen von Hintergrunddesigns, die Sie mit dem Visual Builder erstellen können. Die 10 Tricks, die ich für diesen Beitrag festgelegt habe, kratzen nur an der Oberfläche, aber sie sollen Sie in verschiedene Konzepte einführen und Ihr Interesse wecken. Die meisten dieser Designtricks werden mit den neuen Hintergrundoptionen wie den neuen Verlaufshintergrundoptionen und dem Kombinieren von Hintergrundbildern mit Verlaufsfarben ausgeführt.

Ich muss Sie jedoch warnen. Sobald Sie anfangen, sich mit den Hintergrundoptionen zu beschäftigen, werden Sie möglicherweise nie mehr aufhören! Es macht so viel Spaß. Naja, zumindest war es bei mir so.

Genießen.

Hier ist ein kleiner Einblick in die Design-Tricks

So folgen Sie diesem Beitrag

Anstatt jedes Mal bei Null anfangen zu müssen, wenn ich einen neuen Design-Trick erkläre, habe ich für die meisten das gleiche Beispieldesign verwendet und diesem Design verschiedene Tricks hinzugefügt. Dies bedeutet, dass die meisten Beispiele erfordern, dass Sie einen vorherigen Designtrick abgeschlossen haben, bevor Sie den neuen Trick anwenden können. Trick #1-9 folgen alle dem gleichen grundlegenden Setup und erfordern Trick #1 als Voraussetzung. Wenn Sie also die Funktionen testen, würde ich vorschlagen, mit Trick Nr. 1 zu beginnen.

10 Tricks zur Hintergrundgestaltung mit Divi

Abonnieren Sie unseren Youtube-Kanal

Trick #1: Diagonale Überlagerung

Fügen Sie einen Abschnitt mit voller Breite hinzu und fügen Sie dann ein Headermodul mit voller Breite ein.

Aktualisieren Sie dann die Einstellungen des Kopfmoduls wie folgt:

Inhaltsoptionen

Titel: [Titel eingeben]
Unterüberschrift: [Unterüberschrift eingeben]
Logo-Bild-URL: [Logo eingeben]
Hintergrund-Verlaufsfarben: rgba(12,113,195,0.55), rgba(255,255,255,0)
Verlaufstyp: Linear
Steigungsrichtung: 135deg
Startposition: 60%
Endposition: 60% (alles 60% oder weniger funktioniert)

Da der Farbverlauf an derselben Stelle beginnt und endet, tritt im Grunde überhaupt kein Farbverlaufseffekt auf. Das Ergebnis sind also die beiden Farben auf jeder Seite des 60%-Markers. Dies in Kombination mit dem Winkel der Verlaufsrichtung erzeugt den Effekt.

Designoptionen

Textfarbe: Hell
Titelschriftart: Standard, Fett (B), Großbuchstaben (TT)
Titelschriftgröße: 40px
Untertitel-Schriftgröße: 24px

Erweiterte Optionen

Fügen Sie unter Benutzerdefiniertes CSS im Feld Hauptelement das folgende CSS hinzu:

Padding: 150px 0;

Dies dient nur dazu, oben und unten am Kopfmodul etwas zusätzliche Polsterung hinzuzufügen

Einstellungen speichern

Jetzt ist es an der Zeit, Ihrem Abschnitt in voller Breite einen Hintergrund hinzuzufügen. Gehen Sie zu den Abschnittseinstellungen für volle Breite, indem Sie auf das Zahnradsymbol im violetten Kontrollkästchen klicken.

Aktualisieren Sie dann die Inhaltsoptionen der Abschnittseinstellungen wie folgt:

Hintergrundbild: [Geben Sie hier das Hintergrundbild ein. Es sollte mindestens 1960px breit sein. Ich habe dieses Bild von unsplash.com ausgewählt und so beschnitten, dass der herausragende Abschnitt des Bildes auf der rechten Seite ist.]
Verwenden Sie den Parallax-Effekt: JA (dies ist optional, aber ich denke, es funktioniert gut mit der diagonalen Überlagerung)
Parallaxenmethode: Echte Parallaxe

Das ist es! Sie können die Deckkraft der Verlaufsfarbe und den Grad der Verlaufsrichtung nach Ihren Wünschen anpassen.

Wir sind gut gestartet, denke ich. Kommen wir zum zweiten Trick.

Trick #2: Überlagern von diagonalen Überlagerungen

Dieser Design-Trick ist eine Fortsetzung von Trick Nr. 1, also stellen Sie sicher, dass Sie Trick Nr. 1 abgeschlossen haben, bevor Sie fortfahren.

In Trick Nr. 1 haben wir mit einer diagonalen Überlagerung aufgehört, indem wir die Hintergrundverlaufsoption im Fullwidth Header Module verwendet haben.

Fügen Sie im gleichen Beispiel einen zusätzlichen Hintergrundverlauf zum Abschnitt in voller Breite hinzu. Wir haben bereits ein Hintergrundbild für diesen Abschnitt, aber mit den neuen Optionen von Divi können wir Verlaufsfarben mit Ihrem Hintergrundbild kombinieren und sie dann mit bestimmten Effekten mischen.

Gehen Sie zu den Einstellungen für den Abschnitt "Vollbreite" und aktualisieren Sie die folgenden Inhaltsoptionen :

Hintergrund-Verlaufsfarben: rgba(131,0,233,0.38), rgba(255,255,255,0)
Verlaufstyp: Linear
Verlaufsrichtung: 135deg (entspricht der anderen Verlaufsrichtung in Ihrem Header-Modul)
Startposition: 38%
Endposition: 38%

Klicken Sie nun auf das Hintergrundbild-Symbol und ändern Sie Folgendes:

Verwenden Sie den Parallax-Effekt: Nein
Hintergrundbild-Mischung: Multiplizieren

Jetzt haben Sie 2 überlappende diagonale Overlays, die leicht für ein einzigartiges Hintergrunddesign angepasst werden können.

Trick #3: Kreisüberlagerung

Dieser Design-Trick ist eine Fortsetzung von Trick Nr. 1, also stellen Sie sicher, dass Sie Trick Nr. 1 abgeschlossen haben, bevor Sie fortfahren.

Jetzt werden wir diese diagonale Überlagerung von Trick Nr. 1 in eine Kreisüberlagerung umwandeln. Gehen Sie dazu zu den Fullwidth Module Settings und aktualisieren Sie Folgendes:

Inhaltsoptionen

Hintergrundverlaufstyp: Radial
Radiale Richtung: Mitte
Startposition: 30%
Endposition: 30%

Designoptionen

Text- und Logoausrichtung: Mitte

Sehen Sie sich nun den neuen Header-Hintergrund an.

Dieser Trick erstellt toll aussehende Header oder Call-to-Actions. Die Größe des Kreis-Overlays lässt sich leicht anpassen und reagiert gut auf unterschiedliche Bildschirmgrößen. Im Moment verwende ich eine halbtransparente Verlaufsfarbe über einem Hintergrundbild, aber das würde ohne Hintergrundbild großartig aussehen.

Hier ist ein Beispiel dafür, wie es ohne Hintergrundbild und mit dunklerer Textfarbe aussehen würde.

Trick #4: Kreise überlagern, um einen Kreisrand zu erstellen

Dies ist eine Fortsetzung von Trick Nr. 3, wo wir mit dem Hinzufügen einer Kreisüberlagerung zu einem Header-Modul mit voller Breite aufgehört haben. Sobald Ihr Kreis-Overlay vorhanden ist, können wir ein zweites Kreis-Overlay hinzufügen, das als Rahmen für das erste dient. Wir tun dies, indem wir dem Fullwidth-Abschnitt, der sich hinter dem Fullwidth-Header-Modul befindet, einen weiteren Hintergrundverlauf hinzufügen.

Gehen Sie zu den Einstellungen des Abschnitts Vollbreite und aktualisieren Sie Folgendes:

Inhaltsoptionen

Auf der Registerkarte Hintergrundbild:

Verwenden Sie den Parallax-Effekt: NEIN
Hintergrundbild-Mischung: Multiplizieren

Auf der Registerkarte Hintergrundverlauf:

Hintergrundfarben: rgba(0,0,0,0.45), rgba(255,255,255,0)
Hintergrundverlaufstyp: Radial
Radiale Richtung: Mitte
Startposition: 34%
Endposition: 34%

Einstellungen speichern

Das ist es.

Sie können auch die Größe Ihres Hintergrundverlaufskreises einfach ändern, indem Sie den Prozentsatz der Startposition anpassen.

Trick #5: Inverse Kreisüberlagerung

Dies ist eine Fortsetzung von Trick #3, die mit einem Kreis-Overlay im Header-Modul in voller Breite aufgehört hat. Im Moment ist der Kreis halbtransparent blau und der Rest des Hintergrundbildes hat überhaupt keine Verlaufsüberlagerungsfarbe. Für diesen Trick schalte ich dies aus und kehre die Kreisüberlagerung um, sodass die halbtransparente blaue Verlaufsüberlagerung den Kreis umgibt und innerhalb des Kreises das Hintergrundbild dahinter freigibt.

Gehen Sie dazu zu den Fullwidth Header Settings und aktualisieren Sie Folgendes:

Inhaltsoptionen

Hintergrundfarben: rgba(255,255,255,0), rgba(12,113,195,0.79)

Hinweis: Alles, was Sie hier wirklich tun, ist, die Farben links und rechts zu vertauschen. Jetzt ist die transparente Farbe das, was innerhalb des Kreises angezeigt wird, und der blaue Farbverlauf umgibt ihn. Ich würde die Deckkraft des Blaus erhöhen, damit es etwas dunkler wird.

Hör zu…

Trick #6: Inverse Kreisüberlagerung mit Videohintergrund

Dies ist eine Fortsetzung von Trick #5, die uns eine inverse Kreisüberlagerung mit einem umgebenden blauen Hintergrund hinterließ. Derzeit zeigt der Kreis ein Hintergrundbild dahinter. Sie können ganz einfach einen Videohintergrund hinzufügen, um hinter diesem Kreis-Overlay zu sitzen. Ich würde vorschlagen, ein Video zu verwenden, das nicht zu ablenkend ist. Achten Sie auch bei der Verwendung von Videos darauf, dass die Dateigröße gering ist, damit die Ladezeit Ihrer Seite nicht leidet.

Um das Hintergrundbild durch ein Video zu ersetzen, gehen Sie zu den Einstellungen für den Bereich Vollbreite, klicken Sie auf das
Hintergrundvideosymbol und fügen Sie Ihr Video hinzu.

Gehen Sie nun zu den Fullwidth-Header-Einstellungen und aktualisieren Sie Folgendes:

Inhaltsoptionen

Hintergrund-Verlaufsfarben: rgba (12,113,195,0.67), #333333

Mit den neuen Verlaufsfarben ist das Hintergrundvideo nur innerhalb des Kreises sichtbar. Und die sich überlagernden Farben lassen den Text wirklich knallen.

Trick #7: Außermittiges Inverses Kreis-Overlay

Dies ist eine Fortsetzung von Trick #5, die uns eine inverse Kreisüberlagerung hinterließ. Wenn Sie zu den Header-Einstellungen mit voller Breite zurückkehren, können Sie die radiale Richtung an verschiedene Einstellungen anpassen, um ein anderes Aussehen für Ihren Header zu erstellen.

Gehen Sie zu Fullwidth Header-Einstellungen und aktualisieren Sie Folgendes:

Inhaltsoptionen

Radiale Richtung: Rechts

Designoptionen

Text- und Logoausrichtung: Links

Hier ist das Endergebnis und einige Beispiele für verschiedene radiale Richtungen:

Diese Beispiele brauchen natürlich etwas Arbeit, aber Sie bekommen die Idee.

Trick #8: Verwenden von Farbverläufen für Schatteneffekte

Dieser Trick ist vielleicht nicht umwerfend, aber äußerst nützlich. Für diejenigen von uns, die sich nicht mit einem Bildbearbeitungsprogramm wie Photoshop herumschlagen möchten, um Ihren Bildern Schatten hinzuzufügen, ist dies für Sie.

Dies ist eine Fortsetzung von Trick #1, der mit einer diagonalen Überlagerung unter Verwendung der Hintergrundverlaufsoption im Fullwidth Header Module aufgehört hat. Ändern wir nun die halbtransparente blaue Überlagerung in eine dunkle Schattierung, die links im Bild beginnt und nach rechts allmählich ausblendet. Auf diese Weise bleibt der Hauptteil des Bildes auf der rechten Seite unberührt und der dunkle Schatten auf der linken Seite trägt zur besseren Lesbarkeit des Textes bei.

Um den Schatteneffekt hinzuzufügen, gehen Sie zu den Fullwidth Header Settings und aktualisieren Sie Folgendes:

Inhaltsoptionen

Hintergrundfarben: rgba(0,0,0,0.55), rgba(0,0,0,0)
Verlaufsrichtung: 90deg
Startposition: 38%
Endposition: 85%

Hier ist das Ergebnis.

Trick Nr. 9: Hintergrundbild-Mischung

Die neuen Hintergrundoptionen von Divi umfassen CSS-Mischmodi zum Anpassen von Bildern. Das Erkunden der verschiedenen Bildmischungen macht viel Spaß und führt zu überraschenden Designs. Für diejenigen unter Ihnen, die keine Designer sind, müssen Sie die Definition von Sättigung oder Helligkeit nicht kennen, um diese coolen Optionen zu nutzen. Sie müssen eine Hintergrundfarbe oder einen Farbverlauf in Kombination mit dem Hintergrundbild festlegen, um alle coolen Effekte zu sehen (es funktioniert nicht wirklich mit einem Hintergrundbild). Spielen Sie dann herum, bis Sie das gewünschte Aussehen erhalten. Die Ergebnisse können Sie überraschen.

In diesem Beispiel fahre ich mit Trick Nr. 1 fort, der mit einer diagonalen Überlagerung unter Verwendung der Hintergrundverlaufsoption im Fullwidth Header Module aufgehört hat.

Gehen Sie zu den Fullwidth Header Settings und löschen Sie die Hintergrundverläufe unter den Inhaltsoptionen.

Einstellungen speichern

Gehen Sie nun zu den Abschnittseinstellungen und aktualisieren Sie Folgendes:

Inhaltsoptionen

Hintergrund-Verlaufsfarben: rgba(0,0,0,0.76), #0c71c3
Verlaufsrichtung: 90deg
Startposition: 50%
Endposition: 50%

Sie können noch keine Änderungen sehen. Das ist okay. Gehen Sie zur Registerkarte Hintergrundbild und aktualisieren Sie Folgendes:

Verwenden Sie den Parallax-Effekt: NEIN
Hintergrundbild-Mischung: Hartes Licht

Das ist es. Sehen Sie sich das Ergebnis an.

Hinweis: Die hier verwendeten Farben erzeugen je nach verwendetem Hintergrundbild unterschiedliche Effekte. Ich schlage also vor, mit den Farben und Mischoptionen herumzuspielen, bis Sie eine erhalten, die Ihnen gefällt.

Trick Nr. 10: Überlagern, um Ihrem Verlaufshintergrund mehr Farben hinzuzufügen.

Standardmäßig kann jeder Abschnitt, jede Zeile, jede Spalte und jedes Modul zwei Farbverläufe haben. Wenn Sie sie jedoch kombinieren und übereinander legen, können Sie 5 Farben für Ihren Verlaufshintergrund erstellen. Und wenn diese 5 Farben miteinander verschmelzen, können Sie ein ziemlich cooles Spektrum erstellen.

Hier ist, wie Sie es tun. Fügen Sie zunächst einen regulären Abschnitt mit einer 1-spaltigen Strukturzeile hinzu. Fügen Sie dann innerhalb der Reihe ein Blurb-Modul hinzu.

Aktualisieren Sie die Einstellungen des Blurb-Moduls wie folgt:

Inhaltsoptionen

Titel: [Titel eingeben]
Inhalt: [Inhalt eingeben]

Designoptionen

Textfarbe: Hell
Textausrichtung: Mitte
Kopfzeilenschriftart: Standard, Fett (B)
Header-Schriftgröße: 56px
Körper Schriftgröße: 22px
Benutzerdefinierte Polsterung: 100px oben, 100px unten

Da der Klappentext weiß auf weißem Hintergrund ist, kann man ihn noch nicht sehen, aber das ist in Ordnung. Du wirst bald. Es ist Zeit, mit dem Hinzufügen der Verlaufsfarben zu beginnen.

Wir arbeiten uns von hinten nach vorne, von links nach rechts vor. Um zu beginnen, gehen Sie zu den Abschnittseinstellungen und aktualisieren Sie Folgendes:

Inhaltsoptionen

Hintergrund-Verlaufsfarben: #ff0077, #0c71c3
Verlaufsrichtung: 90deg
Startposition: 0%
Endposition: 30%

Designoptionen

Benutzerdefiniertes Padding: 0px oben, 0px unten

Lassen Sie uns nun unsere nächste Stufe der Farbverlaufsfarbe aktualisieren – unsere Reihe. Gehen Sie zu den Zeileneinstellungen und aktualisieren Sie Folgendes:

Inhaltsoptionen

Hintergrund-Verlaufsfarben: rgba (255,255,255,0), #8300e9
Verlaufsrichtung: 90deg
Startposition: 25%
Endposition: 50%
Spalte 1 Hintergrund-Verlaufsfarben: rgba(255,255,255,0), #e02b20
Verlaufsrichtung: 90deg
Startposition: 50%
Endposition: 75%

Designoptionen
Machen Sie diese Zeile in voller Breite: JA
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 1
Benutzerdefiniertes Padding: 0px oben, 0px unten

Einstellungen speichern

Für die letzte Farbverlaufsebene müssen wir nun zum Blurb-Modul gehen und Folgendes aktualisieren:

Inhaltsoptionen
Hintergrund-Verlaufsfarben: rgba(255,255,255,0), #edf000
Verlaufsrichtung: 90deg
Startposition: 75%
Endposition: 100%

Designoptionen

Benutzerdefinierte Polsterung: 100 Pixel oben, 100 Pixel unten

Das ist es. Jetzt haben Sie fünf Verlaufsfarben, die miteinander verschmelzen, um einen ziemlich farbenfrohen Hintergrund zu erstellen.

Vergessen Sie nicht, Sie können den Verlaufstyp auch in Radial (kreisförmig) ändern und das Design vollständig ändern (dauert etwa 20 Sekunden).

Wenn Sie den Verlaufstyp für alle Ebenen (Abschnitt, Zeile, Spalte und Klappenmodul) in Radial ändern, erhalten Sie so etwas wie dieses.

Bonustrick

Hier ist ein Beispiel dafür, wie Sie Hintergrundbilder mit Parallaxe überlagern können. Dies ist ein normaler Abschnitt mit einem Hintergrundbild mit True Parallax. Innerhalb des Abschnitts befindet sich eine 1-spaltige Zeile, die in voller Breite und ohne Auffüllung erstellt wurde, sodass sie sich über die gesamte Breite des Abschnitts erstreckt. Der Zeile habe ich mit der CSS Parallax-Methode ein transparentes Hintergrundbild mit einigen Farbverlaufskreisen (die wie Blasen aussehen sollen) hinzugefügt. Dann habe ich der Zeile mit transparentem Hintergrund ein Call-to-Action-Modul hinzugefügt. Diese Kombination erzeugt Bewegung beim Herunterscrollen des Abschnitts auf der Seite.

Dieser Trick ist etwas komplizierter, da er das Erstellen eines benutzerdefinierten Fotos außerhalb von Divi erfordert. Ich hoffe einfach, Ihnen die Möglichkeiten aufzuzeigen.

Noch ein paar Beispiele

Ich beende dies mit einigen Designbeispielen, die ich beim Testen der gleichen Tricks erstellt habe, die in diesem Beitrag erwähnt wurden.

Abschließende Gedanken

Ich hoffe, es hat Ihnen Spaß gemacht, diese neuen Hintergrundoptionen zu erkunden, und Sie sind gespannt auf die Möglichkeiten, die sie bieten. Und da diese Optionen für Abschnitte, Zeilen, Spalten und Module verfügbar sind, können Sie diese Design-Tricks auf jeden Teil Ihrer Website anwenden. Wenn Sie es noch nicht getan haben, nehmen Sie sich etwas Zeit, um ein wenig tiefer zu graben und diese kreativen Säfte fließen zu lassen. Ich bin zuversichtlich, dass Sie, wenn Sie sich die Zeit nehmen, die Hintergrundoptionen selbst zu erkunden, begeistert sein werden, sie in Ihrem nächsten Projekt umzusetzen. Ich kann es kaum erwarten zu sehen, was dir einfällt.

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