So fixen Sie mobile Überschrift-Fonts in Divi mit einem einfachen Schritt

Published
How To Fix Mobile Heading Fonts In Divi With One Easy Step

Wir haben vor kurzem festgestellt, dass viele Seiten Probleme beim Versuch hatten, die Schriftarten für mobile Überschriften in Divi zu fixen, und haben festgestellt, dass die einzigen Lösungen, die es gab, Plugins waren. Viele dieser zusätzlichen Plugins haben andere Elemente der Seite von Ezoic zerstört.

Während die Anpassungsfähigkeit von Divi als komplettes Design-Framework einfach zu handhaben ist, könnten Publisher, die vor Divi andere Themes verwendet haben, feststellen, dass viele ihrer älteren Blogbeiträge den Visual Builder nicht aktiviert haben.

Visual Builder einschalten Das Einschalten des Visual Builders Post für Post ist ein mühsamer Prozess. Obwohl Divi Ihnen die Möglichkeit gibt, seitenweite Änderungen vorzunehmen, beeinträchtigen diese Änderungen manchmal andere Elemente Ihrer Seite. Wenn Probleme auftauchen, dann eher bei den mobilen Versionen Ihrer Seite – Menüs, Überschriften und Schriftarten.

Wie sehen fehlerhafte Schriftarten für mobile Überschriften in Divi aus?

Das Problem, das wir bei unserem Test entdeckten, betraf die Schriftarten der H2-Überschrift auf mobilen Geräten. Sie erschienen oft unglaublich klein und wurden überschrieben, obwohl in den Theme-Einstellungen klar angegeben war, dass die H2-Überschriften auf Mobilgeräten viel größer sein sollten. Bei Beiträgen, für die der Divi Builder nicht aktiviert war, trat dieses Problem weiterhin auf.

Fehlerhafte H2s-Schriften in Divi

Anstatt den Visual Builder zu jeder Beitragsseite hinzuzufügen, eigenen Code im Theme selbst zu schreiben oder Plugins zu verwenden, die die Geschwindigkeit Ihrer Webseite verlangsamen, haben wir eine einfache Lösung gefunden.

Fixen Sie Schriftarten für mobile Überschriften in Divi mit einem benutzerdefinierten CSS-Skript

Um die Schriftarten für mobile Überschriften in Divi zu beheben, kopieren Sie den unten stehenden CSS-Code:

@media screen and (max-width: 767px) {
.et_pb_post h2 {
font-size: 30px!important;
}

Führen Sie dann die folgenden Schritte aus:

  1. Klicken Sie auf Ihr WordPress-Dashboard
  2. Klicken Sie auf Divi
  3. Theme-Optionen öffnen

Schritte zum Hinzufügen von benutzerdefiniertem CSS, um Divi-Header-Schriftarten auf Mobilgeräten zu fixen

Sobald Ihr Theme-Optionen-Fenster geladen ist, scrollen Sie nach unten, bis Sie “Benutzerdefiniertes CSS” finden. Fügen Sie das benutzerdefinierte CSS von oben in das Textfenster ein. Es sollte nach dem Einfügen so aussehen wie auf dem Screenshot unten. Klicken Sie dann auf Änderungen speichern.

Divi Mobile-Schriftarten-Probleme: Hinzufügen von benutzerdefiniertem CSS zu den Theme-Optionen

Und das war’s! Für diejenigen, die mit CSS nicht vertraut sind, setzt der Code eine maximale Breite von 767px, was für die meisten mobilen Geräte ausreichend sein sollte.

Die Überschrift, auf die diese Änderungen angewendet werden, wird auf “H2” und die Schriftgröße auf 30px gesetzt. Wenn Sie versuchen, die mobile Überschriftengröße einer anderen Überschrift (h1,h3) oder verschiedene Schriftgrößen zu beheben, können Sie diese Angaben nach Ihren eigenen Bedürfnissen ersetzen. Dieser CSS-Code sollte ausreichen, um die Schriftarten für mobile Überschriften in Divi seitenweit zu fixen. Haben Sie irgendwelche Probleme mit mobilen Schriftarten in Divi? Lassen Sie es mich in den Kommentaren wissen.

Leave a comment

Your email address will not be published. Required fields are marked *