Lors de la conception d’un site web avec le thème Divi, il est courant d’utiliser des mises en page en colonnes pour structurer le contenu. Cependant, sur les appareils mobiles, l’ordre de ces colonnes peut ne pas être optimal pour l’expérience utilisateur. Par défaut, Divi empile les colonnes de gauche à droite lorsqu’elles sont affichées sur des écrans plus petits, ce qui peut entraîner une présentation incohérente du contenu. Heureusement, il est possible d’inverser l’ordre des colonnes sur mobile en utilisant des techniques CSS simples.
Comprendre le problème
Sur un écran de bureau, une disposition typique peut comporter une image à gauche et du texte à droite dans une première ligne, puis l’inverse dans la ligne suivante. Cette alternance crée un rythme visuel agréable. Cependant, sur mobile, où les colonnes se réorganisent en une seule colonne verticale, l’ordre par défaut peut entraîner une succession d’images ou de textes, perturbant ainsi la lecture. Par exemple, au lieu d’une alternance image-texte-image-texte, vous pourriez obtenir image-texte-texte-image, ce qui n’est pas idéal.
Solution : Utiliser Flexbox pour inverser l’ordre des colonnes
La solution consiste à utiliser les propriétés CSS de Flexbox pour contrôler l’ordre des colonnes sur les appareils mobiles. En appliquant la propriété flex-direction: column-reverse;, il est possible d’inverser l’ordre des colonnes spécifiquement pour les écrans de petite taille.
Étapes à suivre pour inverser l’ordre des colonnes sur mobile dans Divi
- Ajouter une classe CSS à la ligne concernée
- Accédez aux paramètres de la ligne contenant les colonnes que vous souhaitez inverser.
- Dans l’onglet « Avancé », sous « ID et classes CSS », ajoutez une classe personnalisée, par exemple
inverse.
- Ajouter le code CSS personnalisé
- Dans le tableau de bord WordPress, allez à « Divi » > « Options du thème » > « CSS personnalisé ».Ajoutez le code suivant (Ce code cible les écrans dont la largeur est inférieure ou égale à 980 pixels et applique la propriété Flexbox pour inverser l’ordre des colonnes.)
- Enregistrer les modifications
- Après avoir ajouté le code CSS, enregistrez les modifications.
- Vérifiez le rendu sur un appareil mobile ou en réduisant la taille de la fenêtre de votre navigateur pour vous assurer que l’ordre des colonnes est inversé comme souhaité.
Explication du code CSS
@media screen and (max-width: 980px): Cette règle CSS, appelée media query, s’applique uniquement aux écrans dont la largeur est inférieure ou égale à 980 pixels, ciblant ainsi les tablettes et smartphones..inverse: Sélecteur de la classe CSS ajoutée à la ligne concernée.display: flex;: Active le modèle Flexbox pour la ligne, permettant une manipulation flexible de la disposition des colonnes.flex-direction: column-reverse;: Inverse l’ordre des colonnes en les affichant de bas en haut.
Avantages de cette méthode
- Simplicité: Quelques lignes de CSS suffisent pour obtenir l’effet désiré, sans avoir besoin de dupliquer des sections ou d’utiliser des plugins supplémentaires.
- Contrôle précis: Vous pouvez cibler spécifiquement les lignes nécessitant une inversion, sans affecter l’ensemble du site.
- Amélioration de l’expérience utilisateur: En assurant une présentation cohérente du contenu sur tous les appareils, vous améliorez la lisibilité et l’engagement des visiteurs.
Considérations supplémentaires
- Compatibilité des navigateurs: La propriété Flexbox est largement supportée par les navigateurs modernes. Toutefois, pour assurer une compatibilité maximale, il est recommandé d’ajouter des préfixes spécifiques aux navigateurs plus anciens.
- Testez vos modifications: Après avoir appliqué les changements, testez votre site sur différents appareils et navigateurs pour vous assurer que l’affichage est conforme à vos attentes.
- Utilisation de classes CSS distinctes: Si vous avez plusieurs lignes nécessitant une inversion, il est judicieux d’utiliser des classes CSS distinctes pour chaque ligne afin de maintenir une organisation claire de votre code.
Conclusion
Inverser l’ordre des colonnes sur les appareils mobiles dans le thème Divi est une tâche simple grâce à l’utilisation de Flexbox et des media queries. En suivant les étapes décrites ci-dessus, vous pouvez assurer une présentation cohérente et esthétique de votre contenu sur tous les types d’appareils, améliorant ainsi l’expérience utilisateur et l’engagement sur votre site web.
Pour une démonstration visuelle de cette technique, vous pouvez consulter le tutoriel vidéo suivant :
