Le propre widget de recherche d'Elementor a besoin d'Elementor Pro, donc la plupart des sites se retrouvent coincés avec n'importe quel champ de recherche fourni par le thème. Le gratuit Widget de recherche dans Modules complémentaires principaux pour Elementor comble cette lacune Déposez-la n'importe où sur une page ou dans un en-tête, puis choisissez un formulaire de recherche classique ou une fenêtre contextuelle d'icône qui se développe en cliquant sur L'entrée et le bouton sont stylisés à partir du panneau Élémenteur, aucun CSS n'est impliqué.
Voici comment les deux dispositions du Widget de recherche d'élémenteur travail, réglage par réglage, plus ce que les visiteurs voient réellement sur la page en direct.
Ce que fait le widget Recherche #
Le widget génère un formulaire de recherche WordPress en tant qu'élément Elementor Les visiteurs tapent une requête, appuient sur Entrée ou cliquent sur le contrôle de soumission et atterrissent sur la page de résultats de recherche standard de votre site, de sorte que les résultats proviennent de WordPress lui-même et s'affichent via votre thème Vous choisissez l'apparence du formulaire : un champ de saisie complet avec une icône ou un bouton texte, ou une icône de recherche solitaire qui se développe dans un écran de recherche contextuel.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif Besoin d'aide ? voir le guide d'installation.
- L'élément Recherche activé dans le tableau de bord Master Addons si vous avez précédemment désactivé les widgets.
Comment ajouter le widget Elementor Search #
Ouvrez l'éditeur Elementor et recherchez Recherche dans le panneau Éléments, ou faites défiler vers la section Addons principaux (cherchez le badge MA).Drapez le widget sur votre page Un formulaire de recherche de travail apparaît immédiatement avec une icône en forme de loupe comme contrôle de soumission.
Configurez l'onglet Contenu #
Le Contenu tab détient une décision principale plus quelques champs qui en découlent Le Type basculements déroulants entre les deux mises en page : Formulaire et Icône Popup.
Type : Formulaire #
Form est la mise en page classique, un champ de saisie avec un contrôle de soumission à droite. Le Soumettre le type de bouton dropdown décide de ce qu'est ce contrôle :
- Icône: affiche un bouton d'icône Choisissez l'icône dans la bibliothèque ci-dessous ; la loupe par défaut fonctionne pour presque tous les modèles.
- Bouton: affiche un bouton texte à la place. A Texte du bouton le champ apparaît à l'endroit où vous tapez l'étiquette, comme Rechercher ou Hit Enter.
Type : Icône Popup #
Icône Popup ne rend qu'une icône de recherche Lorsqu'un visiteur clique dessus, un écran de recherche s'ouvre sur la page avec un grand champ de saisie et un bouton de fermeture C'est la disposition à utiliser dans les en-têtes et les barres de navigation où un champ de recherche complet encombrerait le menu.
Choisir Icon Popup révèle le Paramètres contextuels section avec deux champs :
- Texte d'entrée : l'espace réservé à l'intérieur du champ de recherche de la popup, “Search ...” par défaut.
- Description: une ligne d'assistance sous le champ, telle que “Hit enter to search ou click X to close.”
Style le widget dans l'onglet Style #
Le Style tab a deux sections : Formulaire pour la zone de saisie et Bouton pour le contrôle de soumission.
Formulaire #
La section Form stylise le wrapper et le champ de saisie :
- Contexte: une couleur derrière la forme.
- Largeur: la largeur du formulaire en pixels Pratique lorsque le widget se trouve dans une colonne large et que vous souhaitez un champ de recherche plus serré.
- Marge de formulaire et remplissage de formulaire : espacement à l'extérieur et à l'intérieur de l'emballage.
- Type de frontière et rayon de frontière : le cadre autour de la forme et l'arrondi de ses coins.
- Typographie et couleur : la police et la couleur du texte de l'entrée.
- Couleur d'entrée du formulaire : la couleur de fond du champ de saisie lui-même.
Bouton #
La section Bouton stylise le contrôle de soumission, qu'il s'agisse d'une icône ou d'un bouton texte :
- Couleur de fond : le remplissage derrière le bouton.
- Couleur: l'icône ou la couleur du texte.
- Rembourrage et marge : l'espacement intérieur et extérieur du bouton.
- Typographie: famille de polices, taille et poids du texte du bouton.
Une note de dimensionnement : la hauteur du bouton suit le formulaire, donc si le texte du bouton semble exigu après un changement de taille de police, ajoutez un petit remplissage vertical du côté du formulaire plutôt que de combattre seul le remplissage du bouton.
Voir le résultat en direct #
Publiez la page et essayez le formulaire Cliquez dans le champ, tapez une requête et appuyez sur Entrée ou appuyez sur le bouton Soumettre.
WordPress prend le relais à partir de là et affiche les publications et pages correspondantes sur le modèle de résultats de recherche de votre thème :
Cas d'utilisation courants #
- Recherche d'en-tête : utilisez Icon Popup à côté du menu de navigation, la recherche se fait donc en un clic sans espace de menu de restauration.
- Barre latérale du blog ou pages d'archives : un champ de recherche de type Form aide les lecteurs à parcourir les publications plus anciennes.
- 404 pages: un formulaire de recherche est la chose la plus utile que vous puissiez mettre sur une page qui dit “non trouvé.”
- Bases de documentation et de connaissances : mettez un large formulaire de recherche au premier plan afin que les utilisateurs recherchent avant de faire défiler.
Conseils pour une meilleure barre de recherche #
- Faites correspondre la couleur du bouton à la couleur de l'accent de votre thème. Un bouton de recherche qui ressemble à tous les autres boutons du site est davantage utilisé.
- Gardez l'espace réservé court. “Recherche...” bat une phrase complète qui est coupée sur mobile.
- Utilisez Icon Popup dans des mises en page serrées. Un formulaire de recherche complet inséré dans une colonne d’en-tête a tendance à s’enrouler maladroitement à la largeur des comprimés.
- Testez la page des résultats. Le widget remet la requête à WordPress, alors vérifiez que le modèle de résultats de recherche de votre thème semble présentable avant de promouvoir le champ de recherche.
Tutoriel Vidéo #
Si vous souhaitez voir le widget Recherche en action, cette vidéo parcourt la configuration complète, du premier glisser jusqu'aux résultats de recherche sur la page en direct :
Foire aux questions #
Comment ajouter une barre de recherche dans Elementor ?
Installez Master Addons for Elementor, puis faites glisser le widget Recherche du panneau Éléments sur votre page Il restitue immédiatement un formulaire de recherche WordPress fonctionnel et vous pouvez basculer entre un formulaire complet et une fenêtre contextuelle d'icône à partir de la liste déroulante Type dans l'onglet Contenu.
Puis-je ouvrir la recherche dans une fenêtre contextuelle ?
Oui. Définir le type sur la fenêtre contextuelle de l'icône dans l'onglet Contenu Le widget affiche alors uniquement une icône de recherche, et en cliquant dessus ouvre un écran de recherche avec un grand champ de saisie, un espace réservé personnalisé et une ligne de description que vous contrôlez à partir des paramètres contextuels.
Puis-je modifier le texte du bouton de recherche ?
Oui. Avec Type défini sur Form, changez Soumettre le type de bouton en bouton et tapez votre étiquette dans le champ Texte du bouton Vous pouvez également conserver une icône à la place en laissant Soumettre le type de bouton sur l'icône et en choisissant n'importe quelle icône dans la bibliothèque.
D'où viennent les résultats de la recherche ?
Le widget se soumet à la recherche WordPress standard, les résultats incluent donc vos publications et pages et s'affichent sur le modèle de résultats de recherche de votre thème Aucune configuration de page de résultats distincte n'est nécessaire.
Le widget Master Addons Search est-il gratuit ?
Oui. Le widget Recherche est inclus dans la version gratuite de Master Addons et fonctionne avec Elementor gratuit Il n'affiche pas les résultats en direct lors de la saisie ; il utilise la recherche WordPress standard.
Envelopper #
Les modules principaux Recherche widget donne à Elementor la barre de recherche qui lui manque : une fenêtre contextuelle de formulaire ou d'icône que vous pouvez placer n'importe où et de style pour correspondre au design, avec des résultats servis par WordPress lui-même Il se marie bien avec le Contenu hors toile widget lorsque vous construisez un en-tête personnalisé Parcourez la collection complète de Widgets et extensions Master Addons(ou voir le) Recherche page widget pour les démos et une comparaison avec le widget Elementor Pro Search.
