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.

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.

Remarque

Si le site est agencé de la même façon sur les affichages ordinateur et tablette (soit menu extensible, soit barre supérieure), les modifications s'appliqueront aux deux. Si en revanche la mise en page du site est différente, chaque affichage doit être configuré séparément.

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.

Remarque

Cette étape s'applique uniquement aux sites existants et ne concerne pas les nouveaux sites.

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.

Remarque

Cette étape s'applique uniquement aux sites existants et ne concerne pas les nouveaux sites.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0

Feedback on this article

0 commentaire

Vous devez vous connecter pour laisser un commentaire.

×

Please Log in as a Pro

Priority Phone Support is available exclusively to Pros. Log in to your Pro account now to see our international support numbers.

Log In
Not a Pro? Purchase a Pro plan!