So erstellen Sie einen auffälligen CTA in Divi mit ein paar einfachen Hover-Effekten

Subtile Interaktionen und Hover-Effekte können nützlich sein, um einen auffälligen CTA (Call to Action) zu erstellen. Der Trick besteht darin, Effekte zu verwenden, die Ihren CTA attraktiver und intuitiver machen, damit Benutzer eher Maßnahmen ergreifen. Und da das Endziel der meisten CTAs darin besteht, auf einen Link oder eine Schaltfläche zu klicken, ist es wichtig, Ihren CTA so zu optimieren, dass diese anklickbaren Elemente in den Vordergrund rücken.

In diesem Tutorial zeige ich Ihnen, wie Sie Divi verwenden, um die Sichtbarkeit von CTAs mit mehreren Hover-Effekten zu optimieren. Ich zeige Ihnen, wie Sie Abschnittsteilerhintergründe beim Hover hinzufügen, um Ihre CTAs für besseren Kontrast und bessere Lesbarkeit zu inszenieren. Und ich zeige Ihnen, wie Sie den CTA vergrößern und mit der Maus in die Mitte der Seite verschieben, damit er zum Hauptfokus wird. Diese Hover-Effekte werden nützlich sein, um jeden Call-to-Action hervorzuheben und hoffentlich die Benutzererfahrung zu verbessern.

Lass uns anfangen.

Vorgeschmack

Hier ist ein Blick auf die auffälligen CTA-Hover-Effekte, die wir in diesem Tutorial erstellen werden.

Laden Sie das auffällige CTA-Hover-Effekt-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!

Abonnieren Sie unseren Youtube-Kanal

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, benötigen Sie Folgendes:

1. Das Divi Theme installiert und aktiv
2. Eine neue Seite, die erstellt wurde, um das Frontend von Grund auf neu zu erstellen (visueller Builder)
3. Ein Hintergrundbild, das im Designbuild verwendet werden soll. Ich werde eines aus dem Veterinarian Layout Pack für dieses Tutorial verwenden.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Implementieren der auffälligen CTA-Hover-Effekte in Divi

In diesem Designbeispiel beginnen wir mit einem Call-to-Action-Modul, das links- oder rechtsbündig ausgerichtet ist. Dann bringen wir das Modul in die Mitte der Seite und skalieren (oder vergrößern) es, wenn wir mit der Maus über die Reihe fahren. Um den Call-to-Action im Zeilen-Hover-Zustand noch stärker hervorzuheben, werden wir ihn inszenieren, indem wir Abschnittsteiler hinzufügen, die sich für einen besseren Kontrast hinter dem Modul schließen.

So geht's.

Abschnitt und Zeile erstellen

Erstellen Sie zunächst einen regulären Abschnitt mit einer einspaltigen Zeile.

Öffnen Sie vor dem Hinzufügen eines Moduls die Abschnittseinstellungen und aktualisieren Sie Folgendes:

Fügen Sie ein Hintergrundbild mit dem Brennpunkt des Bildes auf der rechten Seite hinzu, damit es beim Hinzufügen unseres Moduls auf der linken Seite sichtbar bleibt.

• Maximale Breite: 1080px
• Abschnittsausrichtung: Mitte

Damit ist der Abschnitt vorerst erledigt. Wir werden später zu den Abschnittseinstellungen zurückkehren, um die Schwebeeffekte für den Abschnittsteiler hinzuzufügen.

Öffnen Sie als Nächstes die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Breite: 100%
• maximale Breite: 100%
• Polsterung: 5 % oben, 5 % unten, 35 % rechts

Die rechte Polsterung ist der Schlüssel zu diesem Design, da sie den Inhalt nach links schiebt. Wir kommen später zurück, um unsere Hover-Optionen hinzuzufügen, um den Inhalt der Zeile später wieder in die Mitte zu verschieben.

Hinzufügen des Call-to-Action-Moduls

Jetzt sind wir bereit, das Call-to-Action-Modul zu erstellen, das das Hauptaugenmerk unseres auffälligen CTAs bilden wird.

Fahren Sie fort und fügen Sie der einspaltigen Zeile ein Call-to-Action-Modul hinzu.

Aktualisieren Sie dann die Einstellungen des Call-to-Action-Moduls wie folgt:

Inhalt

• Titel: Erstbesuchsrabatt
• Schaltfläche: Termin vereinbaren
• Schaltflächen-Link-URL: #

Entwurf

• Hintergrundfarbe: #ffffff
• Textfarbe: Dunkel
• Titelschriftart: Nunito
• Schriftstärke des Titels: Fett
• Titeltextgröße: 36px

• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #154c87
• Breite des Tastenrahmens: 0px
• Maximale Breite: 500px
• Modulausrichtung: Mitte
• Runde Ecken: 10px

Ein Schlüsselmerkmal dieses Designs ist die maximale Breite von 500px. Dadurch wird sichergestellt, dass sich die Breite des Moduls nicht ändert, wenn wir später die rechte Polsterung der Zeile beim Hover anpassen.

• Box Shadow: siehe Screenshot
• Vertikale Position des Kastenschattens: 30px
• Stärke der Box-Schattenunschärfe: 100px
• Stärke der Box-Schattenausbreitung: -30px

Skalieren und Zentrieren des Call-to-Action beim Schweben über der Reihe

Jetzt sind wir bereit, unsere auffälligen CTA-Hover-Effekte hinzuzufügen. An dieser Stelle möchten wir zwei Dinge erreichen, wenn wir mit der Maus über die Reihe fahren. Zuerst wollen wir den CTA in die Mitte verschieben. Und dann wollen wir das Modul skalieren (vergrößern), um es noch sichtbarer zu machen.

Öffnen Sie dazu die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Polsterung (Hover): 0% rechts

Passen Sie dann die Polsterung für die mobile Anzeige an:

• Polsterung (Tablette): 0% rechts
• Polsterung (Telefon): 5% links, 5% rechts

Um den CTA zu vergrößern, fügen Sie die folgende Transformationseigenschaft zur Zeile beim Hover hinzu:

• Skalierung transformieren (Hover): 110%

Auch wenn die Transformations-Skalierungseigenschaft auf die Zeile angewendet wird, gilt dies indirekt auch für alle untergeordneten Elemente innerhalb der Zeile, einschließlich des Moduls. Daher wird das Modul auf 110 % skaliert, wenn Sie mit der Maus über die Reihe fahren.

Inszenieren des CTA im Schwebeflug mit Abschnittstrennern

Schließlich sind wir bereit, Abschnittsteiler hinzuzufügen, um die Cta zu inszenieren, wenn Sie mit der Maus über den Abschnitt/die Reihe fahren. Der Schlüssel hier ist, sicherzustellen, dass der Abschnitt und die Reihe die gleiche Höhe und Breite haben, damit der Benutzer gleichzeitig ohne Lücken über den Abschnitt und die Reihe schwebt. Wir müssen also alle Abschnittsauffüllungen entfernen. Dann müssen wir einen oberen und unteren Abschnittsteiler erstellen, der beim Schweben über dem Abschnitt in der Höhe zunimmt.

Hier ist, was zu tun ist.

Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

Padding: 0px oben, 0px unten

• Top Divider Style (Desktop): siehe Screenshot
• Top Divider-Stil (Tablet und Telefon): keine
• Farbe des oberen Teilers: rgba(21,76,135,0.61)
• Höhe des oberen Teilers (Standard): 0%
• Höhe des oberen Teilers (schweben): 120%
• Top Divider Flip: horizontal

• Bottom Divider Style (Desktop): siehe Screenshot
• Unterteiler-Stil (Tablet und Telefon): keine
• Farbe des unteren Teilers: rgba(21,76,135,0.61)
• Höhe des unteren Teilers (Standard): 0%
• Höhe des unteren Teilers (schweben): 120%
• Unterteiler Flip: horizontal

Um sicherzustellen, dass die Trennlinien nicht außerhalb des Abschnitts angezeigt werden, aktualisieren Sie die vertikale und horizontale Überlaufoption auf ausgeblendet.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Schauen wir uns nun das Endergebnis an.

Endergebnis

Und hier ist das Design auf Tablet und Telefon.

Ändern der Position des CTA

Wenn Sie die Anfangsposition des Call-to-Action-Moduls vor dem Hover-Zustand ändern möchten, können Sie den Zeilenabstand einfach aktualisieren.

Von der rechten Seite

Angenommen, Sie möchten, dass das Modul rechts beginnt, bevor Sie den Mauszeiger bewegen. Aktualisieren Sie einfach die Zeileneinstellungen wie folgt:

• Polsterung: 35% übrig
• Polsterung (Hover): 0% übrig

Sie möchten das Bild aktualisieren, um einen linken Brennpunkt zu haben. Danach hier das Ergebnis.

Vom Boden

Oder, wenn Sie möchten, können Sie das CTA-Popup am unteren Rand der Zeile anzeigen. Dazu müssen Sie dem Abschnitt eine feste Höhe hinzufügen und dann das Modul mit etwas oberer Polsterung nach unten bringen.

Öffnen Sie die Abschnittseinstellungen und geben Sie dem Abschnitt eine maximale Höhe und stellen Sie den Überlauf auf ausgeblendet ein.

• Maximale Höhe (Desktop): 415px
• Horizontaler Überlauf: versteckt
• Vertikaler Überlauf: versteckt

Öffnen Sie dann die Zeileneinstellungen und aktualisieren Sie die Polsterung, um das Modul teilweise aus dem Sichtbereich unter den Abschnitt zu schieben. Nehmen Sie dann die obere Polsterung beim Schweben heraus, um sie wieder nach oben zu bringen.

• Polsterung (Desktop): 25 % oben, 5 % unten
• Polsterung (Hover): 5% oben

Hier ist das Ergebnis…

Abschließende Gedanken

Divi macht es einfach und macht Spaß, alle Arten von Hover-Effekten zu Ihren Webseitendesigns hinzuzufügen. Die besten Hover-Effekte sind diejenigen, die zielgerichtet sind und die Benutzererfahrung tatsächlich verbessern. Die wenigen einfachen Hover-Effekte, die in diesem Beitrag behandelt werden, sollten dazu beitragen, einige auffällige CTAs zu erstellen, die gut aussehen, die Benutzererfahrung verbessern und hoffentlich zu mehr Conversions führen.

Weitere Ideen finden Sie in unserem Beitrag zu 3 Möglichkeiten, wie Sie die Hover-Optionen verwenden können, um CTAs in Divi hervorzuheben, und unseren Beitrag zum Erstellen von Slide-in-CTAs.

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

Danke schön!