Springe zum Hauptinhalt

So fügen Sie einer Artikelvorlage mit Divi Builder klebrige CTAs 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]

Klebrige Seitenleisten sind äußerst effektiv, um die Aufmerksamkeit der Besucher auf sich zu ziehen, ohne überheblich oder abgelenkt zu sein. Der Trick besteht darin, ein oder zwei Seitenleistenelemente einzuschließen, die "sichtbar bleiben" oder an der Seite des Beitragsinhalts fixiert sind, wenn der Benutzer die Seite scrollt. Dies ist eine erfrischende Alternative zum herkömmlichen Seitenleistenlayout, da es den Eindruck eines modernen Layouts in voller Breite (keine Seitenleiste) erweckt und den Vorteil bietet, Handlungsaufforderungen zu präsentieren. wichtig auf der Seite der Seite, wenn nötig.

In diesem Tutorial zeigen wir Ihnen, wie Sie einer Blog-Post-Vorlage mit Divi Theme Builder klebrige Aufrufe zur Aktion hinzufügen. Die Anwendung dieses Layouts ist beträchtlich. Es funktioniert für fast jede Seite oder jede Post-Vorlage. Außerdem müssen Sie sich nicht auf CTAs beschränken. Sie können die Divi-Module Ihrer Wahl hinzufügen.

Was Sie brauchen, um loszulegen

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

Sie benötigen außerdem mindestens eine mit Divi Builder erstellte Nachricht zum Testen, um das gewünschte Ergebnis anzuzeigen.

Danach sind Sie bereit zu gehen.

Übersicht

Hier ist eine kurze Übersicht über wichtige ACTs, die einer Blogpost-Vorlage in Divi hinzugefügt wurden.

So fügen Sie in Ihrer Blogpost-Vorlage in Divi feste Handlungsaufrufe hinzu

Hinzufügen der Theme Builder-Vorlage

Der erste Schritt besteht darin, unsere vordefinierte Vorlage auf unserer Website zu importieren. Wir werden die Publikationsvorlage Divi Theme Builder Pack # 1 verwenden.

Um zu beginnen, gehen Sie zu Divi> Theme Generator. Klicken Sie oben rechts auf der Seite auf das Portabilitätssymbol. Wählen Sie im Modal "Portabilität" die Registerkarte "Importieren" und anschließend die Datei "divi-theme-builder-pack-1-post-template.json" im Ordner. Wenn auf Ihrer Site derzeit Vorlagen installiert sind, deaktivieren Sie alle Optionen, die Ihre aktuellen Vorlagen überschreiben könnten. Klicken Sie dann auf die Schaltfläche Importieren.

Importieren Sie ein Divi-Layout

Erstellen Sie die Blogpost-Vorlage

Sobald die Vorlage importiert wurde, können wir unsere neuen CTAs zur Seitenleiste hinzufügen, die dem Vorlagenlayout entspricht. Klicken Sie dazu auf das Bearbeitungssymbol für den benutzerdefinierten Körperbereich.

Fügen Sie einen benutzerdefinierten Divi-Körper hinzu

Dual Sidebar Layout hinzugefügt, um Sidebar CTAs zu halten

Suchen Sie im Vorlagenlayout-Editor die Zeile mit dem Inhaltsveröffentlichungsmodul und ändern Sie das Spaltenlayout in eine Spaltenstruktur von einem Fünftel mal drei Fünftel mal einem Fünftel (1/5 3/5 1/5) ). Auf diese Weise können wir die Spalte für den Post-Inhalt zentriert halten und auf beiden Seiten zwei Abschnitte für unsere Sticky-CTAs bereitstellen.

Fügen Sie ein Divi-Layout hinzu

Ziehen Sie nach dem Ändern der Spaltenstruktur das Inhaltsveröffentlichungsmodul in die mittlere Spalte.

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]

Linienparameter aktualisieren

Öffnen Sie die Leitungseinstellungen und aktualisieren Sie die folgenden Entwurfsoptionen:

  • Verwenden Sie eine benutzerdefinierte Rinnenbreite: JA
  • Dachrinnenbreite: 2
  • Breite: 100% (Desktop), 90% (Tablet)
  • Maximale Breite: 1500px
Fügen Sie einen festen Divi-Abschnitt hinzu

Dies gibt uns den Raum, den wir für unsere Konfiguration mit doppelter Seitenleiste benötigen.

Aktualisieren Sie die 1-Spalteneinstellungen

Öffnen Sie dann die 1-Spalteneinstellungen und weisen Sie dieser Spalte eine benutzerdefinierte CSS-Klasse zu:

  • CSS-Klasse: sticky-cta
Passen Sie Spalte 1 CSS Divi an

Hinzufügen einer CTA-Seitenleiste zur linken Spalte

Wir sind jetzt bereit für den ersten Aufruf zum Handeln. Fügen Sie dem Aktionsmodul in der linken Spalte einen Aufruf hinzu.

Modulaufruf zur Aktion hinzufügen

Stilisieren Sie die CTA-Seitenleiste

Aktualisieren Sie die Einstellungen wie folgt:

Inhalt
  • Button: «Hier klicken»
  • Körper: „Ihr Inhalt geht hier. Bearbeiten oder löschen Sie diesen Text online oder in den Inhaltseinstellungen des Moduls. ”
  • URL des Links der Schaltfläche: #
Passen Sie das Call-to-Action-Modul an
Body Text Design
  • Body Schriftart: Montserrat
  • Schriftgröße: halb fett
  • Körpertext: Rechte Ausrichtung
  • Die Körperfarbe des Texts: # 444444
  • Körpertextgröße: 22px (Desktop), 18px (Tablet)
  • Körpergröße: 1.3em
CTA-Strumpfhose
Taste
  • Schaltflächentextgröße: 14px
  • Knopftextfarbe: #ffffff
  • Hintergrundfarbe der Schaltfläche: # 6148df
  • Breite des Schaltflächenrandes: 0px
  • Radius der Schaltfläche: 80px
  • Schriftgröße: Fett
  • Tastenschriftart: TT
  • Auffüllen der Schaltflächen: 12px oben, 12px unten, 22px links, 22px rechts
Divi Modul Abschnitt
Breite, Ausrichtung, Polsterung und Bordsteine
  • Breite: 100%
  • Maximale Breite: 320px
  • Ausrichtung des Moduls: rechts
  • Polsterung: 10px links, 10px rechts
  • Breite des oberen Randes: 10px
  • Farbe des oberen Randes: #eeeeee
  • Breite des unteren Randes: 10px
  • Farbe des unteren Randes: #eeeeee

Hinzufügen der CTA-Seitenleiste zur rechten Spalte

Um den CTA für die rechte Spalte zu erstellen, kopieren Sie den soeben erstellten und fügen Sie ihn in die rechte Spalte ein. Aktualisieren Sie dann die Einstellungen für das Duplikat wie folgt:

  • Ausrichtung des Textkörpers: links
  • Ausrichtung des Moduls: links
Fügen Sie ct a rechts hinzu

Aktualisieren Sie die 3-Spalteneinstellungen

Für diesen CTA in der rechten Spalte wird der Spalte ein oberer Rand hinzugefügt, um eine Startposition der CTA-Seitenleiste an einem unteren Punkt der Seite festzulegen.

Öffnen Sie zunächst die Parameter der 3-Spalte und fügen Sie dieselbe CSS-Klasse hinzu, die wir der 1-Spalte hinzugefügt haben:

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]

  • CSS-Klasse: sticky-cta

Fügen Sie dann dem Hauptelement das folgende benutzerdefinierte CSS hinzu:

Büro

margin-top: 50%

Tablette

margin-top: 0%

Passen Sie den Divi-Spaltenstil an

Dies gibt uns einen anderen Ausgangspunkt für den klebrigen CTA in der rechten Spalte, der 50% der Zeilenbreite beträgt. Sie können diesen Wert nach Bedarf für Ihren eigenen Blog-Beitrag anpassen.

Duplizieren Sie ein cta divi-Modul

Fügen Sie der Vorlage mit einem Codemodul benutzerdefiniertes CSS hinzu

Um unsere "klebrige" Positionierung für unsere CTAs in der Seitenleiste zu erhalten, müssen wir benutzerdefiniertes CSS hinzufügen. Erstellen Sie dazu ein neues Codemodul unter dem Modul zum Veröffentlichen von Inhalten (oder an einer beliebigen Stelle auf der Seite).

Fügen Sie ein Divi-Code-Modul ein

Fügen Sie dann das folgende CSS in das Codefeld ein:

<style> @media only screen and (min-width: 980px) {#page-container { overflow-y:visible !important; } .sticky-cta {position: sticky !important;position: -webkit-sticky !important;top: calc(50vh - 130px) !important;}}</style>

Divi-Modul-Parametercode

Der obere Versatz in diesem Code ist eine Berechnung, die den CTA beim Scrollen vertikal auf der Seite zentriert positioniert. Die 50vh ist die halbe Höhe des Browserfensters und die 130px ist die halbe Höhe des CTA. Wenn Ihr CTA höher oder niedriger ist, müssen Sie die 130 Pixel nach oben oder unten anpassen.

Einstellungen speichern

Speichern Sie anschließend das Layout der Vorlage.

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]

Speichern Sie die Parameter des cta divi-Moduls

Speichern Sie anschließend die Einstellungen für den Theme Builder

Speichern Sie Theme Builder Divi

Endergebnis

Besuchen Sie zum Anzeigen des Endergebnisses einen Blogartikel, der die Vorlage verwendet.

CTA-Strumpfhose

Und so bleiben klebrige CTAs beim Scrollen hängen. Sie können sehen, wie es für längere Inhalte am besten funktioniert.

Abschließende Gedanken

Diese klebrigen Handlungsaufforderungen in der Seitenleiste sind eine erfrischende Alternative zur herkömmlichen Seitenleiste. Sie passen gut zum minimalistischen Design, da sie weniger aufdringlich sind und den Pfosten nicht überladen wirken lassen. Darüber hinaus können Sie den CTA tiefer auf der Seite positionieren, sodass er allmählich angezeigt wird und auf dem Pergament haftet, sodass er für Besucher besser sichtbar ist. Und vergiss nicht. Sie können den CTA durch ein beliebiges Divi-Modul oder eine Kombination von Modulen ersetzen, um nahezu alles zu erstellen, was Sie möchten. Sie können auch festlegen, dass nur ein CTA auf einer Seite bleibt. Es scheint viele Anwendungen zu haben.

Dieser Artikel enthält Kommentare 0

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
2 Aktien
Aktie2
tweet
Registrieren