Affichage mobile – En-tête et menu extensible

Présentation

La mise en page du menu extensible pour mobile favorise davantage la personnalisation et permet d'afficher les widgets dans l'en-tête et de rendre le menu toujours visible, même lorsque l'utilisateur fait défiler la page vers le bas.
Vous pouvez modifier la disposition de l'en-tête en utilisant des mises en page prédéfinies qui incluent des appels à l'action, comme des boutons, des fonctions « click to call », des icônes de réseaux sociaux et bien plus. Vous pouvez ajouter des widgets dans le menu extensible. Il vous suffit de les faire glisser depuis le volet widgets, vers le menu.
 

Guide

Vous pouvez procéder à une mise à jour vers le nouvel en-tête de l'affichage mobile en cliquant sur l'en-tête dans l'affichage mobile. Une sauvegarde automatique est créée lorsque vous mettez à jour l'en-tête. Remarque : cette étape s'applique uniquement aux sites existants. Les nouveaux sites ne sont pas concernés.

mobileheader1_en-US.png

En-tête de l'affichage mobile

Pour modifier l'en-tête de l'affichage mobile, placez le curseur sur l'en-tête, puis cliquez sur l'étiquette de l'en-tête. Sélectionnez ensuite Edit Design (Modifier le design).

 

L'en-tête de l'affichage mobile offre plusieurs options de mise en page qui permettent d'afficher des widgets, comme les liens vers les réseaux sociaux, les numéros de téléphone, etc. Notez que les mises en page de l'en-tête sont fixes. Vous ne pouvez donc pas ajouter de nouveaux widgets, mais vous pouvez les modifier ou les supprimer.

 

Lorsque vous ajoutez ou utilisez une fonction multilingue sur votre site, d'autres options de mise en page sont disponibles. Elles incluent, notamment, les icônes pour le panier d'achat et la fonction multilingue. Si votre boutique ou l'option multilingue ne sont pas activées, ces mise en page ne s'affichent pas.

mobileheader2_en-US.png

Les options de design de l'affichage mobile incluent d'autres aspects, comme la position et la couleur de l'icône de menu ou l'arrière-plan de l'en-tête.

Navigation mobile

Pour modifier le menu extensible, ouvrez le menu dans l'affichage mobile (avec l'icône représentant un hamburger). L'éditeur de menu s'ouvre automatiquement et vous pouvez le modifier.

 

Plusieurs mises en page sont disponibles pour le menu extensible. Vous pouvez y afficher les liens vers les réseaux sociaux, les coordonnées et bien plus. Vous pouvez ajouter des widgets dans le menu extensible. Vous pouvez aussi ajouter des colonnes et les organiser de manière à les afficher les unes à côté des autres ou les unes sur les autres. Toutefois, lorsque vous passez d'une mise en page à une autre, tout le contenu ajouté dans le menu est supprimé. Seuls les widgets définis dans la mise en page sélectionnée restent.

mobileheader3_en-US.png

Vous pouvez modifier l'effet d'entrée de manière à faire apparaître le menu par le haut ou sur le côté. Lorsque vous modifiez ce paramètre, vous pouvez également modifier la largeur (lors de la sélection de l'effet d'entrée par le côté) ou la hauteur (lors du choix de l'effet d'entrée par le haut).

Alternativement, vous pouvez pousser le site ou afficher le menu au-dessus du site.

 

mobileheader4_en-US.png

Remarques

La dernière ligne de navigation est toujours en bas. Peut-on modifier cela ?

La dernière ligne du menu fait office de pied de page de la section et apparaît toujours en bas, quelle que soit la taille de l'écran du téléphone. Si vous supprimez le contenu de la ligne, vous ne la verrez plus.

J'ai ajouté l'option multilingue, mais je ne la vois pas dans l'en-tête de l'affichage mobile.

Après avoir ajouté l'option multilingue sur le site, le menu extensible est automatiquement ajouté. Pour l'ajouter à l'en-tête, vous devez sélectionner une nouvelle mise en page d'en-tête qui inclut l'option multilingue.

Quelles mises en page de site offrent cette option ?

2 des 5 mises en page pour mobile sont compatibles avec le menu extensible. Lorsque vous sélectionnez une nouvelle mise en page de site, nous créons automatiquement une sauvegarde du site, dans les paramètres de ce dernier.

mobileheader5_en-US.png