So halten Sie Columns zusammen auf Mobilgeräten in Divi

von | Feb 22, 2021 | Website Infrastructure & Optimierung | 0 Kommentare

Der Divi Builder bietet Nutzern ein komplettes Design-Framework, das einfach zu bedienen ist. Obwohl manchmal Optimierungsfehler zwischen Desktop- und Mobilversionen von Seiten auf der Website bestehen. Wir haben kürzlich festgestellt, dass es schwierig ist, Columns auf mobilen Geräten zusammen zu halten. Stattdessen erscheinen sie gestapelt.

Divi mobile Ansicht fehlerhaft

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

Divi Row-Einstellungen

Öffnen Sie die Zeileneinstellungen für die Zeile, in der sich Ihre „gestapelten“ Columns befinden.

Schritt 2: Hinzufügen des benutzerdefinierten CSS zur Zeile

Hinzufügen von benutzerdefiniertem CSS zu der 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.

Divi mobile Columns fixiertUnd 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

Vier Columns benutzerdefiniert hinzufügen CSS-Klasse

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.

Anpassen des Themes zusätzliche CSS

 

Wenn Sie sich in den Divi >-Theme-Optionen befinden, scrollen Sie nach unten zum Abschnitt „Custom CSS“.

Benutzerdefiniertes CSS in Divi

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:

4 Columns in Divi nebeneinander auf dem Handy

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> 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 mich in den Kommentaren wissen.

Sign Up For Our Newsletter

0 Kommentare

Einen Kommentar abschicken

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