So erstellen Sie mit Divi . schöne Gradientenhintergrund-Hover-Übergänge

Vor kurzem wurden Divi einige zusätzliche Hover-Optionen hinzugefügt, mit denen Sie noch mehr coole Effekte erstellen können, ohne eine einzige Codezeile berühren zu müssen. Sie können jetzt zum Beispiel erstaunliche Hintergrund-Hover-Übergänge mit Farbverläufen erstellen. Durch die Kombination von Spalten-, Zeilen- und Abschnittsverläufen können Sie einzigartige Designs erzielen. In diesem Tutorial zeigen wir Ihnen genau, wie das geht. Wir beginnen mit einigen allgemeinen Schritten. Sobald dies erledigt ist, konzentrieren wir uns einzeln auf drei Designbeispiele. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf die drei verschiedenen Beispiele, die wir in diesem Tutorial neu erstellen werden.

Beispiel 1

Beispiel #2

Beispiel #3

Laden Sie The Hero Sections KOSTENLOS herunter

Abonnieren Sie unseren Youtube-Kanal

Um diese kostenlosen Heldenabschnitte in die Hände zu bekommen, müssen Sie sie 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!

Allgemeine Schritte

Neuen Abschnitt hinzufügen

Abstand

Beginnen wir mit einigen allgemeinen Schritten. Fügen Sie der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzu und entfernen Sie alle Standardabstände. Das Entfernen aller oberen und unteren Auffüllungen wird uns später helfen, Spalten-, Zeilen- und Abschnittsverlaufshintergründe zu kombinieren.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

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 Breite des Abschnittscontainers einnehmen.

• Breite: 100%
• Maximale Breite: 100%

Abstand

Gehen Sie zu den Abstandseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Textmodul Nr. 1 zur Spalte hinzufügen

H1-Inhalt hinzufügen

Beginnen wir mit dem Hinzufügen von Modulen! Als erstes brauchen wir ein Textmodul mit H1-Inhalten.

H1-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H1-Texteinstellungen entsprechend:

• Überschrift Schriftart: Montserrat
• Ausrichtung des Überschriftentextes: Mitte
• Überschriftstextfarbe: #000000
• Überschriftstextgröße: 3vw (Desktop), 6vw (Tablet & Telefon)
• Überschriftsbuchstabenabstand: 0.7vw

Größe

Öffnen Sie als nächstes die Größeneinstellungen und ändern Sie die Breite zusammen mit der Modulausrichtung.

• Breite: 48 % (Desktop), 60 % (Tablet & Telefon)
• Modulausrichtung: Mitte

Abstand

Vervollständigen Sie das Design des Moduls, indem Sie etwas oberen Rand hinzufügen.

• Oberer Rand: 10vw

Trennmodul zur Spalte hinzufügen

Sichtweite

Auf zum nächsten Modul! Fügen Sie ein Teilermodul hinzu und stellen Sie sicher, dass die Option „Teiler anzeigen“ aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Ändern Sie als nächstes die Linienfarbe.

• Linienfarbe: #000000

Größe

Gehen Sie zu den Größeneinstellungen und wenden Sie die folgenden Einstellungen an:

• Teilergewicht: 0.1vw
• Breite: 10 % (Desktop), 16 % (Tablet), 25 % (Telefon)
• Modulausrichtung: Mitte

Abstand

Fügen Sie auch einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzu.

• Obere Polsterung: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)
• Untere Polsterung: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)

Textmodul #2 zur Spalte hinzufügen

Inhalt hinzufügen

Weiter zum nächsten Modul, das ein weiteres Textmodul ist. Fügen Sie einen Absatzinhalt Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Open Sans
• Textausrichtung: Ausrichten
• Textzeilenhöhe: 2.3em

Größe

Ändern Sie als nächstes die Breite und die Modulausrichtung in den Größeneinstellungen:

• Breite: 30 % (Desktop), 54 % (Tablet), 70 % (Telefon)
• Modulausrichtung: Mitte

Schaltflächenmodul zur Spalte hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das wir in der Spalte benötigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Ausrichtung

Wechseln Sie zur Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Ändern Sie auch die Tasteneinstellungen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 0,8 vw (Desktop), 2 vw (Tablet), 2,8 vw (Telefon)
• Schaltflächentextfarbe: #000000
• Breite des Tastenrahmens: 1px
• Schaltflächenrandradius: 1px
• Button-Schriftart: Montserrat

Abstand

Und fügen Sie einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzu.

• Obere Marge: 2vw (Desktop), 8vw (Tablet & Telefon)
• Unterer Rand: 10vw
• Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Untere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Linke Polsterung: 3vw (Desktop), 6vw (Tablet), 8vw (Telefon)
• Rechte Polsterung: 3vw (Desktop), 6vw (Tablet), 8vw (Telefon)

Abschnitt zweimal klonen

Sobald Sie den Abschnitt abgeschlossen haben, können Sie ihn zweimal klonen. eine für jedes Beispiel.

Erstellen Sie den Gradienten-Hintergrund-Hover-Übergang # 1

Abschnitt

Standard-Hintergrund mit Farbverlauf

Beginnen wir mit dem Erstellen des ersten Hover-Übergangs! Öffnen Sie die Abschnittseinstellungen und fügen Sie den folgenden Standardverlaufshintergrund hinzu:

• Farbe 1: #d1d1ff
• Farbe 2: #f7f7f7
• Verlaufsrichtung: 90deg
• Startposition: 50%
• Endposition: 50%

Hintergrund mit Farbverlauf schweben

Ändern Sie den Farbverlaufshintergrund beim Bewegen des Mauszeigers.

• Farbe 1: #f7f7f7
• Farbe 2: #ffc1c7
• Verlaufsrichtung: 90deg
• Startposition: 50%
• Endposition: 50%

Reihe

Standard-Hintergrund mit Farbverlauf

Öffnen Sie als nächstes die Zeileneinstellungen und wenden Sie die folgenden Standardeinstellungen für den Verlaufshintergrund an:

• Farbe 1: #7032ff
• Farbe 2: rgba(255,255,255,0)
• Verlaufsrichtung: 90deg
• Startposition: 10%
• Endposition: 10%

Hintergrund mit Farbverlauf schweben

Ändern Sie den Farbverlaufshintergrund beim Bewegen des Mauszeigers.

• Farbe 1: rgba(255,255,255,0)
• Farbe 2: #ff324a
• Verlaufsrichtung: 90deg
• Startposition: 90%
• Endposition: 90%

Erstellen Sie den Gradienten-Hintergrund-Hover-Übergang #2

Abschnitt

Standard-Hintergrund mit Farbverlauf

Auf zum zweiten Beispiel! Öffnen Sie die Abschnittseinstellungen und fügen Sie den folgenden Verlaufshintergrund hinzu:

• Farbe 1: #f7f7f7
• Farbe 2: #eceaff
• Verlaufsrichtung: 156deg
• Startposition: 50%
• Endposition: 50%

Hintergrund mit Farbverlauf schweben

Fügen Sie beim Hover einen anderen Farbverlaufshintergrund hinzu:

• Farbe 1: #ffeaec
• Farbe 2: #f7f7f7
• Verlaufsrichtung: 204deg
• Startposition: 50%
• Endposition: 50%

Reihe

Standard-Hintergrund mit Farbverlauf

Öffnen Sie als nächstes die Zeileneinstellungen und wenden Sie die folgenden Farbverlaufshintergrundeinstellungen an:

• Farbe 1: #a932ff
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Unten links
• Startposition: 14%
• Endposition: 14%

Hintergrund mit Farbverlauf schweben

Ändern Sie den Zeilenverlaufshintergrund beim Hover entsprechend:

• Farbe 1: #ff324a
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Oben links
• Startposition: 14%
• Endposition: 14%

Spalte

Standard-Hintergrund mit Farbverlauf

Gehen Sie zu den Spalteneinstellungen und fügen Sie den folgenden Farbverlaufshintergrund hinzu:

• Farbe 1: #a932ff
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Oben rechts
• Startposition: 14%
• Endposition: 14%

Hintergrund mit Farbverlauf schweben

Ändern Sie den Hintergrund des Spaltenverlaufs beim Schweben:

• Farbe 1: #ff324a
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Unten rechts
• Startposition: 14%
• Endposition: 14%

Erstellen Sie den Gradienten-Hintergrund-Hover-Übergang #3

Abschnitt

Standard-Hintergrund mit Farbverlauf

Auf zum nächsten und letzten Beispiel! Öffnen Sie die Abschnittseinstellungen und wenden Sie den folgenden Verlaufshintergrund an:

• Farbe 1: #ffc1c7
• Farbe 2: #ffffff
• Verlaufstyp: Radial
• Radiale Richtung: Oben
• Startposition: 45%
• Endposition: 45%

Hintergrund mit Farbverlauf schweben

Ändern Sie den Hintergrund des Abschnittsverlaufs beim Bewegen der Maus.

• Farbe 1: #ffc1c7
• Farbe 2: #ffffff
• Verlaufstyp: Radial
• Radiale Richtung: Links
• Startposition: 20%
• Endposition: 20%

Reihe

Standard-Hintergrund mit Farbverlauf

Öffnen Sie als nächstes die Zeileneinstellungen und fügen Sie den folgenden Farbverlaufshintergrund hinzu:

• Farbe 1: #d3dfff
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Unten
• Startposition: 45%
• Endposition: 45%

Hintergrund mit Farbverlauf schweben

Ändern Sie den Farbverlaufshintergrund entsprechend:

• Farbe 1: #d3dfff
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Rechts
• Startposition: 20%
• Endposition: 20%

Spalte

Standard-Hintergrund mit Farbverlauf

Zu guter Letzt fügen Sie einen Spaltenverlaufshintergrund hinzu und Sie sind fertig!

• Farbe 1: #f7f7f7
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 41%
• Endposition: 41%

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis aller drei Beispiele, die wir in diesem Tutorial neu erstellt haben!

Beispiel 1

Beispiel #2

Beispiel #3

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie die zusätzlichen Hover-Optionen für den Hintergrund mit Farbverlauf von Divi kreativ verwenden, um schöne Hover-Übergänge nur mit den integrierten Optionen von Divi zu erstellen. Wir haben mit einigen allgemeinen Schritten begonnen und fuhren fort, indem wir jedes der drei Beispiele neu erstellten. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie 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.