{"id":1356,"date":"2020-11-09T15:34:54","date_gmt":"2020-11-09T15:34:54","guid":{"rendered":"https:\/\/www.ezoic.com\/fr-lang\/2020\/11\/09\/comment-garder-les-colonnes-cote-a-cote-sur-le-mobile-dans-divi\/"},"modified":"2020-11-09T15:34:54","modified_gmt":"2020-11-09T15:34:54","slug":"comment-garder-les-colonnes-cote-a-cote-sur-le-mobile-dans-divi","status":"publish","type":"post","link":"https:\/\/wp.ezoic.com\/fr-lang\/comment-garder-les-colonnes-cote-a-cote-sur-le-mobile-dans-divi\/","title":{"rendered":"Comment garder les colonnes c\u00f4te \u00e0 c\u00f4te sur le mobile dans Divi"},"content":{"rendered":"<p>Le\u00a0<a href=\"https:\/\/www.elegantthemes.com\/gallery\/divi\/\" target=\"_blank\" rel=\"noopener noreferrer\">Divi Builder<\/a> offre aux utilisateurs un cadre de conception complet et facile \u00e0 utiliser. Bien que parfois, des erreurs d&#8217;optimisation existent entre les versions desktop et mobile des pages du site. Nous avons r\u00e9cemment d\u00e9couvert qu&#8217;il est difficile de maintenir des colonnes c\u00f4te \u00e0 c\u00f4te sur le mobile. Au lieu de cela, elles apparaissent empil\u00e9es.<\/p>\n<h2><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-232121\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/divi-mobile-view-incorrect-955x1024.jpg\" alt=\"Divi mobile view incorrect\" width=\"955\" height=\"1024\" \/><\/h2>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_67_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Sommaire<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a189e31196fe\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a189e31196fe\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-garder-les-colonnes-cote-a-cote-sur-le-mobile-dans-divi\/#Comment_garder_les_colonnes_cote_a_cote_sur_le_mobile_en_Divi\" title=\"Comment garder les colonnes c\u00f4te \u00e0 c\u00f4te sur le mobile en Divi\">Comment garder les colonnes c\u00f4te \u00e0 c\u00f4te sur le mobile en Divi<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-garder-les-colonnes-cote-a-cote-sur-le-mobile-dans-divi\/#Etape_1_Ouvrez_les_parametres_de_la_ligne\" title=\"Etape 1 : Ouvrez les param\u00e8tres de la ligne\">Etape 1 : Ouvrez les param\u00e8tres de la ligne<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-garder-les-colonnes-cote-a-cote-sur-le-mobile-dans-divi\/#Etape_2_Ajouter_le_CSS_personnalise_a_la_ligne\" title=\"Etape 2 : Ajouter le CSS personnalis\u00e9 \u00e0 la ligne\">Etape 2 : Ajouter le CSS personnalis\u00e9 \u00e0 la ligne<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-garder-les-colonnes-cote-a-cote-sur-le-mobile-dans-divi\/#Comment_garder_4_colonnes_ou_plus_cote_a_cote_sur_le_mobile_dans_Divi\" title=\"Comment garder 4 colonnes ou plus c\u00f4te \u00e0 c\u00f4te sur le mobile dans Divi\">Comment garder 4 colonnes ou plus c\u00f4te \u00e0 c\u00f4te sur le mobile dans Divi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-garder-les-colonnes-cote-a-cote-sur-le-mobile-dans-divi\/#Comment_garder_5_colonnes_Divi_cote_a_cote_sur_le_mobile\" title=\"Comment garder 5 colonnes Divi c\u00f4te \u00e0 c\u00f4te sur le mobile ?\">Comment garder 5 colonnes Divi c\u00f4te \u00e0 c\u00f4te sur le mobile ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-garder-les-colonnes-cote-a-cote-sur-le-mobile-dans-divi\/#Recapitulatif_sur_la_facon_de_garder_les_colonnes_cote_a_cote_sur_le_mobile_dans_Divi\" title=\"R\u00e9capitulatif sur la fa\u00e7on de garder les colonnes c\u00f4te \u00e0 c\u00f4te sur le mobile dans Divi\">R\u00e9capitulatif sur la fa\u00e7on de garder les colonnes c\u00f4te \u00e0 c\u00f4te sur le mobile dans Divi<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Comment_garder_les_colonnes_cote_a_cote_sur_le_mobile_en_Divi\"><\/span>Comment garder les colonnes c\u00f4te \u00e0 c\u00f4te sur le mobile en Divi<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Pour garder les colonnes c\u00f4te \u00e0 c\u00f4te sur le mobile dans Divi, il suffit d&#8217;ajouter une ligne de code CSS personnalis\u00e9e \u00e0 vos param\u00e8tres de ligne. <strong>Important : Ce code ne fonctionne que pour 3 \u00e9l\u00e9ments ou moins.\u00a0<\/strong>Si vous essayez d&#8217;avoir quatre colonnes ou plus c\u00f4te \u00e0 c\u00f4te sur le mobile, <a href=\"#section1\">sautez cette section maintenant<\/a>. Voici le code : <code>affichage : flex;<\/code><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Etape_1_Ouvrez_les_parametres_de_la_ligne\"><\/span>Etape 1 : Ouvrez les param\u00e8tres de la ligne<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-232135\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/divi-row-settings.jpg\" alt=\"Divi Row settings\" width=\"491\" height=\"652\" \/> Ouvrez les param\u00e8tres de la ligne qui abrite vos colonnes &#8220;empil\u00e9es&#8221;.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Etape_2_Ajouter_le_CSS_personnalise_a_la_ligne\"><\/span>Etape 2 : Ajouter le CSS personnalis\u00e9 \u00e0 la ligne<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-232142\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/divi-add-custom-css.jpg\" alt=\"Ajouter du CSS personnalis\u00e9 \u00e0 la ligne\" width=\"491\" height=\"793\" \/><\/p>\n<p>Cliquez sur l&#8217;onglet &#8220;avanc\u00e9&#8221; des param\u00e8tres de la ligne. Cliquez sur la liste d\u00e9roulante &#8220;CSS personnalis\u00e9&#8221; pour l&#8217;ouvrir. Ajoutez le code <code>display : flex;<\/code> code \u00e0 la section &#8220;main element&#8221; de votre CSS personnalis\u00e9. Lorsque vous cliquez sur la coche verte pour enregistrer vos modifications, vous verrez la vue mobile mise \u00e0 jour instantan\u00e9ment si vous construisez en fa\u00e7ade.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-232150\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/divi-row-mobile-fixed.jpg\" alt=\"Divi mobile columns fixed\" width=\"494\" height=\"377\" \/><\/p>\n<p>Et c&#8217;est tout ! Ce morceau de code CSS est de loin le moyen le plus simple pour faire appara\u00eetre 2 ou 3 \u00e9l\u00e9ments c\u00f4te \u00e0 c\u00f4te sur les appareils mobiles et les tablettes. <a name=\"section1\"><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Comment_garder_4_colonnes_ou_plus_cote_a_cote_sur_le_mobile_dans_Divi\"><\/span>Comment garder 4 colonnes ou plus c\u00f4te \u00e0 c\u00f4te sur le mobile dans Divi<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-232162\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/four-column-custom-class.jpg\" alt=\"Four Columns custom add CSS class\" width=\"646\" height=\"747\" \/><\/p>\n<p>Allez \u00e0 vos param\u00e8tres de ligne de la ligne qui a 4+ colonnes &#8220;empil\u00e9es&#8221;. Dans l&#8217;onglet &#8220;avanc\u00e9&#8221;, ouvrez l&#8217;onglet d\u00e9roulant ID &amp; CSS ; Classes. Dans la section &#8220;Classe CSS&#8221; de vos param\u00e8tres de ligne, nommez la classe avec le nombre de colonnes que vous souhaitez. <strong>Par exemple<\/strong> : <code>quatre-colonnes<\/code> Ensuite, allez dans les options Divi &amp; Theme. Vous pouvez \u00e9galement utiliser la section &#8220;customize&#8221; de votre th\u00e8me pour l&#8217;\u00e9diter sur le front-end.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-232232\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/customize-theme-additional-css-combined.jpg\" alt=\"Customize theme additional CSS \" width=\"900\" height=\"254\" \/><\/p>\n<p>Une fois dans les options Divi &amp; Theme, faites d\u00e9filer vers le bas jusqu&#8217;\u00e0 la section &#8220;Custom CSS&#8221;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-232261\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/Screen-Shot-2020-03-12-at-1.02.43-PM.png\" alt=\"Custom CSS in Divi\" width=\"892\" height=\"367\" \/><\/p>\n<p>Il s&#8217;agit du code CSS pour 4 \u00e9crans : @media only screen and (max-width: 980px) { .four-columns .et_pb_column { width: 25%!important; } }<code> @media only screen and (max-width : 980px) {<br \/>\n.four-columns .et_pb_column {<br \/>\nwidth: 25%! important ;<br \/>\n}<br \/>\n}<\/code> Que fait ce code ? L&#8217;\u00e9cran @media only et (largeur maximale : 980px) dicte que lorsque la fen\u00eatre de visualisation est inf\u00e9rieure \u00e0 980 pixels, d&#8217;afficher les 4 colonnes c\u00f4te \u00e0 c\u00f4te et non empil\u00e9es. 980 pixels est la dimension qui constitue g\u00e9n\u00e9ralement le point de rupture pour les tablettes. Le r\u00e9sultat final correct ressemble \u00e0 ceci :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-232317 size-full\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/Screen-Shot-2020-03-11-at-5.30.18-PM.png\" alt=\"4 colonnes dans DIvi c\u00f4te \u00e0 c\u00f4te sur mobile\" width=\"510\" height=\"330\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Comment_garder_5_colonnes_Divi_cote_a_cote_sur_le_mobile\"><\/span>Comment garder 5 colonnes Divi c\u00f4te \u00e0 c\u00f4te sur le mobile ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Si vous avez plus de 4, 5, ou 6 ic\u00f4nes\/images ou plus, vous pouvez r\u00e9p\u00e9ter en utilisant le m\u00eame code que ci-dessus. <strong>Souvenez-vous : Vous<\/strong> <strong>devez changer la section de pourcentage de &#8220;largeur&#8221; pour chaque nouvelle colonne que vous ajoutez.<\/strong> Par exemple : 5 colonnes <code>@media only screen et (max-width : 980px) {<br \/>\n<strong>.five-columns<\/strong> .et_pb_column {<br \/>\nlargeur : 20%!importante ;<br \/>\n}<br \/>\n}<\/code> Vous devez diviser le nombre de colonnes par 100. Donc 6 colonnes \/ 100 = 16,66%. Vous devez suivre ce sch\u00e9ma pour le nombre de colonnes que vous essayez d&#8217;avoir c\u00f4te \u00e0 c\u00f4te. N&#8217;oubliez pas de cr\u00e9er une nouvelle &#8220;Classe CSS&#8221; dans les param\u00e8tres avanc\u00e9s de vos lignes dans Divi. S&#8217;il y avait quatre colonnes auparavant, vous pourriez la changer en cinq colonnes, six colonnes, etc.\u00a0 Assurez-vous de mettre \u00e0 jour les sections en gras du code ci-dessus ainsi que le CSS personnalis\u00e9 dans les options de votre th\u00e8me dans Divi.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Recapitulatif_sur_la_facon_de_garder_les_colonnes_cote_a_cote_sur_le_mobile_dans_Divi\"><\/span>R\u00e9capitulatif sur la fa\u00e7on de garder les colonnes c\u00f4te \u00e0 c\u00f4te sur le mobile dans Divi<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Si vous avez 3 colonnes ou moins \u00e0 garder c\u00f4te \u00e0 c\u00f4te, le <code>display:flex;<\/code> code dans la section CSS personnalis\u00e9e de vos param\u00e8tres de ligne est le moyen le plus simple d&#8217;obtenir le r\u00e9sultat souhait\u00e9. En outre, nous avons un autre blog de tutoriel Divi sur <a href=\"\/?p=48735\"> comment r\u00e9parer les polices d&#8217;en-t\u00eate mobiles<\/a>. Vous avez des questions sur ce tutoriel ? Faites-le moi savoir dans les commentaires.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le\u00a0Divi Builder offre aux utilisateurs un cadre de conception complet et facile \u00e0 utiliser. Bien que parfois, des erreurs d&#8217;optimisation existent entre les versions desktop et mobile des pages du site. Nous avons r\u00e9cemment d\u00e9couvert qu&#8217;il est difficile de maintenir des colonnes c\u00f4te \u00e0 c\u00f4te sur le mobile. Au lieu de cela, elles apparaissent empil\u00e9es.&hellip; <a class=\"more-link\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-garder-les-colonnes-cote-a-cote-sur-le-mobile-dans-divi\/\">Continue reading <span class=\"screen-reader-text\">Comment garder les colonnes c\u00f4te \u00e0 c\u00f4te sur le mobile dans Divi<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1365,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","footnotes":""},"categories":[9],"tags":[8],"class_list":["post-1356","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-infrastructure-du-siteweb-amp-optimisation","tag-fr","entry"],"_links":{"self":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/posts\/1356"}],"collection":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/comments?post=1356"}],"version-history":[{"count":0,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/posts\/1356\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/media\/1365"}],"wp:attachment":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/media?parent=1356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/categories?post=1356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/tags?post=1356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}