Einen Call-to-Action auf Ihrer Website zu haben, ist eine der am wenigsten aufdringlichen Möglichkeiten, Ihre Aufmerksamkeit zu erregen Besucher. Meistens ignorieren sie den CTA einfach oder schließen ihn, um weiter auf der Seite zu surfen, aber manchmal können Sie sie auch überzeugen. Eine Call-to-Action-Folie eignet sich hervorragend dafür fördern so ziemlich alles auf einer Landingpage.

In diesem Tutorial entwerfen wir einen schließbaren Call-to-Action, der mit dem Divi Theme Builder in jede Ecke einer Seite eingefügt werden kann. Sobald dies erledigt ist, haben Sie die Möglichkeit dazu fördern Sie können Ihre Produkte und Sonderangebote überall auf der Seite platzieren, ohne ein Plugin verwenden zu müssen.

Lassen Sie uns beginnen!

Übersicht

Hier ist ein kurzer Blick auf die vier eingefügten CTAs, die wir den vier Ecken der Seitenvorlage hinzufügen. Natürlich müssen Sie nicht alle vier gleichzeitig bereitstellen. Beachten Sie, wie jeder geschlossen werden kann, indem Sie auf das Symbol "x" klicken. Anschließend können Sie den CTA wieder aktivieren, indem Sie auf das Symbol "plus" klicken.

Was Sie brauchen, um loszulegen

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

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

Erstellung eines gleitenden Aufrufs zum Handeln mit einer Seitenvorlage in Divi

Erstellung eines neuen Modells

Gehen Sie im WordPress-Dashboard zu Divi> Theme Generator. Klicken Sie dann auf das Feld "Neue Vorlage hinzufügen", um eine neue Vorlage zu erstellen.

Weisen Sie die Vorlage der Seite oder den Seiten zu, auf denen Sie die Werbeleiste anzeigen möchten.

Klicken Sie beim neuen Modell auf den Bereich "Benutzerdefinierten Körper hinzufügen" und wählen Sie "Benutzerdefinierten Körper erstellen".

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

Erstellung des Inhaltsbereichs der Publikation

Abschnitt von Inhalt Beitrag ist ein notwendiger Bestandteil jeder Seitenvorlage, um die anzuzeigen Inhalt echte Seite oder Beitrag eingebettet in Divi oder WordPress. Wir werden dies zu unserer Vorlage hinzufügen, bevor wir unseren ersten Call-to-Action zum Einfügen erstellen.

Fügen Sie einer Spalte eine Zeile hinzu

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

Fügen Sie ein Modul für Veröffentlichungsinhalte hinzu

Fügen Sie dann ein Modul hinzu Inhalt Veröffentlichung auf der Linie.

Leitungseinstellungen

Danach aktualisieren Sie die Leitungsparameter wie folgt:

• Breite: 100%
• Maximale Breite: 100%
• Auffüllen: 0px hoch, 0px niedrig

Erstellen des Aufrufs zum Handeln oben links

Nachdem wir unser Modul für Post-Inhalte eingerichtet haben, können wir unseren ersten Aufruf zum Handeln hinzufügen, der in die obere linke Ecke der Seitenvorlage eingefügt wird.

Fügen Sie einen Abschnitt hinzu

Jeder neue Aufruf zum Handeln wird mit einem brandneuen Abschnitt erstellt. Auf diese Weise können Sie jedes Layout oder Modul hinzufügen, das zum Entwerfen des Aufrufs zum Handeln erforderlich ist.

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

Fügen Sie einer Spalte eine Zeile hinzu

Geben Sie dem Abschnitt dann eine Zeile einer Spalte.

Abschnittseinstellungen

Ziehen (oder verschieben) Sie den Abschnitt über den Inhalt des Beitrags und aktualisieren Sie die Abschnittseinstellungen wie folgt:

• Hintergrundverlauf der linken Farbe:
• Rechter Hintergrundverlauf:
• Zeigen Sie den Farbverlauf über dem Bild an: JA
• Hintergrundbild: [Bild einfügen]
• Breite: 320px
• Rand: 320px übrig
• Auffüllen: 0px hoch, 0px niedrig
• Animationsstil: Folie
• Animationsrichtung: rechts
• Animationsverzögerung: 2000 ms

Wechseln Sie dann zur Registerkarte "Erweitert" und fügen Sie die folgende CSS-Klasse und den folgenden Z-Index hinzu:

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

Fügen Sie das benutzerdefinierte CSS-Snippet nach dem Hauptelement hinzu:

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

Die CSS-Klasse wird benötigt, damit wir den Abschnitt später mit Code ausrichten können. Benutzerdefiniertes CSS positioniert den oberen linken Bereich der Seitenvorlage an einer festen (oder klebrigen) Position. Die Position "links: -320 Pixel" sollte den gesamten Abschnitt (der 320 Pixel breit ist) außerhalb des Browserfensters verschieben (also aus unserer Sicht). Wir haben jedoch den linken Rand von 320 Pixel, um ihn wieder anzuzeigen. Der Grund dafür ist, dass wir den Randwert ein- oder ausschalten können, wenn Sie auf das Symbol "x" klicken. Dadurch rutscht der CTA ein und aus.

Leitungseinstellungen

Aktualisieren Sie nun die Leitungsparameter wie folgt:

• Verwenden Sie eine benutzerdefinierte Rinnenbreite: JA
• Dachrinnenbreite: 1
• Breite: 100%
• Auffüllen: 0px hoch, 0px niedrig

Fügen Sie dem Aktionsmodul einen Aufruf hinzu

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

Call-to-Action-Einstellungen

Aktualisieren Sie anschließend die Call-to-Action-Einstellungen.

Inhalt

• Titel: [geben Sie den gewünschten Text ein]
• Button: [geben Sie den gewünschten Text ein]
• Körper: [geben Sie den Text Ihrer Wahl ein]
• Button-Link-URL: [tatsächliche URL oder # eingeben]

Entfernen Sie dann die Standardhintergrundfarbe, um den Hintergrund des zuvor hinzugefügten Abschnitts anzuzeigen.

Entwurfsparameter (Text, Schaltfläche und Füllung)

Aktualisieren Sie auf der Registerkarte Design Folgendes:

• Titelschrift: Lato
• Titel Schriftart Gewicht: Schwer
• Titelzeile Höhe: 1,3 em
• Körperpolizei: Lato
• Schriftgröße: fett
• Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: JA
• Schaltflächentextgröße: 15px
• Schaltflächenrandbreite: 0px
• Tastenbuchstabenabstand: 1px
• Schaltflächenschrift: Lato
• Gewicht der Tastenschrift: schwer
• Tastenschriftart: TT
• Tastenauffüllung: 12 Pixel oben, 12 Pixel unten, 32 Pixel links, 32 Pixel rechts
• Auffüllen: 40 Pixel oben, 40 Pixel unten, 40 Pixel links, 40 Pixel rechts

Fügen Sie ein Öffnungs- und Schließsymbol mit einem Klappentext-Modul hinzu

Sobald der Aufruf zum Handeln abgeschlossen ist, müssen wir die Symbolschaltfläche erstellen, mit der der gleitende Aufruf zum Handeln geöffnet und geschlossen wird. Fügen Sie dazu ein Klappentextmodul unter dem Call-to-Action-Modul hinzu.

Einstellungen für Präsentationstexte

Aktualisieren Sie die folgenden Entwurfsparameter.

Inhalt

• Standardtitel und -text entfernen
• Verwenden Sie das Symbol: JA
• Symbol: mehr (siehe Screenshot)

Technologie

• Symbolfarbe: # 000000
• Verwenden Sie die Schriftgröße des Symbols: JA
• Symbol Schriftgröße: 40 Pixel
• Breite: 40px
• Höhe: 40px
• Abgerundete Ecken: 50%
• Drehung der Z-Achse transformieren: 135 Grad

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 Klappentext das folgende benutzerdefinierte CSS hinzu.

margin-bottom: 0px;

Ergebnis

Hier ist das bisherige Ergebnis.

Beachten Sie, dass wir noch Code hinzufügen müssen, um die Funktion zum Schließen und Öffnen hinzuzufügen, wenn Sie auf das Symbol "x" klicken. Wir fügen den Code hinzu, nachdem wir in jeder der vier Ecken des Modells einen Aufruf zum Handeln erstellt haben.

Erstellung des Aufrufs zum Handeln oben rechts

Mit dem ersten integrierten Aufruf zum Handeln können wir den Prozess der Erstellung der restlichen CTAs beschleunigen, indem wir den bereits erstellten Abschnitt duplizieren. Als Nächstes erstellen wir einen Folienaufruf zum Handeln für die obere rechte Ecke.

Abschnitt duplizieren

Stellen Sie den Wireframe-Anzeigemodus bereit und duplizieren Sie den CTA-Abschnitt oben links.

Abschnittseinstellungen aktualisieren

Aktualisieren Sie dann die neuen Abschnittsparameter wie folgt:

• Rand: 320px rechts
• Animationsrichtung: links

Aktualisieren Sie dann das benutzerdefinierte CSS im Hauptelement, indem Sie "left" durch "right" ersetzen. Hier ist der vollständige Auszug:

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

Aktualisieren Sie die Parameter des Blurb-Moduls

Öffnen Sie als Nächstes die Einstellungen des Blurb-Moduls und aktualisieren Sie das benutzerdefinierte CSS-Snippet im Hauptelement, indem Sie "rechts" durch "links" ersetzen. Hier ist der vollständige Auszug:

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

Ergebnis

Sie sehen jetzt einen Aufruf zum Handeln als Folie oben rechts in der Seitenvorlage.

Führen Sie die gleichen Vorgänge für den Rest der Abschnitte „Unten rechts“ und „Unten links“ aus. Sie müssen auch den CSS-Code für jedes der Module anpassen, um ein ähnliches Ergebnis wie das folgende zu erzielen.

Hinzufügen von benutzerdefinierten jQuery- und CSS-Snippets mithilfe eines Codemoduls

Für den letzten Schritt müssen wir einige benutzerdefinierte jQuery- und CSS-Dateien hinzufügen, damit wir die Funktionalität zum Öffnen und Schließen der einzelnen Folien-CTAs erhalten.

Fügen Sie ein Codemodul hinzu

Fügen Sie einem der Abschnitte der Präsentation ein Codemodul hinzu.

Fügen Sie den Code ein

Öffnen Sie dann die Codeeinstellungen und fügen Sie den folgenden Code in den Codebereich 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 es überhaupt nicht schwierig, einen Aufruf zum Handeln zu erstellen. Und da Sie den Theme Builder verwenden können, um einer Seitenvorlage einen Aufruf zum Handeln hinzuzufügen, haben Sie mehr Kontrolle darüber, auf welchen Seiten diese CTAs angezeigt werden.