Une page créée avec Divi doit s’afficher correctement sur tous les types d’écrans.
Divi intègre des outils permettant d’adapter facilement le contenu pour le mobile et la tablette.
Dans cet article, tu vas apprendre comment ajuster une page Divi pour garantir une bonne lisibilité sur tous les appareils.
En bref #
- Divi permet de personnaliser l’affichage selon l’appareil
- Les réglages responsive sont intégrés aux modules
- Il est important de vérifier le rendu sur mobile et tablette
Accéder aux modes d’affichage #
Divi propose des modes d’aperçu pour tester l’affichage selon l’appareil.
Dans l’éditeur Divi, clique sur l’icône violette en bas de l’écran, puis utilise les icônes Ordinateur, Tablette et Mobile.
La page s’adapte automatiquement à la taille de l’écran sélectionné.
Utiliser les réglages responsive #
La plupart des options de Divi peuvent être ajustées selon l’appareil.
1. Ouvrir les réglages d’un module #
Survole le module à modifier, puis clique sur l’icône de réglages.
2. Activer les options spécifiques par appareil #
À côté de certains réglages, clique sur l’icône représentant un appareil.
Tu peux alors définir des valeurs différentes pour:
- ordinateur
- tablette
- mobile
3. Ajuster la taille du texte #
Sur mobile, les textes trop grands peuvent nuire à la lisibilité.
Utilise les réglages responsive pour réduire la taille de police sur mobile tout en conservant une taille confortable sur ordinateur.
Gérer l’espacement sur mobile #
Les marges et espacements qui fonctionnent sur ordinateur peuvent être excessifs sur mobile.
Dans les réglages de design, ajuste:
- les marges externes
- les espacements internes
Utilise les options responsive pour réduire ces valeurs sur mobile.
Masquer des éléments selon l’appareil #
Dans certains cas, il peut être utile de masquer un élément sur mobile ou tablette.
Dans les réglages avancés d’un module, tu peux choisir de masquer l’élément sur:
- ordinateur
- tablette
- mobile
Cette option est utile pour simplifier l’affichage sur les petits écrans.
Vérifier le rendu final #
Avant d’enregistrer, vérifie chaque mode d’affichage.
Assure-toi que:
- le texte reste lisible
- les boutons sont facilement cliquables
- le contenu n’est pas trop serré
N’oublie pas de cliquer sur Enregistrer une fois les ajustements terminés.
Points d’attention #
- Ne te base pas uniquement sur l’affichage ordinateur
- Des marges trop importantes nuisent à la lecture sur mobile
- Pense toujours à tester avant publication
Astuce utile #
Commence toujours par adapter la version mobile, puis ajuste la tablette et l’ordinateur.
Pour aller plus loin #
Une fois le responsive maîtrisé, tu peux gagner du temps avec les outils Divi.