{"id":331636,"date":"2021-02-22T03:48:21","date_gmt":"2021-02-22T03:48:21","guid":{"rendered":"https:\/\/www.ezoic.com\/so-halten-sie-columns-zusammen-auf-mobilgeraeten-in-divi\/"},"modified":"2024-04-16T11:36:50","modified_gmt":"2024-04-16T09:36:50","slug":"divi-columns-mobile-fix","status":"publish","type":"post","link":"https:\/\/wp.ezoic.com\/de-lang\/divi-columns-mobile-fix\/","title":{"rendered":"So halten Sie Columns auf Mobilger\u00e4ten in Divi zusammen"},"content":{"rendered":"\n

Der Divi Builder<\/a> 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\u00fcrzlich festgestellt, dass es schwierig ist, Columns auf mobilen Ger\u00e4ten zusammen zu halten, also in einer Zeile anzeigen zu lassen. Stattdessen erscheinen sie n\u00e4mlich meist gestapelt.<\/p>\n\n\n\n

\"Divi<\/h2>\n\n\n\n

<\/span>So halten Sie Columns auf Mobilger\u00e4ten in Divi zusammen<\/span><\/h2>\n\n\n\n

Um Columns in Divi auf Mobilger\u00e4ten zusammen zu halten, m\u00fcssen Sie lediglich eine benutzerdefinierte Zeile CSS-Code zu Ihren Zeileneinstellungen hinzuf\u00fcgen.<\/p>\n\n\n\n

Wichtig: Dieser Code funktioniert nur f\u00fcr 3 oder weniger Elemente.<\/strong> Wenn Sie versuchen, vier oder mehr Columns zusammen auf dem Handy zu haben, springen Sie jetzt zu diesem Abschnitt<\/a>.<\/p>\n\n\n\n

Hier ist der Code: display: flex;<\/code><\/h5>\n\n\n\n

Schritt 1: \u00d6ffnen Sie die Zeileneinstellungen<\/h3>\n\n\n
\n
\"Divi<\/figure><\/div>\n\n\n

\u00d6ffnen Sie die Zeileneinstellungen f\u00fcr die Zeile, in der sich Ihre “gestapelten” Columns befinden.<\/p>\n\n\n\n

Schritt 2: Hinzuf\u00fcgen des benutzerdefinierten CSS zur Zeile<\/h3>\n\n\n
\n
\"Hinzuf\u00fcgen<\/figure><\/div>\n\n\n

Klicken Sie in den Zeileneinstellungen auf die Registerkarte “Erweitert”. Klicken Sie auf das Dropdown-Men\u00fc “Custom CSS”, um es zu \u00f6ffnen. F\u00fcgen Sie den display: flex;code> Code in den Abschnitt “Hauptelement” Ihrer benutzerdefinierten CSS ein.<\/p>\n\n\n\n

Wenn Sie auf das gr\u00fcne H\u00e4kchen klicken, um Ihre \u00c4nderungen zu speichern, sehen Sie die aktualisierte mobile Ansicht sofort, wenn Sie am Front-End arbeiten.<\/p>\n\n\n

\n
\"Divi<\/figure><\/div>\n\n\n

Und das war’s! Dieses St\u00fcck CSS-Code ist der mit Abstand einfachste Weg, um 2-3 Elemente auf Mobil- und Tablet-Ger\u00e4ten nebeneinander erscheinen zu lassen.<\/p>\n\n\n\n

<\/a><\/p>\n\n\n\n

<\/span>Wie man 4 oder mehr Columns nebeneinander auf Mobilger\u00e4ten in Divi beh\u00e4lt<\/span><\/h2>\n\n\n
\n
\"Vier<\/figure><\/div>\n\n\n

Gehen Sie zu Ihren Zeileneinstellungen der Zeile, die 4+ “gestapelte” Columns hat. \u00d6ffnen Sie auf der Registerkarte “Erweitert” die Dropdown-Registerkarte “CSS-ID & Klassen”.<\/p>\n\n\n\n

Benennen Sie im Abschnitt “CSS-Klasse” Ihrer Zeileneinstellungen die Klasse mit beliebig vielen Columns. Zum Beispiel<\/strong>: four-columns<\/code><\/p>\n\n\n\n

Gehen Sie als n\u00e4chstes in die Divi >-Theme-Optionen. Sie k\u00f6nnen auch den Abschnitt “Anpassen” Ihres Themes verwenden, um das Front-End ebenfalls zu bearbeiten.<\/p>\n\n\n

\n
\"Anpassen<\/figure><\/div>\n\n\n

Wenn Sie sich in den Divi >-Theme-Optionen befinden, scrollen Sie nach unten zum Abschnitt “Custom CSS”.<\/p>\n\n\n

\n
\"Benutzerdefiniertes<\/figure><\/div>\n\n\n

Dies ist der CSS-Code f\u00fcr 4 Fenster:<\/p>\n\n\n\n

@media only screen and (max-width: 980px) {
\n.four-columns .et_pb_column {
\nwidth: 25%!important;
\n}
\n}<\/code><\/p>\n\n\n\n

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\u00fcr Tablets ist.<\/p>\n\n\n\n

Das korrekte Endergebnis sieht so aus:<\/p>\n\n\n

\n
\"4<\/figure><\/div>\n\n\n

<\/span>Wie k\u00f6nnen Sie 5 Divi-Columns auf dem Handy nebeneinander halten?<\/span><\/h2>\n\n\n\n

Wenn Sie mehr als 4, 5 oder 6 Symbole\/Bilder oder mehr haben, k\u00f6nnen Sie den gleichen Code wie oben wiederholt verwenden.<\/p>\n\n\n\n

Denken Sie daran: Sie<\/strong>m\u00fcssen den Bereich “Breite” in Prozent f\u00fcr jede neue Spalte, die Sie hinzuf\u00fcgen, \u00e4ndern.<\/strong><\/p>\n\n\n\n

Zum Beispiel: 5 Columns<\/p>\n\n\n\n

@media only screen and (max-width: 980px) {
\n.five-columns<\/strong> .et_pb_column {
\nwidth: 20%<\/strong>!important;
\n}
\n}<\/code><\/p>\n\n\n\n

Sie m\u00fcssen die Anzahl der Columns durch 100 dividieren. Also 6 Columns \/ 100 = 16,66%. Sie m\u00fcssen dieses Muster f\u00fcr so viele Columns wie m\u00f6glich 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\u00f6nnen Sie es auf f\u00fcnf Columns, sechs Columns usw. \u00e4ndern. Stellen Sie sicher, dass Sie die fettgedruckten Abschnitte des obigen Codes auch in den benutzerdefinierten CSS in Ihren Theme-Optionen in Divi aktualisieren.<\/p>\n\n\n\n

<\/span>Zusammenfassung, wie man Columns auf Mobilger\u00e4ten in Divi nebeneinander h\u00e4lt<\/span><\/h2>\n\n\n\n

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\u00fcnschte Ergebnis zu erzielen. Dar\u00fcber hinaus haben wir einen weiteren Divi-Tutorial-Blog, in dem es darum geht, wie man Schriftarten f\u00fcr mobile \u00dcberschriften anpasst<\/a>.<\/p>\n\n\n\n

Haben Sie Fragen zu diesem Tutorial? Lassen Sie es uns in den Kommentaren wissen.<\/p>\n","protected":false},"excerpt":{"rendered":"

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\u00fcrzlich festgestellt, dass es schwierig ist, Columns auf mobilen Ger\u00e4ten zusammen zu halten, also in einer Zeile anzeigen zu lassen. Stattdessen erscheinen sie… So halten Sie Columns auf Mobilger\u00e4ten in Divi zusammen<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":5,"featured_media":48928,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"tpgb_global_settings":"","footnotes":""},"categories":[22],"tags":[],"class_list":["post-331636","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tipps-tricks","entry"],"tpgb_featured_images":{"full":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2020\/01\/how-to-fix-mobile-heading-fonts-divi.jpg",1042,625,false],"tp-image-grid":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2020\/01\/how-to-fix-mobile-heading-fonts-divi.jpg",700,420,false],"thumbnail":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2020\/01\/how-to-fix-mobile-heading-fonts-divi-150x150.jpg",150,150,true],"medium":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2020\/01\/how-to-fix-mobile-heading-fonts-divi-300x180.jpg",300,180,true],"medium_large":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2020\/01\/how-to-fix-mobile-heading-fonts-divi-768x461.jpg",768,461,true],"large":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2020\/01\/how-to-fix-mobile-heading-fonts-divi-1024x614.jpg",1000,600,true],"default":"https:\/\/wp.ezoic.com\/de-lang\/wp-content\/plugins\/the-plus-addons-for-block-editor\/assets\/images\/tpgb-placeholder.jpg"},"tpgb_post_meta_info":{"get_date":"22. Februar 2021","category_list":{"category":[{"term_id":22,"name":"Tipps & Tricks","slug":"tipps-tricks","term_group":0,"term_taxonomy_id":22,"taxonomy":"category","description":"","parent":0,"count":50,"filter":"raw"}],"post_tag":false,"post_format":false},"author_name":"Allen Longstreet","author_url":"https:\/\/wp.ezoic.com\/de-lang\/author\/allen\/","author_email":"alongstreet@ezoic.com","author_website":"","author_description":"","author_facebook":"","author_twitter":"","author_instagram":"","author_role":["author"],"author_firstname":"Allen","author_lastname":"Longstreet","user_login":"allen","author_avatar":"","author_avatar_url":"https:\/\/secure.gravatar.com\/avatar\/d3d9283760e71bb3ca24eef2f1cca086?s=96&d=mm&r=g","comment_count":2,"post_likes":0,"post_views":0},"tpgb_post_category":{"category":"Tipps & Tricks<\/a> "},"_links":{"self":[{"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/posts\/331636"}],"collection":[{"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/comments?post=331636"}],"version-history":[{"count":5,"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/posts\/331636\/revisions"}],"predecessor-version":[{"id":339950,"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/posts\/331636\/revisions\/339950"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/media\/48928"}],"wp:attachment":[{"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/media?parent=331636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/categories?post=331636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/tags?post=331636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}