...

Divi Reihenfolge mobil ändern – 1min Tutorial inkl. Video

Divi Reihenfolge mobil ändern
Lukas Fischer

Geschrieben von Lukas Fischer

c

Manchmal kann es vorkommen, dass man die Reihenfolge einer Divi Reihe für die mobile Ansicht ändern bzw. umkehren möchte. Leider gibt es von Haus aus keine integrierte Funktion innerhalb von Divi dafür. Doch keine Sorge, es gibt eine Lösung!

Um in Divi die Reihenfolge einer Reihe für die mobile Ansicht zu verändern, benötigt man etwas zusätzliches CSS, welches in der Folge dafür sorgt, dass man die Reihenfolge in der mobilen Ansicht auf einfache Weise selbst bestimmen kann.

In diesem Artikel zeige ich dir, wie du dieses CSS-Schnipsel hinzufügst und somit die Reihenfolge deiner Divi Reihe mobil selbst bestimmen kannst.

Schau gerne auch ins YouTube Video, welches ich parallel zum Blog Artikel für dich aufgenommen habe.

Hinweis: Mit Aktivierung des Videos wird YouTube im Erweiterten Datenschutzmodus aktiviert. Mit Aktivierung stimmst du den Datenschutzbestimmungen von YouTube zu.

Wann macht die Anpassung der Reihenfolge für die mobile Ansicht Sinn?

Hin und wieder kann es vorkommen, dass man ein Design erstellt hat, welches zwar am Computer super aussieht, am Handy hingegen aber eher unschön wirkt.

Ein gutes Beispiel dafür ist die folgende Situation:

Beispiel: Divi Reihenfolge für mobile Ansicht anpassen
Desktop Ansicht der Divi Reihen

Du hast eine Reihe, bei welcher links ein Text und rechts ein Bild eingefügt ist. Es folgt eine Reihe, bei welcher das Bild am Desktop links und der Text rechts ist.

Das Problem mit diesem Design ist allerdings, die mobile Ansicht, bei welcher die zwei Bilder dann unmittelbar hintereinander angezeigt werden:

Das Problem: Zwei Bilder werden direkt hintereinander angezeigt
Mobile Ansicht: Divi Reihen untereinander

Diese Ansicht am Handy ist unschön. Besser wäre Bild, Text, Bild, Text.

Reihenfolge von Divi Reihen mobil ändern

Um die Reihenfolge bzw. die Anordnung einer Divi Reihe für die mobile Ansicht zu verändern, benötigst du etwas CSS-Code.

Navigiere als erstes zu der Reihe, bei welcher du die Reihenfolge mobil anpassen möchtest.

In Beispiel dieses Artikels ist dies die zweite Reihe, bei welcher das Bild mobil erst nach dem Text erscheinen soll.

Öffne dann durch Klick auf das Zahnrad Symbol der Reihe (grüner Kasten) die Zeileneinstellungen.

Einstellungen der Divi Reihe öffnen
Einstellungen der Divi Reihe öffnen

Danach navigierst du in den Erweitert-Tab und klickst auf Benutzerdefinierte CSS.

Divi Reihenfolge mobil ändern
Divi Reihenfolge mobil ändern

Danach klickst du auf Modulelemente und navigierst dann zum Hauptelement. Klicke hier zunächst auf das Handy Symbol und wähle dann erneut das Handy aus, damit dieser Code nur in der mobilen Ansicht ausgeführt wird (und nicht etwa überall und somit auch am Desktop).

Reihenfolge einer Divi Reihe mit CSS verändern
Reihenfolge einer Divi Reihe mit CSS verändern

Im Code-Feld für das Handy füge diesen CSS-Code ein:

display: flex;
flex-wrap: wrap;

Wenn du dies erledigt hast, fehlt nur noch ein Schritt: Die Neuanordnung der Reihen.

Divi Spalten Reihenfolge mobil ändern

Nachdem der Code deiner Reihe hinzugefügt ist, müssen wir jetzt nur noch den einzelnen Spalten innerhalb der Reihe mitteilen, an welcher Stelle sie mobil angezeigt werden sollen.

Wir öffnen dazu erneut die Einstellungen der Reihe durch Klick auf das Zahnrad-Symbol (s. Screenshot oben) und finden dann in diesem Beispiel unsere zwei Spalten vor:

Spalten Einstellungen in Divi öffnen
Spalten Einstellungen in Divi öffnen

Unser Ziel: Die Reihenfolge dieser beiden Spalten mobil tauschen (Spalte 1 wird als zweites angezeigt; Spalte 2 wird als erstes angezeigt).

Auch dieser Prozess ist mit CSS super einfach. Klicke dazu zunächst auf das Zahnrad-Symbol von Spalte 1 und navigiere dort ebenfalls in den Erweitert-Tab, um beim Abschnitt Benutzerdefinierte CSS etwas CSS-Code hinzuzufügen.

Auch hier klickst du auf Modulelemente und navigierst anschließend zum Hauptelement. Betätige auch hier das Handy-Symbol und füge den folgenden Code nur für das Handy ein.

Divi Spaltenreihenfolge mobil selbst bestimmen
Divi Spaltenreihenfolge mobil selbst bestimmen

Der Code zum Kopieren lautet:

order:2;

Der Code bewirkt also nicht anderes, als dass er den Inhalt der ersten Spalte für die mobile Ansicht an die zweite Stelle setzt.

Den gleichen Vorgang kannst du natürlich der Vollständigkeit halber auch bei der anderen Spalte wiederholen und dort anstatt der 2 eine 1 eintragen. Also für Spalte 2 wäre der Code dann:

order:1;

Auf diese Weise kannst du natürlich auch die Reihenfolge von Reihen mit mehr als zwei Spalten verändern.

Mit * gekennzeichnete Links sind Empfehlungslinks. Wenn du über diesen Link einen Kauf tätigst, erhalte ich ein bisschen Geld für meinen nächsten Kaffee ☕

Für dich verändert sich der Preis dadurch natürlich nicht und du unterstützt damit kostenlos meinen Blog/YouTube Kanal. Selbstverständlich empfehle ich nur Produkte, die ich selbst nutze und getestet habe.

Lukas Fischer

Hey, ich bin Lukas Fischer und auf meinem Blog schreibe ich über WordPress und das Divi Theme! Vielen Dank, dass du da bist!

21. Dezember 2023

YouTube Kanal

Auf meinem YouTube Kanal findest du zu jedem meiner Artikel das entsprechende Video sowie zusätzliche Inhalte.

0 Kommentare

Einen Kommentar abschicken

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