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!
Checkliste ✅ Die besten WordPress Themes kaufen

Checkliste ✅ Die besten WordPress Themes kaufen

Wie und wo kann man die besten WordPress Theme kaufen? Nun, bevor ich "das beste WordPress Theme kaufen" kann, muss ich erst einmal herausfinden, was die Kriterien für die besten WordPress Themes sind. Und hier wird es schon kniffelig. Aber fangen wir ganz vorne an...

Welches WordPress Theme ist das beste Theme?

Welches WordPress Theme ist das beste Theme?

Welches WordPress Theme ist das beste Theme für dein Projekt? Nun, WordPress Themes sind wie die Autos. Es gibt Tausende Modelle, und sie alle haben unterschiedliche Eigenschaften. Einige Autos sind einfach zu fahren, während andere schwer zu handhaben sind. Einige...

Divi Performance: Page Speed Insights optimieren

Divi Performance: Page Speed Insights optimieren

In diesem Video zeige ich dir, wie ich die Page Speed Insights für das Theme Divi optimiere. Wir werden dazu die Bilder, den Cache und die Fonts optimieren. Ich nutze dazu folgende Plugins: Cache mit WP Rocket optimieren: https://link.designers-inn.de/wprocket Bilder...

WordPress Updates installieren

WordPress Updates installieren

Für viele ist es ein Horrorszenario: "Wir müssen ein WordPress Update installieren". Wie soll man das machen? Geht alles reibungslos? Wo gibt es Probleme? Und das Wichtigste. Wie kann man diese beheben? Wie man WordPress aktualisieren oder Theme- und Plugin-Updates...

|

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