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;
}}

Deine Meinung ist gefragt!

Hat dir der Artikel gefallen? Oder fehlt etwas?
Hinterlasse mir gern einen Kommentar!
Schnellstes WordPress Theme im Performance Test

Schnellstes WordPress Theme im Performance Test

In die Kategorie “Bestes WordPress Theme” kann nur ein Theme fallen, das auch in der Rubrik “Schnellstes WordPress Theme” hervorragend abschneidet. Es ist enorm wichtig, den Website-Besuchern eine schnell ladende Website anzubieten. Wenn sich die Website nur 3...

WordPress Theme installieren | Die Komplett-Anleitung

WordPress Theme installieren | Die Komplett-Anleitung

Du möchtest einfach und schnell ein WordPress Theme installieren? Dann habe ich hier die passende Anleitung für dich. Viel Spaß und gutes Gelingen! Eine der großartigen Vorteile von WordPress ist die schier endlose Zahl moderner Vorlagen, sprich man kann sehr einfach...

Die besten WordPress WooCommerce Themes Deutsch

Die besten WordPress WooCommerce Themes Deutsch

Du bist auf der Suche nach dem perfekten WordPress WooCommerce Theme | Deutsch? Dann kommt dieser Beitrag gerade Recht für dich, um einen Überblick über die Anforderungen an deinen WordPress Shop mit WooCommerce zu bekommen. Wir besprechen all die wichtigen Dinge, wie...

|

Platz für deinen Kommentar!

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Neue Themes

Workshop

Geschenkt

Handbuch WordPress,
Workshop SEO & Marketing

Download