Divi 4: Responsive Schriftgrößen nachträglich per CSS ändern

Wenn du mit dem älteren Divi 4 arbeitest, kennst du das Problem:
Responsive Schriftgrößen wurden beim Erstellen der Seite nicht sauber definiert
oder lassen sich nachträglich nur umständlich anpassen.
In diesem Beitrag zeige ich dir, wie du mit einfachem Custom CSS
die Schriftgrößen für Desktop, Tablet und Smartphone nachträglich optimierst.

Warum sind responsive Schriftgrößen so wichtig?

Responsive Schriftgrößen sorgen dafür, dass Texte auf allen Geräten gut lesbar bleiben.
Eine zu große Schrift auf dem Smartphone oder zu kleine Texte auf großen Monitoren
verschlechtern nicht nur die Benutzererfahrung, sondern auch die SEO-Werte.

Divi 4 bietet zwar responsive Einstellungen pro Modul,
doch gerade bei älteren Seiten oder globalen Anpassungen
ist CSS oft die einfachere und sauberere Lösung.

Responsive Schriftgrößen mit CSS in Divi 4 umsetzen

Mit sogenannten Media Queries kannst du je nach Bildschirmgröße
unterschiedliche Schriftgrößen definieren.
Im folgenden Beispiel wird die Basis-Schriftgröße des gesamten Inhalts angepasst.

Beispiel: CSS für unterschiedliche Bildschirmgrößen

/* Große Bildschirme über 1400px */
@media only screen and (min-width: 1401px) {
  body {
    font-size: 110% !important;
  }
}

/* Laptops & Desktops 1100–1400px */
@media only screen and (min-width: 1100px) and (max-width: 1400px) {
  body {
    font-size: 100% !important;
  }
}

/* Tablets Landscape 980–1100px */
@media only screen and (min-width: 980px) and (max-width: 1100px) {
  body {
    font-size: 90% !important;
  }
}

/* Tablets Portrait 768–980px */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  body {
    font-size: 80% !important;
  }
}

/* Smartphones Landscape 480–767px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  body {
    font-size: 70% !important;
  }
}

/* Smartphones Portrait bis 479px */
@media only screen and (max-width: 479px) {
  body {
    font-size: 60% !important;
  }
}

Wo füge ich das CSS in Divi ein?

Du kannst den Code an mehreren Stellen einfügen. Empfohlen ist eine der folgenden Varianten:

• Divi → Theme-Optionen → Custom CSS
• Customizer → Zusätzliches CSS
• Child-Theme (style.css)

Für globale Schriftanpassungen ist der Bereich
Divi → Theme-Optionen → Custom CSS meist die einfachste Lösung.

Wann ist Custom CSS sinnvoll – und wann nicht?

Custom CSS eignet sich besonders, wenn:

• eine ältere Divi-4-Seite nachträglich optimiert werden soll
• globale Schriftgrößen angepasst werden müssen
• viele Module betroffen sind

Wenn du hingegen nur einzelne Texte anpassen willst,
sind die nativen responsiven Divi-Einstellungen pro Modul oft die bessere Wahl.

SEO-Tipp: Bessere Lesbarkeit = bessere Rankings

Gut lesbare Texte reduzieren die Absprungrate und erhöhen die Verweildauer.
Beides sind wichtige Nutzersignale für Suchmaschinen.
Responsive Schriftgrößen tragen somit indirekt zu besseren Rankings bei.

Häufige Fragen (FAQ)

Funktioniert diese Methode auch mit Divi 5?

Divi 5 bietet deutlich bessere responsive Typografie-Optionen.
Das CSS funktioniert zwar weiterhin, ist dort aber meist nicht mehr notwendig.

Kann ich statt Prozent auch px oder rem verwenden?

Ja, technisch ist das möglich.
Prozentangaben sind jedoch flexibler und besser für responsive Designs geeignet.

Beeinflusst Custom CSS die Ladezeit?

Nein. Sauberes, schlankes CSS hat praktisch keinen negativen Einfluss auf die Performance.