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

Une page de résultats de recherche bien conçue aide les visiteurs à trouver rapidement un contenu ciblé, ce qui leur fait gagner du temps et les incite à naviguer davantage sur le site.

Elementor Pro Il s'agit de l'outil de base pour la mise en œuvre de telles pages. Il prend en charge le constructeur de thèmes, les modèles personnalisés et les contrôles avancés pour rendre l'ensemble de l'expérience de recherche plus flexible. L'étape suivante consiste à expliquer comment procéder.

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

La page de résultats de recherche personnalisés est utilisée pour afficher des blogs, des produits, des articles, des services et d'autres contenus correspondant à des mots clés. Vous êtes libre d'ajouter des titres, des images, des filtres et d'autres modules pour rendre la page plus attrayante et plus fonctionnelle.

Scénarios d'utilisation courante

• Commerce électronique : combinez recherche et filtres pour afficher rapidement des produits ciblés
• Blog : Filtrer les articles par mot-clé, catégorie ou auteur
• Base de connaissances : accès rapide à la recherche de documents
• Plate-forme de services : filtrer les services avec des prix, des évaluations et des régions différents
• Sites web éducatifs : recherche de cours, de manuels, de ressources d'apprentissage

Outils de préparation

Assurez-vous que le site web est installé :

• Elementor
• Elementor Pro

L'opération de création commence ensuite.

Étape 1 : Ouvrir Elementor Pro Theme Builder

• Se connecter aux coulisses
• Allez dans "Templates > Theme Builder".

• Trouvez le module "Résultats de recherche" et cliquez sur "Ajouter un nouveau modèle".

Le système entrera dans un canevas vierge pour les composants ultérieurs.

Étape 2 : Ajouter le titre et la description

• Cliquez sur le signe plus pour créer une nouvelle région

• Faites glisser et déposez le composant "Titre" dans la page de saisie.légende

• Ajuster les polices, les couleurs et les positions dans les styles

Ajoutez ensuite le composant "Éditeur de texte", entrez le texte de la description, également défini dans le "Style".type.

Étape 3 : Ajouter un champ de recherche

• Faites glisser le composant "Formulaire de recherche".

• Définissez les marges gauche et droite dans "Avancé > Marges" pour contrôler la largeur.

• Ajustez les polices, les arrière-plans, les bordures et les coins arrondis dans les Styles.

Les coins arrondis du bouton de recherche et de la boîte de recherche peuvent être définis séparément pour obtenir un style visuel unifié.

Étape 4 : ActiverRecherche en temps réelFonctionnalité

• Passer à l'onglet "Contenu
• Ouvrez l'option Résultats en direct dans la section Résultats.
• Définir le nombre maximum de correspondances à afficher

Étape 5 : Créer un modèle de résultats en direct

• Cliquez sur "Créer un modèle" pour saisir le nouveau canevas.

• Sélection des structures de rangées horizontales

• Faites glisser le composant Image en vedette, réglez-le sur une taille moyenne et ajustez les coins arrondis.

• Faites glisser le composant "Titre de l'article" et définissez la police et la couleur.

• Enregistrer le modèle

Ce modèle détermine le format de chaque élément de contenu affiché lors d'une recherche.

Étape 6 : Appliquer le modèle aux résultats de la recherche

Revenez à la page principale et sélectionnez le modèle que vous venez d'enregistrer dans le module Résultats en direct.

À ce stade, vous pouvez définir le nombre d'éléments à afficher, la méthode de tri, etc.

Étape 7 : Personnalisation du style des résultats en temps réel

Régler dans Style > Résultat :

• contextescouleur
• Bordures et coins arrondis
• marge intérieure
• Largeur des colonnes et espacement des projets

Saisissez le mot-clé lorsque vous avez terminé et les résultats de l'affichage en temps réel apparaîtront sous le champ de saisie.

Étape 8 : Ajouter le composant "Archives d'articles

• Créer une nouvelle zone de paragraphe
• Faites glisser le composant "Archive Posts".

Ce composant affiche le contenu de tous les articles publiés sur le site web actuel.

Étape 9 : Configurer l'affichage des articles

Défini dans "Contenu" :

• Nombre de colonnes, position de l'image et résolution

• Afficher le titre, le résumé, les méta-informations et "Lire la suite"
• Nombre de caractères par rapport aux champs de méta-information (par exemple, dates, commentaires, etc.)

• mettre en placefenêtre à onglets (dans un navigateur web, etc.)Mode et alignement

Étape 10 : Améliorer la liste des articles

Défini dans "Style" :

• Espacement et alignement des colonnes

• Marges de l'image et coins arrondis

• Polices et couleurs pour les titres, les résumés et les méta-informations

• Le style du bouton de pagination est le même que celui du boutonsurvoleffet

Une fois tous les réglages effectués, le contenu de la page sera plus étroitement aligné sur le style général du site.

Étape 11 : Sauvegarde et prévisualisation

Sauvegardez et allez à l'aperçu du frontend, entrez un mot clé et cliquez sur recherche, vous verrez les résultats de la recherche en temps réel apparaître en haut et une liste d'archives d'articles complets s'afficher en bas.

Foire aux questions : Affichage confus des pages ?

Parfois, la page est vide ou mal structurée après avoir cliqué sur la recherche parce qu'elle n'est pas configurée.Page d'archivesModèle.

Solution :

• Retournez à "Templates > Theme Builder".
• Création d'un modèle "archive
• Définir la présentation, la sauvegarder et l'activer pour la corriger

résumés

utiliser Elementor Pro Il est facile de créer une page de résultats de recherche entièrement fonctionnelle et d'aspect professionnel. Qu'il s'agisse d'une boîte de recherche, d'un affichage des résultats en temps réel ou du contenu d'une archive d'articles, elle est hautement personnalisable pour répondre aux besoins de votre site. Elle peut également être étendue pour couvrir un large éventail de scénarios, tels querépertoire (sur le disque dur de l'ordinateur)Création de pages telles que Pages, Pages filtres, Centre de connaissances, etc.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.