Wie kann ich das Design für die mobile Ansicht optimieren?

Deine Spreadmind Webseite ist von Haus aus schon für die mobilen Endgeräte (Tablet und Smartphones) optimiert. Dies nennt man auch "responsive Design" (engl. für reagierend, sich anpassend). 

Sobald man aber individuelle Anpassungen in Divi an einer Sektion, Zeile oder an einem Modul vornimmt (bspw. Abstand hinzufügen, Hintergrundbilder einfügen), kann es vorkommen, dass diese Anpassung auf den mobilen Endgeräten einfach nicht mehr schön aussieht. 

Mit Divi kannst du jede Sektion, Zeile oder ein Modul ganz individuell für die Darstellung auf den mobilen Endgeräten anpassen, egal ob du überwiegend im Backend mit Divi oder im Frontend mit dem visuellen Builder arbeitest.

Dies geschieht entweder durch das Nutzen des Handy-Icon neben einem Optionen-Feld oder durch das Nutzen der Option "Sichtbarkeit".

Beispiel 1: Anpassen eines oberen Abstandes bei einer Zeile über das Handy-Icon

Öffne dazu die Einstellungen der Zeile (oder einer Sektion) über das Zahnrad und gehe unter dem Reiter "Design" zur Option "Zwischenraum" > "Innenabstand (Padding)". Klicke rechts auf das Handy-Icon:

Dadurch erscheint für die Option "Innenabstand (Padding)" drei weitere Registerkarten: "Desktop", "Tablet" und "Smartphone":

So kannst du nun für die Desktop, Tablet oder Handy-Ansicht ganz individuelle Werte eintragen. 

Je nach Sektions-Art, Zeile oder Modul können unterschiedliche Optionen für die mobile Darstellung optimiert werden. Bei einem Modul findest du bspw. das Handy-Icon bei folgenden Optionen:

• Option "Textgröße" = Schriftgröße
• Option "Text Zeichenabstand" = Abstand zwischen den einzelnen Buchstaben
• Option "Zeilenhöhe"
• Option "Sizing" (Größe) > "Width" (Breite) = Breite eines Moduls (besonders hilfreich bei einem Bild-Modul)
• Option "Spacing" (Abstand) > "Begrenzung" und "Abstand" = Abstände eines Moduls nach außen (Begrenzung) oder nach innen (Abstand)

Überall dort, wo neben einer Option ein Handy-Icon auftaucht, kannst du mobil-spezifische Designanpassungen vornehmen. Wie du erkennen kannst, betrifft es also eher die Größen- und Breitenangaben von Elementen, aber nicht das Design wie eine Hintergrundfarbe oder die Positionierung eines Hintergrundbildes innerhalb einer Sektion o.ä. 

Wenn du das beeinflussen möchtest, ist es besser, mit der Option "Sichtbarkeit" zu arbeiten. Diese findest du in den Einstellungen einer jeden Sektion, Zeile oder Modul unter dem Reiter "Advanced" (= Fortgeschritten) – siehe dazu Beispiel 3 aus dieser Anleitung.

Beispiel 2: Bild innerhalb eines Bild-Moduls austauschen

Eine wirklich tolle Funktion ist, innerhalb eines Bild-Moduls das Bild für Tablet oder Handy austauschen zu können. Dazu öffnest du die Einstellungen des Moduls über das Zahnrad-Icon und klickst bei der Option "Bild" auf das Handy-Icon (erscheint, sobald du mit der Maus darüber fährst):

 Dadurch erscheinen drei neue Registerkarten Desktop, Tablet und Telefon. Über diese kannst du nun für Tablet und Telefon ein anderes Bild im Modul anzeigen:

HINWEIS: Auch bei einer Sektion kannst du bei der Hintergrund-Option diese Funktion über das Handy-Icon aktivieren.

Beispiel 3: Eine andere Sektion auf der Handy-Ansicht einblenden über die Option "Sichtbarkeit"

Du hast auf der Startseite als Header eine Sektion mit einem Hintergrundbild von dir und einem Textmodul:

In der Desktop- und Tablet-Ansicht sieht alles gut aus, aber in der Smartphone-Ansicht läuft der Text mitten durch das Bild. Der Text ist schlecht lesbar und das Ganze sieht auch nicht so schön aus:

Folgendes kannst du tun:

Bei den Sektionseinstellungen setzt du unter "Advanced" > "Sichtbarkeit" den Haken bei "Telefon". Das bewirkt, dass diese Sektion ab einer gewissen Browserbreite (folglich bei Smartphone-Größen) die Sektion nicht mehr angezeigt wird:

Danach duplizierst du die Sektion, damit sie direkt darunter nochmals vorhanden ist: 

Nun optimierst du diese nur fürs Handy, indem du z. B. das Hintergrundbild raus nimmst und lieber eine schwarze Schrift auf weißem Hintergrund einstellst. Also so, dass es für Smartphone Nutzer ohne viel Schnick Schnack wirklich gut lesbar ist. Optional kannst du auch unterhalb des Text-Moduls ein Bild-Modul hinzufügen und dein Bild darin darstellen:

Dann klickst du da auch wieder in die Sektions-Einstellungen und setzt unter "Advanced" > "Sichtbarkeit" dieses Mal die Häkchen bei "Tablet" und "Desktop". Dadurch wird diese Sektion bei bei einer gewissen Browserbreite (folglich Tablet und Desktop) nicht mehr angezeigt:

 Je nach Einstellung der Sichtbarkeit wird die entsprechende Sektion dann leicht transparent dargestellt.

Somit hast du also zwei Sektionen. Die eine wird nur für Desktop und Tablets angezeigt und die andere ist dafür für die Handy-Ansicht optimiert:

TIPP: Mobile Ansichten direkt im visuellen Builder von Divi

Wenn du im visuellen Builder unten die Divi Optionen öffnest, findest du links drei Symbole, über welche du jeweils die Ansicht der Seite in der Desktop-, Tablet- oder Handy-Ansicht anschauen kannst. 

Aber Vorsicht! Mobile Design-Anpassungen sollten ausschließlich über die beiden oben beschriebenen Beispiele umgesetzt werden und nicht im visuellen Builder in der Divi Desktop-, Tablet- oder Handy-Ansicht. Diese Funktion sollte rein zur Design-Kontrolle genutzt werden!