Cette astuce va te plaire :

1. Qu’est-ce que va apporter une barre fixe en bas de l’écran mobile d’une page web ?
2. Création design de la barre « full width » (pleine largeur)
3. Alignement de la rangée en ligne et non en bloc (par défaut)
4. Rendre la section « sticky » (collée) en bas de page et visible uniquement sur mobile

Pour la team vlog,

Voici le tuto vidéo du pas à pas

Pour la team blog,

Voici le tuto du pas à pas

La barre sticky, l’UX Design mobilefriendly en puissance !

Aujourd’hui, plus que jamais, il est indispensable de chouchouter l’expérience utilisateur de nos visiteurs mobiles. Nous les appelons les « mobinautes ». Ils représentent, en 2022 (selon une étude menée par le site BDM), 92,1% des internautes ! Ce nombre est juste incroyable ! En 2019, lors mes études en webmarketing, on était aux alentours des 80%.
Et là, tu es comme moi, tu te dis « Ok, je vais chouchouter à fond ma version mobile ! »
Il existe mille et une façons d’optimiser ton site web sur sa lecture mobile. Aujourd’hui, je m’attarde sur une technique que j’aime beaucoup et que j’intègre quasi systématiquement sur toutes mes créations !

Elle est à adapter selon les objectifs du site et de chaque page. Elle ne doit en aucun cas desservir la lecture, la compréhension et les objectifs marketing du site ! Donc avant de te lancer dans sa création, pose-toi ces quelques questions :

• Est-elle utile pour toutes pages de mon site ?
• Quelle action est intéressante à proposer en un clic ?
• Est-ce un lien externe, interne ?
• Est-ce que j’utilise une icône, un bouton, un texte ?

Création du design de la barre de navigation

Dans cette première étape tu vas designer ta barre en pleine largeur et intégrer les « call to action » (appels à l’action) dont tu as besoin. Pour te faciliter la vie, mets-toi en construction mobile directement.

1. Au sein de ta page web rendez-vous sous la dernière section avant ton « footer » (pied de page),
2. Crée une section « normale » et intègre deux colonnes (à adapter selon tes besoins),
3. Intègre les éléments dont tu as besoin et centre les si besoin,
4. Dans ta section, rendez-vous dans les marges internes et mets 0px en haut et en bas.
5. Dans ta rangée, renseigne 15px de marges internes haut et bas (à adapter selon tes besoins)
6. Toujours dans ta rangée, rendez-vous dans « dimensionnement » et mets largeur à 100%

Je n’ai pas eu à la faire dans mon exemple, mais tu peux travailler tes bordures en leur donnant une largeur, une couleur, des arrondis. Tu peux également jouer sur des boites d’ombres.
Moi, j’ai simplement donné une couleur de fond à ma rangée ainsi qu’une bordure à droite de ma colonne N°1.
Tout ça dépend réellement de ton univers visuel, donc laisse parler ta créativité.

Affichage en ligne et non en bloc de ta rangée

Dans cette deuxième étape, tu vas annuler le responsive par défaut (sur la version mobile, chaque élément se place les uns en dessous des autres) et demander à tes éléments de te mettre les uns à côté des autres.

1. Dans ta rangée, rends-toi sur l’onglet « avancé » / « personnaliser CSS »
2. Colle ce code : display:flex;flex-direction:row;flex-wrap:nowrap
3. Tadam ta rangée est alignée

Fixer la barre en pied de page et la cacher sur les autres devices

Je vais te montrer dans cette dernière étape comment faire en sorte que ta barre soit toujours visible lorsque l’on scrolle dans ta page (défilement). Et on va la rendre visible uniquement si on visite ton site avec un téléphone portable.

1. Dans ta section, tu vas te rendre dans l’onglet « avancé / scroll effects »
2. Sélectionne « stick to bottom »
3. Donne une limite au sticky sur le « body area » (ça évitera une mauvaise lecture du pied de page)
4. Rends-toi maintenant sur l’onglet « avancé / visibilité » et coche les cases « tablette » et « ordinateur » pour désactiver sa lecture.

Voilà, il ne te reste plus qu’à vérifier que tout fonctionne bien !
Si tu ne l’as pas encore lu, je t’invite à voir comment tu peux améliorer la lecture du menu mobile Divi sur cet article : Lire l’article