Der Divi Builder bietet Nutzern ein komplettes Design-Framework, das einfach zu bedienen ist. Dennoch treten manchmal Optimierungsfehler zwischen Desktop- und Mobilversionen von Seiten auf dem jeweiligen Frontend auf. Wir haben zum Beispiel kürzlich festgestellt, dass es schwierig ist, Columns auf mobilen Geräten zusammen zu halten, also in einer Zeile anzeigen zu lassen. Stattdessen erscheinen sie nämlich meist gestapelt.
So halten Sie Columns auf Mobilgeräten in Divi zusammen
Um Columns in Divi auf Mobilgeräten zusammen zu halten, müssen Sie lediglich eine benutzerdefinierte Zeile CSS-Code zu Ihren Zeileneinstellungen hinzufügen.
Wichtig: Dieser Code funktioniert nur für 3 oder weniger Elemente. Wenn Sie versuchen, vier oder mehr Columns zusammen auf dem Handy zu haben, springen Sie jetzt zu diesem Abschnitt.
Hier ist der Code: display: flex;
Schritt 1: Öffnen Sie die Zeileneinstellungen
Öffnen Sie die Zeileneinstellungen für die Zeile, in der sich Ihre “gestapelten” Columns befinden.
Schritt 2: Hinzufügen des benutzerdefinierten CSS zur Zeile
Klicken Sie in den Zeileneinstellungen auf die Registerkarte “Erweitert”. Klicken Sie auf das Dropdown-Menü “Custom CSS”, um es zu öffnen. Fügen Sie den display: flex;code> Code in den Abschnitt “Hauptelement” Ihrer benutzerdefinierten CSS ein.
Wenn Sie auf das grüne Häkchen klicken, um Ihre Änderungen zu speichern, sehen Sie die aktualisierte mobile Ansicht sofort, wenn Sie am Front-End arbeiten.
Und das war’s! Dieses Stück CSS-Code ist der mit Abstand einfachste Weg, um 2-3 Elemente auf Mobil- und Tablet-Geräten nebeneinander erscheinen zu lassen.
Wie man 4 oder mehr Columns nebeneinander auf Mobilgeräten in Divi behält
Gehen Sie zu Ihren Zeileneinstellungen der Zeile, die 4+ “gestapelte” Columns hat. Öffnen Sie auf der Registerkarte “Erweitert” die Dropdown-Registerkarte “CSS-ID & Klassen”.
Benennen Sie im Abschnitt “CSS-Klasse” Ihrer Zeileneinstellungen die Klasse mit beliebig vielen Columns. Zum Beispiel: four-columns
Gehen Sie als nächstes in die Divi >-Theme-Optionen. Sie können auch den Abschnitt “Anpassen” Ihres Themes verwenden, um das Front-End ebenfalls zu bearbeiten.
Wenn Sie sich in den Divi >-Theme-Optionen befinden, scrollen Sie nach unten zum Abschnitt “Custom CSS”.
Dies ist der CSS-Code für 4 Fenster:
@media only screen and (max-width: 980px) {
.four-columns .et_pb_column {
width: 25%!important;
}
}
Was macht dieser Code? Der @media only screen (max-width: 980px) diktiert, dass, wenn der Viewport kleiner als 980 Pixel ist, die 4 Spalten nebeneinander und nicht gestapelt angezeigt werden sollen. 980 Pixel ist die Dimension, die typischerweise der Grenzwert für Tablets ist.
Das korrekte Endergebnis sieht so aus:
Wie können Sie 5 Divi-Columns auf dem Handy nebeneinander halten?
Wenn Sie mehr als 4, 5 oder 6 Symbole/Bilder oder mehr haben, können Sie den gleichen Code wie oben wiederholt verwenden.
Denken Sie daran: Siemüssen den Bereich “Breite” in Prozent für jede neue Spalte, die Sie hinzufügen, ändern.
Zum Beispiel: 5 Columns
@media only screen and (max-width: 980px) {
.five-columns .et_pb_column {
width: 20%!important;
}
}
Sie müssen die Anzahl der Columns durch 100 dividieren. Also 6 Columns / 100 = 16,66%. Sie müssen dieses Muster für so viele Columns wie möglich befolgen, die Sie nebeneinander haben wollen. Vergessen Sie nicht, eine neue “CSS-Klasse” in Ihren erweiterten Zeileneinstellungen in Divi zu erstellen. Wenn es vorher vier Columns waren, können Sie es auf fünf Columns, sechs Columns usw. ändern. Stellen Sie sicher, dass Sie die fettgedruckten Abschnitte des obigen Codes auch in den benutzerdefinierten CSS in Ihren Theme-Optionen in Divi aktualisieren.
Zusammenfassung, wie man Columns auf Mobilgeräten in Divi nebeneinander hält
Wenn Sie 3 oder weniger Columns nebeneinander haben, ist der display: flex; Code im Abschnitt “Custom CSS” Ihrer Zeileneinstellungen der einfachste Weg, um das gewünschte Ergebnis zu erzielen. Darüber hinaus haben wir einen weiteren Divi-Tutorial-Blog, in dem es darum geht, wie man Schriftarten für mobile Überschriften anpasst.
Haben Sie Fragen zu diesem Tutorial? Lassen Sie es uns in den Kommentaren wissen.