So ändern Sie Ihr Sticky-Logo beim Scrollen mit Divi

Seitdem die Divi-Sticky-Optionen herausgekommen sind, wurden unseren Divi-Toolboxen endlose Interaktionsdesign-Möglichkeiten hinzugefügt. Neben der Möglichkeit, eine Kopfzeile beim Scrollen festzuhalten, können Sie auch den Stil Ihrer Elemente in einem klebrigen Zustand ändern. Auf diese Weise können Sie Ihren Header hervorheben, sobald er klebrig geworden ist, und eine andere Benutzererfahrung schaffen, während die Leute Ihre Seiten und Beiträge lesen.

Eine der Fragen, die in der Community oft gestellt wird, ist, wie man das Divi-Logo in einen klebrigen Zustand ändert. In diesem Tutorial zeigen wir Ihnen eine schnelle und einfache Möglichkeit, dies zu tun. Wir beginnen das Tutorial, indem wir einen globalen Header erstellen, dann wenden wir die Sticky-Effekte an und im dritten Teil des Tutorials zeigen wir Ihnen, wie Sie Ihr Sticky-Logo beim Scrollen ändern. Wenn Sie mit den Sticky-Optionen und globalen Header-Möglichkeiten von Divi bereits vertraut sind, können Sie gerne zum dritten Teil des Tutorials springen, um die wenigen Schritte zu sehen, die zum Ändern Ihres Sticky-Logos beim Scrollen erforderlich sind.

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 die globale Header-Vorlage KOSTENLOS herunter

Um die kostenlose globale Header-Vorlage 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 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!

1. Erstellen der Header-Elementstruktur in einer neuen Header-Vorlage

Neue globale Header-Vorlage erstellen

Gehen Sie zunächst zum Divi Theme Builder und erstellen Sie einen neuen globalen oder benutzerdefinierten Header.

Abschnittseinstellungen

Hintergrundfarbe

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie die Einstellungen dieses Abschnitts und wenden Sie eine Hintergrundfarbe an.

• Hintergrundfarbe: #556de0

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

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

Box Schatten

Fügen Sie auch einen Boxschatten hinzu.

• Stärke der Box-Schattenunschärfe: 50px
• Schattenfarbe: rgba(0,0,0,0.15)

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt 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 der Zeile wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite:
  • Desktop: 80%
  • Tablet & Telefon: 100%
• Maximale Breite: 2580px

Abstand

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

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

Spalte 1 Abstand

Öffnen Sie dann die Einstellungen von Spalte 1 und wenden Sie einige obere und untere Auffüllung an.

• Obere Polsterung: 15px
• Untere Polsterung: 15px

Spalte 2 Hintergrundfarbe

Gehen Sie zu den Einstellungen der zweiten Spalte und fügen Sie eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #6eba01

Menümodul zu Spalte 1 hinzufügen

Menü auswählen

Nachdem nun die allgemeinen Zeilen- und Spalteneinstellungen vorgenommen wurden, ist es an der Zeit, Module hinzuzufügen, beginnend mit einem Menümodul in Spalte 1.

Hintergrundfarbe entfernen

Entfernen Sie die standardmäßige weiße Hintergrundfarbe des Moduls.

Menütexteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Menütexteinstellungen entsprechend:

• Menüschrift: Montserrat
• Schriftstärke des Menüs: Fett
• Menütextfarbe: #ffffff
• Menütextgröße: 16px
• Textausrichtung: Rechts

Dropdown-Menüeinstellungen

Nehmen Sie dann einige Änderungen an den Dropdown-Menüeinstellungen vor.

• Hintergrundfarbe des Dropdown-Menüs: #556de0
• Farbe der Dropdown-Menüzeile: rgba(0,45,76,0)
• Hintergrundfarbe des mobilen Menüs: #556de0
• Textfarbe des mobilen Menüs: #ffffff

Symboleinstellungen

Ändern Sie als nächstes die Symbolfarben.

• Farbe des Einkaufswagensymbols: #ffffff
• Farbe des Suchsymbols: #ffffff
• Farbe des Hamburger-Menüsymbols: #ffffff

Abstand

Und wenden Sie einige responsive Abstandswerte an.

• Oberer Rand:
  • Tablet & Telefon: 10px
• Unterer Rand:
  • Tablet & Telefon: 10px
• Linker Rand:
  • Tablet & Telefon: 5%
• Rechte Marge: 5%

Schaltflächenmodul zu Spalte 2 hinzufügen

Kopie hinzufügen

In Spalte 2 benötigen wir als einziges Modul ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Tastenausrichtung

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Modulausrichtung.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Stylen Sie die Schaltfläche als nächstes.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 17px
• Schaltflächentextfarbe: #ffffff
• Breite des Tastenrahmens: 0px

• Tastenabstand der Buchstaben: 1px
• Button-Schriftart: Montserrat
• Schaltflächenschriftart: Großbuchstaben

Abstand

Und wenden Sie einige responsive Abstandswerte an.

• Oberer Rand:
  • Desktop: 30px
  • Tablet & Telefon: 20px
• Unterer Rand:
  • Desktop: 30px
  • Tablet & Telefon: 20px

2. Wenden Sie benutzerdefinierte Sticky-Effekte an

Abschnitt klebrig machen

Nun, da wir alle Elemente an Ort und Stelle haben, ist es an der Zeit, den Sticky-Effekt hinzuzufügen und auch unser Sticky-Logo zu ändern. Öffnen Sie zunächst die Abschnittseinstellungen erneut. Gehen Sie zur Registerkarte Erweitert und wenden Sie die folgenden Einstellungen für die Sticky-Position an:

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

Hintergrundfarbe des klebrigen Abschnitts

Nachdem der Abschnitt nun klebrig geworden ist, können wir den übergeordneten und untergeordneten Elementen einen klebrigen Stil zuweisen. Gehen Sie zunächst zu den Hintergrundeinstellungen des Abschnitts und wenden Sie eine weiße Hintergrundfarbe in einem klebrigen Zustand an.

• Hintergrundfarbe: #FFFFFF

Sticky Row Sizing

Ändern Sie als nächstes die Breite der Zeile in einem klebrigen Zustand.

• Breite: 100%

Sticky Column 1-Abstand

Dann entfernen wir die obere und untere Polsterung von Spalte 1 in einem klebrigen Zustand.

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

Sticky Column 2 Hintergrundfarbe

Wir werden auch die Hintergrundfarbe der klebrigen Spalte 2 ändern.

• Hintergrundfarbe: #556de0

Textfarbe für klebrige Menüs

Fahren Sie fort, indem Sie das Menümodul öffnen und eine klebrige Menütextfarbe anwenden.

• Menütextfarbe: #556de0

Sticky Menu Dropdown-Einstellungen

Ändern Sie auch einige Dropdown-Menüfarben in einem klebrigen Zustand.

• Hintergrundfarbe des Dropdown-Menüs: #ffffff
• Hintergrundfarbe des mobilen Menüs: #ffffff
• Textfarbe des mobilen Menüs: #556de0

Einstellungen für Sticky-Menüsymbole

Zusammen mit den klebrigen Symbolfarben.

• Farbe des Einkaufswagensymbols: #556de0
• Farbe des Suchsymbols: #556de0
• Hamburger Menüsymbol Farbe: #556de0

Sticky Menu-Abstände

Gehen Sie dann zu den Abstandseinstellungen und wenden Sie einen klebrigen linken Rand an.

• Linker Rand: 5%

Sticky Button-Abstand

Ändern Sie zu guter Letzt die Sticky-Margin-Werte des Button-Moduls in den Abstandseinstellungen.

• Oberer Rand: 15px
• Unterer Rand: 15px

3. Logo im Sticky State ändern

Laden Sie beide Symbole in die Medienbibliothek hoch

Jetzt müssen Sie nur noch unsere zwei verschiedenen Logos zum Menümodul hinzufügen. Ein Logo wird in einem statischen Zustand angewendet, das andere in einem klebrigen Zustand. Laden Sie beide Logos in Ihre Mediathek hoch.

Statisches Logo auswählen

Öffnen Sie dann das Menümodul und wählen Sie in den Logoeinstellungen die statische Logobilddatei aus.

Wenden Sie die maximale Breite und Höhe des Logos in Pixeln an

Wechseln Sie zur Registerkarte Design des Moduls und wenden Sie die maximale Breite und Höhe des Logos an. Diese Werte helfen uns, die Größe unseres statischen und klebrigen Logos gleich zu halten.

• Max. Breite des Logos: 100px
• Max. Höhe des Logos: 60px

Kopieren Sie die URL des Sticky-Logos

Gehen Sie nun zurück zu Ihrer Medienbibliothek und kopieren Sie die URL Ihres Sticky-Logos.

Fügen Sie eine klebrige URL in einem klebrigen Zustand hinzu (Hauptelement des Menülogos)

Um das Logo in einen klebrigen Zustand zu ändern, navigieren wir zur Registerkarte Erweitert des Menümoduls und scrollen nach unten zum Feld Menülogo-CSS. Dort aktivieren wir die Sticky-Optionen im CSS-Feld und fügen eine Zeile CSS-Code mit der URL des Sticky-Logos in Klammern hinzu. Das ist es!

content: url(addlinkhere);

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 Ihr Sticky-Logo beim Scrollen mit den Sticky-Optionen von Divi ändern können. Dieser Ansatz ermöglicht es Ihnen, zwei verschiedene Logos in Ihrer Kopfzeile zu verwenden, ohne separate Menüs verwenden zu müssen. Wir haben damit begonnen, Ihnen zu zeigen, wie Sie den globalen Header erstellen, dann haben wir unseren Abschnitt sticky gemacht und die Sticky-Stile geändert. Wir haben das Tutorial abgeschlossen, indem wir Ihnen im dritten Teil des Tutorials gezeigt haben, wie Sie Ihr Sticky-Logo beim Scrollen ändern. 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.