Comment créer une page de résultats de recherche personnalisée dans Elementor

Une page de résultats de recherche bien conçue joue un rôle crucial dans l’amélioration de l’expérience utilisateur. Il permet aux visiteurs de naviguer rapidement vers le contenu pertinent qu'ils recherchent. Cela leur fait non seulement gagner du temps dans la navigation dans le contenu, mais les encourage également à explorer davantage.

Elementor est un constructeur de pages incontournable pour des millions de sites Web WordPress. Il fournit un générateur de thèmes et des widgets utiles grâce auxquels vous pouvez facilement créer une page de résultats de recherche. Dans cet article de didacticiel, nous vous expliquerons comment créer une page de résultats de recherche personnalisée dans Elementor.

N'oubliez pas que le champ de recherche est l'élément principal de toute page de résultats de recherche. C'est là que les gens saisissent leurs mots-clés pour trouver des articles et des produits pertinents. Nous allons donc d’abord créer un champ de recherche dynamique à l’aide d’Elementor. Ensuite, nous terminerons la page en ajoutant un widget d'archive, ce qui en fera une page d'archive de blog.

Qu’est-ce qu’une page de résultats de recherche personnalisée dans Elementor ?

Une page de résultats de recherche est une page Web dédiée qui permet aux utilisateurs et aux visiteurs de naviguer rapidement vers des types de contenu spécifiques, tels que des articles de blog, des produits de commerce électronique et des éléments de portefeuille. De telles pages sont obligatoires pour les sites Web à contenu lourd.

Une page de résultats de recherche personnalisée vous permet d'incorporer divers éléments tels que des images en vedette, des titres personnalisés, des filtres, etc., à votre guise pour que la page soit belle. Cela améliore non seulement l'expérience utilisateur, mais contribue également à augmenter les conversions.

Cas d'utilisation des pages de résultats de recherche personnalisées dans WordPress

Avant de passer au didacticiel, examinons quelques cas d’utilisation des pages de résultats de recherche personnalisées dans WordPress. Parcourez la liste ci-dessous.

• Sites Web de commerce électronique

Afficher la page de résultats de recherche de produits avec des filtres. Les visiteurs peuvent utiliser la barre de recherche pour trouver le produit exact ou des filtres pour les trier par prix, notes et catégories.

• Sites de blogs

Les articles de blog et les articles sont affichés en fonction de balises et de catégories. Les utilisateurs peuvent les trier par auteur, date et autres requêtes.

• Page de la base de connaissances

Les pages de la base de connaissances couvrent généralement des guides de documentation de bricolage et des ressources utiles. La fonction de recherche est indispensable sur ces pages pour explorer rapidement le contenu utile.

• Entreprises basées sur les services

Les utilisateurs peuvent trier les services souhaités en fonction des notes, des fourchettes de prix, des offres et d'autres détails pertinents avant de réserver ou de remplir un formulaire de contact.

• Sites Web éducatifs

Les options avancées de recherche et de filtrage vous permettent de rechercher des cours, des leçons et du matériel d'étude afin que les étudiants et les apprenants puissent facilement trouver le contenu dont ils ont besoin.

Comment créer une page de résultats de recherche personnalisée dans Elementor

La partie théorique est terminée. Dans cette section, nous allons maintenant aborder la partie tutoriel sur la façon de créer une page de résultats de recherche personnalisée dans Elementor. Assurez-vous que les plugins suivants sont disponibles sur votre site.

• Élémenteur
• Élémentor Pro

Une fois que vous les avez sur votre site, suivez le tutoriel expliqué ci-dessous.

Étape 01 : Accédez au générateur de thèmes Elementor

Connectez-vous à votre tableau de bord WordPress. Ensuite, accédez à Modèles > Générateur de thèmes .

Sélectionnez l’option Résultats de la recherche sous Parties du site. Ensuite, cliquez sur le bouton + Ajouter un nouveau .

Cela ouvrira le canevas Elementor, où vous pourrez ajouter n'importe quel widget que vous souhaitez pour créer la page de résultats de recherche personnalisée.

Étape 02 : Créez une nouvelle section pour ajouter le widget de recherche

Cliquez sur l' icône plus (+) sur le canevas. Ensuite, sélectionnez la structure de colonnes souhaitée.

Vous devez écrire un titre pour la section. Ceci est utile pour le référencement.

Alors, faites glisser et déposez le widget Titre dans la section. Cela vous permettra d'écrire un titre pour la section.

Accédez à l' onglet Styles . Vous aurez des options pour modifier la couleur, la typographie, la taille de la police, l'alignement et bien plus encore du texte du titre. Faites-le vous-même.

De même, faites glisser et déposez le widget Éditeur de texte dans la section sous le texte du titre. Ensuite, écrivez le texte de votre choix et personnalisez-le comme indiqué ci-dessus.

Étape 03 : Ajoutez le widget de recherche dans la section

Recherchez le widget Recherche . Faites-le glisser et déposez-le dans la section sous le widget Éditeur de texte de la même manière qu'indiqué ci-dessus.

Étape 04 : Personnalisez le widget de recherche

Par défaut, le widget de recherche sera affiché sur toute la largeur du canevas. Accédez à l' onglet Avancé pour réduire sa largeur.

Vous verrez la section Marge . Placez les valeurs souhaitées dans les zones de section à droite et à gauche. Vous verrez que la largeur du widget de recherche a été réduite.

Ensuite, accédez à l' onglet Style . Vous aurez la possibilité de modifier la typographie du texte de l'espace réservé, la couleur d'arrière-plan du champ de recherche, le type de bordure, etc. Faites-le vous-même en fonction des exigences de la conception de votre site Web.

Ce que nous avons fait ici, c'est ajouter une valeur de rayon au champ de recherche. Nous avons placé la valeur dans les cases Haut et Gauche sous le rayon de bordure.

De même, nous avons ajouté un rayon au bouton de recherche. Pour ce faire, développez la section Bouton d'envoi sous l'onglet Style. Placez les valeurs dans les cases Droite et Bas sous Rayon.

Vous verrez les changements instantanément. Si vous souhaitez ajouter un effet de survol, une couleur d'arrière-plan, une ombre de boîte, etc., explorez les options disponibles.

Découvrez comment créer un modèle d'article de blog avec Elementor.

Étape 05 : Configurer l'option de résultats

Nous espérons que vous avez une idée de la fonctionnalité de recherche Ajax. Chaque fois qu'un utilisateur commence à saisir quelque chose, plusieurs résultats s'affichent instantanément juste sous le champ de recherche.

L' option Résultats du widget de recherche vous permet d'activer cette fonctionnalité et de configurer le nombre total de résultats instantanés que vous souhaitez afficher sous le champ de recherche.

Accédez à l' onglet Contenu . Ensuite, développez la section Résultats .

Activez l' option Résultats en direct . La fonctionnalité est désormais activée.

Étape 06 : Créer un modèle pour les résultats en direct

Elementor vous permet de créer un modèle de résultats en direct grâce auquel vous pouvez spécifier comment le contenu sera affiché chaque fois que l'utilisateur tape dans le champ de recherche.

Cliquez sur le bouton Créer un modèle sous la section Résultats.

Cela vous amènera à une nouvelle toile. Ici, vous devez créer une mise en page pour les résultats de recherche en direct et l'enregistrer en tant que modèle.

Sélectionnez une structure de colonnes comme vous le souhaitez. Nous avons sélectionné la ligne directionnelle . Il continuera à s’afficher sur le côté droit au fur et à mesure que vous ajouterez des éléments à cette section.

Nous souhaitons utiliser ce champ de recherche pour présenter les articles de blog. Ainsi, chaque fois que quelqu’un saisit un sujet de blog, le champ de recherche doit afficher une liste d’articles de blog pertinents. Pour ce faire, nous devons ajouter des widgets de publication recommandés.

Faites glisser et déposez le widget Image sélectionnée dans la section.

Par défaut, l’image présentée sera de grande taille. Tout d’abord, dans l’ option Résolution de l’image , sélectionnez la taille Moyenne .

Ensuite, accédez à l' onglet Style . Utilisez des options telles que l'alignement, la largeur et le rayon, vous pouvez réduire davantage la taille de l'image présentée, comme le montre la capture d'écran ci-jointe ci-dessous.

De la même manière, placez le widget Titre de l'article à côté de l'image sélectionnée.

Vous pouvez voir que nous avons réduit la taille de la police et changé sa couleur.

Remarque : à ce stade, enregistrez le modèle . Vous pouvez y ajouter d'autres éléments si vous le souhaitez.

Apprenez à créer un site Web de CV avec Elementor.

Étape 07 : ajouter le modèle au résultat

Accédez à la page principale de ce que nous étions en train de concevoir. En cliquant sur l'icône déroulante sous la section Résultats, choisissez un modèle que vous avez conçu il y a quelques instants.

Une fois un modèle sélectionné, plusieurs nouvelles options apparaîtront en dessous. En les utilisant, vous pouvez configurer le nombre total d'éléments qui seront affichés sous le champ de recherche.

Étape 08 : Styliser la mise en page des résultats en direct

Revenez à l' onglet Style et développez la section Résultats. Vous pouvez styliser le type d'arrière-plan, le type de bordure, le rayon, le remplissage, la distance par rapport au champ de recherche, la hauteur des colonnes, la largeur et l'espace entre les lignes et les colonnes.

Aperçu des résultats en direct

Maintenant, tapez quelque chose dans le champ de recherche. Vous verrez une liste de trois éléments pertinents pour le sujet tapé apparaître ci-dessous.

Cela garantit que le widget de recherche fonctionne parfaitement.

Remarque : Votre widget de recherche est prêt et entièrement fonctionnel. Vous pouvez créer des champs de recherche n'importe où sur votre site Web, par exemple dans l'en-tête, le pied de page et les pages, de la même manière. Ces champs de recherche sont généralement placés dans les pages d’en-tête et de publication d’archives.

Étape 09 : ajouter le widget de publications d'archives

Créez une nouvelle section sous la section du champ de recherche. Ensuite, faites glisser et déposez le widget Archive Posts dans la nouvelle section.

Cela affichera tous les articles de blog au format grille que vous avez publiés sur votre site Web.

Étape 10 : configurer les paramètres du widget de publications d'archives

Il est maintenant temps de personnaliser le widget Archive Posts et de le mettre en page comme vous le souhaitez. Le widget dispose de nombreuses options de personnalisation. Tout d’abord, configurez les paramètres de base. Accédez à l' onglet Contenu et développez la section Mise en page .

Choisissez le nombre de colonnes, la position de l'image et la résolution de l'image . Nous avons sélectionné 2 colonnes, défini la position de l'image en haut et la résolution complète.

Après cela, activez les options Titre, Extrait, Métadonnées et Lire la suite . Mais si vous ne voulez aucune option, laissez-la désactivée.

Pour définir la longueur de l'extrait, définissez le nombre de caractères à côté. En outre, spécifiez le type de métadonnées que vous souhaitez afficher. Nous avons sélectionné les options de métadonnées Données et Commentaires pour le widget.

La pagination divise vos publications en plusieurs pages. L'expansion de la section de pagination vous permet de configurer le type de pagination, l'alignement, la limite de pages et de raccourcir les fichiers .

Découvrez comment créer un formulaire de contact avec Elementor.

Étape 11 : Styliser le widget des publications d'archives

Accédez à l' onglet Styles . Ici, vous trouverez plusieurs options. Tout d’abord, développez la section Mise en page .

Vous pouvez personnaliser l' espacement des colonnes, l'espacement des lignes et l'alignement .

L'expansion de la section Image vous permettra de définir le rayon de bordure et l'espacement entre les images et les autres éléments.

De la même manière, en développant la section Contenu , vous pouvez styliser la typographie, la couleur et l'espacement des textes Titre, Méta, Extrait et Lire la suite.

Enfin, développez la section Pagination . Cela vous permettra de personnaliser la typographie, les couleurs, les effets de survol et les espaces pour les éléments de pagination.

Remarque : En effet, il existe bien plus d’options pour chaque widget Elementor, notamment le widget Archive Posts. Dans le didacticiel ci-dessus, nous avons essayé de vous donner une idée de base des personnalisations que vous pouvez effectuer pour le widget Archive Posts. J'espère que vous pourrez explorer et utiliser d'autres options que celles-ci.

Étape 12 : Enregistrez et prévisualisez la page des résultats de la recherche

Maintenant, venons au mode aperçu de la page. Tapez quelque chose dans la case et appuyez sur le bouton Rechercher . Vous verrez les articles de blog associés apparaître ci-dessous sous forme de grille.

Une erreur ? La page de résultats de recherche semble cassée !

Après avoir appuyé sur le bouton de recherche, vous pourriez avoir peur si vous voyez les articles de blog associés apparaître comme l'image ci-dessous. Vous pourriez avoir l’impression que la page est cassée.

Ne t'inquiète pas! Il est très simple de résoudre le problème.

Il vous suffit de créer une page Archive dans le générateur de thème Elementor. La façon dont vous concevez la page d'archives affectera la façon dont les articles de blog associés seront affichés après avoir cliqué sur le bouton Rechercher.

Si vous souhaitez que nous créions un article de didacticiel distinct sur la façon de créer une page d'archive avec Elementor, faites-le nous savoir via la section commentaires. Nous envisagerons de concevoir une telle page en fonction de vos attentes.

C'est donc la fin de la partie tutoriel de l'article. Ainsi, vous pouvez créer une page de résultats de recherche en utilisant Elementor sur WordPress.

Point bonus : utilisez HappyAddons pour obtenir plus de widgets pour Elementor

HappyAddons est un module complémentaire important avec une grande collection de widgets puissants pour Elementor. Si jamais vous pensez que les widgets Elementor disponibles ne suffisent pas et que vous en recherchez davantage, vous pouvez essayer le plugin HappyAddons.

HappyAddons est livré avec plus de 120 widgets et des dizaines de fonctionnalités qui peuvent faire passer votre site Elementor à un nouveau niveau. Le plugin a à la fois une version gratuite et une version premium. Vous pouvez d'abord essayer avec la version gratuite. Si vous êtes satisfait, vous pouvez passer à la version premium à tout moment et faire quelque chose de génial.

Obtenez le plugin en cliquant sur les boutons ci-dessous.

Conclusion

Créer une page de résultats de recherche n’est pas un luxe aujourd’hui mais est obligatoire pour améliorer l’expérience utilisateur. Il vous aide à maintenir l’attrait et la valeur de marque de votre site Web. Si votre site est principalement destiné aux produits de commerce électronique, au marketing d'affiliation et aux blogs, ce n'est jamais suffisant sans une page de résultats de recherche.

Espérons qu'en suivant le didacticiel expliqué ci-dessus, vous pourrez créer de superbes pages de résultats de recherche sur votre site Elementor. Cependant, n'oubliez pas d'optimiser le widget de recherche pour les tablettes et les appareils mobiles afin que tous les types de personnes puissent utiliser cet élément.