Divi: Reihenfolge von Elementen in der Responsive-Ansicht ändern

von | Divi

Videoanleitung:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Falsche Responsive-Reihenfolge von Elementen

Für eine abwechslungsreichere Gestaltung werden Elemente auf dem Desktop oftmals in abwechselnder Reihenfolge platziert. Zum Beispiel Bild links – Text rechts und in der nächsten Zeile dann Bild rechts – Text links.

Auf dem Smartphone, wo die Elemente allerdings nicht alle in einer Zeile dargestellt werden können, rutschen diese in Divi teilweise von allein in die nächste Zeile. So entsteht ein unschönes Bild. Denn die abwechselnde Reihenfolge auf dem Desktop führt auf Smartphone und Tablet dazu, dass z.B. jeweils zwei Bilder untereinander und dann zwei Texte untereinander dargestellt werden. Also Bild – Text – Text – Bild.

Das Problem mit der falschen Reihenfolge der Elemente in der Responsive Ansicht kann aber ganz einfach behoben werden. Dafür stelle ich Dir zwei Varianten vor, die beide gleichermaßen funktionieren. Vorne weg: Die smartere Variante ist meiner Meinung nach die zweite, bei der ich einen einfachen CSS-Code nutze.

Variante 1: Sichtbare und unsichtbare Elemente (kein CSS notwendig)

1. Zeile duplizieren

Dupliziere die Zeile, die Du für die mobile Ansicht anpassen möchtest

2. Sichtbarkeit nur auf Desktop

Gehe in die Einstellungen der ersten Zeile unter Erweitert/Sichtbarkeit und deaktiviere Smartphone und Tablet (Das Anklicken des Kästchens bedeutet, dass das Element auf dem entsprechenden Gerät nicht angezeigt wird). Speichere Deine Einstellungen.

3. Sichtbarkeit nur auf mobilen Geräten

Gehe dann in das Duplikat der Zeile und tausche die Reihenfolge der Spalten innerhalb der Zeile. Gehe dann unter Erweitert/Sichtbarkeit und deaktiviere den Desktop. Speichere Deine Auswahl.

Diese Variante funktioniert zwar, hinterlässt in Deinem Divi Builder allerdings immer ein Duplikat eines Elements, was natürlich zu einer leichten Unübersichtlichkeit führt. Also habe ich hier eine weitere Variante für Dich, mit der Du das Problem lösen kannst. Und zwar mit einem einfachen CSS-Code.

Variante 2: CSS-Code zum Ändern der Reihenfolge von Elementen

1. CSS zur Zeile hinzufügen

Gehe in die Einstellungen der Zeile, die Du anpassen möchtest unter Erweitert/Benutzerdefinierte CSS. Wähle unter Hauptelement das Smartphone und füge den folgenden CSS-Code ein und speichere Deine Anpassungen:

display: flex;
flex-wrap: wrap;

2. CSS zu den Spalten hinzufügen

Gehe erneut in die Einstellungen der Zeile. Wähle dieses Mal die erste Spalte aus (wo im Beispiel gerade der Text enthalten ist), gehe unter Erweitert/Benutzerdefinierte CSS, wähle unter Hauptelement das Smartphone und füge den folgenden Code ein:

order: 2;

Damit wird bestimmt, dass diese Spalte auf dem Smartphone in der Reihenfolge auf Platz 2 steht. Das selbe machst Du nun mit der zweiten Spalte, nur dass Du dort den folgenden Code einfügst:

order: 1;

Fertig!

Nach dem speichern kannst Du das fertige Ergebnis in der Vorschau ansehen (Wird nicht innerhalb des Divi-Builders angezeigt).

Ein gut aussehender junger Mann auf einem schwarz-weißen Foto

Dennis Petschik

Autor
Nach fast 10 Jahren in der Branche möchte ich mein Wissen zum Thema Marketing & Webdesign auf diesem Blog teilen. Ich wünsche Dir viel Spaß beim Lesen meiner Beiträge und noch mehr Spaß bei der Umsetzung!

Bild des blauen Buchcovers in 3D

Kostenfreies E-Book!

Generiert Deine Website regelmäßig neue Kundenanfragen für Dich?
Falls nicht, steht hier Deine kostenfreie Praxisanleitung zum Download bereit!
In meinem E-Book zeige ich Dir, wie Du durch reine Psychologie mehr Kundenanfragen erhältst!