So zeigen Sie mit Divi . einen Spalten-CTA in einem klebrigen Zustand an

An einem bestimmten Punkt, wenn Sie ein Seitendesign erstellen, stoßen Sie möglicherweise auf eine Liste von Diensten, Kursen oder ähnlichem, die Sie auf interaktive Weise teilen möchten. Das Design, das Sie für Ihren Listeninhalt verwenden, spielt eine sehr wichtige Rolle dabei, wie Ihre Besucher den Inhalt verdauen. Und bei den meisten Listen möchten Sie auch einen Call-to-Action einfügen, der die Punkte verbindet. Wenn Sie nach einer kreativen Möglichkeit suchen, dies zu tun, werden Sie dieses Tutorial lieben.

Heute zeigen wir Ihnen, wie Sie mit Divi einen Spalten-CTA in einem klebrigen Zustand anzeigen. Sobald der CTA das Ende der Spalte berührt, stoppt der Sticky-Effekt, wodurch die Benutzer die Listenelemente mühelos weiterlesen und jederzeit Maßnahmen ergreifen können, ohne nach oben oder unten scrollen zu müssen, um den CTA zu finden . Wir werden die JSON-Datei auch kostenlos teilen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das CTA-Abschnittslayout für klebrige Spalten KOSTENLOS herunter

Um das kostenlose CTA-Abschnittslayout für klebrige Spalten in die Hände zu bekommen, müssen Sie es 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 auf der Liste stehen, 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!

Beginnen wir mit der Neuerstellung!

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und wenden Sie eine weiße Hintergrundfarbe an.

• Hintergrundfarbe: #ffffff

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Abstand

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und wenden Sie einen unteren Rand an.

• Untere Marge: 5%

Textmodul zur Spalte hinzufügen

H2-Inhalt hinzufügen

Fügen Sie ein Textmodul mit H2-Inhalten Ihrer Wahl hinzu.

H2-Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die H2-Texteinstellungen entsprechend:

• Überschrift 2 Schriftart: Alata
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #000000
• Überschrift 2 Textgröße:
  • Desktop: 55px
  • Tablet: 40px
  • Telefon: 30px

Trennmodul zur Spalte hinzufügen

Sichtweite

Fügen Sie direkt unter dem Textmodul ein Teilermodul hinzu und stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Linieneinstellungen wie folgt:

• Linienfarbe: #3a7a84
• Linienstil: Doppel

Größe

Vervollständigen Sie die Einstellungen des Moduls, indem Sie die Größeneinstellungen entsprechend ändern:

• Teilergewicht: 10px
• Breite: 8%
• Modulausrichtung: Mitte
• Höhe: 10px

Zeile 2 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine weitere Zeile direkt unter der vorherigen hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Größe

Öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2
• Spaltenhöhen ausgleichen: Ja
• Breite: 95%
• Maximale Breite: 2580px

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Spalte 1 Einstellungen

Hintergrundbild

Öffnen Sie dann die Einstellungen von Spalte 1 und wenden Sie ein Hintergrundbild an.

• Hintergrundbildgröße: Cover

Grenze

Wechseln Sie zur Registerkarte Design der Spalte und wenden Sie einige abgerundete Ecken an.

• Alle Ecken: 20px

Blurb-Modul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Es ist an der Zeit, Module hinzuzufügen, beginnend mit einem Blurb-Modul in Spalte 2. Fügen Sie Inhalte Ihrer Wahl hinzu.

Symbol auswählen

Wählen Sie als nächstes ein Symbol aus.

Hintergrundfarbe

Wenden Sie dann eine weiße Hintergrundfarbe an.

• Hintergrundfarbe: #FFFFFF

Symboleinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Symboleinstellungen entsprechend:

• Symbolfarbe: #3a7a84
• Bild-/Symbolplatzierung: Links

Einstellungen für Titeltext

Gestalten Sie dann die Einstellungen für den Titeltext.

• Titelüberschriftsebene: H3
• Titelschriftart: Alata
• Schriftstärke des Titels: Fett
• Titeltextfarbe: #000000
• Titeltextgröße:
  • Desktop: 35px
  • Tablet: 30px
  • Telefon: 20px

Textkörpereinstellungen

Nehmen Sie auch einige Änderungen an den Textkörpereinstellungen vor.

• Körperschriftart: Karla
• Textgröße:
  • Desktop: 17px
  • Tablet: 15px
  • Telefon: 14px
• Körperlinienhöhe: 2.5em

Größe

Ändern Sie als nächstes die Größeneinstellungen.

• Inhaltsbreite: 100%

Abstand

Wenden Sie einige benutzerdefinierte Abstandswerte auf die Abstandseinstellungen an.

• Obere Polsterung: 20%
• Untere Polsterung: 20%
• Linke Polsterung: 10%
• Rechte Polsterung: 10%

Grenze

Als Nächstes fügen wir den Rahmeneinstellungen einige abgerundete Ecken hinzu.

• Alle Ecken: 20px

Box Schatten

Und wir werden einen subtilen Box-Schatten hinzufügen.

• Stärke der Box-Schattenunschärfe: 50px
• Schattenfarbe: rgba (59,120,130,0,14)

Animation

Fahren Sie fort, indem Sie als nächstes die Standardanimation des Blurb-Moduls in den Animationseinstellungen entfernen.

• Bild-/Symbolanimation: Keine Animation

Blurb-Titel-CSS

Und vervollständigen Sie die Moduleinstellungen, indem Sie eine Zeile CSS-Code zum CSS-Feld des Klappentitels auf der Registerkarte „Erweitert“ hinzufügen.

margin-bottom: 20px;

Blurb-Modul zweimal klonen

Nachdem Sie das erste Blurb-Modul fertiggestellt haben, klonen Sie das Blurb-Modul so oft wie nötig.

Inhalt ändern

Ändern Sie den Inhalt in jedem doppelten Modul.

CTA-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

In Spalte 1 ist das einzige Modul, das wir benötigen, ein Call-to-Action-Modul. Fügen Sie Inhalte Ihrer Wahl hinzu.

Schaltflächenlink hinzufügen

Fügen Sie als nächstes einen Schaltflächenlink hinzu.

Hintergrund mit Farbverlauf

Wenden Sie dann einen Verlaufshintergrund an.

• Farbe 1: rgba(59,120,130,0,53)
• Farbe 2: #112730
• Verlaufstyp: Linear
• Verlaufsrichtung: 161deg

Einstellungen für Titeltext

Wechseln Sie zur Registerkarte Design des Moduls und nehmen Sie die folgenden Änderungen an den Einstellungen für den Titeltext vor:

• Titelüberschriftsebene: H3
• Titelschriftart: Alata
• Schriftstärke des Titels: Fett
• Titeltextfarbe: #ffffff
• Titeltextgröße:
  • Desktop: 50px
  • Tablet & Telefon: 30px

Tasteneinstellungen

Stylen Sie die Schaltfläche als nächstes.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße:
  • Desktop: 20px
  • Tablet: 17px
  • Telefon: 15px
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px

• Schaltflächenschriftart: Alata
• Schriftstärke der Schaltfläche: Fett

• Obere Polsterung: 20px
• Untere Polsterung: 20px
• Linke Polsterung: 20px
• Rechte Polsterung: 20px
• Horizontale Position des Boxschattens: 0px
• Vertikale Position des Kastenschattens: 3px
• Schattenfarbe: #ffffff

Größe

Gehen Sie zu den Größeneinstellungen des Moduls und wenden Sie die folgenden Änderungen an:

• Breite:
  • Desktop: 95%
  • Tablet & Telefon: 100%
• Modulausrichtung: Mitte

Abstand

Fügen Sie auch einige benutzerdefinierte obere und untere Polster hinzu.

• Obere Polsterung: 150px
• Untere Polsterung: 150px

Grenze

Fügen Sie auch einige abgerundete Ecken hinzu.

• Alle Ecken: 20px

Transformieren Übersetzen

Vervollständigen Sie die Moduleinstellungen, indem Sie die folgenden Transformationsübersetzungseinstellungen anwenden:

• Rechts:
  • Desktop: -25px
  • Tablet & Telefon: 0px

Anwenden des Sticky-Effekts auf das CTA-Modul

Sticky-Einstellungen

Nachdem alle Elemente vorhanden sind, ist es an der Zeit, den Klebeeffekt anzuwenden. Öffnen Sie das CTA-Modul und wenden Sie die folgenden Sticky-Einstellungen an:

• Klebrige Position:
  • Desktop: Bleiben Sie oben
  • Tablet & Telefon: Nicht kleben
• Sticky Top Offset: 50px
• Unteres Sticky-Limit: Spalte
• Versatz von umgebenden klebrigen Elementen: Ja
• Übergangsstandard- und Sticky-Stile: Ja

Opazität

Nachdem das Modul nun klebrig geworden ist, können wir klebrige Stile anwenden. Gehen Sie zu den Filtereinstellungen und wenden Sie die folgenden Deckkraftfiltereinstellungen an:

• Standarddeckkraft:
  • Desktop: 0 %
  • Tablet & Telefon: 100%
• Klebrige Deckkraft: 100%

Übergang

Zu guter Letzt werden wir die Übergangseinstellungen im erweiterten Tab ändern. Das ist es!

• Übergangsdauer: 800ms
• Übergangsgeschwindigkeitskurve: Einfach

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Divis Sticky-Optionen kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie Listenelemente mit einem CTA für klebrige Spalten schön anzeigen können. Dieser Ansatz ermöglicht es Ihnen, alle Elemente visuell anzuzeigen und einen Call-to-Action in der Nähe zu haben, während Ihre Besucher Ihre Dienste, Kurse oder andere Arten von Listen durchsuchen. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.