Responsive Divi

Comment adapter son site web Divi au mobile ?

Marlène

1 mai 2019

Maintenant que vous avez installé Divi sur votre WordPress et que vous avez constuit vos pages, vous allez pouvoir faire des vérifications du bon fonctionnement de celui-ci.

  • Les liens dirigent-ils tous au bon endroit ?
  • Les images sont-elles suffisamment optimisées pour le web et possèdent-elles une balise alt pour le référencement ?
  • La version mobile de votre site Divi est-elle aussi efficace que votre version desktop ?

C’est ce dernier point du mobile friendly que nous allons développer dans cet article.

Une augmentation de l’utilisation du mobile sur le web

D’après une étude Mediametrie de 2019, le smartphone serait le premier écran pour se connecter à Internet. Ainsi, plus de 33 millions de Français l’utiliseraient chaque jour.

Aujourd’hui, il est donc indispensable d’avoir un site web responsive. Celui-ci doit être adapté à tous les écrans : ordinateurs, tablettes et mobiles. Les habitudes de navigation n’étant pas les mêmes sur les petits écrans, il peut être intéressant d’ajuster la présentation de son site web selon les résolutions d’écran des internautes.

Divi : une version mobile native au thème

Modification du menu

Par défaut et en version mobile, le menu de votre site est sous format hamburger. Pour le faire apparaître, l’internaute doit cliquer sur les 3 traits en haut de page. La formule « Sélectionner une page » accompagne cette icône.

 

Pour personnaliser cette structure de navigation, l’expression « Sélectionner une page » peut être modifié. Par exemple, vous pouvez le changer par le mot « Menu ». Le tutoriel de Divi community vous explique comment modifier ce libellé.

Une autre adaptation consiste à refermer les sous-menus pour une meilleure visibilité sur mobile. Ainsi, tous les items de niveau 1 de votre menu sont visibles à l’écran sans avoir besoin de scroller. 

Alignement des réseaux sociaux dans le footer

Pour s’adapter à une largeur d’écran plus petite, les modules dans une seule et même ligne se superposent sur smartphone. Il peut vous être utile de conserver le rendu des colonnes desktop sur ce format plus petit. Par exemple, si votre footer contient les icônes de vos réseaux sociaux, elles sont par défaut disposées en colonnes et non en ligne. Pour corriger cela, Josh Hall propose deux bouts de codes CSS.

Pour résumer, il faut ajouter une classe à la ligne concernée. Dans son tutoriel, Josh Hall donne le nom « three-columns ». Ensuite, une partie de code CSS est insérée dans la partie personnalisation de Divi.

@media only screen and (max-width: 980px) {
 .three-columns .et_pb_column {
 width: 33%!important;
}
}
@media only screen and (max-width: 479px) {
 .three-columns .et_pb_column {
 width: 50%!important;
 }
 }

Ajustement des éléments selon la longueur des pages

Sur les mobiles, les internautes peuvent avoir moins de temps pour trouver l’information qu’ils recherchent. Il peut alors être intéressant de ne pas afficher tous les éléments que vous avez sur votre site desktop afin de limiter le scroll.

Si une image n’est pas indispensable à la conversion, elle peut être invisible sur les formats mobiles. Pour cela, rendez-vous dans les paramètres de votre image > avancé puis visibilité. En cochant l’option téléphone, votre image n’apparaîtra pas les plus petits formats.

Vous pouvez également adapter la taille des images pour une meilleure expérience utilisateur.

 

visibilite image parametres image Divi

Taille des typographies

De la même manière, les polices de caractères peuvent être adaptées sur mobile pour favoriser une meilleure lisibilité. L’onglet style du texte vous permettra de modifier la taille de chacun des devices.

Taille des banières

Enfin, les banières sont également à adapter sur mobile. En effet, le rapport largeur/hauteur étant variable sur les différentes tailles d’écran, le sujet principal de votre image peut être décalé sur un smartphone. Vous pouvez alors avoir une image spécifique sur desktop et une autre sur mobile en jouant sur le paramètre de visibilité.

Grâce au thème Divi, vous avez un site web parfaitement adapté au formats mobiles, que ce soit en mode portrait ou paysage. Si vous avez effectué des personnalisations au niveau du webdesign dans vos feuilles de style, différents points sont à vérifiés pour que votre site reste ergonomique et que le taux de conversion soit optimisé.

Plus de possibilités avec Divi Pixel

Grâce à Divi Pixel, vous pouvez facilement customiser votre site sur mobile :

  • Modifier l’apparence de l’icône hamburger
  • Ajouter un bouton dans le menu mobile
  • Modifier les breakpoints pour tablettes et mobiles
  • Cacher l’icône de recherche spécifiquement sur votre site web mobile
  • Et bien plus encore !

Pour découvrir toutes les fonctionnalités disponibles, cliquez sur la bannière ci-dessous (lien affilié).

bannière divi pixel
dégradé noir gris