So fügen Sie einer beliebigen Ecke Ihrer Seitenvorlage in Divi . einen schließbaren Slide-In-Call-to-Action hinzu

Ein Slide-In Call-to-Action auf Ihrer Website ist eine der am wenigsten aufdringlichen Möglichkeiten, die Aufmerksamkeit Ihrer Besucher auf sich zu ziehen. Meistens ignorieren sie CTA einfach oder schließen sie, um die Seite weiter zu durchsuchen, aber manchmal werden Sie sie für sich gewinnen. Ein Slide-in-Call-to-Action eignet sich hervorragend, um für fast alles auf einer Landingpage zu werben.

In diesem Tutorial werden wir einen schließbaren Slide-In-Call-to-Action entwerfen, der mit dem Divi Theme Builder zu jeder Ecke einer Seite hinzugefügt werden kann. Sobald Sie fertig sind, haben Sie die Möglichkeit, Ihre Produkte und Sonderangebote überall auf der Seite zu bewerben, ohne ein Plugin verwenden zu müssen.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf die vier Slide-In-CTAs, die wir zu allen vier Ecken der Seitenvorlage hinzufügen werden. Natürlich müssen Sie nicht alle vier gleichzeitig bereitstellen. Beachten Sie, wie jeder CTA geschlossen werden kann, indem Sie auf das „x“-Symbol klicken, und dann können Sie den CTA wieder öffnen, indem Sie auf das „Plus“-Symbol klicken.

Laden Sie die Slide-In Call-to-Action-Divi-Seitenvorlage KOSTENLOS herunter

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

Um das Layout in Ihre Seite zu importieren, extrahieren Sie einfach die ZIP-Datei und fügen Sie eine der JSON-Dateien mit der Option „Theme Builder Portability“ zum Divi Theme Builder hinzu.

Kommen wir zum Tutorial, sollen wir?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie das Divi-Theme installieren und aktivieren. Stellen Sie sicher, dass Sie die neueste Version von Divi haben.

Außerdem benötigen Sie zu Testzwecken mindestens eine mit dem Divi Builder erstellte Seite, um dieser Seite die neue Vorlage zuzuweisen, um das Ergebnis anzuzeigen.

Danach sind Sie bereit zu gehen.

Erstellen eines schließbaren Slide-In-Call-to-Action für jede Ecke Ihrer Seitenvorlage in Divi

Erstellen einer neuen Vorlage

Navigieren Sie im WordPress-Dashboard zu Divi > Theme Builder. Klicken Sie dann auf das Feld „Neue Vorlage hinzufügen“, um eine neue Vorlage zu erstellen.

Weisen Sie die Vorlage den Seiten zu, auf denen die Werbeleiste angezeigt werden soll.

Klicken Sie in der neuen Vorlage auf den Bereich "Benutzerdefinierten Körper hinzufügen" und wählen Sie dann "Benutzerdefinierten Körper erstellen".

Wählen Sie dann die Option „Von Grund auf neu erstellen“.

Erstellen des Abschnitts „Beitragsinhalt“

Der Abschnitt für den Beitragsinhalt ist ein notwendiger Bestandteil jeder Seitenvorlage, um den tatsächlichen Inhalt der Seite oder des in Divi oder WordPress erstellten Beitrags anzuzeigen. Wir werden dies unserer Vorlage hinzufügen, bevor wir unseren ersten Slide-In-Call-to-Action erstellen.

Zeile mit einer Spalte hinzufügen

Fügen Sie dem regulären Abschnitt zunächst eine einspaltige Zeile hinzu.

Modul für Beitragsinhalt hinzufügen

Fügen Sie dann der Zeile ein Post-Content-Modul hinzu.

Zeileneinstellungen

Aktualisieren Sie danach die Zeileneinstellungen wie folgt:

• Breite: 100%
• Maximale Breite: 100%
• Padding: 0px oben, 0px unten

Erstellen des Slide-In-Call-to-Action oben links

Nachdem unser Post-Content-Modul nun eingerichtet ist, können wir damit beginnen, unseren ersten Slide-In-Call-to-Action in der oberen linken Ecke der Seitenvorlage hinzuzufügen.

Abschnitt hinzufügen

Jeder neue Call-to-Action wird mit einem ganz neuen Abschnitt erstellt. Auf diese Weise können Sie jedes Layout oder Modul hinzufügen, das zum Entwerfen des Call-to-Action benötigt wird.

Fügen Sie dem Vorlagenlayout einen neuen regulären Abschnitt hinzu.

Zeile mit einer Spalte hinzufügen

Geben Sie dann dem Abschnitt eine einspaltige Zeile.

Abschnittseinstellungen

Ziehen (oder verschieben) Sie den Abschnitt über den Abschnitt mit dem Beitragsinhalt und aktualisieren Sie die Abschnittseinstellungen wie folgt:

• Hintergrundfarbe links:
• Hintergrundfarbe rechts:
• Verlauf über dem Bild anzeigen: JA
• Hintergrundbild: [Bild einfügen]
• Breite: 320px
• Rand: 320px übrig
• Padding: 0px oben, 0px unten
• Animationsstil: Folie
• Animationsrichtung: Rechts
• Animationsverzögerung: 2000 ms

Springen Sie dann über die Registerkarte Erweitert und fügen Sie die folgende CSS-Klasse und den Z-Index hinzu:

• CSS-Klasse: slide-in-cta
• Z-Index: 999

Und fügen Sie das folgende benutzerdefinierte CSS-Snippet zum Hauptelement hinzu:

position: fixed;
top: 80px;
left: -320px;

Die CSS-Klasse wird benötigt, damit wir den Abschnitt später mit Code ansprechen können. Das benutzerdefinierte CSS positioniert den Abschnitt oben links in der Seitenvorlage an einer festen (oder klebenden) Position. Die Position „links: -320px“ sollte den gesamten Abschnitt (der 320px breit ist) außerhalb des Browserfensters verschieben. Aber wir haben den linken Rand von 320px, um ihn wieder sichtbar zu machen. Der Grund dafür ist, dass wir den Margin-Wert ein- und ausschalten können, wenn wir auf das „x“-Symbol klicken. Dadurch wird der CTA ein- und ausgeblendet.

Zeileneinstellungen

Lassen Sie uns nun die Zeileneinstellungen wie folgt aktualisieren:

• Benutzerdefinierte Dachrinnenbreite verwenden: JA
• Dachrinnenbreite: 1
• Breite: 100%
• Padding: 0px oben, 0px unten

Call-to-Action-Modul hinzufügen

Fügen Sie innerhalb der Zeile ein Call-to-Action-Modul hinzu.

Call-to-Action-Einstellungen

Aktualisieren Sie dann die Call-to-Action-Einstellungen.

Inhalt

• Titel: [Wahltext eingeben]
• Schaltfläche: [Wahltext eingeben]
• Text: [Wahltext eingeben]
• Schaltflächen-Link-URL: [Geben Sie die tatsächliche URL oder # ein]

Entfernen Sie als Nächstes die Standardhintergrundfarbe, um den Hintergrund des zuvor hinzugefügten Abschnitts anzuzeigen.

Designeinstellungen (Text, Schaltfläche und Abstand)

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Titelschriftart: Lato
• Gewicht der Titelschrift: Schwer
• Höhe der Titelzeile: 1,3 em
• Körperschriftart: Lato
• Schriftstärke des Hauptteils: Fett
• Benutzerdefinierte Stile für Schaltfläche verwenden: JA
• Schaltflächentextgröße: 15px
• Breite des Tastenrahmens: 0px
• Tastenabstand der Buchstaben: 1px
• Schaltflächenschrift: Lato
• Tastenschriftgewicht: Schwer
• Schaltflächenschriftart: TT
• Tastenpolsterung: 12 Pixel oben, 12 Pixel unten, 32 Pixel links, 32 Pixel rechts
• Füllung: 40px oben, 40px unten, 40px links, 40px rechts

Hinzufügen eines Öffnen- und Schließen-Symbols mit einem Blurb-Modul

Nachdem der Call-to-Action abgeschlossen ist, müssen wir die Symbolschaltfläche erstellen, die zum Öffnen und Schließen des Slide-In-Call-to-Action verwendet wird. Um dies zu erstellen, fügen Sie unterhalb des Call-to-Action-Moduls ein Klappenmodul hinzu.

Blurb-Einstellungen

Aktualisieren Sie die folgenden Designeinstellungen.

Inhalt

• Standardtitel und Textkörper löschen
• Symbol verwenden: JA
• Symbol: plus (siehe Screenshot)

Entwurf

• Symbolfarbe: #000000
• Symbolschriftgröße verwenden: JA
• Symbolschriftgröße: 40px
• Breite: 40px
• Höhe: 40px
• Abgerundete Ecken: 50%
• Transformieren Z-Achse drehen: 135deg

Erweiterte Einstellungen

Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-Klasse hinzu:

• CSS-Klasse: slide-in_target

Fügen Sie dann dieses benutzerdefinierte CSS zum Hauptelement hinzu.

position: absolute;
bottom: 0px;
right: -40px;

Fügen Sie dem Blurb-Image das folgende benutzerdefinierte CSS hinzu.

margin-bottom: 0px;

Ergebnis

Hier das bisherige Ergebnis.

Denken Sie daran, dass wir noch etwas Code hinzufügen müssen, um die Schließen- und Öffnen-Funktionalität hinzuzufügen, wenn Sie auf das „x“-Symbol klicken. Wir fügen den Code hinzu, nachdem wir in jeder der vier Ecken der Vorlage einen Call-to-Action erstellt haben.

Erstellen des Slide-In-Call-to-Action oben rechts

Nachdem der erste Slide-In-Call-to-Action erstellt wurde, können wir den Prozess der Erstellung der restlichen CTAs beschleunigen, indem wir den bereits erstellten Abschnitt duplizieren. Als Nächstes erstellen wir einen Slide-In-Call-to-Action für die obere rechte Ecke.

Abschnitt duplizieren

Stellen Sie den Drahtmodell-Ansichtsmodus bereit und duplizieren Sie dann den oberen linken CTA-Abschnitt.

Abschnittseinstellungen aktualisieren

Aktualisieren Sie dann die neuen Abschnittseinstellungen wie folgt:

• Rand: 320px rechts
• Animationsrichtung: links

Aktualisieren Sie dann das benutzerdefinierte CSS im Hauptelement, indem Sie „links“ durch „rechts“ ersetzen. Hier ist der vollständige Ausschnitt:

position: fixed;
top: 80px;
right: -320px;

Einstellungen des Blurb-Moduls aktualisieren

Öffnen Sie dann die Einstellungen des Klappenmoduls und aktualisieren Sie das benutzerdefinierte CSS-Snippet im Hauptelement, indem Sie „rechts“ durch „links“ ersetzen. Hier ist der vollständige Ausschnitt:

position: absolute;
bottom: 0px;
left: -40px;

Ergebnis

Jetzt sehen Sie oben rechts in der Seitenvorlage einen Slide-In-Call-to-Action.

Erstellen des Slide-In-Call-to-Action unten links

Abschnitt duplizieren

Um einen Slide-In-Call-to-Action in der unteren linken Ecke der Seitenvorlage zu erstellen, duplizieren Sie den CTA-Abschnitt oben links oben im Seitenlayout. Benennen Sie den doppelten Abschnitt „CTA links unten“ und verschieben Sie ihn dann unter den Abschnitt für den Beitragsinhalt.

Abschnittseinstellungen aktualisieren

Öffnen Sie dann die Abschnittseinstellungen und aktualisieren Sie das Hauptelement CSS, indem Sie „top: 80px“ durch „bottom: 0px“ ersetzen. Hier der letzte Ausschnitt:

position: fixed;
bottom: 0px;
left: -320px;

Einstellungen des Blurb-Moduls aktualisieren

Aktualisieren Sie dann das CSS des Hauptelements des Blurb-Moduls, indem Sie „bottom: 0px“ durch „top: 0px“ ersetzen. Hier der letzte Ausschnitt:

position: absolute;
top: 0px;
right: -40px;

Ergebnis

Sehen Sie sich nun den Call-to-Action unten links auf der Live-Seite an.

Erstellen des Slide-In-Call-to-Action unten rechts

Abschnitt duplizieren

Um den Slide-In-Call-to-Action unten rechts zu erstellen, duplizieren Sie den rechten oberen CTA-Abschnitt und verschieben Sie den duplizierten Abschnitt unter den Abschnitt mit dem Beitragsinhalt.

Abschnittseinstellungen aktualisieren

Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie das Hauptelement-CSS, indem Sie "top: 80px;" ersetzen. mit „unten: 0px;“. Hier der letzte Ausschnitt:

position: absolute;
bottom: 0px;
right: -320px;

Einstellungen des Blurb-Moduls aktualisieren

Öffnen Sie dann die Einstellungen des Klappenmoduls und aktualisieren Sie das CSS des Hauptelements, indem Sie „bottom: 0px;“ ersetzen. mit „oben: 0px;“. Hier der letzte Ausschnitt:

position: absolute;
top: 0px;
right: -40px;

Ergebnis

Sehen Sie sich jetzt den Call-to-Action unten rechts auf der Live-Seite an.

Hinzufügen der benutzerdefinierten jQuery- und CSS-Code-Snippets mithilfe eines Code-Moduls

Im letzten Schritt müssen wir benutzerdefinierte jQuery und CSS hinzufügen, damit wir die Funktionen zum Öffnen und Schließen für jeden der Slide-In-CTAs erhalten.

Codemodul hinzufügen

Fügen Sie einem der Abschnitte im Layout ein Codemodul hinzu.

Code einfügen

Öffnen Sie dann die Codeeinstellungen und fügen Sie den folgenden Code in das Codefeld ein.

<style>
  .slide-in-cta, .slide-in_target, .slide-in-toggle-active {
    transition: all 400ms ease-in-out;
  } 
  .slide-in-toggle-active {
    margin: 0px 0px 0px 0px !important;
  }
   .slide-in-toggle-active .slide-in_target  {
    transform: none !important;
    background: rgba(0,0,0,0.2);
  }  
  .slide-in_target {
    cursor: pointer;
  }
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.slide-in_target').click(function(){
      $(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); 
    });    
  });
})( jQuery );   
</script>

Abschließende Gedanken

Mit Divi ist das Erstellen eines Slide-In-Call-to-Action überhaupt nicht schwer. Und da Sie den Theme Builder verwenden können, um einer Seitenvorlage einen Call-to-Action hinzuzufügen, haben Sie mehr Kontrolle darüber, auf welchen Seiten diese CTAs angezeigt werden. Sie können die Animationsverzögerung für den CTA-Bereich gerne erhöhen, damit der Benutzer die CTA-Slide-In-Animation etwas später (oder früher) nach dem Laden der Seite sieht. Sie können auch Divi-Leads verwenden und Split-Tests aktivieren, um die Conversions dieser CTAs zu verbessern und herauszufinden, welche Ecke die beste Conversion hat.

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

Danke schön!