So passen Sie die Stapelreihenfolge von Divi auf Mobilgeräten an

Divi basiert auf einem reaktionsschnellen Raster, das Ihre Spalten auf eine bestimmte Weise stapelt (oder anordnet), wenn Sie von Desktop- zu mobilen Displays wechseln. Die Spalten werden von links nach rechts gestapelt. Wenn Sie also drei Spalten auf dem Desktop haben, wird die linke (erste) Spalte zuerst auf dem Handy gestapelt, gefolgt von den Spalten 2 und 3 darunter. Dies ist sinnvoll und wird in der Regel für die meisten Websites benötigt. Aber manchmal verursachen bestimmte Designs, die auf dem Desktop gut aussehen, eine inkonsistente Reihenfolge von Inhalten auf Mobilgeräten. In diesem Fall müssen Sie die Reihenfolge der Spalten ändern, um eine konsistentere Benutzererfahrung auf Mobilgeräten zu erzielen.

Heute zeige ich Ihnen zwei Möglichkeiten, wie Sie die Stapelreihenfolge von Divi auf mobilen Geräten ändern können. Die erste beinhaltet das Erstellen einer alternativen Version des Inhalts speziell für mobile Geräte mithilfe der Funktion „Disable On“ in Divi. Die zweite Möglichkeit besteht darin, benutzerdefiniertes CSS zu verwenden, um Klassen zu Ihren Spalten hinzuzufügen, die ihre Reihenfolge auf Mobilgeräten festlegen.

Lass uns anfangen!

Inhalte erstellen

Abonnieren Sie unseren Youtube-Kanal

Klicken Sie auf einer neuen Seite auf , um den Divi Builder zu verwenden und den Visual Builder zu starten.

Wählen Sie im Visual Builder ein 2-Spalten-Layout (1/2 – 1/2).

Fügen Sie der ersten Spalte innerhalb Ihrer Zeile ein Bildmodul hinzu.

Laden Sie unter Bildeinstellungen ein Bild hoch und fügen Sie es ein. (Ich verwende ein 770 x 433 Bild von unsplash.com)

Fügen Sie als Nächstes einen Textbaustein in die zweite Spalte Ihrer Zeile ein.

Fügen Sie unter den allgemeinen Texteinstellungen Ihren Text zum Textfeld Inhalt hinzu.

Speichern

Jetzt sollten Sie eine Zeile mit 2 Spalten haben, wobei die erste Zeile ein Bild enthält und die zweite Zeile Text enthält. Ich habe die Spalten im folgenden Bild für Sie beschriftet.

Duplizieren Sie im Visual Builder die Zeile mit denselben 2 Spalten, indem Sie auf das Symbol für die duplizierte Zeile klicken.

Ziehen Sie in Ihrer zweiten Zeile (der gerade erstellten doppelten Zeile) das Bildmodul in die zweite Spalte und das Textmodul in die erste Spalte.

Das Abwechseln der Bild- und Textpositionen in jeder Zeile kann eine kreative und effektive Möglichkeit sein, Ihren Inhalt auf Ihrer Webseite anzuzeigen. Aber es verursacht auch ein Problem, wenn die Säulen auf dem Handy gestapelt werden. Wenn Sie die Breite Ihres Browsers auf weniger als 980px Breite (der Haltepunkt für Mobilgeräte) verkleinern, wird der Inhalt jeder Zeile von links nach rechts gestapelt. Dies bedeutet, dass die erste Spalte Ihrer Zeile über der zweiten Spalte gestapelt wird. Dies kann zu Problemen führen, wenn Sie den Inhaltsfluss auf Mobilgeräten konsistent halten möchten. Mit dem aktuellen Layout wird der Inhaltsfluss auf Mobilgeräten in der folgenden Reihenfolge gestapelt:

Spalte 1 (Bild)
Spalte 2 (Text)
Spalte 1 (Text)
Spalte 2 (Bild)

Ein besseres Layout für Mobilgeräte besteht darin, die Stapelreihenfolge der Spalten in einer Ihrer Zeilen zu ändern, damit Sie ein konsistenteres Inhaltslayout erhalten.

Zwei Möglichkeiten zum Ändern der Spaltenstapelreihenfolge auf Mobilgeräten

1: Ändern der Spaltenstapelreihenfolge auf Mobilgeräten mit der Funktion „Deaktivieren bei“ von Divi

Mit der Funktion „Disable On“ von Divi können Sie verschiedene Versionen Ihrer Inhalte auf Telefon-, Tablet- und Desktop-Displays erstellen. Mit wenigen Klicks können Sie Inhaltsabschnitte auf jedem Gerät ein- oder ausblenden.

In diesem Beispiel müssen wir die zweite Zeile auf dem Desktop sichtbar lassen, aber auf mobilen Geräten ausblenden. Dann müssen wir eine andere Version der zweiten Zeile erstellen, damit sie nur auf dem Handy sichtbar ist.

Duplizieren Sie mit dem Visual Builder die zweite Zeile.

Bevor wir die neue duplizierte Zeile bearbeiten, öffnen Sie die Zeileneinstellungen in der zweiten Zeile.

Aktivieren Sie unter Allgemeine Zeileneinstellungen, um die Zeile auf Telefon und Tablet zu deaktivieren.

Speichern

Jetzt wird die zweite Zeile auf mobilen Geräten ausgeblendet. Als Nächstes müssen wir das Layout unserer neuen dritten Zeile so ändern, wie wir die Reihenfolge der Spalten auf dem Handy haben möchten.

Ziehen Sie den Inhalt des Textmoduls in die zweite Spalte und ziehen Sie das Bildmodul in die erste Spalte.

Gehen Sie nun in die allgemeinen Zeileneinstellungen für die dritte Zeile und aktivieren Sie das Kontrollkästchen, um die Zeile auf dem Desktop zu deaktivieren.

Speichern

Überprüfen Sie nun Ihre Ergebnisse. Sie werden feststellen, dass die dritte Spalte auf dem Desktop deaktiviert und dann auf mobilen Geräten aktiviert ist. Dadurch wird ein konsistenteres Layout auf Mobilgeräten erstellt.

Das ist es!

Mit dieser Möglichkeit, bestimmte Inhaltsabschnitte zu deaktivieren und zu aktivieren, können Sie jede Art von Layout problemlos ändern/neu anordnen.

Wenn Sie Ihre Seite über den Visual Builder anzeigen, blendet Divi außerdem bequem den auf der Seite ausgeblendeten Inhalt aus, damit Sie erkennen können, welcher Inhalt deaktiviert ist.

Die Verwendung der Funktion "Deaktiviert ein" zum Ausblenden von Spalten und Zeilen ist eine sichere Sache. Wenn Sie dies jedoch zu oft tun und/oder viel Inhalt haben, kann das Bearbeiten der Seite verwirrend werden. Und wenn Sie Inhaltsaktualisierungen vornehmen, müssen Sie den Inhalt in allen Versionen aktualisieren, nicht nur in einer.

Wenn das Deaktivieren und Aktivieren von Inhalten nicht die richtige Lösung für Sie ist, gibt es eine andere Möglichkeit, Ihre Inhalte mithilfe von CSS-Klassen auf Mobilgeräten zu bestellen.

2. Ändern der Spaltenstapelreihenfolge auf Mobilgeräten mithilfe von CSS-Klassen

Dazu verwenden wir benutzerdefiniertes CSS, damit wir unseren Spalten eine Klasse hinzufügen können, die sie auf der mobilen Anzeige nach Ihren Wünschen anordnet.

Gehen Sie dann von Ihrem WordPress-Dashboard zu Divi → Theme Customizer → Additional CSS und fügen Sie das folgende CSS hinzu:

@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}

/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}

.second-on-mobile {
-webkit-order: 2;
order: 2;
}

.third-on-mobile {
-webkit-order: 3;
order: 3;
}

.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}

}

Speichern und veröffentlichen

Wenn Sie sich das soeben hinzugefügte CSS ansehen, stellen Sie fest, dass das gesamte CSS in einer Medienabfrage enthalten ist, die nur das CSS für mobile Geräte verwendet (auf Bildschirmgrößen von weniger als 980 Pixeln).
Sie werden auch die erste Klasse namens "benutzerdefinierte Zeile" bemerken. Diese Klasse wird der Zeile hinzugefügt, in der Sie die Stapelreihenfolge der Spalten auf Mobilgeräten ändern möchten.

Die nächsten 4 Klassen („First-on-Mobile“, „Second-on-Mobile“, „Third-on-Mobile“ und „Vierte-on-Mobile“) haben eine Ordnungseigenschaft und einen zugeordneten Zahlenwert. Diese Klassen werden den Spalten in Ihrer "benutzerdefinierten" Zeile hinzugefügt, um die Reihenfolge festzulegen, in der sie auf dem Handy angezeigt werden sollen.

Nachdem wir nun unser CSS eingerichtet haben, wenden wir diese Klassen auf unsere Seite an.

Stellen Sie sicher, dass Sie Ihre beiden Zeilen erstellt haben, indem Sie den Anweisungen folgen. Stellen Sie außerdem sicher, dass keine der Zeilen auf Mobilgeräten oder Desktops deaktiviert ist.

In diesem Beispiel ändern wir die Reihenfolge der Spalten in der zweiten Zeile auf Mobilgeräten. Hier ist eine Illustration dessen, was wir erreichen wollen.

Öffnen Sie mit dem Visual Builder die Zeileneinstellungen für die zweite Zeile.

Fügen Sie in Zeileneinstellung auf der Registerkarte CSS Folgendes hinzu:

Fügen Sie "custom_row" zum Textfeld CSS-Klasse hinzu. (das wickelt Ihre Reihe in eine Flexbox)

Fügen Sie "Second-on-Mobile" zum Textfeld Spalte 1 CSS Class hinzu (Dadurch wird die Reihenfolge von Spalte 1 geändert, sodass sie auf Mobilgeräten als zweite angezeigt wird. Der Klassenname sollte dies leicht zu merken machen.)

Fügen Sie "first-on-mobile" zum Textfeld "CSS-Klasse" von Spalte 2 hinzu (Dies ändert die Reihenfolge von Spalte 2, sodass sie zuerst auf dem Handy angezeigt wird.)

Hinweis: Es ist wichtig, jeder Spalte eine Sortierklasse hinzuzufügen.

Schauen wir uns nun die Ergebnisse an. Beachten Sie, dass auf Mobilgeräten die Spalten der zweiten Zeile so geändert wurden, dass sie dieselben wie in der ersten Zeile anzeigen. Dadurch entsteht ein konsistenter Fluss von Bild → Text → Bild → Text.

Ändern der Spaltenstapelreihenfolge eines beliebigen Layouts mithilfe von CSS-Klassen

Sie können die Reihenfolge jedes Spaltenlayouts mit derselben Methode ändern. Denken Sie daran, dass Sie mit dem benutzerdefinierten CSS erste, zweite, dritte und vierte Platzierungswerte hinzufügen können. Wenn Sie beispielsweise die Reihenfolge eines Viertel-Halb-Viertel-Layouts wie folgt ändern möchten:

Befolgen Sie einfach die gleichen Schritte wie zuvor. Fügen Sie in Ihren Zeileneinstellungen unter dem CSS-Tab die Klasse „custom_row“ zur Zeile hinzu und fügen Sie Ihre Bestellklasse hinzu („first-on-mobile“, „second-on-mobile“, „dritter-on-mobile“). zu jeder Ihrer Spalten. Denken Sie daran, jeder Ihrer Spalten eine Klasse hinzuzufügen, damit sie alle einen bestimmten Bestellwert haben.

Das ist es!

Bevorzugte Methode

Wenn Sie unterschiedliche Layouts für jedes Gerät erstellen und/oder planen, den Inhalt zusätzlich zur Spaltenreihenfolge auf Mobilgeräten zu ändern, müssen Sie die Funktion „Deaktiviert ein“ von Divi verwenden, um Ihre Layouts anzupassen.

Wenn Sie auf Mobilgeräten nur Spalten neu anordnen müssen, ohne den Inhalt zu ändern, und Sie nicht mit mehreren deaktivierten/aktivierten Inhaltsversionen jonglieren möchten, können Sie von der CSS-Methode profitieren.

SEO-Überlegungen

Im Laufe der Jahre wurde viel darüber diskutiert, wie Suchmaschinen mit Inhalten umgehen, die auf einer Seite deaktiviert oder ausgeblendet sind. Auch wenn Sie Inhalte für bestimmte Geräte ausblenden können, können die Inhalte dennoch von Google gecrawlt werden. Dies könnte als doppelter Inhalt angesehen werden und könnte darauf hindeuten, dass die Verwendung der Funktion „Deaktivieren ein“ sich negativ auf Ihr Seitenranking auswirken würde. Suchmaschinen wie Google können jedoch ziemlich gut erkennen, ob Inhalte aus Gründen des responsiven Layouts ausgeblendet werden. Kurz gesagt, Google weiß, ob Sie Inhalte für verschiedene Geräte duplizieren und wird Sie dafür nicht bestrafen. Solange Sie Inhalte nicht aus böswilligen Gründen verstecken, ist die Verwendung sicher.

Abschließende Gedanken

Die Möglichkeit, die Stapelreihenfolge von Spalten zu ändern, ist äußerst nützlich und manchmal notwendig. Wir alle brauchen die Möglichkeit, ein einzigartiges Design-Layout für die Desktop-Anzeige zu erstellen, ohne die Konsistenz des Inhaltsflusses auf Mobilgeräten zu beeinträchtigen. Mit der „Disable On“-Funktion von Divi können Sie für jedes Gerät völlig unterschiedliche Layouts erstellen. Außerdem können Sie mit ein paar Zeilen benutzerdefinierten CSS ganz einfach Klassen zu Ihren Zeilen und Spalten hinzufügen, um sie für mobile Geräte nach Ihren Wünschen anzuordnen.

Ich hoffe, dieser Beitrag wird Ihnen helfen, mehr Kontrolle über Ihre mobilen Displays zu erlangen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!