Personnaliser et gérer votre menu mobile

2148 vues 3 minutes

Créer un site responsive, adapté à tous les supports (ordinateurs, tablettes, smartphones et même télévision) est depuis des années une étape obligatoire.

Un internaute doit pouvoir aussi bien naviguer sur votre site depuis son ordinateur que depuis son smartphone.

Ça tombe bien, chez SiteW, l’ensemble des sites créés sont 100% mobile friendly

Pour aller encore plus loin, notre belle équipe de développeurs met à disposition sur votre site, un menu mobile.

Menu mobile : à quoi ça sert ?

Le menu mobile vous permet d’afficher un menu optimisé de votre site sur smartphones, tablettes… Le menu mobile est personnalisable, vous pouvez tout choisir : votre site, votre style. 

Fonctionnalité disponible pour l'ensemble des formules
Info premium
Plus d'excuse pour configurer un site responsive qui vous ressemble.

Configurer son menu mobile

Pour configurer votre menu mobile, deux possibilités : 

  1. En sélectionnant le menu mobile depuis la version mobile sur l’éditeur

  2. En utilisant le raccourci “Menu mobile” depuis le panneau Design du site.

Pour aller plus loin
Info stepup

Le menu mobile est coché par défaut afin que vous puissiez personnaliser le design de votre menu mobile, si vous souhaitez le désactiver, décochez simplement “Afficher le menu mobile”. 

barre mobile sitew

Personnaliser son menu mobile 

Tout miser sur le design

L’ensemble du contenu de votre menu mobile est personnalisable, dans les moindres détails.

personnalisation barre mobile

Vous pouvez ensuite définir la hauteur de votre menu, la couleur de fond ainsi que la couleur des icônes.

💡 Le réglage de la hauteur du menu peut se faire en utilisant le curseur dans le panneau design ou en redimensionnant directement la barre vers le bas.

Si vous le souhaitez, vous pouvez personnaliser l’ombrage en cliquant sur “Ombre”. Il ne vous reste ensuite plus qu’à régler la couleur, l’espacement et la distance de flou. 

Concernant le style d’affichage, vous avez le choix entre deux solutions :

  1. Afficher le menu sur toute la hauteur de l’écran (modèle par défaut)

  2. Afficher le menu en fonction de la hauteur du contenu.

Du côté des couleurs, vous avez la possibilité de modifier le fond de votre menu, mais aussi la couleur du texte affiché.

 barre mobile exemplesite responsive exemple

 

  • Normal : il s’agit de la couleur par défaut

  • Sélectionné : il s’agit de la couleur du texte de la page sur laquelle l’internaute est. 

Vous savez à présent personnaliser le design de votre menu mobile. Mais, on ne va pas s’arrêter là. Il vous est aussi possible d’ajouter autant d’icônes que vous le souhaitez à votre menu mobile (chouette 🙌).

Ajouter des icônes à votre menu mobile

Choisissez les icônes que vous souhaitez faire apparaître sur votre menu mobile et personnalisez-les.

Petit tour d’horizon rapide des boutons disponibles : 

  • Panier : permet à vos internautes d’atterrir directement sur leur panier d’achat.  

  • Adresse : ouvre l’application carte et vous permet d’ajouter un GPS à votre menu mobile.

  • Contact : redirige le visiteur vers une application mail pour vous contacter.

  • Appel : redirige le visiteur vers une application téléphonique pour vous joindre grâce au numéro de téléphone renseigné.

  • Lien : idéal pour ajouter un lien vers une page spécifique de votre site, d’un site externe, d’un document ou encore vers une image.

  • Espacement : permet de séparer les icônes. La taille de l’espacement est définie automatiquement selon la taille des icônes.

  • Image : ajout d’une image ou encore, d’un logo avec un lien dessus.

💡 Pour chaque icône, vous avez la possibilité d’utiliser l’icône prédéfinie ou d’en choisir une grâce à notre galerie d’icône. 

 

Vous pouvez aussi choisir de rendre l’icône visible sur mobile vertical ou mobile horizontal ou, seulement sur l’un des deux. Pour cela, cliquez sur le bouton (Panier par exemple) et choisissez la visibilité voulue. Si l’icône est bleue, elle est alors visible sur le support en question. 

boutons barre mobile

Gérer son site mobile

Pour gérer votre site mobile, plusieurs options s’offrent à vous :

  • L’optimisation mobile automatique : c’est le choix que l’on vous recommande pour que votre site entier soit mobile friendly instantanément.

  • La personnalisation manuelle.

  • Identique à la vue Ordinateur.

menu mobile auto

Pour aller plus loin
Info stepup
Jeter un coup d'oeil à notre article dédié à la Vue mobile automatique
Vous avez désormais un atout en plus pour créer un site optimisé pour mobiles, smartphones et tablettes, en avant ! 🏎💨

Dernière mise à jour : 16 février 2022

Quoi de neuf ?
Les dernières mises à jour et nouveautés sur notre outil, après un décryptage poussé auprès de nos développeurs.