Anleitung & Video: Reihenfolge von Bild und Text in der mobilen Ansicht mit Divi anpassen

Du arbeitest mit dem Divi-Theme und hast festgestellt, dass die Reihenfolge von Bild und Text in der mobilen Ansicht nicht ideal ist? Gerade bei responsiven Designs wird die Darstellung auf Smartphones manchmal nicht so ausgegeben, wie du es dir wünschst. In diesem Beitrag zeige ich dir, wie du mit einer einfachen Methode die Reihenfolge der Spalten ändern kannst – und das ganz ohne komplizierte Programmierung! Damit sieht dein Layout auf Smartphones perfekt aus.

Warum ist die Reihenfolge der Spalten wichtig?

Auf dem Desktop werden Bild und Text oft nebeneinander dargestellt. In der mobilen Ansicht stapeln sich die Inhalte jedoch automatisch untereinander, und Divi zeigt sie meist von links nach rechts. Das bedeutet, dass der Inhalt, der auf dem Desktop links ist, zuerst erscheint. Oft passt das nicht zur gewünschten Reihenfolge. Ein Beispiel: Ein Bild sollte auf dem Desktop rechts stehen, aber auf dem Smartphone über dem Text angezeigt werden.

Lösung: Reihenfolge von Spalten gezielt anpassen

Im folgenden Video erkläre ich dir Schritt für Schritt, wie du die Reihenfolge von Bild und Text in der mobilen Ansicht änderst. Dabei verwenden wir einfache Divi-Einstellungen und etwas CSS – und das Ergebnis kann sich sehen lassen!

Anleitung: Reihenfolge von Spalten auf Smartphones ändern

Schritt 1: Zeileneinstellungen anpassen

1. Öffne den Visual Builder in Divi.
2. Wähle die Zeile aus, in der Bild und Text enthalten sind.
3. Gehe zu den Zeileneinstellungen → Erweitert → Benutzerdefiniertes CSS → Hauptelement und trage Folgendes ein:

display: flex;
flex-wrap: wrap;

Schritt 2: Reihenfolge der Spalten festlegen

1. Öffne die Spalteneinstellungen der Spalte, die ganz oben angezeigt werden soll.
2. Gehe zu Erweitert → Benutzerdefiniertes CSS → Hauptelement und trage ein:

order: 1;

3. Für die Spalte, die als zweites angezeigt werden soll, gehe ebenfalls zu den Spalteneinstellungen → Erweitert → Benutzerdefiniertes CSS → Hauptelement und trage ein:

order: 2;

Schritt 3: Ergebnis überprüfen

Speichere deine Änderungen und überprüfe die mobile Ansicht. Jetzt sollte die Reihenfolge der Spalten so angepasst sein, wie du es dir wünschst!

Video-Anleitung:

Damit du die Anpassung noch einfacher nachvollziehen kannst, habe ich ein kurzes Video für dich erstellt. Schau es dir hier an und folge den Schritten: **Video-Link einfügen**

Fazit:

Mit den erweiterten Einstellungen und ein paar CSS-Befehlen kannst du die Reihenfolge von Bild und Text in der mobilen Ansicht problemlos anpassen. So sieht dein Layout auf allen Geräten genau so aus, wie du es geplant hast!

Hast du Fragen oder benötigst du weitere Tipps zu Divi? Hinterlasse gerne einen Kommentar oder kontaktiere mich direkt! Viel Spaß beim Optimieren deines Designs! 🌟

Bildnachweis: canva.com