Divi Hintergrund Verlauf ändern: So klappt es easy!

von | 3. März 2023 | Divi Theme, Webdesign

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.

 

Divi Sektion wählen um Hintergrund Verlauf zu ändern

 

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:

 

Gradientenstopps auseinanderziehen Hintergrund Verlauf Divi Page Builder

 

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:

 

Divi Page Builder Hex Code Hintergrund Verlauf eingeben

 

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 Page Builder weicher Hintergrund Verlauf Gradientenstopps auseinander

Divi Page Builder Harter Hintergrund Verlauf Gradienstopps übereinander

 

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 Page Builder Farbverlauf

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:

Divi Page Builder Hintergrund Verlauf Verlaufsrichtung ändern

 

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:

 

Divi Page Builder Hintergrund Verlauf Verlaufsform ändern

 

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:

 

Divi Page Builder Hintergrund Verlauf Maske letzter Tab

 

 

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:

 

Divi Page Builder Hintergrund Verlauf Maske hinzufügen

 

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:

Divi Page Builder Hintergrund Verlauf Maske umdrehen Maskentransformation

 

 

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

 

Divi Page Builder Hintergrund Verlauf Maske Maske umdrehen horizontal vertikal Maskentransformation

 

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

 

Divi Page Builder Hintergrund Verlauf Maske Verhältnis anpassen

 

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!

 

 

Guter Stoff? Behalte ihn nicht für dich.

*Affiliate-Links

Mit Sternchen (*) markierte Links sind Affiliate-Links. Wenn du diese anklickst und im Anschluss dort etwas kaufst, erhalte ich eine kleine Provision. Der Kaufpreis für dich bleibt natürlich gleich.

Ich empfehle hier nur Produkte, die ich selber nutze und aus der Praxis kenne.

Raphaela

Gründerin von Digital Bohemienne, WordPress und Divi Theme Expertin, Marketing-Ninja mit 15+ Jahren Erfahrung,

Raphaela hilft Online-Unternehmer:innen mehr Besucher und Kundinnen über ihre Webseite zu bekommen.

Sie teilt ihr Wissen zum Divi Theme, Online-Business und Conversion Rate Optimierung hier auf dem Blog, und Online-Kursen wie dem Mini-Kurs „Mission Traumkunden-Fänger“. Sie hat ihr Wissen über Verkaufspsychologie außerdem in fertige WordPress Templates einfließen lassen – „Website on the fly“ besteht aus fertigen WordPress Websites, die sich mit einem zugehörigen Online-Kurs in Nullkommagarnix auf das eigene Business anpassen lassen.

Erfahre mehr über Raphaela, folge ihr auf LinkedIN und Youtube oder mache es wie schon 1500+ Online-Unternehmer:innen und abonniere ihren Newsletter mit exklusiven Tipps rund um das Divi Theme und Online-Business.

Divi WordPress Theme

Meine Top 3 WordPress Techniktipps

Das beste WordPress Theme

Ich arbeite seit etwa 4 Jahren nur noch mit dem Divi Theme. Für Selbstständige, die ihre Website selbst im Griff haben wollen ist dies meiner Meinung nach das beste Theme.

Das beste WordPress Hosting

Das aktuell beste Hosting für deine WordPress Website bietet WP Space. Ich empfehle für die meisten WordPress Websites den Pro Tarif.

Der beste Cookie Banner

Zugegeben mögen wir diese digitalen Kekse aller eher so mittelgerne. Um den Datenschutzbeauftragten aber ein zufriedenes Grunzen zu entlocken, arbeite ich nur noch mit Real Cookie Banner.

Mitreden?

Hinterlasse
einen Kommentar:

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress Cookie Plugin von Real Cookie Banner