Sommaire de l'article
Conserver la structure en colonnes sur mobile avec Divi
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure= »1_2,1_2″ disabled_on= »on|on|off » module_class= »three-columns » _builder_version= »4.9.3″ _module_preset= »default » custom_margin= »-51px|auto||auto|| »][et_pb_column type= »1_2″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/06/telechargement-9.jpg » alt= »structure colonnes divi sur mobile responsive » title_text= »téléchargement (9) » _builder_version= »4.9.3″ _module_preset= »default »][/et_pb_image][/et_pb_column][et_pb_column type= »1_2″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/06/telechargement-8.jpg » alt= »divi colonnes mobile conserver horizontal » title_text= »divi colonnes mobile conserver horizontal » _builder_version= »4.9.3″ _module_preset= »default »][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built= »1″ _builder_version= »4.9.0″ _module_preset= »default » min_height= »204px » custom_padding= »1px||0px||| »][et_pb_row _builder_version= »4.9.0″ _module_preset= »default » custom_margin= »|auto|29px|auto|| »][et_pb_column type= »4_4″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »17px » text_orientation= »justified » custom_margin= »-34px||||| »]Votre structure de blocs modules n’est pas conservée sur mobile avec Divi?
Pas de problème. Nous allons voir comment conserver sur mobile, en responsive, la structure horizontale de vos colonnes desktop.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built= »1″ _builder_version= »4.9.3″ _module_preset= »default » custom_margin= »||||false|false » custom_padding= »2px||||| »][et_pb_row _builder_version= »4.9.3″ _module_preset= »default » custom_margin= »|auto|-28px|auto|| » custom_padding= »||||false|false » border_width_all= »6px » border_color_all= »#322269″][et_pb_column type= »4_4″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »16px » ul_text_align= »center » text_orientation= »center » custom_margin= »12px||||| » custom_padding= »||0px||| » hover_enabled= »0″ sticky_enabled= »0″]SOMMAIRE
Pourquoi mes colonnes Divi sont les unes sous les autres sur mobile?
Comment conserver ma structure en colonnes Divi sur mobile ?
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built= »1″ _builder_version= »4.9.0″ _module_preset= »default » custom_margin= »||-40px||| » custom_padding= »||0px||| »][et_pb_row _builder_version= »4.9.0″ _module_preset= »default » min_height= »65px » custom_padding= »24px||3px||| »][et_pb_column type= »4_4″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_text module_id= »chap1″ _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||on||| » text_font_size= »25px » text_letter_spacing= »1px » header_3_text_color= »#322269″ header_3_font_size= »25px » custom_margin= »||||false|false » custom_padding= »||10px||false|false »]
Pourquoi mes colonnes Divi sont les unes sous les autres sur mobile?
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built= »1″ _builder_version= »4.9.0″ _module_preset= »default » min_height= »384px » custom_padding= »0px||0px||| »][et_pb_row column_structure= »1_2,1_2″ _builder_version= »4.9.0″ _module_preset= »default » custom_margin= »-29px|auto||auto|| » custom_padding= »5px||||| »][et_pb_column type= »1_2″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px » text_orientation= »justified » custom_padding= »0px||||| »]A l’origine, Divi restructure automatiquement les colonnes de façon à ce qu’elles soient les unes sous les autres. Ceci est fait pour éviter les erreurs de responsive. En effet, le fait de ne pas avoir deux colonnes cote à cote sur mobile évite que certains textes soit coupés, ou que certaines images deviennent trop petites par exemple.
Cette fonctionnalité peut par contre s’avérer gênante pour ceux qui souhaitent avoir tout de même deux, trois voir quatre blocs côte à côte sur leur version mobile.
[/et_pb_text][/et_pb_column][et_pb_column type= »1_2″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/06/telechargement-8.jpg » title_text= »divi colonnes mobile conserver horizontal » align= »center » _builder_version= »4.9.3″ _module_preset= »default » width= »42% » max_width= »100% » custom_margin= »30px||30px||false|false » custom_padding= »||||false|false » hover_enabled= »0″ border_color_all= »#322269″ border_style_all= »double » box_shadow_style= »preset4″ box_shadow_horizontal= »15px » box_shadow_spread= »9px » box_shadow_color= »#09E1C0″ alt= »divi colonnes mobile conserver horizontal » show_bottom_space= »off » sticky_enabled= »0″][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »4.9.3″ _module_preset= »default »][et_pb_column type= »4_4″ _builder_version= »4.9.3″ _module_preset= »default »][et_pb_text module_id= »chap2″ _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||on||| » text_font_size= »25px » text_letter_spacing= »1px » header_2_text_color= »#322269″ header_3_text_color= »#322269″ header_3_font_size= »25px » custom_padding= »0px||10px||| »]Comment conserver ma structure en colonnes Divi sur mobile ?
[/et_pb_text][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px » text_orientation= »justified » min_height= »33px » hover_enabled= »0″ sticky_enabled= »0″]1) Créez votre section, une ligne avec plusieurs colonnes et ajoutez vos modules en version Ordinateur.
Ici, nous créons une ligne 50/50 avec une image à gauche et un texte à droite.
2) Ouvrez les paramètres de votre ligne, en cliquant sur la roue crantée (section verte)
3) Cliquez sur l’onglet Avancé, puis rendez-vous dans ID et classes CSS
4) Remplissez le champ « Classes CSS » par « multi-colonnes » (sans les guillemets). Attention à l’orthographe !
Sauvegardez le tout.
Ceci va nous permettre d’identifier notre ligne verte par la suite au sein du code CSS que nous allons ajouter.
5) Retour dans votre backoffice (Tableau de bord) WordPress, on se dirige sur l’onglet DIVI. Cliquez dessus pour accéder aux Options du thème.
Dans l’onglet Général on se dirige tout en bas de la page jusqu’à trouver « Personnaliser le CSS«
6) Au sein de Personnaliser le CSS, rajouter le code suivant :
@media only screen and (max-width: 980px) {
.multi-colonnes .et_pb_column {
width: 33%!important;
}
}@media only screen and (max-width: 479px) {
.multi-colonnes .et_pb_column {
width: 50%!important;
}
}
Cliquez ensuite sur « Sauvegarder les changements »
Et voilà ! Votre ligne de colonnes est désormais conservée sur mobile !
[/et_pb_text][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/06/telechargement-8.jpg » _builder_version= »4.9.3″ _module_preset= »default » alt= »divi colonnes mobile conserver horizontal » title_text= »divi colonnes mobile conserver horizontal » align= »center » width= »22% » hover_enabled= »0″ sticky_enabled= »0″][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section]
