So ändern Sie den Inhalt beim Hover, um in Divi einzigartige CTAs zu erstellen (3 Möglichkeiten)

Die integrierten Hover-Optionen von Divi machen es einfach, den Inhalt jedes Moduls beim Hover zu ändern. Wir können Hintergrundbilder, Farben und sogar Text beim Hover ändern. Dies öffnet die Tür für kreative Wege, um die Aufmerksamkeit der Nutzer zu erregen und diese Handlungsaufforderungen für bessere Conversions zu steigern.

Heute zeigen wir Ihnen, wie Sie den Inhalt in Divi mit der Maus ändern können, um einige einzigartige Handlungsaufforderungen zu erhalten. Wir zeigen clevere Möglichkeiten zum Ändern des Schaltflächentexts (und der Symbole) beim Hover. Wir zeigen, wie Sie den Titel- und Schaltflächentext innerhalb eines Call-to-Action-Moduls beim Hovern elegant ändern können. Und wir fügen sogar einige benutzerdefinierte CSS hinzu, um auch einige einzigartige Übergangseffekte hinzuzufügen (wie das Wechseln und Spiegeln eines Schaltflächensymbols).

Hör zu!

Vorgeschmack

Hier ist ein kurzer Blick auf die drei Designs, die wir heute erstellen werden.

#1 So ändern Sie den Inhalt von Hover für Schaltflächen

#2 So ändern Sie Hintergründe und Inhalt von Textmodulen

#3 So ändern Sie den Inhalt beim Hover für mehrere Elemente mit dem Call-to-Action-Modul

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial 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!

Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Kommen wir zum Tutorial, sollen wir?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das installierte Divi Theme (oder das Divi Builder Plugin, wenn Sie das Divi Theme nicht verwenden).
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Laden Sie das vorgefertigte Layout der Cake Maker Landing Page auf die Seite. Wir werden dieses Layout für unsere Designs verwenden. Sie können das Layout laden, indem Sie „Choose a Premade Layout“ auswählen, wenn Sie beim Bereitstellen des Divi Builder dazu aufgefordert werden. Oder Sie wählen das „Load from Library“-Plus-Symbol aus dem Einstellungsmenü im Divi Builder. Weitere Informationen zum Laden des vorgefertigten Layouts auf Ihre Seite finden Sie in unserem Video.

Danach können Sie mit der Gestaltung in Divi beginnen.

#1 So ändern Sie den Inhalt von Hover für Schaltflächen

Sobald Sie das vorgefertigte Layout der Cake Maker Landing Page auf Ihre Seite geladen haben, suchen Sie den Hauptschaltflächen-CTA in der oberen Kopfzeile der Seite und öffnen Sie die Designeinstellungen für das Schaltflächenmodul.

Schaltflächentext beim Hover ändern

Aktualisieren Sie auf der Registerkarte Inhalt den Schaltflächentext wie folgt:

Schaltflächentext: „Jetzt einkaufen“

Stellen Sie dann die Hover-Option für den Schaltflächentext bereit und geben Sie den Ersatzschaltflächentext unter der Registerkarte Hover wie folgt ein:

Schaltflächentext (Hover): „Los geht's“

Der Text unter dem Text der Hover-Schaltfläche ersetzt den Standard-Schaltflächentext, wenn Sie den Mauszeiger über die Schaltfläche bewegen.

Tastenbreite

Die Schaltfläche ist jedoch ein inline-block sodass sich die Breite der Schaltfläche/des Links entsprechend der Menge des Inhalts (Buchstaben oder Leerzeichen) ändert, den die Schaltfläche enthält. Dies funktioniert für diesen Hover-Effekt nicht gut, da bei kleinerem Ersetzungstext die Schaltfläche in der Breite kleiner wird und beim Bewegen über den Rand der Schaltfläche Springen oder Glitching erzeugt. Um dies zu beheben, müssen wir der Schaltfläche eine festgelegte Breite zuweisen. Dies ist ganz einfach mit einem einzigen CSS-Schnipsel. Fügen Sie das folgende CSS zum Hauptelement des Schaltflächenmoduls hinzu.

width: 200px;

Hier ist das Ergebnis.

Zusätzliche Änderungen und Hover-Effekte

Zusätzlich zum Ändern des Inhalts beim Schweben können wir unseren Button auch mit anderen Hover-Effekt-Kombinationen aufpeppen.

Im Moment ist das Schaltflächensymbol ein Pfeil nach rechts, der beim Schweben bereitgestellt wird. Dies funktioniert sehr gut mit dem Hover-Button-Text "Let's Go".

Das Schaltflächensymbol beim Hover umdrehen

Aber Sie können auch einen schönen Flip-Hover-Effekt für das Schaltflächensymbol hinzufügen. Um dies zu tun, lassen Sie das Symbol zuerst immer erscheinen (nicht nur beim Hover), indem Sie Folgendes aktualisieren:

Nur Symbol beim Hover für Schaltfläche anzeigen: NEIN

Fügen Sie dann wie folgt eine CSS-Klasse zum Schaltflächenmodul hinzu:

CSS-Klasse: flip-button-icon

Öffnen Sie dann die Seiteneinstellungen und fügen Sie das folgende benutzerdefinierte CSS hinzu.

.flip-button-icon:after {
  transition: transform 500ms;
}
.flip-button-icon:hover:after {
  transform: rotateX(360deg);
}

Hier ist das Ergebnis.

Ändern des Schaltflächensymbols beim Hover

Sie können das Schaltflächensymbol auch beim Hover vollständig ändern. Alles, was Sie wirklich brauchen, ist ein kleiner CSS-Schnipsel, um den Inhalt des Pseudo-Elements :after zu ersetzen, in dem sich das Symbol befindet.

Bevor wir das CSS hinzufügen, wählen wir zunächst ein anderes Schaltflächensymbol aus, das zunächst angezeigt wird, und ändern es dann mit CSS in den rechten Pfeil.

Aktualisieren Sie das Schaltflächensymbol mit dem Einkaufswagensymbol, da unser CTA "Jetzt anzeigen" ist.

Gehen Sie dann zur Registerkarte Erweitert und aktualisieren Sie die aktuelle CSS-Transformationseigenschaft mit einer 180-Grad-Drehung anstelle von 360 Grad. Fügen Sie einen neuen Unicode für den Inhalt hinzu, der den linken Pfeil („\23“) anzeigt.

Das neue Snippet sieht so aus:

.flip-button-icon:hover:after {
  transform: rotateY(180deg);
  content: "\23"; 
}

Da wir das Symbol ebenfalls um 180 Grad drehen, wird beim Bewegen der Maus über die Schaltfläche ein Pfeil nach rechts anstelle des Warenkorbsymbols angezeigt.

Endergebnis

Dies ist das Endergebnis.

#2 So ändern Sie Hintergründe und Inhalt von Textmodulen

Gehen Sie für dieses nächste Design im Seitenlayout nach unten zum Abschnitt "Meine Dienste". Öffnen Sie dort die Zeileneinstellungen für die oberste Zeile mit den beiden Textbausteinen.

Spalteneinstellungen aktualisieren

Öffnen Sie unter den Zeileneinstellungen die Einstellungen für Spalte 1 und fügen Sie ein Hintergrundbild hinzu, wenn Sie den Mauszeiger auf die Spalte bewegen.

Dadurch wird der standardmäßig vorhandene weiße Hintergrund ersetzt.

Fügen Sie auch beim Hover einen Farbverlauf über dem Hintergrundbild hinzu.

Hintergrundfarbe links: rgba(255,255,255,0)
Hintergrundfarbe rechts: rgba(46,41,142,0.75)
Startposition: 30%
Farbverlauf über dem Hintergrundbild platzieren: JA

Dadurch wird eine schöne Überlagerung bereitgestellt, die den Ersetzungstext beim Hover besser lesbar macht.

Entfernen Sie danach den benutzerdefinierten Abstand für die Spalte, indem Sie ihn auf die Standardeinstellung zurücksetzen.

Passen Sie das Textmodul in Spalte 1 an

Nachdem die Spalte aktualisiert wurde, speichern Sie die Einstellungen und öffnen Sie die Textmodul-Einstellungen für das Textmodul in Spalte 1. Aktualisieren Sie dann den Textmodul-Textkörperinhalt bei Mauszeiger wie folgt:

<h3>Custom Cakes</h3>
<a href="#">Order Now</a>

Dies ist eine schöne Möglichkeit, einen Call-to-Action mit einem Link beim Hover hinzuzufügen.

Aktualisieren Sie als Nächstes den Hintergrund wie folgt:

Hintergrundfarbe: #ffffff;
Hintergrundfarbe (Hover): rgba(255,255,255,0);

Dies fügt ein schönes Übergangselement hinzu, um das Hintergrundbild in der Spalte allmählich anzuzeigen.

Aktualisieren Sie als Nächstes die folgenden Designeinstellungen:

Höhe: 260px

Polsterung: 30px oben, 30px links, 30px rechts
Polsterung (Hover): 90px oben

Dies erzeugt einen schönen Übergangseffekt, der den Text allmählich nach unten bringt, wenn Sie mit der Maus über das Textmodul fahren.

Aktualisieren Sie als Nächstes die Textfarben wie folgt auf Weiß:

Linktextfarbe: #ffffff
Überschrift 3 Textfarbe (Hover): #ffffff

Um den Übergang der Hover-Effekte zu verlangsamen, aktualisieren Sie die Übergangsdauer wie folgt:

Übergangsdauer: 500ms

Endergebnis

Sehen Sie sich nun das Endergebnis an.

#3 So ändern Sie den Inhalt beim Hover für mehrere Elemente mit dem Call-to-Action-Modul

Für dieses nächste Design verwenden wir ein Call-to-Action-Modul, das mehrere Inhaltselemente beim Hover ändert. Gehen Sie dazu die Seite nach unten zum Abschnitt Beliebte Sammlungen.

Neues Call-to-Action-Modul hinzufügen

Fügen Sie dann unter der Schaltfläche „Jetzt einkaufen“ in der obersten Reihe des Spezialitätenbereichs ein neues Call-to-Action-Modul hinzu.

CTA mit wechselnden Inhalten bei Hover aktualisieren

Aktualisieren Sie als Nächstes den Call-to-Action-Inhalt wie folgt:

Titel: „Sonderangebot“
Titel (Hover): "10 % Rabatt"
Schaltflächentext: „Jetzt einkaufen“
Schaltflächentext (Hover): „Get Deal“
Körper: "Benutzerdefinierte Cupcakes"
Schaltflächen-Link-URL: #

Einstellung vorerst speichern.

Layout-Schaltflächenstile kopieren und einfügen

Wir werden einen Sprung in die Gestaltung des Buttons für unseren CTA machen. Öffnen Sie dazu die Schaltflächeneinstellungen für das Schaltflächenmodul über dem CTA-Modul, das mit dem vorgefertigten Layout geliefert wurde. Klicken Sie dann auf das dreifache Punktsymbol in der Schaltflächenoptionsgruppe und wählen Sie "Schaltflächenstile kopieren".

Öffnen Sie dann das andere Optionsmenü des Call-to-Action-Moduls, das wir entwerfen, und wählen Sie "Schaltflächenstile einfügen".

Öffnen Sie dann die Einstellungen des Call-to-Action-Moduls und aktualisieren Sie die Tastenfüllung:

Tastenpolsterung: 15 Pixel oben, 15 Pixel unten, 40 Pixel links, 40 Pixel rechts

Textstile aktualisieren

Aktualisieren Sie danach das Design des Titels und des Textkörpers.

Titelüberschriftsebene: H4
Titelschriftart: Pacifico
Titeltextgröße: 9vw
Höhe der Titelzeile: 1,3 em
Körperschriftart: Open Sans
Schriftstärke des Hauptteils: Fett
Körpertextgröße: 18px
Abstand des Hauptbuchstabens: 1px

Endgültige Einstellungen

Aktualisieren Sie als Nächstes die Polsterung.

Auffüllen: 0px links, 0px rechts

Geben Sie dem Modul dann eine benutzerdefinierte CSS-Klasse.

CSS-Klasse: fade-cta-title

Machen Sie die cta-Schaltfläche auf die volle Breite, indem Sie das folgende benutzerdefinierte CSS zum Eingabefeld für Promo-Schaltflächen-CSS hinzufügen.

Und aktualisieren Sie die Übergangsdauer.

Übergangsdauer: 800ms

Aktualisieren Sie schließlich die Hintergrundfarbe, sodass sie standardmäßig transparent ist und die Farbe beim Schweben ändert.

Hintergrundfarbe: keine (löschen)
Hintergrundfarbe (Hover): rgba(247,78,72,0.86)

Löschen Sie als Nächstes die beiden Module in der Zeile über unserem Call-to-Action-Modul, damit es den ursprünglichen cta aus dem Layout ersetzt.

Ergebnis bisher

Hier das bisherige Ergebnis. Beachten Sie, wie sich der Titeltext und der Schaltflächentext ändern, wenn Sie mit der Maus über das Call-to-Action-Modul fahren.

Abschwächung der Inhaltsänderung mit Animation

Wenn wir den Übergang des großen Titels im CTA abschwächen möchten, können wir eine einfache Animation mit CSS hinzufügen. Da wir das Modul CSS-Klasse bereits hinzugefügt haben, müssen wir nur das Seiteneinstellungen-Modal öffnen und das folgende benutzerdefinierte CSS hinzufügen:

.fade-cta-title:hover .et_pb_module_header {
  animation-name: fadeinout;
  animation-duration: 800ms;
}

@keyframes fadeinout {
  from {opacity: 0;}
  to {opacity: 1;}
}

Endergebnis

Schauen wir uns nun das Endergebnis an.

Und hier ist es auf dem Handy.

Abschließende Gedanken

In diesem Tutorial haben wir 3 Beispiele gezeigt, wie Sie Inhalte beim Hovern in Divi effektiv ändern können. Die integrierten Hover-Optionen für Inhalte machen dies wirklich zu einem einfachen Vorgang. Und mit ein paar CSS-Schnipseln können Sie einige einzigartige Übergänge hinzufügen, um das Design von anderen abzuheben. Hoffentlich können Sie so die Calls-to-Action auf Ihrer eigenen Website für mehr Conversions und Engagement steigern.

Mehr wollen? Wir haben eine Menge großartiger Beiträge, die dazu beitragen, Ihre CTAs auf die nächste Stufe zu heben.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!