Sitebuilder: En-tête et menu extensible

Vous pouvez ajouter un menu extensible sur ordinateur et sur tablette pour créer des sites modernes dotés d’un design flexible. Nous vous proposons plusieurs dispositions de menu extensible que vous pourrez ensuite personnaliser à votre guise en ajoutant des widgets, des lignes et des colonnes.

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.

Vous pouvez modifier la mise en page de l’en-tête en utilisant des mises en page prédéfinies qui incluent des boutons, des fonctions « click to call », le panier, des icônes de réseaux sociaux et bien plus. Vous pouvez ajouter des widgets dans le menu extensible depuis le volet widgets.

DANS CET ARTICLE:

• Ordinateur et tablette
• En-tête de l’affichage mobile

Ordinateur et tablette

Choisir la mise en page du menu extensible

Pour choisir la mise en forme du menu extensible de votre site :

1. Dans le panneau de gauche, cliquez sur « Design ».
2. Cliquez sur « Mise en page du site ».
3. Dans la section Ordinateur, sélectionnez « Menu extensible ».
4. Dans la section « Tablette », sélectionnez la mise en page de gauche.

En-tête pour ordinateur et tablette

Une fois la mise en page du menu extensible sélectionnée, une icône en forme de hamburger apparaît dans l’en-tête de votre site. Il vous suffit de cliquer sur celle-ci pour afficher le menu extensible.

Pour modifier l’emplacement du menu extensible dans l’en-tête :

1. Placez le curseur de la souris sur l’en-tête et cliquez sur « En-tête », puis sur « Modifier le design ».
2. Dans la section Mise en page, cliquez sur « Gauche » ou « Droite ».

Menu extensible pour ordinateur et tablette

Pour configurer le menu extensible :

1. Cliquez sur l’icône en forme de hamburger pour ouvrir l’éditeur « Design du menu ».
   
2. Dans l’onglet Mise en page, cliquez sur la mise en page existante pour sélectionner lamise en page du menu.
3. L’onglet Style vous permet d’accéder aux options suivantes :
   • Entrer depuis. Sélectionnez « Haut » ou « Côté ».
   • Effet d’entrée. Sélectionnez « Couverture » ou « Appuyer ».
   • Largeur. Déplacez le curseur afin de définir la largeur du menu extensible lorsque celui-ci est développé. La largeur du menu est définie en pourcentage afin de s’adapter à toutes les tailles d’écran.
   • Fond. Configurez une couleur ou une image d’arrière-plan.
   • Couleur de l’icône Fermer. Choisissez la couleur de l’icône Fermer et de son arrière-plan.
4. Dans l’onglet « Espacement », modifiez les marges.

Le menu extensible peut comporter jusqu’à 3 lignes personnalisables.

Si vous ne trouvez pas les fonctionnalités mentionnées ci-dessus, il se peut que vous utilisiez l’ancien en-tête. Pour le mettre à jour, cliquez dessus dans l’affichage ordinateur et tablette. Une sauvegarde automatique est créée lors de la mise à jour.

En-tête de l’affichage mobile

Pour modifier l’en-tête de l’affichage mobile :

1. Survolez l’en-tête, cliquez sur l’étiquette « En-tête », puis sur « Modifier le design ».
2. Dans l’onglet « Mise en page », cliquez sur la mise en page existante pour sélectionner lamise en page du menu. 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. 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 mises en page ne s’affichent pas.
3. Cliquez sur « Gauche » ou « Droite » afin de définir la position de l’icône de menu.

Navigation mobile

Pour modifier le menu extensible, ouvrez le menu dans l’affichage mobile. L’éditeur de menu s’ouvre automatiquement et vous pouvez le modifier.

1. Dans l’onglet Mise en page, cliquez sur la mise en page existante pour sélectionner lamise en page du menu. 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.
2. L’onglet Style vous permet d’accéder aux options suivantes :
   • Entrer depuis. Sélectionnez « Haut » ou « Côté ». Si Haut est sélectionné, déplacez le curseur « Hauteur ». Si Côté est sélectionné, déplacez le curseur « Largeur ».
   • Effet d’entrée. Sélectionnez « Couverture » ou « Appuyer ».

Mises à jour apportées aux mises en page sur mobile

Le 8 septembre 2019, trois mises en page mobiles peu utilisées ont été supprimées. Les deux mises en page restantes sont plus actuelles et pertinentes.

Si vous utilisez actuellement l’une des deux mises en page supprimées pour votre site et que vous sélectionnez une autre mise en page, la mise en page supprimée disparaîtra. Il vous sera toutefois possible de la restaurer à partir d’une sauvegarde de votre site.

Pour mettre à jour l’en-tête de l’affichage mobile, cliquez dessus dans l’affichage mobile. Une sauvegarde automatique est créée lors de la mise à jour.