So fügen Sie einer Blog-Post-Vorlage in Divi . Sticky Sidebar-CTAs hinzu

Sticky Sidebar CTAs sind äußerst effektiv, um die Aufmerksamkeit der Besucher auf sich zu ziehen, ohne aufdringlich oder abzulenken. Der Trick besteht darin, ein oder zwei Elemente in die Seitenleiste aufzunehmen, die an der Seite des Beitragsinhalts „kleben“ oder fixiert bleiben, wenn der Benutzer die Seite nach unten scrollt. Dies ist eine erfrischende Alternative zu einem herkömmlichen Seitenleisten-Layout, da es das Gefühl eines modernen Layouts mit voller Breite (ohne Seitenleiste) bietet und den Vorteil hat, wichtige CTAs bei Bedarf seitlich auf der Seite anzuzeigen.

In diesem Tutorial zeigen wir Ihnen, wie Sie mit dem Divi Theme Builder Sticky Sidebar-CTAs zu einer Blog-Post-Vorlage hinzufügen. Die Anwendung dieses Layouts ist weitreichend. Es funktioniert für fast jede Seite oder Beitragsvorlage. Außerdem müssen Sie sich nicht auf CTAs beschränken; Sie können beliebige Divi-Module hinzufügen.

Lass uns anfangen!

Laden Sie die Sticky Sidebar CTA-Vorlage KOSTENLOS herunter

Um die Sticky Sidebar-CTA-Post-Vorlage 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 in der Liste sind, 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 einen mit dem Divi Builder erstellten Beitrag, um das beabsichtigte Ergebnis zu zeigen.

Danach sind Sie bereit zu gehen.

Vorgeschmack

Hier ist ein kurzer Blick auf die Sticky Sidebar-CTAs, die einer Blogpost-Vorlage in Divi hinzugefügt wurden.

So fügen Sie Ihrer Blog-Post-Vorlage in Divi . Sticky Sidebar-CTAs hinzu

Hinzufügen der Theme Builder-Vorlage

Der erste Schritt besteht darin, unsere vorgefertigte Vorlage auf unsere Website zu importieren. Wir werden die Beitragsvorlage aus dem Divi Theme Builder Pack #1 verwenden.

Um zu beginnen, navigieren Sie zu Divi > Theme Builder. Klicken Sie oben rechts auf der Seite auf das Portabilitätssymbol. Wählen Sie im Portabilitätsmodal die Registerkarte Import und wählen Sie die Datei divi-theme-builder-pack-1-post-template.json aus dem Ordner. Falls Sie derzeit Vorlagen auf Ihrer Site installiert haben, deaktivieren Sie alle Optionen, die Ihre aktuellen Vorlagen möglicherweise überschreiben. Klicken Sie dann auf die Schaltfläche Importieren.

Erstellen der Blog-Post-Vorlage

Nachdem die Vorlage importiert wurde, können wir mit dem Hinzufügen unserer neuen Sticky-Sidebar-CTAs zum Vorlagenlayout beginnen. Klicken Sie dazu auf das Bearbeitungssymbol des benutzerdefinierten Körperbereichs.

Hinzufügen eines Dual-Sidebar-Layouts zum Halten der Sidebar-CTAs

Suchen Sie im Vorlagenlayout-Editor die Zeile, die das Post-Content-Modul enthält, und ändern Sie das Spaltenlayout in eine Spaltenstruktur von einem Fünftel drei Fünftel ein Fünftel (1/5 3/5 1/5). Auf diese Weise können wir die zentrierte Spalte für den Beitragsinhalt beibehalten und gleichzeitig zwei Abschnitte auf beiden Seiten für unsere Sticky-Sidebar-CTAs bereitstellen.

Nachdem die Spaltenstruktur geändert wurde, ziehen Sie das Beitragsinhaltsmodul in die mittlere Spalte.

Aktualisieren der Zeileneinstellungen

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie die folgenden Designoptionen:

• Benutzerdefinierte Dachrinnenbreite verwenden: JA
• Dachrinnenbreite: 2
• Breite: 100 % (Desktop), 90 % (Tablet)
• Maximale Breite: 1500px

Dies gibt uns den Platz, den wir für unser Dual-Sidebar-Setup benötigen.

Aktualisieren der Einstellungen von Spalte 1

Öffnen Sie als Nächstes die Einstellungen für Spalte 1 und geben Sie der Spalte eine benutzerdefinierte CSS-Klasse:

• CSS-Klasse: sticky-cta

Hinzufügen eines Seitenleisten-CTAs zur linken Spalte

Jetzt sind wir bereit für den ersten Call-to-Action. Fügen Sie der Spalte ganz links ein Call-to-Action-Modul hinzu.

CTA der Seitenleiste gestalten

Aktualisieren Sie die Einstellungen wie folgt:

Inhalt

• Schaltfläche: „Hier klicken“
• Text: „Ihre Inhalte kommen hierher. Bearbeiten oder entfernen Sie diesen Text inline oder in den Modulinhaltseinstellungen.“
• Schaltflächen-Link-URL: #

Textkörperdesign

• Körperschriftart: Montserrat
• Schriftstärke des Hauptteils: Semi Bold
• Ausrichtung des Textkörpers: rechts
• Textkörperfarbe: #444444
• Textgröße: 22 Pixel (Desktop), 18 Pixel (Tablet)
• Körperlinienhöhe: 1,3em

Taste

• Schaltflächentextgröße: 14px
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #6148df
• Breite des Tastenrahmens: 0px
• Knopfrandradius: 80px
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: TT
• Tastenpolsterung: 12 Pixel oben, 12 Pixel unten, 22 Pixel links, 22 Pixel rechts

Breite, Ausrichtung, Polsterung und Ränder

• Breite: 100%
• Maximale Breite: 320px
• Modulausrichtung: rechts
• Polsterung: 10px links, 10px rechts
• Breite des oberen Rands: 10px
• Farbe des oberen Rands: #eeeeee
• Breite des unteren Rands: 10px
• Farbe des unteren Rands: #eeeeee

Hinzufügen des Sidebar-CTAs zur rechten Spalte

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

• Ausrichtung des Textkörpers: links
• Modulausrichtung: links

Einstellungen für Spalte 3 aktualisieren

Für diesen CTA in der rechten Spalte fügen wir der Spalte einen oberen Rand hinzu, um eine Startposition des Seitenleisten-CTAs weiter unten auf der Seite festzulegen.

Öffnen Sie zuerst die Einstellungen für Spalte 3 und fügen Sie dieselbe CSS-Klasse hinzu, die wir zu Spalte 1 hinzugefügt haben:

• CSS-Klasse: sticky-cta

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

Desktop

margin-top: 50%

Tablette

margin-top: 0%

Dies gibt uns einen anderen Ausgangspunkt für den Sticky CTA in der rechten Spalte, der 50 % der Zeilenbreite entspricht. Sie können diesen Wert nach Bedarf für Ihren eigenen Blogbeitrag anpassen.

Hinzufügen des benutzerdefinierten CSS zu einer Vorlage mit einem Codemodul

Um unsere „klebrige“ Positionierung für unsere Seitenleisten-CTAs zu erhalten, müssen wir benutzerdefiniertes CSS hinzufügen. Erstellen Sie dazu ein neues Codemodul unter dem Post-Content-Modul (oder irgendwo auf der Seite).

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>

Der obere Offset in diesem Code ist eine Berechnung, die den CTA beim Scrollen vertikal zentriert auf der Seite positioniert. Der 50vh ist im Grunde die halbe Höhe des Browserfensters und der 130px ist ungefähr halb so hoch wie der CTA. Wenn Sie einen CTA mit größerer/kleinerer Höhe haben, müssen Sie die 130px nach oben oder unten anpassen.

Einstellungen speichern

Wenn Sie fertig sind, speichern Sie das Vorlagenlayout.

Und dann speichere die Theme-Builder-Einstellungen

Endergebnis

Um das Endergebnis anzuzeigen, besuchen Sie einen Blogbeitrag, der die Vorlage verwendet.

Und so werden die CTAs der klebrigen Seitenleiste beim Scrollen haften. Sie können sehen, wie dies bei längeren Beitragsinhalten am besten funktioniert.

Und hier ist es auf dem mobilen Display.

Abschließende Gedanken

Diese klebrigen Seitenleisten-CTAs sind eine erfrischende Alternative zur traditionellen Seitenleiste. Sie passen gut zu minimalistischem Design, da sie weniger aufdringlich sind und dem Pfosten kein überladenes Gefühl geben. Außerdem können Sie den CTA weiter unten auf der Seite positionieren, sodass er nach und nach angezeigt wird und beim Scrollen bleibt, wodurch er für Besucher etwas mehr auffällt. Und nicht vergessen. Sie können den CTA durch ein beliebiges Divi-Modul oder eine Kombination von Modulen ersetzen, um so ziemlich alles zu erstellen, was Sie möchten. Sie können auch nur einen CTA auf einer Seite behalten. Es scheint viele Anwendungen zu geben.

Ich hoffe, dass dies dazu beiträgt, die Anzeige von CTAs in Ihren Beitragsvorlagen in Zukunft zu verbessern.

Weitere Inspiration finden Sie in unseren ähnlichen Beiträgen zu klebrigen Elementen.

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

Danke schön!