Introduction
Utilisation de Sitely
Éléments
Comment faire
Un menu, en termes de site Web, est essentiellement une aide à la navigation qui permet aux utilisateurs de trouver des informations sur votre site. Les menus ont évolué au fil du temps et sont désormais conçus avec des objectifs marketing bien en tête. Dans certains milieux de l’industrie, on parle désormais de « parcours visiteur » — soigneusement conçu pour encourager les utilisateurs à suivre un itinéraire particulier à travers un site afin d’atteindre un objectif. Mais, quelle que soit leur construction et leur finalité, ils restent fondamentalement la même chose : une série de liens facilement accessibles qui mènent les utilisateurs d’une page à une autre. L’élément de menu dans Sitely ressemble à ceci.
Lorsqu’il est d’abord ajouté au canevas d’un site nouveau et vide, il a une apparence par défaut comme ceci.
Il s’agit d’un seul bouton portant le nom Accueil, indiquant qu’il s’agit d’un lien vers la page d’accueil du site. À mesure que de nouvelles pages sont ajoutées au site, le menu s’agrandit pour inclure ces nouvelles pages au fur et à mesure — c’est le comportement par défaut de l’élément de menu. Il est important de noter qu’il s’agit de liens de « niveau supérieur » et qu’un lien sera créé pour chaque page de niveau supérieur ajoutée au site. Si, toutefois, un GROUPE DE PAGES est ajouté au site, le lien deviendra un lien de GROUPE DE PAGES et les pages ajoutées au GROUPE DE PAGES deviendront des éléments de sous-menu du lien de GROUPE DE PAGES. Voici un exemple d’un menu avec une page d’accueil et un GROUPE DE PAGES comportant deux pages à l’intérieur du Groupe de pages.
Lorsque vous ajoutez des groupes de pages à un site Web, le lien du groupe de pages n’ouvrira pas réellement une page physique lorsqu’on clique dessus. À la place, il ouvrira le menu déroulant pour afficher les pages de ce groupe. À titre d’exemple pratique, imaginons que nous voulons un site simple composé d’une page d’accueil, d’une page À propos, d’un groupe Produits avec deux pages — une pour les smartphones et une pour les tablettes. Nous pouvons également vouloir une page Contact. Pour que Sitely crée automatiquement ce menu pour nous, il suffit d’ajouter les pages et les groupes dans le panneau Pages à gauche de l’interface Sitely. Lors de l’ajout de pages de niveau supérieur, cliquez sur l’icône ‘+’ en bas du panneau des pages et choisissez Niveau supérieur dans le sélecteur déroulant à côté du bouton Ajouter une page.
Pour ajouter un nouveau GROUPE DE PAGES, cliquez sur le bouton Ajouter un Groupe de pages. Cela créera un nouveau groupe de pages sans pages. Une fois qu’un groupe de pages est créé, vous pouvez le renommer dans le panneau Pages à gauche de l’écran - il suffit de cliquer sur le nom du groupe et de le renommer, dans notre exemple, Produits.
Vous pouvez maintenant ajouter les deux pages de produits pour Smartphones et Tablettes en cliquant sur l’icône ‘+’ en bas du panneau des pages, puis en choisissant ‘Produits’ dans le sélecteur déroulant à côté du bouton Ajouter une page. Vous pouvez renommer les pages de la même manière que vous avez renommé le groupe : cliquez simplement sur le nom de la page et remplacez-le par celui que vous souhaitez. Vous pouvez aussi sélectionner les pages une par une et définir le nom de la page dans l’onglet Pages situé à droite de l’écran.
Une fois vos pages et groupes de pages correctement nommés, vous pouvez ajouter l’élément de menu à votre page d’accueil. Il ressemblera à quelque chose comme ceci.
Ce que Sitely a fait, c’est rassembler vos noms de page et de groupe et créer le menu pour vous. De plus, si vous créez d’autres pages et/ou groupes par la suite, ils pourront être ajoutés automatiquement au menu à mesure que vous construisez votre site. Assurez-vous simplement que la case Ajout automatique des pages est cochée dans le panneau de style. L’option devient visible dans le panneau de style lorsque vous sélectionnez le menu sur le canevas.
Le panneau de style vous offre également des options supplémentaires. Par exemple, vous pouvez réorganiser le menu en faisant simplement glisser les éléments vers le haut ou vers le bas de la liste. Par exemple, pour placer le groupe Produits AVANT la page Contact, il suffit de faire glisser l’étiquette Produits vers le haut de la liste. En cliquant sur la petite flèche à côté de l’élément Produits, vous ferez apparaître les deux pages de produits dans la liste. Vous pouvez aussi passer d’un menu horizontal à un menu vertical en cliquant simplement sur le bouton approprié. En outre, vous pouvez préférer un menu compact, ou « hamburger » (notamment pour vos pages mobiles). Cliquez simplement sur l’icône hamburger pour modifier le menu.
Voici le menu vertical
lorsqu’il est réduit
Voici le menu vertical
lorsqu’il est développé
Voici l’option de menu compact. Les éléments sont révélés lorsque l’icône est cliquée
Après avoir créé un menu, Sitely vous permet de décider où et sur quels appareils il doit être affiché. Tout cela se règle dans le panneau Disposition. Avec le menu sélectionné sur le canevas, rendez-vous dans l’onglet Disposition pour voir toutes les options disponibles.
La section Placement vous permet de choisir d’afficher le menu sur l’appareil sur lequel vous travaillez actuellement. Si vous désélectionnez cette option, le menu sera masqué uniquement sur l’appareil courant, mais restera visible sur les autres appareils.
La section Visibilité vous permet de choisir sur quelles pages afficher le menu. Vous pouvez choisir d’Afficher uniquement sur la page actuelle, sur toutes les pages du groupe de pages actuel, ou d’Afficher sur toutes les pages du site. Vous avez également l’option de faire déplacer le menu avec le bas de page. Cette option est idéale si vous avez un menu de liens dans le pied de page de vos pages Web et que vous souhaitez le maintenir collé en bas des pages.
Pour la navigation principale de la plupart des sites, vous souhaiterez que votre menu soit disponible sur chaque page afin que les utilisateurs puissent y accéder où qu’ils se trouvent sur votre site. Cependant, il peut y avoir des situations où vous voulez que des menus différents soient disponibles sur différentes pages. Ces options vous donnent un contrôle total sur cet aspect de votre site Web.
Certains paramètres de menu disposent d’options « par appareil », comme le style du menu. Vous pouvez définir votre menu de bureau en horizontal, tandis que sur votre smartphone ou votre tablette, il peut être défini comme un menu compact, ou hamburger. Dans certains cas, vous pouvez souhaiter placer un menu compact sur toutes les variantes d’appareils ; c’est une option de plus en plus populaire, car les systèmes d’exploitation de bureau et d’ordinateur portable commencent à ressembler davantage à leurs homologues tablettes/smartphones — la façon dont vous présentez vos menus vous appartient, mais quel que soit votre choix, Sitely a ce qu’il faut.
Si vous ne souhaitez pas créer vos pages et groupes de pages dès le départ, vous pouvez créer votre menu manuellement pour vous donner un meilleur contrôle sur votre structure de navigation. Pour ce faire, ajoutez l’élément de menu au canevas et décochez la case Ajout automatique des pages dans le panneau de style. Vous serez alors libre d’ajouter des pages et des groupes manuellement.
Le lien Accueil est automatiquement créé pour vous et pointe vers la page d’accueil, ou la page index.html de votre site Web. Pour ajouter un nouveau lien de page, cliquez sur l’icône ‘+’ en bas du panneau du menu. Cela créera un nouveau lien nommé Élément. Vous pouvez changer l’étiquette de l’élément dans la zone Libellé de l’élément. Continuez à ajouter de nouveaux éléments de NIVEAU SUPÉRIEUR de la même manière.
Pour créer un menu déroulant, ajoutez d’abord un nouvel élément de niveau supérieur au menu pour servir de lien de menu déroulant. Avec cet élément sélectionné, cliquez sur l’icône Dossier. Cela créera une page sous le menu déroulant et placera une petite flèche à côté du nom du lien de menu déroulant. Votre lien de menu déroulant deviendra alors un lien ouvrant un menu déroulant de liens de pages. Pour ajouter d’autres pages au menu déroulant, cliquez sur l’une des pages contenues puis cliquez sur l’icône ‘+’. Ajoutez autant de pages que nécessaire.
Pour revenir à l’ajout d’éléments de niveau supérieur, veillez à sélectionner l’un des liens de niveau supérieur existants avant de cliquer sur l’icône ‘+’. Lorsque tous vos liens sont en place, vous pouvez commencer à déplacer les éléments du menu dans l’ordre souhaité pour le menu final. Il suffit de les faire glisser vers le haut ou vers le bas de la liste.
Lorsque vous créez un menu manuellement, vous devez définir l’action Au clic pour chaque élément de menu. En général, pour la plupart des menus de sites Web, cette action sera Aller à une page de ce site. Cependant, vous êtes libre de choisir PARMI TOUTES les actions Au clic que propose Sitely. Lorsque vous utilisez l’option Aller à une page de ce site, vous pourrez choisir la page dans une liste déroulante de toutes les pages disponibles. Cela suppose que les pages aient déjà été créées, vous voudrez donc peut-être attendre d’avoir terminé votre site avant d’ajouter les liens de page. En option, vous pouvez spécifier un emplacement de défilement dans la page liée. Dans la plupart des cas, le lien pointera simplement vers le Haut de la page comme illustré ici. Dans certains cas, vous pouvez souhaiter que la page liée S’ouvre dans un nouvel onglet. C’est une fonctionnalité que vous utiliserez généralement si le lien doit ouvrir un lien externe plutôt qu’une page de votre site.
Vous créeriez également un menu manuellement s’il est destiné à être un menu complémentaire, par opposition au menu de navigation principal du site. Par exemple, vous pouvez avoir un menu principal qui propose des liens vers les principales pages d’atterrissage de votre site. Un exemple typique serait une page d’atterrissage Produits qui met en avant les derniers produits d’un large éventail de familles de produits. Cependant, vous pouvez souhaiter ajouter à cette page d’atterrissage un menu complémentaire permettant aux utilisateurs de sélectionner des familles de produits spécifiques. Sur un site de mode, un tel menu peut inclure des liens vers Mode homme, Mode femme et Mode enfant. Chacun de ces liens amènera les utilisateurs à la page correspondante présentant leur sélection d’articles de mode.
Lorsqu’un menu complémentaire est ajouté pour la première fois à une page, il contient par défaut un lien vers la page d’accueil. De toute évidence, cela n’est pas nécessaire puisque vous avez déjà un tel lien dans votre navigation principale. Vous mettrez donc en surbrillance le lien Accueil dans le volet du menu du panneau de style et cliquerez sur l’icône ‘-’ pour supprimer ce lien du menu complémentaire. Vous pouvez également souhaiter faire de même dans votre navigation principale si, par exemple, vous avez un logo dans votre barre de navigation qui sert de lien vers la page d’accueil. Pour supprimer ces liens, vous devrez décocher la case Ajout automatique des pages avant de pouvoir les supprimer.
Comme pour tout le reste dans Sitely, vous pouvez appliquer toute une gamme d’options de style à vos menus. Toutes les options de style se trouvent dans le désormais familier panneau de style de Sitely. Vous pouvez appliquer des couleurs d’arrière-plan, ajuster les polices et les tailles, ajouter des bordures et des angles arrondis, et définir l’alignement du texte. En appliquant différentes options de style, vous pouvez créer un menu purement textuel, un menu qui ressemble à une série de boutons ou d’onglets, et appliquer des effets au survol de la souris. Voici quelques exemples.
Texte simple avec bordure inférieure
mise en évidence au survol de la souris
Style « pilule » avec remplissage de couleur
au survol de la souris
Style onglet avec changement de couleur
au survol de la souris
Style bouton avec changement de couleur
au survol de la souris
En plus des options de style normales, il existe quelques options supplémentaires spécifiques aux menus. Voyons-les maintenant.
La première option est Même taille. Cocher cette case rendra tous les liens du menu de même taille. Si cette option est décochée, les liens seront dimensionnés individuellement selon leur contenu textuel. Voici les différences.
Il existe également une option d’espacement des éléments qui définit la quantité d’espace entre les éléments du menu.
Viennent ensuite les options de sous-menu. Elles peuvent être définies différemment selon les appareils. La première option spécifie le placement des éléments du sous-menu par rapport aux liens de niveau supérieur. Ces choix varient selon le type de menu sur lequel vous travaillez. Ici, nous voyons les options pour un menu horizontal. Les liens du sous-menu peuvent être placés au-dessus, en dessous, à gauche ou à droite de l’élément de niveau supérieur. Les petites icônes offrent une représentation graphique de chaque option disponible. Cette section vous permet aussi de définir l’espacement des éléments ainsi que la largeur et la hauteur des éléments du sous-menu.
Les options pour le menu vertical sont très similaires, mais avec des possibilités de placement du sous-menu différentes. Là encore, les petites icônes vous donnent une représentation graphique de la disposition par rapport aux éléments de niveau supérieur.
Si vous travaillez avec un menu compact, vous verrez des options similaires, avec un choix de placement horizontal ou vertical des éléments du sous-menu. Dans le cas d’un menu compact, l’élément de niveau supérieur est l’icône qui déclenche le menu lorsqu’on clique dessus.
L’icône elle-même peut être modifiée en sélectionnant l’élément de menu dans la liste du menu dans le panneau de style. Si vous ne souhaitez pas utiliser d’icône, vous pouvez simplement avoir un lien textuel. Donnez simplement un libellé à l’élément de menu et retirez l’icône. Votre menu compact sera alors un simple lien textuel comme ceci. Lorsque ce lien est cliqué, les éléments du sous-menu apparaissent.
Remarque : si vous avez l’intention d’utiliser une icône, veillez à supprimer le libellé du menu dans le panneau de style afin d’éviter qu’il ne s’affiche sous ou au-dessus de votre icône.
Lorsque vous créez une structure de navigation pour vos sites Web, il y a quelques éléments à prendre en compte, en particulier si vous voulez rendre la navigation agréable pour vos utilisateurs. La première chose à considérer est la manière dont votre menu est présenté aux utilisateurs. Dans la mesure du possible, essayez d’intégrer votre menu dans un bloc de navigation qui comprend un logo, un arrière-plan et toute autre information générale que vous souhaitez présenter aux utilisateurs. Dans l’exemple ci-dessous, le menu n’est qu’un élément au sein d’un bloc de navigation.
Il se compose d’une image de logo avec une action au clic pour aller à la page d’accueil, d’un numéro de téléphone avec une action au clic pour appeler ce numéro, d’un bloc d’arrière-plan uni, et de l’élément de menu lui-même avec tous ses liens de page. Ces éléments ont été groupés pour former un seul élément pouvant être positionné sur la page. De plus, en tant qu’élément groupé, il peut être fixé en haut de la page, le maintenant visible pour les utilisateurs lorsqu’ils font défiler la page. Vous configurez cela en sélectionnant le groupe sur le canevas puis en cochant l’option Défilement personnalisé dans le panneau de style. Cela fera apparaître l’option Coller en haut de la page.
Essayez de limiter le nombre d’éléments de niveau supérieur. Proposer trop de choix sous forme d’options de menu déroulant peut décourager les utilisateurs de poursuivre leur navigation. Essayez de conserver environ cinq ou six liens de niveau supérieur et, si vous avez des menus déroulants, limitez le nombre d’options à quatre ou cinq au maximum. Si vous devez absolument présenter un grand nombre d’options, peut-être sur un site e-commerce avec de nombreuses catégories de produits, envisagez plutôt de créer un méga-menu. Celui-ci peut être créé dans un bloc de disposition Sitely ou une fenêtre contextuelle qui devient visible lorsqu’un lien de menu de niveau supérieur est cliqué. Vous voyez des menus de ce type sur de nombreux sites avec plusieurs groupes de produits, comme celui illustré ci-dessous.
Lorsque vous créez des liens de menu déroulant avec un grand nombre d’éléments, gardez à l’esprit que vous devrez probablement appliquer un arrière-plan aux liens du menu déroulant. Si vous les laissez transparents, ils peuvent devenir difficiles à lire pour les utilisateurs, car le menu déroulant recouvrira probablement d’autres éléments de la page lorsqu’il sera activé.
Veuillez signaler toute lacune dans cette documentation et nous la corrigerons dès que possible !
Mis à jour pour Sitely 6
Droits d'auteur ©2025 Crinon SRL
Ce site utilise des cookies.
Veuillez consulter notre politique de confidentialité pour en savoir plus.
