Support prioritaire
Help Center > Themes > Thème Hello biz > Widget de contact

Widget de contact

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

Ce post est une traduction automatique, il peut donc contenir des imprécisions ou des variations stylistiques par rapport au texte source. Nous vous prions de nous excuser pour tout inconvénient que cela pourrait causer. Veuillez nous contacter si vous avez besoin que nous vous apportions des précisions.

Ajouter le widget

Pour accéder et utiliser un widget :

  1. Dans l’éditeur Elementor, cliquez sur +.
    Tous les widgets disponibles sont affichés.

  2. Cliquez ou faites glisser le widget sur le canevas. Pour plus d’informations, consultez Ajouter des éléments à une page.

Qu'est-ce que le widget de contact ?

En général, les sites web doivent offrir un moyen facile aux clients potentiels de vous contacter. Le widget de contact est un moyen rapide d’ajouter vos coordonnées à une page web.

Découvrez toutes les options disponibles avec le widget de contact.

Cas d'utilisation courant

Blake crée un site web pour un bar sportif. Ils utilisent le widget de contact pour créer une page « Contactez-nous », afin que les clients puissent écrire ou téléphoner au bar pour faire des réservations.

Exemple

Cas d'utilisation supplémentaires

  • Ajouter des informations de contact dans l’en-tête et/ou le pied de page du site.

Ajouter un widget de contact : étape par étape

Dans l’exemple ci-dessous, nous allons créer une page « Contactez-nous ».

Ajouter un widget de contact

Pour ajouter un widget de contact :

  1. Faites glisser le widget de contact sur le canevas.
  2. Dans la section Mise en page du panneau, choisissez l’un des trois préréglages pour les informations de contact.
  3. Ouvrez la section Texte.
  4. Dans le champ Titre, saisissez : Contactez-nous.
  5. Dans le champ Description, saisissez : Écrivez ou appelez pour les réservations ou autres demandes.
  6. Ouvrez la section Détails de contact.
    Par défaut, il y a quatre sections dans le widget de contact. Il existe trois types de sections :
    1. Liens de contact : Conçus pour afficher les adresses e-mail, les numéros de téléphone et autres coordonnées.
    2. Texte : Conçu pour afficher du texte libre.
    3. Icônes sociales : Conçues pour afficher des liens vers divers sites de médias sociaux.
  7. Groupe 1 contient des liens de contact, nous allons y ajouter des moyens pour les clients d’envoyer un e-mail ou d’appeler le bar.
  8. Dans la zone de texte Sous-titre, saisissez : Appelez-nous.
  9. Dans la section Liens, cliquez sur le champ Appel.
  10. Dans le champ Numéro, saisissez votre numéro de téléphone.
  11. Cliquez sur le champ E-mail et saisissez votre E-mail et un Objet. Nous laisserons le champ Message vide.
    Détails de contact vous permet d’ajouter différentes façons de vous contacter. Ajoutons un numéro WhatsApp
  12. Cliquez sur Ajouter un élément.
  13. Cliquez sur le champ Icône et sélectionnez Bibliothèque d’icônes.
    Cela ouvre la bibliothèque d’icônes.
  14. Sélectionnez l’icône WhatsApp dans la bibliothèque et cliquez sur Insérer.
  15. Sélectionnez WhatsApp dans le menu déroulant Plateforme.
  16. Saisissez un numéro WhatsApp dans le champ Numéro.
  17. Dans notre cas, nous ne voulons pas afficher les heures d’ouverture. Basculez Groupe 2 sur Masquer.
  18. Ajoutons un moyen pour les visiteurs de trouver le bar. Dans la Section 3, sélectionnez Waze dans le menu déroulant Plateforme.
  19. Dans le champ Lien, ajoutez un lien Waze. Consultez la documentation Waze pour plus de détails sur la création d’un lien Waze.
  20. La Section 4 contient des liens vers les médias sociaux. Le bar n’a qu’un compte Instagram, donc cliquez d’abord sur les icônes de suppression à côté des icônes X et TikTok.
  21. Cliquez sur le champ Instagram et, dans le champ Lien, saisissez un lien vers un compte Instagram.
  22. Dans la section Carte, vous pouvez ajouter un lien vers Google Maps. Pour plus de détails, consultez l’intégration de Google Maps.

Paramètres du widget de contact

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 les contrôles.

Choisissez l’une des trois mises en page de base pour votre widget de contact.

Un titre court pour votre widget de contact.

Utilisez le menu déroulant pour choisir une balise HTML pour votre titre. Les choix incluent H1 à H6, Div, Span ou Paragraphe. Nous recommandons d’utiliser le paramètre par défaut.

Une phrase ou deux décrivant le contenu du widget de contact. Par exemple, si vous souhaitez que les visiteurs vous contactent pour des réservations, c’est ici que vous le mentionneriez.

Utilisez le menu déroulant pour choisir une balise HTML pour votre titre. Les choix incluent H1 à H6, Div, Span ou Paragraphe. Nous recommandons d’utiliser le paramètre par défaut.

Par défaut, le widget de contact comporte 4 sections – Groupes 1 à 4. Le Groupe 1 doit être visible, mais les autres groupes ont un interrupteur vous permettant de les masquer.

Utilisez le menu déroulant pour choisir l’un des trois types pour chaque groupe :

  • Liens de contact : Conçus pour afficher des informations telles que :
    • E-mail
    • Numéros de téléphone
    • Numéros WhatsApp
    • Liens Facebook Messenger
    • Liens Viber
    • Liens Google Maps
    • Position Waze
    • URL
  • Texte : Ajoutez du texte libre au groupe.
  • Icônes sociales : Ajoute des icônes et des liens vers vos sites de médias sociaux. Par exemple, si vous avez un compte Instagram, vous pouvez ajouter une icône Instagram avec un lien vers votre compte.

Ajoutez un titre à un groupe.

Les liens apparaissent dans les groupes Détails de contact et Icônes sociales.

  • Cliquez sur un lien pour modifier les informations du lien. Par exemple, cliquez sur le lien Appel pour ajouter un numéro de téléphone. Vous pouvez également modifier l’étiquette du lien et le type de lien.
  • Cliquez sur l’icône de suppression pour supprimer un lien.
  • Cliquez sur l’icône de copie pour dupliquer un lien.

Utilisez la zone de texte pour ajouter quelques phrases à la section. Par exemple, vous pouvez l’utiliser pour ajouter les heures d’ouverture au groupe.

Utilisé pour marquer votre emplacement sur Google Maps. Pour plus de détails, consultez l’intégration de Google Maps.

Onglet Style

Déterminez l’apparence des éléments de menu et des contrôles.

Le contenu de cette section dépend du préréglage que vous avez sélectionné.

Contrôlez si les groupes de votre widget de contact sont alignés sur les bords du widget – Début ou Fin – ou au Centre du widget.

Pour certains préréglages, vous pouvez également définir la Position du contenu, qui contrôle le bloc de texte, soit sur le bord de départ, soit au centre du widget.

Les informations dans le widget de contact peuvent être divisées en jusqu’à 4 colonnes et un nombre défini de lignes selon le préréglage choisi.

Utilisez le menu déroulant Colonnes pour déterminer le nombre de colonnes.

Utilisez les compteurs Espaces pour définir une distance entre les colonnes et les lignes du widget.

Dans les préréglages qui incluent une carte, déterminez si la carte est située au début ou à la fin du widget.

Déterminez la taille, la couleur et la police du titre.

Déterminez la taille, la couleur et la police du texte de description.

Utilisez le curseur pour augmenter et diminuer l’espace entre les lignes de texte.

Définissez la couleur et la police du texte du sous-titre.

Ceci s’applique aux Groupes utilisant le paramètre Liens de contact.

  • Espacement : Utilisez le curseur pour définir la distance entre les différents champs de contact.
  • Typographie : Définissez le type et la taille de police du champ de contact. Pour plus de détails, consultez Typographie
  • Normal : Cliquez pour définir la couleur par défaut de l’icône et du texte.
  • Survol : Définissez la couleur de l’icône et du texte lorsque les visiteurs passent la souris sur le champ de contact.
  • Taille de l’icône : Utilisez le curseur pour définir la taille de l’icône symbolisant le type de contact.
  • Couleur du texte : Pour plus de détails, consultez Choisir une couleur ou Utiliser les polices et couleurs globales.
  • Taille de l’icône : Utilisez le curseur pour définir la taille des icônes symbolisant le type de contact.
  • Espacement des icônes : Utilisez le curseur pour définir la distance entre les icônes symbolisant le type de contact et le texte du type de contact.

Ceci s’applique aux Groupes utilisant le paramètre Texte.

Définissez la couleur et la police du texte.

Ceci s’applique aux Groupes utilisant le paramètre Icônes sociales.

  • Normal : Cliquez pour définir la couleur, la taille et l’espacement par défaut des icônes.
  • Survol : Cliquez pour définir la couleur, la taille et l’espacement des icônes lorsque les visiteurs passent la souris dessus.
  • Couleur de l’icône : Définissez la couleur des icônes représentant les médias sociaux. Pour plus de détails, consultez Choisir une couleur ou Utiliser les polices et couleurs globales.
  • Taille de l’icône : Utilisez le curseur pour définir la taille des icônes représentant les médias sociaux.
  • Espacement des icônes : Utilisez le curseur pour définir l’espace entre les icônes des médias sociaux.

Déterminez la zone représentée sur la carte.

Basculez sur Oui pour que la carte couvre la largeur de sa section.

Utilisez les curseurs pour définir la taille de la carte.

Ajoutez une bordure autour de la carte. Si vous ajoutez une bordure, vous devrez sélectionner un type de bordure. En savoir plus sur les types de bordure.

Vous devrez également sélectionner une forme de bordure :

  • Arrondi : Les boutons apparaissent avec des coins lisses.
  • Arrondi : Les boutons apparaissent avec des bords uniformément courbés.
  • Ovale : Coins très arrondis.
  • Net : Boutons rectangulaires.
  • Personnalisé : Ajustez le rayon en utilisant les quatre compteurs pour régler chaque coin individuellement. En savoir plus sur ces méthodes de mesure.

Cliquez sur l’icône du crayon pour ajouter une ombre à la carte. En savoir plus sur les ombres.

Ajoutez un arrière-plan au widget Contact. Pour plus de détails, consultez Créer un arrière-plan.

Ajoutez un arrière-plan partiellement transparent. Pour plus de détails, consultez Créer un arrière-plan.

Utilisez le curseur pour déterminer l’espace entre la zone de titre et les groupes.

Utilisez le curseur pour définir l’espace entre la carte et le reste des éléments.

Basculez sur Oui pour ajouter une bordure autour du widget Contact. En savoir plus sur les types de bordure.

Si vous ajoutez une bordure, vous devrez choisir une largeur et une couleur de bordure.

Choisissez l’apparence des coins du widget Contact :

  • Arrondi : Les boutons apparaissent avec des bords uniformément courbés.
  • Net : Boutons rectangulaires.
  • Personnalisé : Ajustez le rayon en utilisant les quatre compteurs pour régler chaque coin individuellement. En savoir plus sur ces méthodes de mesure.

Cliquez sur l’icône du crayon pour ajouter une ombre portée au widget Contact. En savoir plus sur les ombres.

Ajoutez ou soustrayez du rembourrage dans le widget Contact. Apprenez comment créer de l’espace avec le rembourrage et les marges

Basculez sur Oui si vous voulez que le widget Contact occupe toute la hauteur de l’écran.

Onglet Avancé

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

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

Sur cette page

Partager cet article

Hosted with