Créer un site web réactif, c’est facile avec Divi !
Dans cette vidéo, je vous montre comment créer un site web WordPress responsive en utilisant le thème Divi et son Visual Builder. Je vous explique comment utiliser les puissantes fonctionnalités intégrées à Divi pour créer un site Web professionnel qui aura fière allure sur n’importe quel appareil en s’adaptant parfaitement à son écran.
Quand vous créez un site web vous le faites sur un ordinateur de bureau. Mais savez-vous qu’aujourd’hui plus de 80% des pages du web sont vues sur appareils mobiles avec leurs écrans au format particulier. Il est donc essentiel lorsque vous créez un site de vérifier cette parfaite compatibilité en termes d’affichage.
Qu’est-ce qu’un site WordPress Divi responsive ?
Un site responsive est un site réactif c’est à dire qu’il va s’adapter automatiquement aux contraintes de l’écran sur lequel il est vu afin d’être parfaitement lisible et conserver un joli design.
Par défaut et sans que vous n’ayez besoin à faire quoique ce soit un site WordPress Divi est automatiquement responsive même si des ajustements sont parfois nécessaires.
En effet, lorsque vous créez une rangée à 3 colonnes avec 2 modules dans chaque colonne par exemple, eh bien lorsque vous passez en vue mobile, les modules de chaque colonne de la rangée vont passer automatiquement les uns en dessous des autres de la gauche vers la droite et cela pour conserver une lisibilité acceptable. C’est vraiment très important dans la conception de vos pages que vous ayez bien cela à l’esprit.
Cependant, cette réactivité du site n’est pas toujours parfaite et nécessite parfois quelques ajustements et c’est ce nous allons voir maintenant.
Passer de la vue d’un périphérique à l’autre
Pour passer de la vue bureau à la vue tablette puis à la vue smartphone, activer le Visual Builder puis cliquer sur le petit disque violet (avec les 3 petits points blancs). En bas à gauche vous avez 3 petites icônes (bureau, tablette, et smartphone) qui vous permettent de passer d’une vue à l’autre.
Personnaliser la vue de chaque périphérique
Vous pouvez commencer à vérifier la vue mobile smartphone. Cliquer sur l’icône du smartphone, l’écran se réduit.
Commencer par le haut de la page. Le plus souvent vous devrez ajuster la taille des polices qui par défaut est la même que la vue bureau (donc peut-être trop grosse en vue mobile).
Cliquer pour cela sur les paramètres de votre module, puis cliquer sur le petit pinceau qui apparaît à côté de l’élément à modifier. Vous serez ainsi conduit directement au style applicable de l’élément.
Dans l’exemple de l’image c’est la taille du sous-titre « Bienvenue » que nous allons modifier uniquement pour la vue smartphone.
Dans « Sous-titre Taille du texte » cliquer tout d’abord sur l’icône mobile. Ensuite un menu apparait avec les 3 icônes (bureau, tablette, smartphone). Cliquer sur l’icône du Smartphone et modifier la taille. Cette modification de taille s’appliquera uniquement pour cette vue et non pour les autres.
Il vous suffit ensuite de répéter l’opération si nécessaire pour chaque élément de chaque module. Via ce menu d’icônes, vous pouvez passer facilement d’une vue à l’autre.
