2 Profi-Tipps, um Dein Divi-Theme responsiv zu gestalten!

Zuletzt aktualisiert am 7. Dezember 2024 um 11:55 Uhr

Das Divi-Theme von Elegant Themes (Hinweis: Das ist ein Affiliate Link) bringt schon von Haus aus sehr viele tolle Möglichkeiten, um die Darstellung Deiner Website auch für mobile Geräte perfekt zu gestalten. Schriften und Bilder können sowohl für Desktop, Tablet und mobile Geräte ganz individuell eingerichtet werden.

Allerdings sind viele dieser Möglichkeiten nicht auf den ersten Blick erkennbar und vielleicht auch ein klein wenig versteckt. Daher will ich Dir heute im Videohack zwei Möglichkeiten vorstellen, um das Divi-Theme responsive zu gestalten.

Möglichkeit 1: Schriften für verschiedene Geräte-Typen individuell einstellen

Manchmal kann es passieren, dass die Schriftgröße zum Beispiel von Überschriften für die Darstellung auf einem Smartphone zu wuchtig ist: Was auf dem großen Monitor am Desktop toll aussieht führt auf dem kleinen Display eines Smartphones zu hässlichen, fehlerhaft umgebrochenen Wörtern oder abgeschnittenen Texten:

Darstellung einer H1-Überschrift auf dem Desktop:

Darstellung derselben H1-Überschrift auf dem Smartphone ohne Optimierung

Um das zu lösen, klicke im Visual Builder von Divi einfach das entsprechende Textmodul an und wähle dann „Design“ – „Überschriften“ und die Überschriftengröße, die Du bearbeiten möchtest, in unserem Fall also die H1.

Jetzt scrollst Du nach unten bis zur Einstellung für „Überschrift H1 Schriftgröße“ . Wenn Du diese Überschrift mit der Maus überfährst erscheinen neben dem Schriftzug einige Icons. Eines davon schaut aus wie ein kleines Smartphone.

Wenn Du dieses Icon anklickst erhältst Du die Möglichkeit, die Schriftgröße für alle drei Gerätetypen individuell anzugeben. Ich habe in diesem Beispiel die Schriftgröße, die auf dem Desktop 70px beträgt, für Tablets auf 40px und für das Smartphone auf 24px angepasst. Und das Ergebnis sieht dann gleich viel gefälliger aus:

Möglichkeit 2: Unterschiedliche Bilder für unterschiedliche Gerätetypen verwenden

Manchmal macht es einfach keinen Sinn, ein Bild, das für den Desktop verwendet wird, auch für die mobile Darstellung zu verwenden. Zum einen passen Bilder im Querformat oft nicht so gut zu dem Hochformat auf mobilen Geräten. Und zum anderen werden Smartphones häufig mit mobilen Daten genutzt. Großformatige Bilder, die für große Monitore optimiert sind, belasten das Datenvolumen dann unnötig und beeinflussen gleichzeitig die Ladezeit der Website negativ.

Das Vorgehen zum Verwenden unterschiedlicher Bilder auf den verschiedenen Gerätetypen funktioniert dabei ganz ähnlich wie das Anpassen der Schritgrößen aus dem 1. Abschnitt dieses Beitrags: Klicke im Visual Builder das Bildmodul des Bildes an, das Du austauschen möchtest. Fahre mit der Maus über die Überschrift „Bild“ und klicke dann auf das Smartphone-Symbol, das dabei erscheint.

Jetzt gehst Du genaus vor wie bei der Anpassung der Schrift: Klicke auf das Symbol für das Smartphone und dann tausche das dort eingestellte Bild gegen Dein extra für mobile Geräte optimiertes Bild aus.

Wichtig!

Bitte teste Deine Anpassungen sorgfälitg in der Vorschau. Du kannst dafür auch die Vorschau für die unterschiedlichen Geräte nutzen, die Divi Dir anbietet, wenn Du ganz unten auf den lila Kreis mit den drei Punkten klickst. So kannst Du bereits vor dem Speichern ausgiebig prüfen, wie Deine Website auf Desktop, Tablet und Mobil aussieht.

Fazit

Mit den responsiven Einstellungen im Divi-Theme kannst Du Schriften und Bilder perfekt anpassen. Damit wirkt Deine Website auf allen Geräten professionell und ansprechend – und das Beste: Es ist wirklich kinderleicht!

Schau Dir das Video an

In meinem heutigen Videohack führe ich Dich durch alle drei Optionen und erkläre Dir alles noch einmal Schritt für Schritt.

Du möchtest keinen meiner Videohacks verpassen?
Dann abonniere doch direkt meinen Youtube-Kanal:
https://www.youtube.com/c/MichaelaSteidl