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 prédéfinie Ordinateur, sélectionnez la mise en page Menu extensible.
  4. Dans la section prédéfinie Tablette, sélectionnez la mise en page avec le menu extensible.

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 prédéfinie 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. Vous pouvez modifier le remplissage dans l'onglet Espacement.

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

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.