Comment personnaliser l'en-tête de mon site web
L’en-tête est la barre de navigation principale de votre site. Il joue un rôle clé en mettant en avant les pages ou sections les plus importantes de votre site web, et en les rendant facilement accessibles à vos visiteurs.
Dans ce bref tutoriel, vous apprendrez comment personnaliser votre en-tête.
Comment personnaliser le contenu de l’en-tête
- Accédez à Site Admin > Website Builder, puis cliquez sur le bouton Éditer le site web.
- Cliquez sur l’arrière-plan de l’en-tête (et non sur le logo ni sur le menu de navigation) : le menu Modifier l’en-tête apparaîtra sur la droite. Vous pourrez y personnaliser les différents éléments et paramètres de la zone d’en-tête.
Dans l’onglet Général, vous pouvez configurer les paramètres suivants :
- Mise en page de l’en-tête : choisissez l’une des options de mise en page disponibles. Centré, à gauche et à droite contrôlent uniquement la position du menu de navigation, tandis que l’option Logo en haut place le logo au-dessus du menu de navigation. Si vous disposez d’un plan Ecommerce, vous verrez également l’option de mise en page Grande barre de recherche, qui affiche une barre de recherche bien visible dans l’en-tête.
- En-tête fixe : activez l’option En-tête fixe pour maintenir votre en-tête en haut de la page lorsque les visiteurs font défiler.
- Favicon : téléchargez votre image favicon pour afficher l’icône de votre marque dans les onglets du navigateur et les marque-pages.
Pour personnaliser les composants qui apparaissent dans l’en-tête, sélectionnez l’onglet Composants. Vous pouvez activer ou désactiver :
- Afficher la barre supérieure pour afficher une barre au-dessus de votre en-tête pour afficher une annonce, des appels à l’action ou des icônes de réseaux sociaux.
- Afficher le logo pour choisir d’afficher ou non votre logo.
Pour personnaliser la couleur de l’en-tête, sélectionnez l’onglet Design et choisissez l’une des couleurs de palette prédéfinies.
Vous pouvez également activer En-tête transparent pour rendre l’arrière-plan de l’en-tête transparent, permettant à votre section hero ou au contenu supérieur de s’afficher en arrière-plan.
Comment personnaliser le logo de l’en-tête
- Sélectionnez le logo. Un menu avec les paramètres du logo apparaîtra, dans lequel vous pouvez :
- Choisir d’afficher votre logo sous forme d’image ou de texte.
- Si vous choisissez de l’afficher sous forme d’Image, vous pouvez télécharger le logo de votre site web et régler son échelle.
- Vous pouvez également choisir de l’afficher sous forme de texte ; dans ce cas, vous pouvez indiquer le titre du site, choisir le style de police et définir l’échelle du logo.
Comment personnaliser le menu de navigation de l’en-tête
- Pour modifier le type de menu, cliquez sur l’arrière-plan du menu (pas sur le logo ni sur l’en-tête) et la fenêtre pop-up Modifier le type de menu apparaîtra. Vous pouvez y choisir entre un Méga menu, qui s’étend sur toute la largeur de l’écran, ou un Menu déroulant, qui affiche un simple menu déroulant sous l’élément sélectionné. Vous pouvez également activer Afficher l’icône d’expansion du menu pour afficher une flèche sur les éléments disposant de menus déroulants.Ю
- Pour gérer le contenu du menu de votre site, ouvrez l’onglet Navigation en sélectionnant Nav dans le menu de gauche. Vous pouvez y ajouter, modifier ou supprimer des éléments de menu, les réorganiser par glisser-déposer et les imbriquer sur trois niveaux maximum pour créer des menus déroulants. Ouvrez l’onglet Navigation en sélectionnant Nav dans le menu.
- Pour ajouter un nouvel élément de menu, cliquez sur le bouton + AJOUTER UN ÉLÉMENT.
- Pour ajouter l’élément à l’en-tête, sélectionnez En-tête dans le menu déroulant Emplacement.
- Sélectionnez un type de lien dans le menu déroulant. Vous pouvez choisir entre Page, Lien externe, Étiquette, Produit, Catégorie ou Marque.
- Saisissez l’étiquette du menu qui apparaîtra dans le menu d’en-tête.
- Validez la modification en cliquant sur Enregistrer.
- Vous pouvez également supprimer des éléments de la liste des options de menu dans la navigation. Pour supprimer un élément de menu, passez la souris dessus, sélectionnez ⋮, puis Supprimer. Dans la fenêtre pop-up qui s’affiche, cliquez sur Confirmer.
- Vous pouvez réorganiser les éléments du menu en les faisant glisser et en les déposant à l’emplacement souhaité. Vous pouvez également imbriquer les éléments sur trois niveaux maximum pour créer des menus déroulants et mieux organiser votre navigation.
Comment personnaliser l’en-tête dans SiteGround Ecommerce
La personnalisation de l’en-tête pour un site Ecommerce est identique à celle de Website Builder, à la seule différence qu’il existe quelques fonctionnalités supplémentaires spécifiques aux boutiques en ligne.
Comment personnaliser le contenu de l’en-tête
Les sites Ecommerce disposent de quelques options de Composants supplémentaires qui ne sont pas disponibles pour les sites Website Builder. Certaines d’entre elles sont exclusives aux plans Grow et Scale.
- Afficher l’icône de recherche pour afficher une icône de recherche dans votre en-tête, permettant aux visiteurs de rechercher rapidement sur votre site.
- Masquer la liste de souhaits lorsqu’elle est vide pour masquer automatiquement l’icône de liste de souhaits lorsqu’aucun article n’y a encore été ajouté.
- Masquer le panier lorsqu’il est vide pour masquer automatiquement l’icône du panier lorsqu’aucun article n’y a encore été ajouté.
- Afficher le compte pour afficher l’icône de compte/connexion dans votre en-tête, permettant aux clients de se connecter ou d’accéder à leur compte.
Comment personnaliser le menu de l’en-tête
La personnalisation du menu d’en-tête Ecommerce est également quasiment identique à celle de Website Builder, mais vous disposez de quelques options de Type de lien supplémentaires pour afficher les offres de votre boutique : Produit unique, Catégorie et Marque.
