So erstellen Sie animierte Hintergrundfarben mit Divi

Die Animationsoptionen von Divi können eine bereits schöne Seite auch schnell in eine ansprechende verwandeln. Inzwischen haben wir uns alle an die verschiedenen Animationen gewöhnt, die in die verschiedenen Designelemente integriert sind, die Divi Ihnen zur Verfügung stellt. Aber wussten Sie, dass Sie mit diesen Animationen auch eine bestimmte Designoption hervorheben können?

In diesem Tutorial konzentrieren wir uns auf das Erstellen animierter Hintergrundfarben. Um das gewünschte Ergebnis zu erzielen, verwenden wir ein Trennmodul für die Hintergrundfarbe und platzieren ein Textmodul darüber. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, anstehenden Webdesign-Projekten animierte Hintergrundfarben hinzuzufügen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das animierte Hintergrundfarblayout KOSTENLOS herunter

Um das kostenlose animierte Hintergrundfarblayout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Beginnen wir mit der Neuerstellung!

Abonnieren Sie unseren Youtube-Kanal

Neuen Abschnitt hinzufügen

Abstand

Als erstes müssen Sie der Seite, an der Sie arbeiten, einen neuen Abschnitt hinzufügen. Öffnen Sie die Abschnittseinstellungen und fügen Sie einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 5vw
• Untere Polsterung: 17vw

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Bildschirmbreite einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Trennmodul Nr. 1 zur Spalte hinzufügen

Sichtweite

Es ist an der Zeit, die verschiedenen Module hinzuzufügen, die wir benötigen, beginnend mit einem Teilermodul. Dieses Trennmodul wird wegen seiner Hintergrundfarbe, -größe und -animation verwendet. Stellen Sie sicher, dass die Option "Teiler anzeigen" deaktiviert ist.

• Teiler anzeigen: Nein

Hintergrundfarbe

Gehen Sie zu den Hintergrundeinstellungen und fügen Sie die folgende Hintergrundfarbe hinzu:

• Hintergrundfarbe: #212121

Abstand

Gehen Sie zu den Abstandseinstellungen und geben Sie Ihrem Modul die gewünschte Form mit der Höheneinheit des Ansichtsfensters.

• Obere Polsterung: 30vh
• Untere Polsterung: 30vh

Animation

Wir ermöglichen die Animation der Hintergrundfarbe, indem wir eine benutzerdefinierte Animation mit einer Animationsverzögerung hinzufügen.

• Animationsstil: Folie
• Animationswiederholung: Einmal
• Animationsrichtung: Rechts
• Animationsverzögerung: 1000ms
• Animationsintensität: 88%
• Anfangsdeckkraft der Animation: 100 %

Textmodul Nr. 1 zur Spalte hinzufügen

Inhalt hinzufügen

Das nächste Modul, das wir brauchen, ist ein Textmodul. Fügen Sie H2- und Absatzinhalte Ihrer Wahl hinzu.

Texteinstellungen

Gehen Sie dann zu den Texteinstellungen und ändern Sie die Werte entsprechend:

• Textschriftart: Didact Gothic
• Textfarbe: #ffffff
• Textgröße: 1,1 vw (Desktop), 1,7 vw (Tablet), 2,5 vw (Telefon)
• Textzeilenhöhe: 2.1em
• Textausrichtung: Begründen

Standard-Texteinstellungen für Überschrift 2

Nehmen Sie als nächstes einige Änderungen an den H2-Texteinstellungen vor.

• Überschrift 2 Schriftart: Abril Fatface
• Überschrift 2 Textfarbe: #1c1c1c
• Überschrift 2 Textgröße: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)
• Überschrift 2 Zeilenhöhe: 1.8em

Hover-Überschrift 2 Texteinstellungen

Wir ändern auch die Textfarbe beim Hover.

• Überschrift 2 Textfarbe: #ffffff

Beide Module klonen

Nachdem Sie beide Module hinzugefügt und angepasst haben, können Sie sie klonen. In den nächsten Schritten dieses Beitrags werden wir alle vier Module modifizieren, um eine Hintergrundfarbenanimation von beiden Seiten zu erstellen. Wir fügen den Textmodulen auch eine Überlappung hinzu, damit es so aussieht, als ob die Trennmodule und Textmodule im selben Container erstellt werden.

Duplikat des Teilermoduls ändern

Hintergrundfarbe ändern

Öffnen Sie das doppelte Teilermodul und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #0bbfa1

Animation ändern

Damit die Hintergrundanimation von der anderen Seite angezeigt wird, ändern wir die Animationsrichtung. Wir fügen außerdem eine etwas höhere Animationsverzögerung hinzu, um das gewünschte Ergebnis zu erzielen.

• Animationsrichtung: Links
• Animationsverzögerung: 1500 ms

Duplikat des Textmoduls ändern

Inhalt ändern

Fahren Sie fort, indem Sie das doppelte Textmodul öffnen und den Inhalt ändern.

Texteinstellungen für Überschrift 2 ändern

Wechseln Sie zur Registerkarte Design und ändern Sie auch die H2-Texteinstellungen.

• Überschrift 2 Textausrichtung: Rechts
• Überschrift 2 Textfarbe: #0cc9ad

Teilerpositionierung

Teilermodul #1

Damit auf der rechten Seite des ersten Teilermoduls etwas Weißraum angezeigt werden kann, fügen wir mit der Breiteneinheit des Ansichtsfensters etwas rechten Rand hinzu.

• Rechter Rand: 20vw

Teilermodul #2

Öffnen Sie auch das zweite Trennmodul und lassen Sie den gleichen Platz einnehmen, aber stattdessen auf der linken Seite der Seite.

• Oberer Rand: 2vw
• Linker Rand: 20vw

Überlappungen hinzufügen

Textmodul #1

Nachdem wir nun alle Module in unserer Reihe angepasst haben, können wir beginnen, die Überlappungen zu erstellen, beginnend mit dem ersten Textmodul. Fügen Sie den Abstandseinstellungen des Moduls die folgenden benutzerdefinierten Randwerte hinzu:

• Obere Marge: -49vh
• Rechter Rand: 20vw (Desktop), 15vw (Tablet), 10vw (Telefon)

Textmodul #2

Verwenden Sie auch die folgenden benutzerdefinierten Randwerte für das duplizierte Textmodul:

• Obere Marge: -49vh
• Linker Rand: 20vw (Desktop), 15vw (Tablet), 10vw (Telefon)

Beenden Sie Visual Builder, um das Ergebnis anzuzeigen

Nachdem Sie die Überlappungen erstellt haben, müssen Sie den Visual Builder beenden, um das Ergebnis anzuzeigen!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

Wir sind immer auf der Suche nach Möglichkeiten, Ihnen dabei zu helfen, Grenzen im Webdesign zu überschreiten und schöne und ansprechende Websites zu erstellen. In diesem Beitrag haben wir verschiedene Designelemente und Überlappungen kreativ kombiniert, um animierte Hintergrundfarben zu erstellen. Dies ist eine großartige Möglichkeit, jeder Seite, an der Sie arbeiten, eine zusätzliche Dimension zu verleihen und Ihre Website perfekt an aktuelle Designtrends anzupassen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.