Spalten-Reihenfolge in der mobilen Ansicht von Divi anpassen
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
- Öffne den Visual Builder in Divi.
- Wähle die Zeile aus, in der Bild und Text enthalten sind.
- Gehe zu den Zeileneinstellungen → Erweitert → Benutzerdefiniertes CSS → Hauptelement und trage Folgendes ein:
display: flex;
flex-wrap: wrap;
Schritt 2: Reihenfolge der Spalten festlegen
- Öffne die Spalteneinstellungen der Spalte, die ganz oben angezeigt werden soll.
- Gehe zu Erweitert → Benutzerdefiniertes CSS → Hauptelement und trage ein:
order: 1;
- 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
Jetzt beraten
Nutzen Sie jetzt die Möglichkeit einer telefonischen Erstberatung – schnell, unverbindlich und kompetent!
Bewerbungs-formulare
Benötigen Sie ein Bewerbungsformular für Ihre Webseite? Ich erstelle benutzerfreundliche und professionelle Formulare, die perfekt auf Ihre Anforderungen abgestimmt sind.
What’s Happening i am new to this, I stumbled upon this I’ve found It positively useful and it has aided me out loads.
I hope to contribute & assist other users like
its helped me. Great job.
Hello, thank you very much for your comment and for letting me know that the post was helpful to you. I am not publishing many blog posts on this website anymore because I am currently building a completely new website that will be dedicated entirely to blogging. For privacy reasons I had to edit your comment and remove your website link since it does not comply with German data protection regulations. I did take a look at your website and noticed that although you provide local fonts, the Google fonts are still being loaded from external servers. If you need any support with this, just let me know.