Tutoriel détaillé sur l'ajout d'une icône de recherche dans le menu d'un site web avec le plugin Elementor

Dans cet article, nous allons vous donner un aperçu détaillé de la façon dont vous pouvez utiliser le plugin Elementor pour convertir le fichierL'icône de recherche a été ajoutée au menu du site.

Qu'est-ce que l'icône de recherche d'Elementor ?

L'icône de recherche Elementor est en fait un fichier fourni par le plugin Elementor appelé "Formulaire de rechercheLe widget ". Grâce à ce widget, il est possible d'ajouter un nouveau widget n'importe où sur le site (par exemple dans la rubriqueEn-tête, pied de page ou barre latérale) Créez une barre de recherche. En la plaçant dans l'en-tête ou le pied de page du site, les utilisateurs peuvent accéder à cette fonction depuis n'importe quelle page du site, ce qui facilite grandement la navigation et la recherche.

Le widget est très flexible et peut être personnalisé avec son texte d'insertion, ses icônes, ses ombres, ses bordures, ses positions d'icônes, ses paramètres typographiques et bien plus encore. En outre, il peut être adapté à différentes tailles d'écran (Ordinateurs de bureau, tablettes et téléphones portables) sont configurés de manière optimale afin de garantir que, sur tous les appareils, lesbon indicateur.

Comment ajouter l'icône de recherche Elementor au menu de votre site web

Ce tutoriel utilisera la version gratuite d'Elementor et l'optionÉdition professionnellewidgetset démontrée par le biais d'une page pré-conçue.

Étape 1 : Ajouter le widget Elementor Search Form

Tout d'abord, assurez-vous que vous n'avez pas encore d'options de recherche dans le menu de votre site web. Nous placerons l'icône de recherche en ajoutant une nouvelle colonne à la zone de menu.

1. Ouvrez l'éditeur ElementorDans le panneau des widgets à gauche, trouver "Formulaire de recherche"Widgets.

2. Glisser-déposer des widgetsPour ce faire, il suffit de faire glisser le widget du formulaire de recherche dans la colonne de droite du menu de navigation.

Un formulaire de recherche a ainsi été ajouté avec succès au menu.

Étape 2 : Définir l'habillage de la recherche

Elementor permet de choisir parmi trois skins différents pour concevoir l'apparence du formulaire de recherche :

1. écrituresConception de base : il s'agit de la conception la plus élémentaire, qui s'applique généralement à des mises en page épurées.
2. minimalCe skin met l'accent sur la simplicité et la sophistication, ce qui est parfait pour les sites web modernes.
3. plein écranCe skin permet à la boîte de recherche de s'étendre en plein écran lorsque l'utilisateur clique dessus, ce qui est parfait pour les sites riches en contenu.

En fonction du style de votre site web, choisissez l'habillage approprié et ajoutez un texte de remplacement à la section du contenu.

Étape 3 : Gestion du contenu des boutons de recherche

Dans la zone de contenu, vous pouvez choisir de définir le bouton de recherche sous forme d'icône ou de texte. Dans cet exemple, nous avons défini le bouton comme une icône, avec la possibilité de personnaliser la taille et la position de l'icône.

1. Sélectionner le type d'icôneDans la section du contenu des boutons, les icônes ont été choisies comme principale forme de présentation des boutons.
2. Redimensionner les icônesLes icônes sont redimensionnées en fonction de la conception du menu pour s'harmoniser avec les autres éléments du menu.

Étape 4 : Personnaliser le style des champs de saisie du formulaire

Pour embellir le formulaire de recherche, rendez-vous sur "type"pour ajuster le style du champ de saisie.

1. revoir la présentationLes champs de saisie peuvent être modifiés pour s'adapter à la conception générale du site web : modifier la police, la taille de la police et la couleur du texte des champs de saisie pour s'adapter à la conception générale du site web.
2. Définition de l'arrière-plan et de la bordureVous pouvez personnaliser la couleur d'arrière-plan, la couleur de la bordure, l'ombre de la boîte, etc. du champ de saisie.
3. Ajouter un rayon de bordureLa boîte de recherche peut également être modifiée : en définissant le rayon de la bordure, vous pouvez rendre les coins de la boîte de recherche plus arrondis afin d'améliorer l'effet visuel.

Étape 5 : Style des boutons

Le style du bouton de recherche peut également être personnalisé dans la section "Style".

1. Modifier la couleur des boutonsCouleur de texte : Définissez la couleur de texte et la couleur d'arrière-plan du bouton afin de le faire ressortir sur la page.
2. Ajuster la position de l'icôneLes icônes des boutons peuvent être modifiées afin de les harmoniser avec la conception générale du formulaire.

Étape 6 : Ajouter des marges à la zone de mise en page

Dans les paramètres avancés, vous pouvez ajuster la mise en page du widget, par exemple en ajoutant des marges ou des marges intérieures, afin de garantir que le formulaire de recherche est aligné avec les autres éléments du menu.

• Ajout de margesAjouter une marge appropriée en haut du widget afin que le formulaire de recherche soit mieux aligné avec le reste du contenu du menu.

Étape 7 : Rendre l'icône de recherche Elementor compatible avec les mobiles

Pour vous assurer que votre formulaire de recherche se comporte de manière cohérente sur tous les appareils, vous pouvez utiliser la fonction "mode de réponse"Options.

1. Changement de taille d'écranEn haut du panneau Elementor, passez d'une taille d'écran à l'autre pour optimiser la mise en page du formulaire de recherche de manière individuelle.
2. Redimensionner et repositionner les widgetsLes widgets : Ajustez la taille et la position des widgets en fonction de la taille de l'écran pour garantir un bon affichage sur les téléphones mobiles, les tablettes et les ordinateurs de bureau.

Remarque : ne supprimez aucun widget, car il disparaîtra dans toutes les tailles d'écran après sa suppression. Au lieu de supprimer un widget, vous pouvez choisir de le masquer pour une taille d'écran spécifique.

Étape 8 : Aperçu de la barre de recherche

Prévisualisez le nouveau menu de navigation une fois que tous les réglages ont été effectués. Assurez-vous que le formulaire de recherche s'affiche et fonctionne comme prévu sur tous les appareils.

Questions fréquemment posées

1. Le widget de formulaire de recherche Elementor est-il gratuit ?
   • Non. Le widget Formulaire de recherche est un widget avancé d'Elementor qui n'est disponible que dans la sectionÉdition professionnelleOffre.
2. Comment personnaliser la barre de recherche dans WordPress ?
   • Il est possible d'ajouter et de personnaliser la barre de recherche de votre site web WordPress à l'aide d'Elementor ou d'autres plugins. Veuillez vous référer aux tutoriels correspondants pour les étapes détaillées.
3. Comment créer et modifier des pages de résultats de recherche dans Elementor ?
   • Les pages de résultats de recherche peuvent être facilement créées et modifiées à l'aide de la fonction de construction de thème d'Elementor. Aller àModèles -> Constructeur de thème -> RecherchePar conséquent, il suffit de sélectionner le modèle prêt à l'emploi.

rendre un verdict

La fonctionnalité de recherche est un outil important pour améliorer l'expérience utilisateur d'un site web. En ajoutant une icône de recherche au menu de votre site, les utilisateurs peuvent trouver ce qu'ils cherchent plus facilement, ce qui améliore la facilité d'utilisation et les taux de conversion.Elementor propose un widget de formulaire de recherche puissant qui peut être personnalisé en fonction de besoins spécifiques, en veillant à ce que le formulaire de recherche soit cohérent avec le style général du site.