BigBear Logo – modernes Webdesign Branding



Über Mich

Hier kannst du mehr über mich erfahren und dir einen ersten Eindruck machen.

Portfolio

Hier findest du ausgewählte Projekte für einen schnellen und klaren Überblick.

Blog

In meinem Blog kannst du dich umfassend informieren.

Leistungen

Hier findest du meine Service leistungen für einen schnellen und klaren Überblick.

Web-Preise

Webseiten zur Miete, Datenschutzpaket auch einzeln buchbar und rechtssicher.

Kontakt

Jetzt Direkt mit mir in Kontakt treten und mit Deiner Website durchstarten

Spalten-Reihenfolge in der mobilen Ansicht von Divi anpassen

Anleitung zur Anpassung der Spalten-Reihenfolge in der mobilen Ansicht des Divi-Theme-Editors

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 ZeileneinstellungenErweitertBenutzerdefiniertes CSSHauptelement 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 ErweitertBenutzerdefiniertes CSSHauptelement und trage ein:
order: 1;
  1. Für die Spalte, die als zweites angezeigt werden soll, gehe ebenfalls zu den SpalteneinstellungenErweitertBenutzerdefiniertes CSSHauptelement 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!

Termin buchen

Bewerbungs-formulare

Benötigen Sie ein Bewerbungsformular für Ihre Webseite? Ich erstelle benutzerfreundliche und professionelle Formulare, die perfekt auf Ihre Anforderungen abgestimmt sind.

Kontaktiere mich

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress Cookie Plugin von Real Cookie Banner