Springe zum Hauptinhalt

So erstellen Sie animierte Farbverläufe auf Divi

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Hintergrundanimationen mit Farbverlauf können eine großartige Designtechnik sein, um Hintergrundfarben auf Ihrer Website zum Leben zu erwecken. Es ist eine perfekte Lösung für diejenigen, die etwas Realistischeres als eine statische Hintergrundfarbe wünschen, ohne auf einen langsam ladenden Videohintergrund zurückgreifen zu müssen. Die Grundidee der Hintergrundanimation mit Verlauf besteht darin, mithilfe von CSS einen Verlaufshintergrund zu vergrößern und zu animieren, um flüssige Farbübergänge zu erzielen.

In diesem Tutorial zeigen wir Ihnen, wie Sie Hintergrundanimationen mit Farbverlauf auf Divi erstellen. Diese Methode kombiniert ein benutzerdefiniertes CSS-Snippet, das die in den integrierten Divi-Einstellungen ausgewählten Verlaufsfarben animiert. Die Konfiguration ist für ein so schönes Ergebnis eigentlich recht einfach.

Lassen Sie uns beginnen!

Posisble Ergebnis

Hier ist eine Übersicht über die beiden Möglichkeiten, wie wir eine Hintergrundanimation mit Farbverlauf auf Divi erstellen können.

Voraussetzung für dieses Tutorial ist natürlich, dass Sie ein Divi-Thema installiert und auf dem neuesten Stand haben.

Erstellung einer Verlaufshintergrundanimation mit dem CSS-Extrakt und der Hintergrundoption von Divi

Fügen Sie zunächst eine Zeile mit einer Spalte zum Standardabschnitt in Divi Builder hinzu.

Divi Layout

Abschnittseinstellungen

Aktualisieren Sie dann die Abschnittseinstellungen mit einem Hintergrundbild. Unser Verlaufshintergrund wird zu unserer Linie hinzugefügt, sodass er dieses Bild überlappt.

Aktualisieren Sie dann die Füllung wie folgt:

  • Auffüllen: 0px hoch, 0px niedrig
Fügen Sie ein Divi-Bild hinzu

Zeilen- und Spalteneinstellungen

Spaltenparameter

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie die Spaltenfüllung wie folgt:

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

  • Polsterung: über 12vw

Fügen Sie dann dem Hauptspaltenelement das folgende benutzerdefinierte CSS hinzu:

height: 40vw;

Divi-Modul-Stil

Leitungseinstellungen

Hintergrund mit Farbverlauf

Jetzt können wir der Linie den Verlaufshintergrund hinzufügen. Stellen Sie sicher, dass die Verlaufsfarben halbtransparent sind, wenn Sie das Hintergrundbild des Abschnitts sehen möchten.

Aktualisieren Sie die Zeilenparameter wie folgt:

  • Hintergrundfarbe des linken Farbverlaufs: rgba (12,113,195,0.8)
  • Hintergrundfarbe mit Farbverlauf rechts: rgba (131,0,233,0.8)
  • Verlaufstyp: linear
  • Gradientenrichtung: 45 Grad
Divi Farbkonfiguration
Größe

Aktualisieren Sie dann die Zeilengröße wie folgt:

  • Breite: 100%
  • Maximale Breite: 100%
Konfiguration der Divi-Modulbreite
Benutzerdefinierte CSS-Klasse

Nachdem unser Verlaufshintergrund vorhanden ist, müssen wir die Animation über benutzerdefiniertes CSS hinzufügen. Vor dem Hinzufügen des CSS-Codes müssen wir eine benutzerdefinierte CSS-Klasse hinzufügen, um auf diese bestimmte Zeile abzuzielen.

Wechseln Sie zur Registerkarte "Erweitert" und fügen Sie die folgende CSS-Klasse hinzu:

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

  • CSS-Klasse: Animationsgradient
Klasse CSS Divi Modul Linie

Fügen Sie ein Codemodul hinzu

Fügen Sie der Zeile ein Codemodul hinzu, nachdem die CSS-Klasse zur Zeile hinzugefügt wurde.

Divi-Code-Modul hinzufügen

Fügen Sie CSS in das Codemodul ein

Fügen Sie dann den folgenden CSS-Code in den Bereich Code Code Settings Module ein:

.animate-gradient {background-size: 400% 400%;animation: gradient 5s ease infinite;} @keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}

Stellen Sie sicher, dass Sie den Code in das Feld einschließen <style></style>Tags, weil wir es dem HTML-Code der Seite hinzufügen.

Konfiguration im Divi-Modulstil

Ergebnis

Hier ist das bisherige Ergebnis. Der Verlaufshintergrund wurde auf 400% der Originalgröße vergrößert und durch Bewegen nach links und rechts animiert.

Divi Hintergrundanimation

Fügen Sie einen Aufruf zur Aktion hinzu

Um das Design zu vervollständigen, fügen wir ein Call-to-Action-Modul hinzu, das Teil des Inhalts ist.

Aufruf zum Aktionsdivi hinzufügen

Call-to-Action-Einstellungen

Inhalt

Aktualisieren Sie den Inhalt wie folgt:

  • Fügen Sie einen Titel hinzu
  • Schaltflächentext hinzufügen
  • Fügen Sie Text hinzu
  • URL des Links der Schaltfläche: #
  • Hintergrundfarbe verwenden: NEIN
Konzeption

Gehen Sie zur Registerkarte Design und aktualisieren Sie Folgendes:

  • Titelschrift: Kaushan Script
  • Titeltextgröße: 4vw (Desktop), 30px (Telefon)
  • Titelzeile Höhe: 1,4 em
  • Körperpolizei: Roboto
  • Schaltflächentextgröße: 16px
  • Textfarbe der Schaltfläche: # 555555
  • Schaltflächenhintergrund: #ffffff
  • Schaltflächenrandbreite: 0px
  • Schaltflächenrandradius: 30 Pixel
  • Tastenbuchstabenabstand: 3px
  • Tastenschrift: Roboto komprimiert
  • Schriftgröße der Schaltfläche: fett

Ergebnis

Überprüfen Sie nun das Ergebnis auf der Live-Seite mit dem Inhalt des Aufrufs zum Handeln. Es wäre ein großartiger Header für Ihre Website!

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Endergebnis Hintergrundanimation

Denken Sie daran, dass Sie die Hintergrundfarben Ihrer Linie ganz einfach nach Belieben ändern können. Der Code wird weiterhin im Hintergrund ausgeführt, um den Hintergrund für Sie zu animieren.

Wenn Sie sich mit CSS auskennen, können Sie die Geschwindigkeit und Richtung der Animation anpassen, indem Sie die Werte der Animationseigenschaften ändern.

Ich hoffe, Sie fanden dieses Tutorial hilfreich. Zögern Sie nicht, Ihre Meinung dazu zu teilen.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

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

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren