Du möchtest deiner Website einen einzigartigen, fluffigen Look verpassen? Hier erkläre ich dir heute, wie du im Divi Theme ganz einfach den Hintergrund Verlauf und die Farben ändern kannst, damit deine Website direkt ins Auge sticht!

Der erste Eindruck zählt! Diese Weisheit altert nicht und hinzu kommt für uns Webdesigner:innen auch noch dieses alternde Hütchen: Im digitalen Zeitalter mit all seinen Möglichkeiten und Reizen schrumpft unsere Aufmerksamkeitsspanne mitunter schnell mal auf die eines Eichhörnchens (nichts gegen diese niedlichen Geschöpfe!). Immer mehr Contentersteller:innen buhlen zudem um unsere Aufmerksamkeit…

…Ist all das ein Problem? Keineswegs! 🙂 Denn wir wissen, dass wir neben einen klaren Botschaft und einer direkter Ansprache vor allem den visuellen Sinn des Betrachters ansprechen können. Die Macht der Bilder und so… 😉 Als Webdesigner:innen dürfen wir das natürlich auf jeden Fall für uns nutzen und für ein stimmiges Gesamtbild unserer Website sorgen.

Da Divi unendlich viele Gestaltungsmöglichkeiten für den Hintergrund Verlauf und das Spiel mit den Farben bietet, ist es ganz einfach, mit deinem ganz eigenen, individuellen Look potentielle Traumkunden in den ersten Sekunden anzusprechen!

Als kleinen Bonus werde ich dir am Ende auch noch kurz die zusätzlichen Potentiale vorstellen, die Hintergrundmasken in Divi bieten.

Das Beste daran: All das kann unglaublich viel Spaß machen!

Let’s go!

 

Divi Hintergrund Verlauf: Farben ändern

 

Um den Divi Hintergrund Verlauf zu ändern, gehst du zunächst in die Sektion, in der du den Hintergrundverlauf ändern möchtest. Dies ist die in Divi immer der blaue Kasten. Dort angekommen, bitte runterscrollen zu „Hintergrund“ und dann den Tab „Hintergrundverlauf“ anwählen.

 

 

Hier findest du unter dem Vorschaubild des Divi Hintergrund Verlaufs die Gradientenstopps. Hier kommt gleich ein kleiner Zaubertrick: Es sieht zunächst so aus, als sei dort nur ein Gradientenstopp. Sobald du diesen jedoch bewegst, offbart sich – tadaaaa- ein zweiter Schieberegler:

 

 

Nun kannst du die Gradientenstopps getrennt voneinander anklicken und ihnen eine Farbe zuweisen. Dazu klickst du ganz einfach in den jeweiligen Kreis des Schiebereglers. Nun öffnet sich ein Feld, wo du jeweils den gewünschten HEX-Code eingeben kannst:

 

 

Du klickst also beide Gradientenstopps nacheinander an, hinterlegst dort die Farbcodes und schon erstrahlt der Divi Hintergrund Verlauf in deinen beiden Farben.

 

Divi Hintergrund Verlauf ändern: Weiche und harte Farbverläufe

 

Wie du im Schritt davor beim Verschieben der Gradientenstopps wahrscheinlich schon gesehen hast, kannst du beim Divi Hintergrund Verlauf auch ändern, wie hart oder weich der Farbverlauf sein soll – dazu schiebst du die beiden Schieberegler einfach enger oder weiter auseinander. Wenn die beiden Stopps genau übereinander liegen, hast du sozusagen einen Bereich mit zweigeteilten Farben mit scharfer Linie.

Zur Veranschaulichung hier nochmals Beispiel 1 mit weichem Farbverlauf und somit weiter auseinander liegenden Gradientenstopps, darunter Beispiel 2 mit einem harten Farbverlauf und übereinander liegenden Gradientenstopps:

 

 

Divi Hintergrund Verlauf: Ändern des Verlaufsübergangs

 

Du kannst außerdem bestimmen, wo der Farbverlauf ineinander übergehen soll. Legst du die Schieberegler wie oben im zweiten Beispiel genau in der Mitte übereinander, wird Divi dir die Farbtrennung genau in die Mitte bauen. Natürlich kannst du ihn aber auch auf z.B. 30% legen und bekommst dann so ein Ergebnis:

 

Divi Hintergrund Verlauf: Ändern der Verlaufsrichtung und -form

 

Wenn du im Divi Hintergrund Verlauf auch noch die Verlaufsrichtung ändern möchtest, kannst du das im selben Tab weiter unten tun:

 

Und falls du deinen Gestaltungsdrang noch den Extra-Boost braucht, kannst du schließlich auch noch die Verlaufsform ändern, z.b. von linear in kreisförmig, eliptisch oder konisch:

 

 

Special: Experimentieren mit Masken im Divi Hintergrund Verlauf

 

So kannst du schon coole Effekte erzielen. Wenn du noch einen draufsetzen möchtest, empfehle ich dir auch noch das Experimentieren mit den sogenannten Masken im Divi Hintergrund Verlauf, die du im letzten Tab findest:

 

 

 

Hier kannst du mit einem Klick auf das Plus eine Hintergrundmaske über deinen Verlauf legen. Im Drop-Down-Menü kannst du verschiedenste Formen wählen:

 

 

Die Maske muss nicht weiss sein, du kannst unter “Maskenfarbe” auch eine andere Farbe einstellen, die zu deinem Design passt.

 

Du kannst die Maske außerdem umdrehen (sodass der Teil, der jetzt den Farbverlauf enthält weiss/einfarbig wird und der andere Teil den Farbverlauf bekommt).

Das geht ein bisschen weiter runter unter “Maskentransformation” wenn du das rechte Icon anklickst:

 

 

Diese beiden Icons spiegeln deine Maske außerdem vertikal oder horizontal – das gibt wieder einen ganz anderen Effekt. Probier es mal aus!

 

 

Zu guter letzt kannst du die Größe bzw. den Anteil deiner Maske am Gesamtdesign noch anpassen mit dem “Seitenverhältnis der Maske”:

 

 

Divi Hintergrund Verlauf: Farben ändern als Video-Tutorial

 

 

Ich hoffe, ich konnte dir mit all diesen Tipps & Tricks weiterhelfen und wünsche dir ganz viel Erfolg und vor allem Freude bei der Gestaltung deines ganz indiviuellen Hintergrund Verlaufs mit dem Divi Page Builder!

Kommentiere gern unter dem Blogartikel und berichte mir über deine eigenen Erfahrungen!

Stay tuned…

 

PS: Falls du noch weitere Tipps zu Anker setzen in Divi, dem optimalen Divi Cookie Plugin oder generell der Entscheidung für oder gegen das Divi Theme haben möchtest, klicke gerne auf diese Links und hol dir mehr Input!

Du möchtest erstmalig eine eigene Website mit dem Divi Theme erstellen bzw. überarbeiten oder aber lieber gar nichts damit zu tun haben & diese in wenigen Tagen von mir erstellen lassen? Dann schau dir meine äußerst sorgfältig zusammengeschnürten Pakete gerne einmal an!

Und zuletzt habe ich ganz fresh & new auch noch einen wirklich famosen Kurs für meinen erweiterten Kollegenkreis erstellt. Ich bin tatsächlich stolz darauf, denn er enthält neben den Basics jede Menge Hacks und Expertenwissen, um dich in kürzester Zeit zu einer wahren Meisterin im Webdesign mit Divi zu machen. Das Launching ist im April 2023: Das DIY Rundum-Sorglos Website Paket für Expertinnen, Coachinnen und Dienstleisterinnen!