Comment créer des pages de résultats de recherche personnalisées avec Elementor : un guide pratique complet

Elementor offreConstructeur de thèmeset de puissants widgets peuvent vous aider à créer facilement des pages de résultats de recherche personnalisées. Ce tutoriel explique comment vous pouvez utiliser Elementor pour créer une page de résultats de recherche personnalisée tout en l'adaptant aux besoins de votre site web.

Qu'est-ce qu'une page de résultats de recherche personnalisée ?

Page de résultats de la recherche Une page de résultats de recherche est une page destinée à afficher les résultats de la recherche d'un contenu par un utilisateur, généralement des articles de blog, des produits ou d'autres contenus catégorisés. Pour les sites web riches en contenu, une page de résultats de recherche peut aider les utilisateurs à trouver rapidement les informations dont ils ont besoin.

un Page de résultats de recherche personnalisée Il vous permet d'intégrer davantage de fonctionnalités en fonction de vos besoins réels, telles que des images vedettes, des en-têtes personnalisés, des filtres, etc. Cela n'est pas seulement agréable sur le plan esthétique, mais améliore également l'expérience globale de l'utilisateur et augmente les conversions.

Cas d'utilisation courants pour la personnalisation des pages de résultats de recherche dans WordPress

Avant de nous plonger dans le tutoriel, voici quelques cas d'utilisation courants pour la personnalisation de la page de résultats de recherche :

1. Site web de commerce électronique
2. Site du blog
3. Page de la base de connaissances
4. entreprise orientée services
5. Site web de l'éducation

Créer des pages de résultats de recherche personnalisées dans Elementor

Dans ce tutoriel, nous allons vous guider pas à pas dans la création d'une page de résultats de recherche personnalisée entièrement fonctionnelle dans Elementor.

conditions préalables

Assurez-vous que les plugins suivants sont installés sur votre site :

• Elementor
• Elementor Pro

Lorsque vous êtes prêt, suivez les étapes ci-dessous.

Étape 1 : Accéder au constructeur de thèmes Elementor

1. Connectez-vous à votre tableau de bord WordPress et accédez à la section Modèles > Constructeur de thèmes.

2. Dans le générateur de thèmes, sélectionnez Résultats de la recherchepuis cliquez sur + Ajouter un nouveau pour créer un nouveau modèle de page de résultats de recherche.

Vous accéderez ainsi à l'éditeur de pages Elementor, où vous pourrez librement glisser-déposer des widgets pour créer des pages.

Étape 2 : Création de la section "Boîte de recherche

1. Création d'une nouvelle section
   frappe (sur le clavier) Signe plus (+) sélectionnez la structure de colonnes appropriée (par exemple, une seule colonne ou plusieurs colonnes), puis sélectionnez la structure à une seule colonne.

2. Ajouter un titre
   commandant en chef (militaire) Widget titre Faites un glisser-déposer en haut de la section et écrivez un titre court pour la page de recherche (par exemple, "Résultats de la recherche").
   • existent type qui vous permet de personnaliser les couleurs, les polices, l'alignement, etc. des titres afin qu'ils s'intègrent à la conception générale de la page.

3. Ajouter une description
   glisser-déposer (informatique) Widget éditeur de texte Allez au bas du titre et ajoutez une brève description de la page (par exemple, "Voici les résultats de votre recherche").

Étape 3 : Ajouter le widget de recherche

1. Glisser-déposer des widgets de recherche
   Trouvez dans l'élément Widgets de recherchePour ce faire, vous pouvez utiliser la fonction "glisser-déposer" sous l'éditeur de titre ou de texte.

2. Widget de recherche personnalisé
   • entrer dans Onglet Avancé, ajuster le champ de recherche de l'applicationampleurdéfinit les valeurs des marges gauche et droite.
   • existent Onglet Style dans laquelle vous pouvez personnaliser la couleur d'arrière-plan, la bordure et le style du texte de l'espace réservé de la boîte de recherche.
   • Ajoutez des coins arrondis aux boîtes de recherche et aux boutons : dans la rubrique Rayon de la bordure Saisissez une valeur appropriée (par exemple 10px) dans le champ de recherche pour le rendre plus esthétique.

3. Activer la fonction de recherche en temps réel
   • existent Onglet Contenu > Résultats section, activez Résultats en temps réelet définissez le nombre de résultats à afficher sous la boîte de recherche.

Étape 4 : Créer un modèle pour les résultats de recherche en temps réel

Le modèle de résultats en direct est une présentation dynamique du contenu qui s'affiche lorsqu'un utilisateur saisit un mot clé dans le champ de recherche.

1. existent Section des résultats Dans le cadre de la Créer un modèle pour accéder à une nouvelle page.

2. Ajouter une image en vedette
   • glisser-déposer (informatique) Widget des articles en vedetteL'affichage des images de présentation des résultats de recherche.
   • existent Onglet Style Ajuste la taille, l'alignement et le rayon de la bordure de l'image dans la fenêtre d'accueil.

3. Ajouter le titre de l'article
   • glisser-déposer (informatique) Widget du titre de l'article Allez à côté de l'image vedette et définissez la taille, la couleur et l'alignement de la police.

Une fois la conception terminée, enregistrez le modèle et revenez à la page principale du canevas pour associer le modèle à l'option Résultats de la recherche en direct.

Étape 5 : Ajouter le widget Archive Posts

existentSous la boîte de rechercheCréez une nouvelle section pour afficher la liste complète des résultats de la recherche :

1. glisser-déposer (informatique) Widget des messages archivés à la nouvelle section.

2. Configuration Layout :
   • commutateur à Onglet Contenu > Mise en pageVous pouvez définir le nombre de colonnes (par exemple, 2 colonnes) et la position de l'image (par exemple, en haut).
   • Activez les options de titre, d'extrait et de métadonnées, et personnalisez la longueur des caractères et les types de métadonnées (comme les dates ou les commentaires).

3. Styles personnalisés :
   • entrer dans Onglet StyleLe site Web de la Commission européenne peut être consulté sur le site Web de la Commission européenne.
   • Des styles de pagination personnalisés permettent aux utilisateurs de naviguer facilement entre plusieurs pages de résultats.

Étape 6 : Sauvegarde et prévisualisation

Une fois la conception terminée, enregistrez la page des résultats de la recherche et cliquez sur le bouton avant-premières Voir l'effet.

• Saisissez un mot-clé dans le champ de recherche et cliquez sur le bouton de recherche.
• Vérifiez que les résultats en temps réel et le contenu complet des messages archivés s'affichent correctement.

Comment puis-je résoudre un problème avec ma page de résultats de recherche ?

Si vous constatez que la page ne s'affiche pas correctement après avoir cliqué sur le bouton de recherche, vous pouvez suivre les étapes ci-dessous pour y remédier :

1. Création de modèles de pages d'archives
   Concevez un modèle de page d'archive spécialisé dans le créateur de thèmes Elementor et associez-le à la page de résultats de recherche.
2. Vérifier les paramètres du widget
   Assurez-vous que tous les widgets sont correctement configurés, en particulier le modèle de résultats en direct et les widgets d'articles archivés.