So fügen Sie mit Divi . Hover-animierte Eckpfeile zu Ihrem Design hinzu

Die Art und Weise, wie Sie Ihren CTA auf einer von Ihnen gestalteten Seite präsentieren, kann einen großen Einfluss darauf haben, wie Ihre Besucher handeln. Sie können dies am häufigsten tun, indem Sie das Schaltflächenformat mit Kopie in der Mitte verwenden, aber Sie können auch damit kreativ werden. Im heutigen Tutorial zeigen wir Ihnen eine kreative Möglichkeit, einen Call-to-Action in Ihr Divi-Design aufzunehmen. Um genau zu sein, werden wir Hover-animierte Pfeile für die Eckschaltflächen einfügen. Sobald ein Pfeil mit der Maus bewegt wird, ändert sich die Pfeilrichtung neben dem Stil. Sie können auch die JSON-Datei dieses Designs kostenlos herunterladen!

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 Layout KOSTENLOS herunter

Um das kostenlose Layout 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!

Neuen Spezialbereich hinzufügen

Fügen Sie der Seite, an der Sie gerade arbeiten, einen neuen Spezialbereich hinzu. Wählen Sie dafür folgende Spaltenstruktur aus:

Hintergrund mit Farbverlauf

Öffnen Sie die Abschnittseinstellungen und wenden Sie den folgenden Verlaufshintergrund an:

• Farbe 1: #fff8f5
• Farbe 2: #f9f3ef
• Verlaufstyp: Radial
• Radiale Richtung: Unten links
• Startposition: 40%
• Endposition: 40%

Größe

Wechseln Sie zur Registerkarte Design des Abschnitts und ändern Sie die Größeneinstellungen wie folgt:

• Spaltenhöhen ausgleichen: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Innenbreite: 90%
• Innere maximale Breite: 1580px

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie Spalte 1 etwas rechtes Auffüllen hinzu.

• Spalte 1 rechte Polsterung: 6%

Textmodul Nr. 1 zu Spalte 1 hinzufügen

H2-Inhalt hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem Textmodul in Spalte 1. Fügen Sie H2-Inhalte Ihrer Wahl hinzu.

H2-Texteinstellungen

Gestalten Sie die H2-Texteinstellungen des Moduls wie folgt:

• Überschrift 2 Schriftart: Kumbh Sans
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textfarbe: #08665c
• Überschrift 2 Textgröße:
  • Desktop: 75px
  • Tablet: 60px
  • Telefon: 45px

Abstand

Fügen Sie als nächstes einen oberen und unteren Rand hinzu.

• Oberer Rand: 50px
• Unterer Rand: 50px

Textmodul #2 zu Spalte 1 hinzufügen

Beschreibungsinhalt hinzufügen

Fügen Sie unterhalb des vorherigen ein weiteres Textmodul mit einem beliebigen Beschreibungsinhalt Ihrer Wahl hinzu.

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls wie folgt:

• Textschriftart: Kumbh Sans
• Textfarbe: #08665c
• Textgröße: 16px
• Textzeilenhöhe: 1.8em

Abstand

Fügen Sie auch bei kleineren Bildschirmgrößen etwas unteren Rand hinzu.

• Unterer Rand:
  • Desktop: /
  • Tablet & Telefon: 50px

Zeile 1 zu Spalte 2 hinzufügen

Spaltenstruktur

Weiter zur zweiten Spalte des Abschnitts. Fügen Sie dort eine erste Zeile mit der folgenden Spaltenstruktur hinzu

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

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

Spalte 1 Einstellungen

Hintergrundfarbe

Öffnen Sie dann die Einstellungen von Spalte 1 und wenden Sie eine Hintergrundfarbe Ihrer Wahl an.

• Hintergrundfarbe: #cccccc

Abstand

Wechseln Sie zu den Abstandseinstellungen der Spalte und verwenden Sie die folgenden responsiven Werte:

• Obere Polsterung:
  • Desktop: 100px
  • Tablet & Telefon: 70px
• Linke Polsterung:
  • Desktop und Tablet: 8%
  • Telefon: 10%
• Rechte Polsterung:
  • Desktop und Tablet: 8%
  • Telefon: 10%

Grenze

Fügen Sie auch einige abgerundete Ecken zu den Rahmeneinstellungen hinzu.

• Alle Ecken: 10px

Sichtweite

Vervollständigen Sie die Spalteneinstellungen, indem Sie die Überläufe auf der Registerkarte "Erweitert" auf sichtbar setzen.

• Horizontaler Überlauf: Sichtbar
• Vertikaler Überlauf: Sichtbar

Textmodul Nr. 1 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul in Spalte 1. Fügen Sie Inhalte Ihrer Wahl hinzu.

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls:

• Textschriftart: Kumbh Sans
• Schriftstärke des Textes: Leicht
• Textfarbe: #08665c
• Textgröße: 30px
• Textzeilenhöhe: 1em

Abstand

Wenden Sie auch einen unteren Rand an.

• Unterer Rand: 15px

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Fügen Sie dann ein Teilermodul hinzu. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Wechseln Sie zur Design-Registerkarte des Moduls und ändern Sie die Linienfarbe.

• Linienfarbe: #fff8f5

Größe

Ändern Sie auch die Größeneinstellungen.

• Teilergewicht: 2px
• Höhe: 2px

Abstand

Fügen Sie auch einen unteren Rand hinzu.

• Unterer Rand: 50px

Textmodul #2 zu Spalte 1 hinzufügen

H3-Inhalt hinzufügen

Fügen Sie der Spalte 1 ein weiteres Textmodul hinzu. Verwenden Sie H3-Inhalte Ihrer Wahl.

H3-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H3-Texteinstellungen wie folgt:

• Überschrift 3 Schriftart: Kumbh Sans
• Überschrift 3 Schriftstärke: Fett
• Überschrift 3 Textfarbe: #08665c
• Überschrift 3 Textgröße:
  • Desktop: 48px
  • Tablet: 38px
  • Telefon: 32px

Abstand

Verwenden Sie auch einen unteren Rand.

• Unterer Rand: 15px

Textmodul #3 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fügen Sie der Spalte 1 das letzte Textmodul mit einem beliebigen Beschreibungsinhalt Ihrer Wahl hinzu.

Texteinstellungen

Ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Kumbh Sans
• Textfarbe: #08665c
• Textgröße: 16px
• Textzeilenhöhe: 1.8em

Abstand

Fügen Sie auch einen unteren Rand hinzu.

• Unterer Rand:
  • Desktop: 200px
  • Tablet & Telefon: 150px

Blurb-Modul zu Spalte 1 hinzufügen

Inhaltsboxen leer lassen

Zum letzten Modul, das wir in dieser Spalte benötigen, ist es ein Blurb-Modul. Lassen Sie die Inhaltsfelder leer.

Standardsymbol

Wählen Sie als nächstes das Pfeilsymbol aus.

Hover-Symbol

Ändern Sie das Symbol beim Bewegen des Mauszeigers.

Link hinzufügen

Verwenden Sie auch für dieses Modul einen Link.

Hintergrundfarbe schweben

Fügen Sie dann eine Hover-Hintergrundfarbe hinzu.

• Hover-Hintergrundfarbe: #08665c

Standardsymboleinstellungen

Navigieren Sie zur Registerkarte Design und ändern Sie die Symboleinstellungen wie folgt:

• Symbolfarbe: #ffffff
• Bild-/Symbolplatzierung: Oben
• Bild-/Symbolausrichtung: Rechts
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 80px

Hover-Symboleinstellungen

Ändern Sie die Schriftgröße des Symbols beim Bewegen des Mauszeigers.

• Schriftgröße des Hover-Symbols: 40px

Größe

Fügen Sie dann den Größeneinstellungen etwas Breite hinzu.

• Breite: 80px

Hover-Abstand

Ändern Sie die obere und rechte Polsterung beim Schweben.

• Hover-Top-Polsterung: 25px
• Hover Right Padding: 10px

Grenze

Fügen Sie auch einige abgerundete Ecken in die Rahmeneinstellungen ein.

• Alle Ecken: 5px

Hover-Skala

Verwenden Sie dann die Transformationsskalierungsoption beim Bewegen des Mauszeigers.

• Beide schweben: 130%

CSS für Hauptelement und Blurb-Bild

Navigieren Sie als Nächstes zur Registerkarte „Erweitert“ und verwenden Sie die folgende CSS-Codezeile für das Hauptelement:

cursor: pointer;

Verwenden Sie diese Zeile für das Blurb-Image-CSS-Feld:

margin-bottom: 0px;

Position

Vervollständigen Sie die Moduleinstellungen, indem Sie es in den Positionseinstellungen neu positionieren:

• Position: Absolut
• Ort: Rechts unten

Spalte 1 wiederverwenden

Spalte 2 entfernen

Sobald Sie die erste Spalte ausgefüllt haben, können Sie sie für die zweite wiederverwenden. Entfernen Sie dazu zuerst die zweite Spalte.

Spalte 1 klonen

Klonen Sie dann den ersten.

Hintergrundfarbe von Spalte 2 ändern

Natürlich müssen Sie einige Änderungen an der Duplikatspalte vornehmen, beginnend mit der Hintergrundfarbe.

• Spalte 2 Hintergrundfarbe: #f0c7b1

Transformieren Übersetzen zu Spalte 2 hinzufügen

Wir fügen auch bei kleineren Bildschirmgrößen einen Transformationsübersetzungswert hinzu.

• Rechts:
  • Desktop: /
  • Tablet & Telefon: 50px

Doppelten Inhalt ändern

Stellen Sie sicher, dass Sie alle doppelten Inhalte ändern.

Blurb-Modul-Link ändern

Vervollständigen Sie die duplizierte Spalte, indem Sie den Link im Blurb-Modul ändern.

Zeile wiederverwenden

Nachdem Sie die erste Zeile und ihre Spalten fertiggestellt haben, können Sie die gesamte Zeile klonen.

Spalte 2 entfernen

Löschen Sie die zweite Spalte in den Zeileneinstellungen.

Spaltenhintergrundfarbe ändern

Ändern Sie dann die Hintergrundfarbe der verbleibenden Spalte.

• Spaltenhintergrundfarbe: #dfe7f2

Oberen Rand zur Zeile hinzufügen

Gehen Sie zurück zu den allgemeinen Zeileneinstellungen und fügen Sie einen ansprechenden oberen Rand hinzu.

• Oberer Rand:
  • Desktop: 50px
  • Tablet & Telefon: 100px

Doppelten Inhalt ändern

Ändern Sie dann alle doppelten Inhalte in der Spalte.

Blurb-Modul-Link ändern

Schließen Sie das Tutorial ab, indem Sie den Link im Blurb-Modul ändern. Das ist es!

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

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Ihren CTAs kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie mit dem Mauszeiger animierte Pfeile für die Eckschaltflächen hinzufügen. Dieser Ansatz hilft Ihnen, beim Entwerfen eines Abschnitts mit mehreren CTAs ein sauberes Erscheinungsbild beizubehalten. Es fügt auch eine zusätzliche Ebene der Interaktion hinzu. Sie konnten die JSON-Datei kostenlos herunterladen. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen!

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.