Reihenfolge von Divi-Elementen in Responsive-Ansichten korrigieren

4. Januar 2023 | CSS-Stylesheet, Divi-Theme

Dieser Beitrag beinhaltet 786 Wörter. Geschätzte Lesezeit: ca. 4 Minuten.

Im Divi-Theme können Sie mehrere Elemente nebeneinander darstellen. Für die Responsive-Ansichten auf Tablets und Mobiltelefonen reiht Divi diese Elemente dann untereinander auf. Das ist meist gut so – hin und wieder passt das aber eben nicht. Die Reihenfolge lässt sich jedoch auf Mobilanzeigen mit einem kleinen Trick korrigieren.

Für eine abwechslungsreichere Gestaltung werden darzustellende Elemente häufig in abwechselnder Reihenfolge platziert. Zum Beispiel Bild links – Text rechts und in der nächsten Zeile dann Bild rechts – Text links.

Für eine solche Gestaltung eignet sich das Divi-Theme eigentlich vorzüglich, wie dieser Screenshot einer Anzeige auf dem Desktop-Monitor zeigt:

  1. Text – Bild
  2. Bild – Text
  3. Text – Bild

Auf Mobilgeräten reiht Divi dieselbe Struktur hingegen untereinander ein:

Also:

  1. Text
  2. Bild
  3. Bild
  4. Text

Bloss ergibt das wenig Sinn, wenn zwei Bilder aufeinander folgen. Ein Umbau tut not. Im Beispiel möchten wir die Reihenfolge

  1. Text
  2. Bild
  3. Text
  4. Bild.

Das gelingt mit ein paar Zeilen CSS-Code. Öffnen Sie die «Erweitert»-Einstellungen der Zeile, die Sie anpassen möchten (in unserem Beispiel also die zweite Zeile) und wählen Sie dort «Benutzerdefinierte CSS». Im Textfenster «Hauptelement» klicken Sie auf das Smartphone und fügen den folgenden CSS-Code ein:

display: flex;
flex-wrap: wrap;

Nun öffnen Sie den «Inhalt» der soeben bearbeiteten Zeile und wählen die erste Spalte aus wo im Beispiel der Text enthalten ist. Auch in dieser Spalte können sie «Erweitert» und dann «Benutzerdefinierte CSS». Erneut können Sie im Hauptelement das Smartphone auswählen und den folgenden Code einfügen:

order: 2;

Damit wird bestimmt, dass diese Spalte auf dem Smartphone in der Reihenfolge auf Platz 2 steht. Dasselbe können Sie nun mit der zweiten Spalte wiederholen, bloss wird dort nach genau gleichem Muster folgender Code eingefügt:

order: 1;

Das war’s. Das Resultat zeigt sich nun auf Dektop-Monitoren und Tablets unverändert – auf Smartphones hingegen so:

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This