fbpx
Accueil » Blog Voltee » Conserver les colonnes sur mobile avec Divi

Conserver la structure en colonnes sur mobile avec Divi

structure colonnes divi sur mobile responsive
divi colonnes mobile conserver horizontal

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.

Pourquoi mes colonnes Divi sont les unes sous les autres sur mobile?

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.

divi colonnes mobile conserver horizontal

Comment conserver ma structure en colonnes Divi sur mobile ?

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;
}
}

 

personnaliser css divi

 

 Cliquez ensuite sur « Sauvegarder les changements »

 

Et voilà ! Votre ligne de colonnes est désormais conservée sur mobile !

 

divi colonnes mobile conserver horizontal
Loading...