Springe zum Hauptinhalt

So fügen Sie der Aktion auf Divi einen wiederverschließbaren Schiebeaufruf hinzu

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Ein Aufruf zum Handeln auf Ihrer Website ist eine der am wenigsten aufdringlichen Möglichkeiten, um die Aufmerksamkeit Ihrer Besucher zu erregen. Meistens ignorieren sie den CTA einfach oder schließen ihn, um das Crawlen der Seite fortzusetzen, aber manchmal verdienen Sie sie. Ein Folienaufruf zum Handeln eignet sich hervorragend, um fast alles auf einer Zielseite zu bewerben.

In diesem Tutorial werden wir einen abschließbaren Aufruf zum Handeln entwerfen, der mit dem Divi Theme Builder zu jeder Ecke einer Seite hinzugefügt werden kann. Sobald Sie fertig sind, können Sie Ihre Produkte und Specials überall auf der Seite bewerben, 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.

Erstellen Sie eine Seitenvorlage

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

Weisen Sie Seiten eine Seitenvorlage zu

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

Benutzerdefinierten Körper hinzufügen

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

Erstellung des Inhaltsbereichs der Publikation

Der Beitragsinhaltsabschnitt ist ein notwendiger Bestandteil jeder Seitenvorlage, um den tatsächlichen Inhalt der Seite oder des in Divi oder WordPress eingebetteten Beitrags anzuzeigen. Wir werden es unserem Modell hinzufügen, bevor wir unseren ersten Aufruf zum Einfügen erstellen.

Fügen Sie einer Spalte eine Zeile hinzu

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

Einzeiliger Abschnitt

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

Fügen Sie der Zeile dann ein Modul für Veröffentlichungsinhalte hinzu.

Artikelinhalt

Leitungseinstellungen

Danach aktualisieren Sie die Leitungsparameter wie folgt:

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

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.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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

Auswahl eines neuen Divi-Abschnitts

Fügen Sie einer Spalte eine Zeile hinzu

Geben Sie dem Abschnitt dann eine Zeile einer Spalte.

Wählen Sie eine Divi-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
Divi-Linienparameter

Fügen Sie dem Aktionsmodul einen Aufruf hinzu

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

Aufruf zum Aktionsmodul hinzufügen

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]
Passen Sie das Angebot des Divi-Moduls an

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

Hintergrundfarbe entfernen
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.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Divi Tooltip-Modul

Einstellungen für Präsentationstexte

Aktualisieren Sie die folgenden Entwurfsparameter.

Inhalt
  • Standardtitel und -text entfernen
  • Verwenden Sie das Symbol: JA
  • Symbol: mehr (siehe Screenshot)
Fügen Sie ein Divi-Symbol hinzu
Konzeption
  • 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
Passen Sie ein Divi-Symbol an
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;

Passen Sie das CSS-Divi-Modul an

Ergebnis

Hier ist das bisherige Ergebnis.

Ergebnis jetzt erreicht

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;

Ändern Sie die Ausrichtung der Teilabschnitte

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;

Fügen Sie einen Divi-Code hinzu

Ergebnis

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

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Schieberegler oben rechts

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.

Endergebnis divi

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 einen js divi Code 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>

Fügen Sie den Abfragecode hinzu

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. 

Dieser Artikel enthält 1 Kommentar

  1. Großartig, dieser Artikel! Genau das suche ich!
    Vielen Dank.

    Kleine Nebenfrage: Ist es möglich, dass dieser CTA beim Scrollen auf der Seite nur an einer bestimmten Stelle automatisch geöffnet wird?

    Bonne journée!

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
4 Aktien
Aktie4
tweet
Registrieren