So erstellen Sie klebrige Abschnittstitel mit Divi

Die Art und Weise, wie Sie Ihre Seiten gestalten, spiegelt direkt Ihre Marke wider. Aus diesem Grund möchten Sie möglicherweise irgendwann in Ihrem Design-Brainstorming einzigartige Designelemente finden und Ihrer Website hinzufügen, die dazu beitragen, ein Muster auf allen Seiten zu generieren. Eine einzigartige Möglichkeit, die Identität Ihrer Website hervorzuheben, ist die Verwendung von klebrigen Abschnittstiteln. Diese klebrigen Abschnittstitel folgen dem Navigationsverhalten Ihrer Besucher, indem sie oben in ihrem Browser bleiben. In diesem Tutorial zeigen wir Ihnen, wie Sie mit den Sticky-Optionen von Divi klebrige Abschnittstitel erstellen. Die klebenden Abschnittstitel werden weniger hervorgehoben, wenn Ihre Besucher scrollen, sind aber so sichtbar, dass sie den Abschnitt erkennen, in dem sie sich befinden. Sie können die JSON-Datei auch kostenlos herunterladen!

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 Layout KOSTENLOS herunter

Um das kostenlose Layout 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!

Abonnieren Sie unseren Youtube-Kanal

1. Schnittdesign erstellen

Neuen Abschnitt hinzufügen

Abstand

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und wenden Sie einige obere und untere Abstände an.

• Obere Polsterung: 200px
• Untere Polsterung: 200px

Zeile 1 hinzufügen

Spaltenstruktur

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

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Textmodul zur Spalte hinzufügen

H2-Inhalt hinzufügen

Fügen Sie nun ein Textmodul zur Spalte der Zeile hinzu und fügen Sie H2-Inhalt Ihrer Wahl ein.

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H2-Texteinstellungen wie folgt:

• Überschrift 2 Schriftart: Poppins
• Überschrift 2 Schriftstärke: Halbfett
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #000000
• Überschrift 2 Textgröße:
  • Desktop: 20vw
  • Tablet & Telefon: 28vw

Zeile 2 hinzufügen

Spaltenstruktur

Fügen Sie eine weitere Zeile direkt unter der vorherigen hinzu, indem Sie die folgende Spaltenstruktur verwenden:

Größe

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

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fügen Sie dann in Spalte 2 ein erstes Textmodul mit beschreibenden Inhalten Ihrer Wahl hinzu.

Texteinstellungen

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

• Textschriftart: Poppins
• Textfarbe: #000000
• Textgröße:
  • Desktop: 2vw
  • Tablet: 4vw
  • Telefon: 5vw
• Text Buchstabenabstand: -0.1vw
• Textzeilenhöhe: 1,6em

Größe

Ändern Sie die Größeneinstellungen auch für verschiedene Bildschirmgrößen.

• Breite:
  • Desktop: 70%
  • Tablet & Telefon: 90%
• Modulausrichtung: Mitte

Bildmodul zu Spalte 2 hinzufügen

Bild hochladen

Weiter zum nächsten Modul, das ein Image-Modul ist. Laden Sie ein Bild Ihrer Wahl hoch.

Größe

Wechseln Sie zur Design-Registerkarte des Moduls und erzwingen Sie die volle Breite des Bildes.

• Volle Breite erzwingen: Ja

Abstand

Fügen Sie auch etwas oberen Rand hinzu.

• Oberer Rand: 100px

Schaltflächenmodul zu Spalte 2 hinzufügen

Kopie hinzufügen

Als nächstes haben wir ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Tasteneinstellungen

Ändern Sie die Tasteneinstellungen des Moduls entsprechend:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße:
  • Desktop: 1.5vw
  • Tablet: 2.5vw
  • Telefon: 3.5vw
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #f6223e
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px

• Schaltflächenschriftart: Poppins
• Schaltflächensymbol anzeigen: Ja
• Platzierung der Schaltflächensymbole: Links
• Nur Symbol beim Hover für Schaltfläche anzeigen: Nein

Abstand

Und vervollständigen Sie die Moduleinstellungen, indem Sie einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzufügen.

• Obere Polsterung:
  • Desktop und Tablet: 3%
  • Telefon: 5%
• Untere Polsterung:
  • Desktop und Tablet: 3%
  • Telefon: 5%
• Linke Polsterung:
  • Desktop: 5vw
  • Tablet: 8vw
  • Telefon: 12vw
• Rechte Polsterung:
  • Desktop: 5vw
  • Tablet: 8vw
  • Telefon: 12vw

Textmodul zu Spalte 2 hinzufügen

Inhalt der Aufzählungsliste hinzufügen

Das nächste und letzte Modul, das wir dieser Spalte hinzufügen, ist ein weiteres Textmodul. Fügen Sie die Listenelemente Ihrer Wahl zum Inhaltsfeld hinzu.

Texteinstellungen

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

• Textschriftart: Poppins
• Textfarbe: #000000
• Textgröße:
  • Desktop: 2vw
  • Tablet: 4vw
  • Telefon: 5vw
• Text Buchstabenabstand: -0.1vw
• Textzeilenhöhe: 1,6em

Texteinstellungen für geordnete Liste

Nehmen Sie auch einige Änderungen an den Texteinstellungen der geordneten Liste vor.

• Textfarbe der bestellten Liste: #ff2340
• Zeilenhöhe der bestellten Liste: 1,6em
• Art der geordneten Liste: oberer Roman
• Position des geordneten Listenstils: Außerhalb

Hinzufügen von schwarzer Textfarbe zu Listenelementen einzeln im Inhaltsfeld

Anschließend werden die Elemente wieder schwarz, indem wir zum Inhaltsfeld navigieren und jedem Listenelement manuell eine schwarze Textfarbe hinzufügen.

Größe

Als Nächstes ändern wir die Größeneinstellungen für verschiedene Bildschirmgrößen.

• Breite:
  • Desktop: 70%
  • Tablet & Telefon: 90%
• Modulausrichtung: Mitte

Abstand

Wir werden auch einige benutzerdefinierte Rand- und Abstandswerte auf die Abstandseinstellungen des Moduls anwenden.

• Oberer Rand: 50px
• Linke Polsterung: 5%
• Rechte Polsterung: 5%

2. Wenden Sie den Sticky-Effekt auf den Abschnittstitel an

Fügen Sie der Reihe einen klebrigen Effekt hinzu

Nachdem wir nun die Grundlage für unser Design geschaffen haben, ist es an der Zeit, den Effekt zu erzielen, den Sie in der Vorschau dieses Beitrags sehen konnten. Dazu machen wir unsere gesamte erste Zeile klebrig, indem wir die Zeileneinstellungen öffnen, zur Registerkarte Erweitert gehen und die folgenden Einstellungen anwenden:

• Klebrige Position: Bleiben Sie oben
• Untere Klebrigkeitsgrenze: Abschnitt
• Versatz von umgebenden klebrigen Elementen: Ja
• Übergangsstandard- und Sticky-Stile

Zeilen-Z-Index ändern

Um sicherzustellen, dass die Sticky-Reihe in unserem Design unter der zweiten Reihe bleibt, weisen wir unserer Sticky-Reihe einen z-Index von „1“ zu. Beim Scrollen sehen Sie, dass die Sticky-Reihe und ihr Textmodul unter die Module der zweiten Reihe gehen.

• Z-Index: 1

Spalte 2 Mischmodus hinzufügen (Zeile #2)

Wie Sie jedoch in der Vorschau dieses Beitrags feststellen konnten, ist der Titel des klebrigen Abschnitts jederzeit sichtbar. Um diesen Effekt zu erzielen, fügen wir der zweiten Spalte unserer zweiten Zeile ein Blend-Modul hinzu. Dies hilft dabei, die Sticky-Reihe und die Module in der zweiten Reihe zu vermischen, während gleichzeitig ein niedriger Z-Index für die Sticky-Reihe beibehalten wird.

• Mischmodus: Multiplizieren

Sticky H2-Texteinstellungen ändern

Wir werden auch einige Sticky-Stile auf unser Textmodul in Zeile 1 anwenden. Beginnen Sie mit dem Ändern der H2-Textfarbe in einem klebrigen Zustand und wenden Sie auch einen benutzerdefinierten Textschatten an.

• Klebrige H2-Textfarbe: #ffffff
• Überschrift 2 Textschatten: Zweite Option (siehe Druckbildschirm unten)
• Überschrift 2 Textschattenfarbe:
  • Standard: rgba(0,0,0,0)
  • Klebrig: rgba(0,0,0,0.08)

Abstand zwischen Sticky-Text-Modulen ändern

Wir werden auch die Position des Moduls ändern, indem wir in den Abstandseinstellungen einen negativen klebrigen linken Rand verwenden

• Klebriger linker Rand: -35%

Erhöhen Sie die Übergangsdauer des Textmoduls

Und um einen reibungslosen Übergang zu gewährleisten, verlängern wir die Übergangsdauer auf der Registerkarte „Erweitert“.

• Übergangsdauer: 500ms

3. Abschnitt zur Wiederverwendung

Abschnitt klonen

Da wir nun über einen abgeschlossenen Abschnitt verfügen, einschließlich des Titels des klebrigen Abschnitts, können wir den gesamten Abschnitt beliebig oft wiederverwenden, indem wir ihn klonen.

Titelinhalt ändern

Stellen Sie sicher, dass Sie den Titelinhalt in der ersten Zeile ändern.

Textgröße an Zeichenlänge anpassen

Je nachdem, wie viele Zeichen Ihr neuer H2-Titel hat, möchten Sie möglicherweise die Textgröße der Überschrift 2 anpassen.

Alle anderen Inhalte und Bilder ändern

Und natürlich müssen Sie auch alle anderen Inhalte im Duplikat-Bereich ändern. Das ist es!

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 klebende Abschnittstitel erstellen, die Ihren Besuchern während des gesamten von Ihnen erstellten Designs folgen. Dieser Effekt verleiht Ihrem Design eine zusätzliche Dimension und einen nahtlosen Übergang. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen 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.