Wie erstelle ich die mobile Ansicht im DIVI Builder?

Mai 5, 2025 | Webdesign

Anleitung zum Erstellen einer mobilen Ansicht im DIVI Builder

Immer mehr Nutzer greifen unterwegs per Smartphone oder Tablet auf Websites zu – und erwarten dabei eine reibungslose, schnelle und benutzerfreundliche Darstellung. Ist eine Website nicht für mobile Endgeräte optimiert, springen Besucher oft nach wenigen Sekunden ab. Das wirkt sich nicht nur negativ auf die Nutzererfahrung aus, sondern auch auf Ihr Ranking bei Google: Mobilfreundlichkeit ist ein wichtiger Rankingfaktor. Eine responsive Website sorgt also nicht nur für zufriedenere Besucher, sondern verbessert auch Ihre Sichtbarkeit in den Suchergebnissen – ein klarer Vorteil für Ihre Online-Präsenz.

Schritt-für-Schritt-Anleitung zur Erstellung einer mobil optimierten Website

mobile ansicht einstellungen
Öffnen Sie zunächst die Seite oder den Beitrag, auf dem das betreffende Modul eingebunden ist. Klicken Sie dort auf das Zahnradsymbol, um die Einstellungen des Moduls aufzurufen und individuelle Anpassungen vorzunehmen.
mobile ansicht anzeigen
Lassen Sie sich die Einstellungen für die unterschiedlichen Ansichten (Desktop oder Mobil) anzeigen, indem Sie mit der Maus über das Wort „Body“ fahren. So können Sie zwischen den verschiedenen Ansichten wechseln und gezielte Anpassungen vornehmen.
verschiedene mobile ansichten
Unter den jeweiligen Tabs für Desktopansicht, Tabletansicht und Smartphoneansicht können Sie die entsprechenden Einstellungen vornehmen und die Darstellung für jedes Endgerät individuell anpassen.
design tab
Änderungen an Größe, Ausrichtung, Abständen, Schriftgrößen und weiteren Designelementen nehmen Sie über den Tab ‚Design‘ vor.
mobile ansicht im design tab

Auch hier gelangen Sie über das kleine Handysymbol in die verschiedenen Ansichten, um gezielte Anpassungen für Desktop, Tablet und Smartphone vorzunehmen. In diesem Fall müssen Sie dazu über den Text: „Text Schriftart“ fahren.

Am Schluss jeder Änderung muss einmal gespeichert und aktualisiert werden.

Module für die mobile Ansicht optimieren – Wenn die erste Variante nicht ausreicht

Im Folgenden erhalten Sie eine kurze Anleitung, wie Sie Module für die mobile Ansicht optimieren können, falls die erste Methode nicht das gewünschte Ergebnis liefert. Dieser Ansatz lässt sich auch auf Zeilen oder ganze Sektionen anwenden. Allerdings sollte er nur als letzter Schritt in Erwägung gezogen werden, da die doppelte Modulanlage den Quellcode der Seite erheblich aufblähen kann.
mobile ansicht deaktivieren

Divi Builder öffnen: Loggen Sie sich in Ihr WordPress-Dashboard ein und gehen Sie zur Seite oder dem Beitrag, den Sie bearbeiten möchten.
Modul auswählen: Wählen Sie das Modul aus, das Sie für die mobile Ansicht ein- oder ausschalten möchten.
Modul deaktivieren: Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle des Moduls (1.). Es öffnet sich ein Drop-Down-Menü, in dem Sie „Deaktivieren“ (2.) auswählen können.

mobile ansicht aktiviert

Nachdem Sie auf „Deaktivieren“ geklickt haben, öffnet sich ein weiteres Menü. Hier können Sie festlegen, für welche Ansicht das Modul deaktiviert werden soll. Wählen Sie in diesem Fall die Ansicht für Smartphone, um das Modul ausschließlich auf mobilen Geräten auszublenden. Sie können auch die Tablet- oder Desktop-Ansicht auswählen, je nachdem, welche Darstellung Sie anpassen möchten.

smartphone ansicht deaktiviert
Das Handysymbol wird nun in roter Farbe angezeigt. Abschließend aktualisieren Sie die Seite, und das ausgewählte Modul wird in der Smartphone-Ansicht ausgeblendet.
andere endgeraete deaktiviert
Neues Modul erstellen: Wenn Sie ein neues Modul für die mobile Ansicht hinzufügen möchten, legen Sie zunächst wie gewohnt ein Modul mit dem gewünschten Inhalt an. Anschließend müssen Sie das Modul für die Tablet- und Desktop-Ansicht deaktivieren, da es andernfalls auch in diesen Ansichten angezeigt werden würde.
Auch hier beenden Sie den Vorgang wieder durch „Aktualisieren“ der Seite.

Prüfen der verschiedenen Ansichten: Denken Sie daran, zur Desktop-Ansicht zurückzukehren und sicherzustellen, dass Ihre Änderungen die Desktop-Version nicht beeinträchtigen. Prüfen Sie auch auf Ihrem Smartphone, ob die Ansicht den Vorstellungen entspricht.

Brauchen Sie Unterstützung bei der mobilen Optimierung Ihrer Website?

Ich biete maßgeschneiderte Schulungen an, in denen ich Ihnen zeige, wie Sie Ihre Website für mobile Endgeräte perfekt anpassen – verständlich, praxisnah und individuell auf Ihre Bedürfnisse abgestimmt. Sollte es trotz meiner Anleitung zu Schwierigkeiten kommen oder Sie bei der Umsetzung nicht weiterkommen, stehe ich Ihnen gerne persönlich zur Seite und helfe Ihnen, Ihre Website mobilfreundlich zu gestalten.
Jetzt Gespräch vereinbaren
Ich freue mich auf Ihre Anfrage!