Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


le Générateur de Divi fournit aux utilisateurs un cadre de conception complet et facile à utiliser. Bien que des erreurs d’optimisation se produisent parfois entre les versions de bureau et mobiles des pages du site. Nous avons récemment découvert qu’il est difficile de garder les colonnes côte à côte sur un mobile. Au lieu de cela, ils semblent empilés.

Divi Mobile View est erroné

Comment garder les colonnes côte à côte dans Divi sur mobile

Pour garder les colonnes côte à côte dans Divi sur mobile, tout ce que vous avez à faire est d’ajouter une ligne personnalisée de code CSS à vos paramètres de ligne.

Important: ce code ne fonctionne que pour 3 éléments ou moins. Si vous essayez d’avoir quatre colonnes ou plus côte à côte sur les appareils mobiles, Passez maintenant à cette section.

Voici le code: display: flex;

Étape 1: ouvrez les paramètres de ligne

Paramètres de Divi Row

Ouvrez les paramètres de ligne pour la ligne où se trouvent vos colonnes «empilées».

Étape 2: ajoutez le CSS personnalisé à la ligne

Ajouter du CSS personnalisé à la ligne

Dans les paramètres de ligne, cliquez sur l’onglet Avancé. Cliquez sur le menu déroulant CSS personnalisé pour l’ouvrir. ajouter le display: flex; Code dans la section « Élément principal » de votre CSS personnalisé.

Si vous cliquez sur la coche verte pour enregistrer vos modifications, la vue mobile mise à jour apparaîtra immédiatement lorsque vous construisez sur le front-end.

Colonnes mobiles divi fixesEt c’est tout! Ce code CSS est de loin le moyen le plus simple d’afficher 2 à 3 éléments côte à côte sur les appareils mobiles et tablettes.

Comment garder 4 colonnes ou plus côte à côte dans Divi sur les appareils mobiles

Classe CSS personnalisée avec quatre colonnes

Accédez à vos paramètres de ligne de la ligne avec plus de 4 colonnes « empilées ». Dans l’onglet Avancé, ouvrez l’onglet déroulant ID CSS et classes.

Dans la section « Classe CSS » de vos paramètres de ligne, nommez la classe avec les colonnes souhaitées. Par exemple:: four-columns

Ensuite, allez dans Divi> Options du thème. Vous pouvez également utiliser la section «Personnaliser» de votre sujet pour le modifier également dans l’interface.

Personnalisez le CSS supplémentaire pour le thème

Sous Divi> Options du thème, faites défiler jusqu’à la section ‘CSS personnalisé’.

CSS personnalisé dans Divi

Voici le code CSS pour 4 écrans:

@media only screen and (max-width: 980px) {
.four-columns .et_pb_column {
width: 25%!important;
}
}

Que fait ce code? L’écran @media uniquement et (max-width: 980px) indique que les 4 colonnes doivent être affichées les unes à côté des autres et non empilées si la fenêtre est inférieure à 980 pixels. 980 pixels est la dimension qui est généralement le point d’arrêt pour les tablettes.

Le résultat final correct ressemble à ceci:

4 colonnes dans DIvi côte à côte sur les appareils mobiles

Comment garder 5 colonnes Divi côte à côte sur le téléphone?

Si vous avez plus de 4, 5 ou 6 symboles / images ou plus, vous pouvez répéter le même code que ci-dessus.

Se souvenir vous devez modifier la section Pourcentage «Largeur» pour chaque nouvelle colonne que vous ajoutez.

Par exemple: 5 colonnes

@media only screen and (max-width: 980px) {
.five-columns .et_pb_column {
width: 20%!important;
}
}

Vous devez diviser le nombre de colonnes par 100. Donc 6 colonnes / 100 = 16,66%. Vous devrez suivre ce modèle pour toutes les colonnes que vous souhaitez côte à côte. N’oubliez pas de créer une nouvelle « classe CSS » dans vos paramètres de ligne avancés dans Divi. S’il s’agissait de quatre colonnes auparavant, vous pouvez le changer en cinq colonnes, six colonnes, etc. Assurez-vous également de mettre à jour les sections en gras du code ci-dessus dans le CSS personnalisé dans vos options de thème dans Divi.

Résumé de la façon de conserver les colonnes côte à côte dans Divi sur mobile

Si vous avez 3 colonnes ou moins côte à côte, le display:flex; Le code dans la section CSS personnalisée de vos paramètres de ligne est le moyen le plus simple d’obtenir le résultat souhaité. Nous avons également un autre blog tutoriel Divi sur comment corriger les polices pour les en-têtes mobiles.

Avez-vous des questions sur ce tutoriel? Faites-moi savoir dans les commentaires.





Source link

Recent Posts