Klebrige Seitenleisten sind äußerst effektiv, um die Aufmerksamkeit von zu erregen Besucher ohne aufdringlich oder ablenkend zu wirken. Der Trick besteht darin, ein oder zwei Elemente in die Seitenleiste aufzunehmen, die „sichtbar bleiben“ oder an der Seite fixiert sind Inhalt des Beitrags, wenn der Benutzer durch die Seite scrollt. Dies ist eine erfrischende Alternative zum traditionellen Seitenleisten-Layout, da es den Eindruck eines modernen Layouts in voller Breite (ohne Seitenleiste) vermittelt und den Vorteil hat, dass wichtige Handlungsaufforderungen bei Bedarf am Rand der Seite angezeigt werden.
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.
Navigieren Sie zunächst zu Divi > Generator Themen. Klicken Sie oben rechts auf der Seite auf das Portabilitätssymbol. Wählen Sie im Portabilitätsmodus die Registerkarte „Import“ und wählen Sie die Datei „divi-theme-builder-pack-1-post-template.json“ aus dem Ordner aus. Wenn Sie derzeit Vorlagen auf Ihrer Website installiert haben, deaktivieren Sie unbedingt alle Optionen, die Ihre aktuellen Vorlagen überschreiben könnten. Klicken Sie dann auf die Importschaltfläche.
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.
Dual Sidebar Layout hinzugefügt, um Sidebar CTAs zu halten
Suchen Sie im Modelllayout-Editor die Zeile, die das Veröffentlichungsmodul enthält. Inhalt und ersetzen Sie das Spaltenlayout durch eine Spaltenstruktur von einem Fünftel mal drei Fünftel mal einem Fünftel (1/5 3/5 1/5). Dadurch können wir die Spalte für die Zeit zentriert halten Inhalt des Beitrags und stellt auf beiden Seiten zwei Abschnitte für unsere Sticky-CTAs bereit.
Ziehen Sie nach dem Ändern der Spaltenstruktur das Inhaltsveröffentlichungsmodul in die mittlere Spalte.
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
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
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.
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: #
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
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
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
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:
- CSS-Klasse: sticky-cta
Fügen Sie dann dem Hauptelement das folgende benutzerdefinierte CSS hinzu:
Büro
margin-top: 50%
Tablette
margin-top: 0%
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.
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 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 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.
Speichern Sie anschließend die Einstellungen für den Theme Builder
Endergebnis
Besuchen Sie zum Anzeigen des Endergebnisses einen Blogartikel, der die Vorlage verwendet.
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 Seitenaufrufe sind eine erfrischende Alternative zur traditionellen Seitenleiste. Sie eignen sich gut für minimalistisches Design, da sie weniger aufdringlich sind und den Post nicht überladen wirken lassen. Darüber hinaus können Sie den CTA weiter unten auf der Seite positionieren, sodass er allmählich erscheint und an der Schriftrolle haftet, wodurch er für die Menschen besser sichtbar wird. Besucher. Und vergiss nicht. Sie können den CTA durch ein beliebiges Divi-Modul oder eine Kombination von Modulen ersetzen, um so ziemlich alles zu erstellen, was Sie wollen. Sie können sich auch dafür entscheiden, nur einen CTA auf einer Seite zu behalten. Es scheint viele Anwendungen zu haben.
