Personnaliser la barre de recherche de votre site
Temps de lecture : 5 min
Permettez à vos visiteurs de rechercher n'importe quoi sur votre site en utilisant la barre de recherche dans Wix Site Search. Les résultats de la recherche sont affichés dans une liste, afin que vos visiteurs puissent facilement trouver ce qu'ils cherchent.
Vous pouvez modifier la présentation et le design de votre barre de recherche afin qu'elle corresponde au design de votre site.
Dans cet article, apprenez-en plus sur :
Personnaliser les paramètres de la barre de recherche
Personnalisez le texte de l'espace réservé de votre barre de recherche et les suggestions de résultats.
Pour personnaliser les paramètres de votre barre de recherche :
- Cliquez sur la barre de recherche dans l'Éditeur.
- Cliquez sur Paramètres.
- Personnalisez les options des paramètres :
- Texte espace réservé : Ajoutez un court texte qui s'affiche lorsque la barre de recherche est vide.
Remarque : Ce texte disparaît lorsque le visiteur de votre site commence à taper dans la barre de recherche. - Suggestions de résultats : Activez ou désactivez les suggestions de résultats qui s'affichent lorsqu'un utilisateur commence à taper.
- Éléments tendances : Activez ou désactivez l'affichage des éléments tendances avant qu'un utilisateur ne commence à taper.
Remarque : L'activation des éléments tendances n'est possible que si les suggestions de résultats sont également activées.
- Texte espace réservé : Ajoutez un court texte qui s'affiche lorsque la barre de recherche est vide.
Modifier la disposition de la barre de recherche
Configurer la disposition, l'alignement et l'espacement de votre barre de recherche à partir du panneau de mise en page.
Pour modifier la disposition de votre barre de recherche :
- Cliquez sur la barre de recherche dans l'Éditeur.
- Cliquez sur l'icône Mises en page
. - Personnaliser les options de mise en page :
- Sélectionnez une mise en page : Sélectionnez un style pour votre barre de recherche.
- Alignement des icônes : Sélectionnez la position de l'icône de recherche.
- Alignement du texte : Sélectionnez la position du texte.
- Espacement du texte : Définissez l'espacement entre le bord de la barre de recherche et le texte.
- Espacement des icônes : Définissez la taille de la zone d'icône.
Remarque :
Les options disponibles dans le menu dépendent des applis que vous avez ajoutées à votre espace et à votre site.
Personnaliser le design de la barre de recherche
Personnaliser le design de votre barre de recherche pour les différents états :
- Normal : Lorsque votre barre n'est pas utilisée.
- Survol: Lorsque les visiteurs passent leur souris sur la barre.
- Focus : Lorsque les visiteurs ont cliqué sur la barre.
Pour personnaliser le design de votre barre de recherche :
- Cliquez sur la barre de recherche dans l'Éditeur.
- Cliquez sur l'icône Design
. - Sélectionnez un design prédéfini.
- Cliquez sur Personnaliser le design pour le personnaliser davantage.
- Cliquez sur un onglet pour sélectionner l'état que vous souhaitez personnaliser : Normal, Survol ou Focalisé.
- Personnalisez l'état en utilisant les options :
- Opacité des couleurs et remplissage : Modifiez la couleur d'arrière-plan de la barre et de l'icône :
- Arrière-plan du champ de saisie : Cliquez sur la case de couleur pour sélectionner la couleur d'arrière-plan du champ de saisie et faites glisser le curseur pour augmenter ou diminuer l'opacité.
- Bouton Arrière-plan : Cliquez sur la case de couleur pour sélectionner la couleur de fond de l'icône de recherche et faites glisser le curseur pour augmenter ou diminuer l'opacité.
- Icône du bouton : Cliquez sur la case de couleur pour sélectionner la couleur de l'icône de recherche et faites glisser le curseur pour augmenter ou diminuer l'opacité.
- Bordure : Ajoutez et personnalisez une bordure pour votre barre :
- Couleur et opacité : Cliquez sur la case de couleur pour sélectionner la couleur de la bordure et faites glisser le curseur pour augmenter ou diminuer l'opacité.
- Style de la bordure : Sélectionnez le style de votre bordure et les côtés sur lesquels elle apparaît.
- Largeur : Faites glisser le curseur pour rendre votre bordure plus épaisse ou plus fine.
- Angles : Arrondissez les angles de votre barre :
- Saisissez une valeur dans un angle, ou cliquez sur l'icône verrouiller et modifiez toutes les valeurs ensemble.
- Ombre : Ajoutez une ombre à votre barre :
- Cliquez sur le curseur Activer l'ombre pour ajouter une ombre.
- Personnalisez votre ombre à l'aide des options :
- Angle : Sélectionnez l'angle de l'ombre.
- Distance : faites glisser le curseur pour augmenter ou diminuer la distance de l'ombre.
- Taille : Faites glisser le curseur pour augmenter ou diminuer la taille de l'ombre.
- Flou : Faites glisser le curseur pour augmenter ou diminuer le flou de l'ombre.
- Couleur et opacité : Cliquez sur la case de couleur et sélectionnez la couleur de l'ombre et faites glisser le curseur pour augmenter ou diminuer l'opacité de l'ombre.
- Texte : Formatez le texte sur la barre :
- Couleur du caractère de remplacement : Cliquez sur la case de couleur pour sélectionner la couleur du texte de remplacement et faites glisser le curseur pour augmenter ou diminuer l'opacité.
- Couleur : Cliquez sur la case de couleur pour sélectionner la couleur du texte à saisir.
- Thème : Cliquez sur le menu déroulant et sélectionnez le thème du texte.
- Police : Cliquez sur le menu déroulant et sélectionnez la police du texte.
- Taille de la police : Faites glisser le curseur pour régler la taille du texte.
- Gras/Italique : Cliquez sur les options pour formater le texte.
- Opacité des couleurs et remplissage : Modifiez la couleur d'arrière-plan de la barre et de l'icône :
Modifier la position de la barre de recherche :
Pour repositionner votre barre de recherche, cliquez et faites-la glisser vers l'en-tête ou le pied de page de votre site.
Cela vous a-t-il aidé ?
|