Divi Header Jumping / Moving On Page Load

Wenn du eine benutzerdefinierte Einstellungen für die Navigation nutzt, sprich im Theme Customizer eine eigene Höhe für deine Navigation angelegt hast, kommt es zu kleinen Sprüngen im Kopfbereich der Website. Dies betrifft den ersten Abschnitt der Seite, Module mit voller Breite und den Hauptinhaltsbereich.

Hintergrund ist, dass der Abstand dynamisch über jQuery berechnet wird und diese Berechnung von der Höhe der Navigation abhängt. Nun ist die Höhe des Menüs seinerseits abhängig von deinen Einstellungen: benutzerdefinierte Schriftgröße, Höhe des Logos u.s.w.

Das eigentliche Problem ist, dass jQuery-Skripte erst nach dem Lande der gesamten Seite ausgeführt wird. Dies Folge ist, dass also zunächst die Standardwerte vom Theme geladen werden und dann – nach dem Laden der übrigen Inhalte – jQuery die Höhe der individuellen Elemente nachberechnet.

Das Ergebnis: Die Seite springt!

Die Lösung:

Die einfachste Lösung des Problems wäre, mithilfe eines Preloader-Plugins das „Nachladen“ der benutzerdefinierten Inhalte zu überbrücken. Das Preloader-Plugin verbirgt den Inhalt der Seite, bis der gesamte Inhalt einschließlich der dynamischen Werte geladen ist. Dumm ist, dass in diesem Fall die Seite aus Sicht von Google sehr langsam aufbaut und damit die Core Website Vitals in die roten Zahlen abrutschen. Du tauscht also ein Problem mit einem anderen.

Die bessere Lösung ist, den „Sprung“ der Website per CSS zu vermeiden.

Alles was wir machen müssen ist, den „dynamischen Wert“ zu finden und diesen anschließend per CSS in unser Theme (genauer in die style.css) zu schreiben. So wird die Seite gleich per CSS korrekt geladen und es entsteht durch das Nachladen per jQuery kein Sprung mehr.

1. Schritt

Zunächst musst du das HTML-Element finden, das den dynamischen Wert enthält. Nutze dazu in Chrome auf der Website die rechte Maustaste und öffne den Inspektor. Eine ähnliche Funktion gibt es auch in anderen Browsern. Aber in diesem Beispiel bleibe ich mal beim Chrome-Browser. In der Ansicht „Style“ suche nach dem „Page Container“ …

2. Schritt

Den dynamischen Wert trägst du nun unter „Divi > Designoptionen> Benutzerdefiniertes CSS“ ein. Dies musst du für den „Page Container“ machen. Sollte die Seite noch immer springen, wiederhole den Vorgang für die „erste Sektion“ und das „erste Modul“

Code für den Hauptcontainer:

#page-container {
padding-top:109px;
}

Code für die erste Sektion:

.et_pb_section:first-child {
padding-top:109px;
}

Code für das erste Modul:

.et_pb_section:first-child .et_pb_module:first-child {
padding-top:109px;
}

Solltest du über den Theme Customizer eine eigene Höhe für die primäre Navigation festgelegt haben, musst du auch diesen Wert fix per CSS schreiben:

#main-header {
oben: 43px;
}}

Tool-Tipp:

Folgende Apps nutze ich in meinem Blog. Zu den meisten dieser Apps findest du auf meinem YouTube-Kanal oder direkt hier eine ausführliche Review.

Keyword-Strategie: WriterZen, LongTailPro, Link Assistant
Content-Erstellung: Frase, StoryChief, Bramework
Optimierung Pagespeed: WP Rocket, ShortPixel
Optimierung Conversion: Convertbox
Sicherheit: WPVivid

Du suchst nach einer Lösung für dein Marketing, deiner SEO- oder Content-Strategie? Dann schau auch gern in meiner Akademie vorbei: Businesserfolg.de

Deine Meinung ist gefragt!

Hat dir der Artikel gefallen? Oder fehlt etwas?
Hinterlasse mir gern einen Kommentar!
WordPress Themes deinstallieren bzw. löschen: Anleitung.

WordPress Themes deinstallieren bzw. löschen: Anleitung.

Eines der größten Vorteile von WordPress ist, dass es sehr einfach zu bedienen ist. Du kannst ein Theme in nur wenigen Minuten installieren. Es kann jedoch der Zeitpunkt kommen, an dem du WordPress Themes deinstallieren bzw. löschen möchtest. In diesem Leitfaden...

|

Platz für deinen Kommentar!

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht.

Neue Themes

Neu: Scroll-Effekte, WooCommerce-Module u.v.m.

Galerie

Workshops

Workshops, Academy, Magazin, Masterclass

Starten

Geschenkt

Handbuch WordPress,
Workshop SEO & Marketing

Download