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!
WordPress Seite als Startseite festlegen: Anleitung

WordPress Seite als Startseite festlegen: Anleitung

WordPress wurde ursprünglich als Blogging.Plattform entwickelt. Mittlerweile ist WordPress ein ausgewachsenes Content Management System und hervorragend für "normale" Websites geeignet. Ein Relikt aus der Gründerzeit ist allerdings, dass die Startseite von WordPress...

WordPress Beitrag duplizieren – mit Plugin und ohne Plugin

WordPress Beitrag duplizieren – mit Plugin und ohne Plugin

Wie kann man schnell und einfach eine Wordpress Seite kopieren oder einen WordPress Beitrag duplizieren? In diesem Beitrag schauen wir uns die besten WordPress-Plugins und Tipps an, wie man einfach eine WordPress Seite duplizieren bzw. einen kompletten WordPress...

WordPress Beitragsbild Größe

WordPress Beitragsbild Größe

Ich werde immer wieder gefragt, welche WordPress Beitragsbild Größe für ein bestimmtes Thema geeignet ist. Vor allem die voreingestellten Bildgrößen lösen immer wieder Fragen aus. Diese Anleitung zeigt dir Schritt für Schritt, wie du die perfekte Bildgröße für dein...

Divi Module verschachteln – ohne Plugin

Divi Module verschachteln – ohne Plugin

https://youtu.be/qnbvSJIoMXE In diesem Tutorial zeige ich, wie man Module ineinander verschachtelt. In dem Beispiel werden wir drei Preistabellen erstellen, die dann per Button/Switch über das Modul Registerkarte umgeschaltet werden können. Anleitung: Divi Module...

WordPress Seite als Startseite festlegen: Anleitung

WordPress Seite als Startseite festlegen: Anleitung

WordPress wurde ursprünglich als Blogging.Plattform entwickelt. Mittlerweile ist WordPress ein ausgewachsenes Content Management System und hervorragend für "normale" Websites geeignet. Ein Relikt aus der Gründerzeit ist allerdings, dass die Startseite von WordPress...

WordPress Beitrag duplizieren – mit Plugin und ohne Plugin

WordPress Beitrag duplizieren – mit Plugin und ohne Plugin

Wie kann man schnell und einfach eine Wordpress Seite kopieren oder einen WordPress Beitrag duplizieren? In diesem Beitrag schauen wir uns die besten WordPress-Plugins und Tipps an, wie man einfach eine WordPress Seite duplizieren bzw. einen kompletten WordPress...

WordPress Beitragsbild Größe

WordPress Beitragsbild Größe

Ich werde immer wieder gefragt, welche WordPress Beitragsbild Größe für ein bestimmtes Thema geeignet ist. Vor allem die voreingestellten Bildgrößen lösen immer wieder Fragen aus. Diese Anleitung zeigt dir Schritt für Schritt, wie du die perfekte Bildgröße für dein...

|

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

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

Galerie

Mehr verkaufen

Workshops, Academy, Magazin, Masterclass

Starten

Geschenkt

Handbuch WordPress,
Workshop SEO & Marketing

Download