Erstellen eines "Erste Schritte"-CTAs, der mehrere Optionen auf Hover aufzeigt
Veröffentlicht: 2019-06-26Viele Unternehmen werden auf ihrer Homepage einen CTA für den Einstieg aufnehmen. Dies ist normalerweise der primäre Call-to-Action auf der Seite, da er den Benutzer durch einen beabsichtigten Prozess führt. Es könnte sich um eine einfache Schaltfläche "Jetzt loslegen" handeln, die auf eine andere Seite verweist. Oder es könnte sich um einen Abschnitt einer Seite handeln, der Anweisungen für die ersten Schritte und/oder verschiedene Optionen enthält, die der Benutzer wählen kann, um den vom Unternehmen beabsichtigten Prozess zu starten.
In diesem Tutorial zeigen wir Ihnen, wie Sie einen „Erste Schritte“-CTA erstellen, der mehrere „Erste Schritte“-Optionen beim Bewegen des Mauszeigers anzeigt. Mit Divi entwerfen wir einen Abschnitt, der als große Schaltfläche angezeigt wird. Wenn Sie dann mit der Maus über die Schaltfläche fahren, werden die Optionen so angezeigt, als würde ein vertikaler Schieberegler die nächste Folie anzeigen.
Das Design ist elegant und die Funktionalität könnte in vielerlei Hinsicht nützlich sein.
Lass uns anfangen.
Vorgeschmack
Hier ist ein kurzer Blick auf den CTA „Erste Schritte“, den wir in diesem Tutorial erstellen werden.
Laden Sie das CTA-Divi-Layout „Erste Schritte“ KOSTENLOS herunter
Um das Design 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.
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.
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, benötigen Sie Folgendes:
- Das Divi Theme installiert und aktiv
- Eine neue Seite, die erstellt wurde, um das Frontend von Grund auf neu zu erstellen (visueller Builder)
- Bilder, die für simulierte Inhalte verwendet werden sollen
Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.
Implementierung des CTA-Designs „Get Started Here“ in Divi
Die Grundidee hinter diesem Design besteht darin, den Inhalt eines Abschnitts nach oben zu verschieben, wenn Sie mit der Maus über den Abschnitt fahren. Dazu müssen wir sicherstellen, dass unser Abschnitt eine feste Höhe mit ausgeblendetem Überlauf hat. Dadurch werden die CTA-Optionen vor dem Hover-Zustand ausgeblendet. Dann können wir Margin verwenden, um unsere Module zu positionieren und Top Padding, um den Inhalt beim Hover in die Ansicht zu bringen.
Beginnen wir mit dem Abschnitt.
Abschnitt erstellen
Erstellen Sie zum Auftakt einen regulären Abschnitt mit einer einspaltigen Zeile. Bevor wir dann Module hinzufügen, aktualisieren wir die Abschnittseinstellungen.
Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:
Hintergrundfarbe: #2b87da
Breite: 90%
Maximale Breite: 1100px
Abschnittsausrichtung: Mitte
Rand: 6vw oben, 6vw unten (nur um etwas Luft zum Atmen zu geben)
Polsterung (Desktop): 300px oben, 0px unten
Polsterung (Tablet): 0px oben, 15% unten
Fügen Sie dann einige abgerundete Ecken hinzu. Dadurch entsteht unser knopfähnliches Design, wenn wir dem Abschnitt eine maximale Höhe geben.
Abgerundete Ecken: 140 Pixel (Desktop), 20 Pixel (Hover), 10 Pixel (Tablet)
Geben Sie ihm dann einen Boxschatten (siehe Screenshot).
Wir werden an dieser Stelle nicht alle Einstellungen hinzufügen, die für das endgültige Design erforderlich sind. Wir müssen zurückkommen und ihm eine feste Höhe und einen Schwebeeffekt geben. Aber jetzt fügen wir den Inhalt hinzu.
Erstellen der ersten Inhaltszeile
Öffnen Sie die Einstellungen für die von Ihnen erstellte einspaltige Zeile und aktualisieren Sie Folgendes:
Breite: 100%
Padding: 0px oben, 0px unten, 5% links, 5% rechts
Fügen Sie innerhalb der einspaltigen Zeile ein Textmodul hinzu.
Fügen Sie dann die folgende h2-Überschrift zum Textkörperinhalt hinzu.
<h2>Get Started Here...</h2>
Aktualisieren Sie die Designeinstellungen wie folgt:
Überschrift 2 Schriftart: Nunito
Überschrift 2 Schriftstärke: Fett
Überschrift 2 Textfarbe: #ffffff
Überschrift 2 Textgröße: 78px (Desktop und Tablet), 46px (Telefon)
Maximale Breite: 500px
Höhe: 300px (Desktop), automatisch (Tablet und Telefon)
Rand: -300px oben (Desktop), 0px oben (Tablet und Telefon)
Polsterung: 7% oben
Die Höhe von 300px und der obere Rand von -300px bringen das Textmodul nach oben, um die 300px obere Auffüllung des Abschnitts auszufüllen. Wenn wir später die Polsterung des oberen Abschnitts beim Hover entfernen, scrollt das Textmodul nach oben über den Abschnitt.
Erstellen der zweiten Inhaltszeile
In der zweiten Inhaltszeile werden wir unsere CTA-Optionen hinzufügen. Fahren Sie fort und fügen Sie eine neue Zeile mit einem dreispaltigen Layout hinzu.
Aktualisieren Sie dann die Zeileneinstellungen wie folgt:
Breite: 100%
Maximale Breite: 100%
Padding: 0px oben, 0px unten
Fügen Sie dann in Spalte 1 ein Klappenmodul hinzu.
Aktualisieren Sie dann die Klappeneinstellungen wie folgt:
Nehmen Sie den Standardtextkörper heraus und lassen Sie den Titel.
Fügen Sie dann ein Bildsymbol hinzu (90 x 90). Oder Sie können ein normales Divi-Symbol verwenden, wenn Sie möchten.
Fügen Sie einen Hintergrund hinzu und aktualisieren Sie das Design des Titeltexts.
Hintergrundfarbe: #ffffff
Titelschriftart: Nunito
Schriftstärke des Titels: Ultra Bold
Titelschriftart: TT
Ausrichtung des Titeltextes: Mitte
Titel Textfarbe: #2b87da
Titeltextgröße: 14px
Bevor wir die Klappentexte kreisförmig machen können, müssen wir dem Klappentext zuerst eine gleiche Höhe und Breite geben. Dann können wir den Abstand verwenden, um den Klappentext und den Klappentext in der Mitte auszurichten.
Inhaltsbreite: 200px (Desktop), 250px (Tablet)
Breite: 250px (Desktop), 300px (Tablet)
Modulausrichtung: Mitte
Höhe: 250px (Desktop), 300px (Tablet)
Rand: 25px oben, 0px unten
Polsterung: 50px oben (Desktop), 75px oben (Tablet und Telefon)
Um das Kreisdesign zu vervollständigen, geben Sie dem Klappentext eine abgerundete Ecke und einen Kastenschatten.
Abgerundete Ecken: 50%
Box Shadow: siehe Screenshot
Damit ist unser erster Klappentext erledigt. Um die nächsten beiden zu erstellen. Kopieren Sie den Klappentext und fügen Sie ihn in Spalte 2 und Spalte 3 ein. Aktualisieren Sie dann das Bildsymbol für jedes. Es sollte wie folgt aussehen:
Letzter Schliff zum Abschnitt
Um das CTA-Design „Erste Schritte“ abzuschließen, müssen wir den Abschnitt noch etwas aktualisieren. Aktualisieren Sie die folgenden Abschnittseinstellungen:
Höhe: 300px (Desktop), automatisch (Tablet und Telefon)
Horizontaler Überlauf: versteckt
Vertikaler Überlauf: versteckt
Dadurch bleibt der Abschnitt auf der gleichen Höhe wie der Inhalt in Zeile 1 und Zeile 2. Durch das Ausblenden des Überlaufs wird der Inhalt in Zeile 2 ausgeblendet, bis wir ihn beim Schweben sichtbar machen.
Um den Inhalt von Zeile 2 anzuzeigen, müssen wir die obere Auffüllung des Abschnitts beim Schweben entfernen.
Polsterung (Hover): 0px oben
Sehen Sie sich nun das bisherige Ergebnis an. Der Inhalt wird nach oben gescrollt, um den Inhalt in Zeile 2 anzuzeigen, die die drei CTA-Optionen anzeigt.
Um den Abschnitt eher wie eine Schaltfläche erscheinen zu lassen, können wir ihn mit den Transformationsoptionen verkleinern und ihn dann beim Hover wieder auf die normale Größe bringen. Aktualisieren Sie die folgenden Transformationsoptionen für den Abschnitt.
Transformationsskala (Desktop): 70%
Skalierung transformieren (Hover): 100%
Transformationsskala (Tablet): 100%
Fügen Sie nun eine Hintergrundbildgrafik (500 x 500) hinzu, um die richtige Größe des Abschnitts aufzunehmen.
Hintergrundbild: Bild einfügen
Hintergrundbildgröße: tatsächliche Größe
Position des Hintergrundbilds: Mitte rechts (Desktop), Oben rechts (Tablet), Oben links (Telefon)
Hinzufügen von Link-URLs zu den Blurbs und Skalieren bei Hover
Da unsere Klappentexte in Wirklichkeit als Kreisschaltflächen dienen, müssen wir jedem Klappentext Modul-Link-URLs hinzufügen. Sie müssen natürlich Ihre eigenen hinzufügen, um Ihren Bedürfnissen zu entsprechen.
Da die Klappen im Visual Builder ausgeblendet sind, schalten Sie den Drahtmodellansichtsmodus um und aktualisieren Sie jede der Klappeneinstellungen mit der Modullink-URL.
Bleiben Sie dann im Drahtmodellansichtsmodus und verwenden Sie die Mehrfachauswahl, um alle drei Klappentexte auszuwählen. Und öffnen Sie die Einstellungen eines der Klappentexte, um die Elementeinstellungen für alle drei zu aktualisieren. Aktualisieren Sie dann die Transformationsoption wie folgt:
Skalierung transformieren (Hover): 105%
Das ist es!
Das Endergebnis
Schauen wir uns das endgültige Design des CTA „Get Started“ an.
Und hier ist das Design auf Tablet und Telefon.
Abschließende Gedanken
Der CTA „Get Started“ ist heute im Web üblich. Hoffentlich hilft Ihnen dieses Tutorial, es auf die nächste Stufe zu bringen. Und haben Sie keine Angst, über andere Möglichkeiten nachzudenken, diese Funktionalität zu verwenden. Denk darüber nach. Sie können dem Abschnitt jeden gewünschten Inhalt hinzufügen!
Fühlen Sie sich frei, Ihre Gedanken in den Kommentaren unten zu teilen.
Ich freue mich darauf, von dir zu hören.
Danke schön!