Support prioritaire
Help Center / Thème Hello biz / Personnalisez votre en-tête hello biz

Personnalisez votre en-tête hello biz

Dernière mise à jour : août 24, 2025

Qu'est-ce que l'en-tête hello biz ?

Les en-têtes apparaissent en haut des pages de votre site. Ils contiennent généralement le logo de votre site, des liens de navigation pour un accès rapide aux pages importantes et un bouton CTA.

Découvrez toutes les options disponibles pour l’en-tête.

Personnalisation de votre en-tête

Pour personnaliser votre en-tête :

  1. Allez dans l’administration WordPress.
  2. Dans le panneau, cliquez sur Hello Biz.

  3. Dans la section Parties du site sous En-tête, cliquez sur Modifier.
    L’éditeur Elementor s’ouvre avec l’en-tête visible.
    Les options de l’en-tête apparaissent dans le panneau.

Personnaliser les options d’en-tête

L’en-tête comprend cinq sections :

  • Disposition : Sélectionnez une disposition de base pour votre en-tête.
  • Identité du site : Utilisez un logo ou un nom d’entreprise pour identifier le site.
  • Navigation : Créez des liens rapides vers les pages du site.
  • Bouton de contact : Ajoutez éventuellement un bouton offrant aux visiteurs un moyen facile de vous contacter.
  • Appel à l’action : Offrez aux visiteurs un moyen rapide d’interagir avec vous.
  1. Dans la section Disposition, donnez à votre en-tête une structure de base en sélectionnant un design de base.
  2. Dans la section Identité du site, dans le champ Marque, le menu déroulant devrait être dans la position par défaut de Logo du site.

    La sélection d’un logo fait partie de la personnalisation de votre site.
    Vous pouvez modifier votre logo en cliquant sur Modifier le logo du site dans le panneau. Pour plus de détails, voir Ajout d’images et d’icônes.

    Si vous préférez utiliser le nom du site dans l’en-tête, utilisez le menu déroulant pour choisir Nom du site.
  3. La navigation « contrôle les liens rapides vers les autres pages du site. Pour l’instant, nous » laisserons cela aux paramètres par défaut. Voir ci-dessous pour toutes les options de navigation.
    Le bouton Contact donne aux utilisateurs la possibilité de nous contacter ou de naviguer vers notre pub. Nous donnerons aux utilisateurs un moyen facile de nous trouver en utilisant Waze.

  4. Ouvrez le champ Bouton de contact et activez sur Oui.

  5. Sélectionnez Waze dans le menu déroulant Plateforme.
    La section Appel à l’action contrôle le bouton dans l’en-tête. Comme il s’agit d’un en-tête pour un bar sportif, nous mettrons ici un lien vers le formulaire de réservation.

  6. Ouvrez la section Appel à l’action.

  7. Dans la zone de texte CTA principal, saisissez Réserver maintenant.

  8. Dans le champ Lien, entrez l’URL du formulaire de réservation.
    Maintenant, changeons le style du bouton d’appel à l’action pour qu’il change lorsque les utilisateurs passent la souris sur le bouton.

  9. Cliquez sur l’onglet Style.
  10. Ouvrez la section Appel à l’action.
  11. Cliquez sur Survol.
    Cliquer sur Survol signifie que vous modifiez le style lorsque les utilisateurs passent la souris sur le bouton.

  12. Cliquez sur l’icône du globe à côté de Couleur du texte et sélectionnez Accent.

  13. Cliquez sur l’icône du globe à côté de Couleur et sélectionnez Primaire.
    Lorsque les utilisateurs passeront la souris sur le bouton, les couleurs de fond et de texte s’inverseront.

Paramètres de l'en-tête

Vous pouvez personnaliser vos widgets en utilisant le contenu, le style et d’autres paramètres avancés, vous offrant une grande flexibilité pour les adapter à vos besoins. Cliquez sur les onglets ci-dessous pour voir tous les paramètres disponibles pour ce widget.

Onglet Contenu

Ajoutez, supprimez et modifiez les éléments et contrôles d’en-tête.

Choisissez une des dispositions de base. Vous pourrez styliser cette disposition en utilisant les autres sections des onglets Contenu et Style.

Marque : Utilisez le menu déroulant pour choisir :

  • Logo du site : afficher votre logo dans l’en-tête.
  • Nom du site : Afficher le nom de votre entreprise dans l’en-tête. Vous pouvez utiliser le menu déroulant pour changer la balise HTML du nom du site. Nous recommandons d’utiliser la balise par défaut.
  • Changer le logo du site : Si vous utilisez un logo, cliquez pour sélectionner un logo différent. Pour plus de détails, voir Ajouter des images et des icônes.

Cela aide les applications d’accessibilité à identifier le menu. Vous pouvez changer le nom du menu, mais nous recommandons d’utiliser celui par défaut.

L’en-tête utilise le menu WordPress pour créer ses liens rapides. Si vous avez plus d’un menu WordPress, utilisez le menu déroulant pour sélectionner le menu à utiliser. Pour plus de détails, voir Créer un menu de navigation

Contrôle la navigation lorsque le site est consulté depuis un appareil mobile.

Menu : Par défaut, le menu est représenté par une icône de hamburger. Pour changer cela :

  • Cliquez sur l’icône de téléchargement pour télécharger et utiliser votre propre fichier svg.
  • Cliquez sur l’icône de hamburger pour ouvrir la bibliothèque d’icônes et choisir une icône à partir de là.

Point de rupture : Utilisez le menu déroulant pour choisir :

  • Mobile : Faire utiliser à l’en-tête ses paramètres mobiles lorsqu’il est consulté depuis un appareil de moins de 767 pixels de large.
  • Tablette : Faire utiliser à l’en-tête ses paramètres mobiles lorsqu’il est consulté depuis un appareil de moins de 1024 pixels de large.
  • Aucun : Ne pas utiliser les paramètres mobiles de l’en-tête.

Icône d’indicateur de sous-menu : Les menus contiennent parfois des sous-menus. Par exemple, le menu Contact peut contenir des éléments de sous-menu tels que : Réservations, fêtes et opportunités d’emploi. Par défaut, ces sous-menus sont indiqués par une flèche vers le bas, mais cela peut être modifié :

  • Cliquez sur aucune icône pour supprimer cet indicateur.
  • Cliquez sur l’icône de flèche vers le bas pour ouvrir la bibliothèque d’icônes et choisir une icône à partir de là.

Activez sur Oui si vous voulez ajouter une icône de contact (ou des icônes) à votre en-tête.

Vous pouvez déclencher un certain nombre d’applications ou d’actions depuis votre en-tête. Ces actions/applications sont appelées une Plateforme :

  • E-mail : Permet aux visiteurs de vous envoyer un e-mail. Si vous utilisez cela, vous devrez ajouter :
    • Icône : Choisissez une image pour représenter l’envoi d’un e-mail.
    • Étiquette : Donnez un nom à l’action/application. Cela aidera les programmes d’accessibilité à comprendre ce que l’icône représente.
    • Plateforme : Sélectionnez E-mail dans le menu déroulant.
    • E-mail : L’adresse e-mail où l’e-mail est envoyé.
    • Objet : Créez une ligne d’objet par défaut pour l’e-mail.
    • Message : Créez un message par défaut pour l’e-mail.
  • Téléphone : Permet aux visiteurs d’appeler facilement votre entreprise. Si vous utilisez cela, vous devrez ajouter :
    • Icône : Choisissez une image pour représenter un appel téléphonique.
    • Étiquette : Donnez un nom à l’action/application. Cela aidera les programmes d’accessibilité à comprendre ce que l’icône représente.
    • Plateforme : Sélectionnez Téléphone dans le menu déroulant.
    • Numéro : Le numéro de téléphone qu’ils appellent.
  • SMS : Permet aux visiteurs de vous envoyer des messages.
    • Icône : Choisissez une image pour représenter l’envoi d’un SMS.
    • Étiquette : Donnez un nom à l’action/application. Cela aidera les programmes d’accessibilité à comprendre ce que l’icône représente.
    • Plateforme : Sélectionnez SMS dans le menu déroulant.
    • Numéro : Le numéro de téléphone auquel ils envoient un SMS.
  • WhatsApp : Permet aux visiteurs de vous envoyer des messages WhatsApp
    • Icône : Choisissez une image pour représenter l’envoi d’un message WhatsApp.
    • Étiquette : Donnez un nom à l’action/application. Cela aidera les programmes d’accessibilité à comprendre ce que l’icône représente.
    • Plateforme : Sélectionnez WhatsApp dans le menu déroulant.
    • Numéro : Le numéro de téléphone auquel ils envoient un message.
  • Messenger : Permet aux visiteurs de vous envoyer des messages Facebook.
    • Icône : Choisissez une image pour représenter l’envoi d’un message.
    • Étiquette : Donnez un nom à l’action/application. Cela aidera les programmes d’accessibilité à comprendre ce que l’icône représente.
    • Plateforme : Sélectionnez Messenger dans le menu déroulant.
    • Nom d’utilisateur : Le nom d’utilisateur Facebook de votre entreprise. C’est là que les messages sont envoyés.
  • Viber : Permet aux visiteurs de vous envoyer des messages Viber ou de vous appeler via Viber.
    • Icône : Choisissez une image pour représenter l’envoi d’un message Viber ou la réalisation d’un appel Viber.
    • Étiquette : Donnez un nom à l’action/application. Cela aidera les programmes d’accessibilité à comprendre ce que l’icône représente.
    • Plateforme : Sélectionnez Viber dans le menu déroulant.
    • Numéro : Le numéro Viber qu’ils contactent par message ou par appel.
    • Action : Utilisez le menu déroulant pour choisir si les visiteurs vont Chatter ou Appeler avec Viber.
  • Carte : Ouvrez Google Maps pour guider les visiteurs vers votre emplacement.
    • Icône : Choisissez une image pour représenter le lancement de Google Maps.
    • Étiquette : Donnez un nom à l’action/application. Cela aidera les programmes d’accessibilité à comprendre ce que l’icône représente.
    • Plateforme : Sélectionnez Maps dans le menu déroulant.
    • Lien : Lien vers l’application Google Maps. Pour plus de détails, voir l’intégration de Google Maps.
  • Waze : Ouvrez l’application Waze pour guider les visiteurs vers votre emplacement.
    • Icône : Choisissez une image pour représenter le lancement de Waze.
    • Étiquette : Donnez un nom à l’action/application. Cela aidera les programmes d’accessibilité à comprendre ce que l’icône représente.
    • Plateforme : Sélectionnez Waze dans le menu déroulant.
    • Lien : Lien vers l’application Waze.
  • URL : Icône avec un lien vers une page web.
    • Icône : Choisissez une image pour représenter un lien.
    • Étiquette : Donnez un nom à l’action/application. Cela aidera les programmes d’accessibilité à comprendre ce que l’icône représente.
    • Plateforme : Sélectionnez URL dans le menu déroulant.
    • Lien : L’URL de la page vers laquelle les visiteurs seront dirigés.

Par défaut, aucune icône n’apparaît sur le bouton. Vous pouvez modifier ceci :

  • Cliquez sur l’icône de téléchargement pour télécharger et utiliser votre propre fichier svg.
  • Cliquez sur l’icône du point pour ouvrir la bibliothèque d’icônes et choisir une icône à partir de là.

Basculez sur Afficher pour ajouter un deuxième bouton CTA.

Saisissez le texte que vous souhaitez voir apparaître sur le bouton.

Saisissez l’URL vers laquelle vous voulez diriger les visiteurs lorsqu’ils cliquent sur le bouton.

Par défaut, aucune icône n’apparaît sur le bouton. Vous pouvez modifier ceci :

  • Cliquez sur l’icône de téléchargement pour télécharger et utiliser votre propre fichier svg.
  • Cliquez sur l’icône du point pour ouvrir la bibliothèque d’icônes et choisir une icône à partir de là.

Basculez sur Afficher pour ajouter un deuxième bouton CTA.

Onglet Style

Déterminez l’apparence de l’en-tête.

Contrôlez la largeur du logo si vous utilisez un logo ou alignez le nom du site si vous utilisez le nom du site.

  • Normal : Déterminez comment le logo ou le nom du site apparaît par défaut.
  • Survol : Déterminez comment le logo ou le nom du site apparaît au survol de la souris.

Lors de l’utilisation d’un logo, déterminez :

  1. Filtres CSS : Une série de curseurs qui vous permettent de contrôler :
    1. Flou : Applique un effet de mise au point douce en floutant les éléments en fonction du rayon en pixels.
    2. Luminosité : Ajuste la luminosité d’un élément en modifiant son intensité lumineuse.
    3. Contraste : Améliore ou réduit le contraste des couleurs de l’image et des éléments pour une meilleure distinction visuelle.
    4. Saturation : Ajuste les couleurs de l’image ou de l’élément en augmentant ou en diminuant leur intensité de couleur.
    5. Teinte : Le filtre de teinte CSS ajuste les couleurs en faisant pivoter leur teinte autour du spectre.
  2. Bordure : Utilisez le commutateur pour déterminer si le logo aura une ligne autour de lui. Si vous ajoutez une bordure, vous devrez définir la largeur et la couleur de la bordure.
  3. Forme : Définissez une forme pour le logo :
    1. Rond : Les boutons apparaissent avec des coins arrondis.
    2. Arrondi : Les boutons apparaissent avec des bords uniformément courbés.
    3. Net : Boutons rectangulaires.
    4. Personnalisé : Ajustez le rayon en utilisant les quatre compteurs pour ajuster chaque coin individuellement. En savoir plus sur ces méthodes de mesure.
  4. Ombre portée : Cliquez sur l’icône du crayon pour ajouter une ombre au bouton bascule. En savoir plus sur les ombres.

Lors de l’utilisation du nom de votre site, définissez :

  1. Typographie : Lors de l’utilisation du nom du site, définissez le type et la taille de la police. Pour plus de détails, voir Typographie.
  2. Ombre du texte : Ombre du texte : Ajoutez de la profondeur à votre texte avec des ombres. Pour plus de détails, voir Qu’est-ce que l’ombre, l’ombre du texte et l’ombre encadrée ?
  3. Couleur du texte : Lors de l’utilisation du nom du site, définissez la couleur de la police. Pour plus de détails, voir Choisir une couleur ou Utiliser des polices et des couleurs globales.

Définissez le type et la taille de la police du menu. Pour plus de détails, voir Typographie.

  • Normal : Déterminez comment le menu de navigation apparaît par défaut.
  • Survol : Déterminez comment le menu de navigation apparaît au survol de la souris.
  • Actif : Déterminez comment le menu de navigation apparaît lorsqu’il est sélectionné.

Définissez la couleur du menu de navigation. Pour plus de détails, voir Choisissez une couleur ou Utilisez les polices et couleurs globales.

Utilisez le curseur pour définir la distance entre les éléments individuels du menu.

Disposition : S’il y a un sous-menu, utilisez le menu déroulant pour déterminer si les éléments du sous-menu apparaîtront :

  • Horizontalement, de haut en bas.
  • Verticalement, de côté à côté.

Forme : S’il y a un sous-menu, déterminez la forme du sous-menu :

  • Rond : Les boutons apparaissent avec des coins lisses.
  • Arrondi : Les boutons apparaissent avec des bords uniformément courbés.
  • Net : Boutons rectangulaires.

Vous pouvez voir comment votre site apparaîtra sur différents appareils en cliquant sur les icônes Mobile, Tablette et Bureau dans la barre d’édition supérieure.

Alignement du texte : Lorsque le site est consulté depuis un appareil mobile, déterminez si les éléments du menu apparaissent au début de l’en-tête ou au centre de l’en-tête.

Séparateur : basculez sur Oui si vous souhaitez ajouter un séparateur entre les éléments du menu lorsque le site est consulté depuis un appareil mobile. Si vous ajoutez un séparateur, vous pourrez également choisir :

Couleur: La couleur du séparateur. Pour plus de détails, voir Choisissez une couleur ou Utilisez les polices et couleurs globales.

Épaisseur : L’épaisseur des séparateurs.

Taille de l’icône de basculement : Sur mobile, le menu est remplacé par une icône de basculement. Les visiteurs appuient sur le bouton bascule pour ouvrir le menu. Utilisez le curseur pour ajuster la taille de l’icône.

Normal/actif :

  • Normal : Déterminez comment le bouton bascule qui affiche le menu apparaît par défaut.
  • Survol : Déterminez comment le bouton bascule qui affiche le menu apparaît lorsqu’on le survole avec la souris.

Couleur de l’icône de bascule: Déterminez la couleur du bouton bascule qui affiche le menu. Pour plus de détails, voir Choisissez une couleur ou Utilisez les polices et couleurs globales.

Type : Utilisez le menu déroulant pour déterminer si le Contact s’affichera sous forme d’Icône ou d’Étiquette.

  • Normal : Déterminez comment le bouton ou le lien apparaît par défaut.
  • Survol : Déterminez comment le bouton ou le lien apparaît lorsqu’on le survole avec la souris.

Déterminez l’apparence de l’icône :

  • Couleur : Définissez la couleur de l’icône. Pour plus de détails, voir Choisissez une couleur ou Utilisez les polices et couleurs globales.
  • Taille : Définissez la taille de l’icône.
  • Espacement : Déterminez l’espace entre le bouton de contact et le CTA.
  • Affichage responsive : Définissez l’apparence du menu sur mobile :
    1. Barre de navigation : Le bouton de contact apparaît à côté du menu hamburger.
    2. Menu déroulant : Le bouton de contact apparaît dans le menu hamburger.

Définissez l’apparence de l’étiquette du bouton de contact :

  • Couleur : Définissez la couleur de l’étiquette. Pour plus de détails, voir Choisissez une couleur ou Utilisez les polices et couleurs globales.
  • Espacement : Définissez l’espace entre l’étiquette et le bouton CTA.
  • Affichage responsive : Définissez l’apparence du menu sur mobile :
    1. Barre de navigation : L’étiquette du bouton de contact apparaît à côté du menu hamburger.
    2. Menu déroulant : L’étiquette du bouton de contact apparaît dans le menu hamburger.

Utilisez le menu déroulant pour sélectionner Étirer si vous voulez que le bouton CTA s’étende sur toute la largeur de l’en-tête lorsqu’il est consulté depuis un appareil mobile.

Type : Utilisez le menu déroulant pour déterminer si le CTA apparaîtra comme un bouton ou comme un lien.

Définissez le type et la taille de police du bouton ou du lien. Pour plus de détails, voir Typographie.

  • Normal : Déterminez comment le bouton ou le lien apparaît par défaut.
  • Survol : Déterminez comment le bouton ou le lien apparaît lorsqu’on le survole avec la souris.

Définissez la couleur du texte du bouton ou du lien. Pour plus de détails, voir Choisissez une couleur ou Utilisez les polices et couleurs globales.

(Bouton uniquement)

Utilisez pour basculer entre :

  • Arrière-plan solide (Classique)
  • Arrière-plan dégradé (Gradient).

Pour plus de détails, voir Créer un arrière-plan.

La couleur de l’arrière-plan. Pour plus de détails, voir Choisissez une couleur ou Utilisez les polices et couleurs globales.

(Bouton uniquement)

Basculez sur Oui pour ajouter une bordure au bouton CTA. Si vous ajoutez une bordure, vous devrez déterminer :

Cliquez sur l’icône du crayon pour ajouter une ombre au bouton bascule. En savoir plus sur les ombres.

Ajoutez de l’espace entre les bordures du bouton et le texte. Pour plus de détails, voir Remplissage et marges.

Utilisez le menu déroulant pour sélectionner Étirer si vous voulez que le bouton CTA s’étende sur toute la largeur de l’en-tête lorsqu’il est consulté depuis un appareil mobile.

Type d’arrière-plan: Définissez un arrière-plan pour l’en-tête. Utilisez les icônes pour basculer entre un arrière-plan uni (Classique) ou un arrière-plan dégradé (Gradient). Pour plus de détails, voir Créer un arrière-plan.

Couleur: La couleur de l’arrière-plan. Pour plus de détails, voir Choisissez une couleur ou Utilisez les polices et couleurs globales.

Basculez sur Oui pour ajouter une bordure autour de l’en-tête. Si vous ajoutez une bordure, vous devrez déterminer :

Cliquez sur l’icône du crayon pour ajouter une ombre à l’en-tête. En savoir plus sur les ombres.

Ajoutez de l’espace entre la bordure de l’en-tête et son contenu. Pour plus de détails, voir Remplissage et marges.

Onglet Avancé

Contrôlez le placement de votre widget, insérez des liens, ajoutez du code personnalisé et plus encore.

La plupart des options disponibles dans l’onglet Avancé peuvent être trouvées dans Paramètres de l’onglet Avancé.

Comportement est une fonction supplémentaire. Elle vous permet de sélectionner :

Flottant : Basculez sur Oui pour permettre à l’en-tête de survoler d’autres contenus sur la page.

Si vous activez Flottant sur Oui, vous aurez ces options :

  • Décalage : La distance entre le haut de l’en-tête et le haut de l’écran.
  • Largeur : Définissez la largeur de la zone flottante.
  • Forme : Définissez la zone flottante pour qu’elle soit :
    • Ronde : Coins lisses.
    • Arrondie : Bords uniformément courbés.
    • Nette : rectangulaire.

Collant : La propriété collante maintient l’en-tête visible même lorsque le visiteur fait défiler le contenu. Les options sont :

  • Au défilement vers le haut : L’en-tête devient collant dès que le visiteur commence à faire défiler la page vers le haut.
  • Toujours : L’en-tête est toujours collant.
  • Jamais : L’en-tête n’est pas collant.

En savoir plus sur les paramètres de l’onglet Avancé.

Sur cette page

Partager cet article

Hosted with