Comment créer un modèle de page de résultats de recherche dans Divi
Publié: 2019-11-13Nous nous sommes tous habitués à utiliser des formulaires de recherche pour trouver ce dont nous avons besoin sur un site Web. Ainsi, lors de la création d'un site Web dans Divi, nous devons vraiment prendre en compte la conception du modèle de résultats de page qui déterminera l'apparence de ces résultats de recherche.
Dans ce didacticiel, nous allons expliquer comment créer un modèle de page de résultats de recherche simple et élégant à l'aide de Divi Theme Builder. Nous vous montrerons comment inclure les éléments cruciaux d'un modèle de page de résultats de recherche, y compris un titre de résultats de page dynamique et le contenu de recherche pertinent généré par un module de blog.
Commençons.
Aperçu
Voici un aperçu du modèle de page de résultats de recherche que nous allons créer.
Téléchargez le(s) modèle(s) GRATUITEMENT
Pour mettre la main sur le modèle de page de résultats de recherche de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et ajoutez l'un des fichiers json dans le générateur de thème Divi à l'aide de l'option Portabilité du générateur de thème.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devrez installer et activer le thème Divi. Assurez-vous d'avoir la dernière version de Divi.
Vous aurez également besoin de quelques articles/pages créés à des fins de test pour que la page de résultats de recherche affiche réellement les résultats.
Après cela, vous êtes prêt à partir.
À propos de la page des résultats de recherche
Dans Divi, la page de résultats de recherche est la page vers laquelle un utilisateur est redirigé une fois qu'il a saisi une requête de recherche dans l'un des formulaires de recherche de Divi. Les requêtes de recherche possibles qui mènent à la page des résultats de recherche incluent le formulaire de recherche dans l'en-tête Divi par défaut, la recherche générée à partir du module de recherche dans Divi Builder et le widget de recherche intégré à WordPress.
Par défaut, la page de résultats de recherche affichera simplement les pages ou les articles recherchés dans un flux, un peu comme une page de blog typique. Mais avec Divi, vous pouvez concevoir le modèle comme vous le souhaitez en utilisant Divi Theme Builder.
Comment créer un modèle de page de résultats de recherche dans Divi
Créer un nouveau modèle
Pour commencer, accédez au tableau de bord WordPress et accédez à Divi > Générateur de thèmes. Cliquez ensuite sur la zone « Ajouter un nouveau modèle ».
Sous les paramètres du modèle, attribuez le modèle Résultats de la recherche.
Cliquez ensuite sur la zone Ajouter un corps personnalisé du nouveau modèle et sélectionnez « Créer un corps personnalisé ».
Sélectionnez pour Construire la mise en page à partir de zéro.
Conception du modèle de page de résultats de recherche à l'aide de l'éditeur de mise en page de modèle
La section d'en-tête du modèle de résultats de page
Dans l'éditeur de mise en page de modèle, lancez la conception du modèle en ajoutant une ligne d'une colonne à la section par défaut. C'est là que nous allons construire notre en-tête de page pour le modèle.
Accent de conception de module de séparation
Insérez ensuite un module diviseur. Cela servira d'accent de conception à notre en-tête de page.
Mettez à jour le style de séparation comme suit :
- Couleur de la ligne : #3a405a
- Position de la ligne : Bas
- Poids du diviseur : 5px
- Indice Z : -1
Module de texte avec en-tête
Sous le module Divider, ajoutez un nouveau module de texte avec le contenu suivant :
<h1>Search Results</h1>
La mise à jour de la conception du texte comme suit :
- Couleur d'arrière-plan : #ffffff
- Alignement du texte : au centre
- Police de titre : Muli
- Poids de la police d'en-tête : lourd
- Couleur du texte du titre : #3a405a
- Taille du texte du titre : 70 px (ordinateur de bureau), 40 px (tablette), 22 px (téléphone)
- Hauteur de la ligne de titre : 80px
- Largeur maximale : 60 %
- Alignement du module : Centre
- Hauteur minimale : 80px
Nous pouvons maintenant déplacer le module de texte vers le haut pour chevaucher le séparateur en ajoutant une marge personnalisée.
- Marge : -75px
Module de recherche
Sous le module de texte avec le titre, ajoutez un module de recherche. Cela sera utile aux utilisateurs qui souhaitent continuer à rechercher votre blog/site une fois qu'ils ont atterri sur la page des résultats de recherche.
Ajoutez du texte d'espace réservé pour le formulaire.
Vous avez également la possibilité d'exclure certaines pages, publications et/ou catégories des résultats de la recherche en sélectionnant des options sous le groupe d'options d'exceptions. Par exemple, si vous créez un formulaire de recherche principalement pour votre blog, vous souhaiterez peut-être exclure des pages des résultats de recherche afin que seuls les articles de blog s'affichent.
Mettez ensuite à jour les paramètres de recherche comme suit :
- Couleur de l'espace réservé : #3a405a
- Couleur d'arrière-plan du champ : #ffffff
- Police de champ : Montserrat
- Taille du texte du champ : 20px
- Couleur du bouton et de la bordure : #3a405a
- Police des boutons : Muli
- Poids de la police du bouton : gras
- Couleur du texte du bouton : #ffffff
- Taille du texte du bouton : 18px
- Largeur : 100 %
- Largeur maximale : 300 px
- Alignement du module : Centre
- Coins arrondis : 8px
Cela prend en charge notre section de titre pour la plupart.
Remplissage de ligne
Avant de commencer la section suivante, retirons le rembourrage inférieur de la ligne.
- Remplissage : 0px en bas
Création de la section Corps du modèle de résultats de recherche
Nous sommes maintenant prêts à ajouter notre deuxième section du modèle qui contiendra le titre de l'archive des résultats de recherche et le contenu des résultats de recherche.
Création de la nouvelle section et de la nouvelle ligne
Sous la section supérieure, ajoutez une nouvelle section régulière à la mise en page.
Ajoutez ensuite une ligne à une colonne à la section.
Ajout du titre de la publication/de l'archive en tant que contenu dynamique
La page de résultats de recherche bénéficiera d'un titre qui affiche la requête de recherche saisie par l'utilisateur. Nous pouvons l'ajouter à la page à l'aide d'un module de texte et en tirant l'élément de contenu dynamique du titre de la publication/de l'archive.
Tout d'abord, ajoutez un module de texte.
Supprimez le texte factice à l'intérieur de la zone de contenu du corps et sélectionnez l'icône Contenu dynamique qui s'affiche lorsque vous survolez la zone de contenu du corps. Sélectionnez ensuite le titre de la publication/de l'archive dans la liste.
L'élément Post/Archive Title commence par la phrase « Results for » suivie du contenu/requête de recherche entre parenthèses. Vous trouverez ci-dessous un exemple de ce qui s'afficherait si un utilisateur recherche le terme « entreprise ».
Ensuite, mettez à jour les paramètres de conception du module de texte comme suit :
- Police du texte : Muli
- Poids de la police de texte : lourd
- Texte Couleur du texte : #d30c7b
- Taille du texte : 22px
- Alignement du texte : Centre
- Style d'animation : diapositive
- Direction de l'animation : vers le bas
- Intensité de l'animation : 250%
L'animation ajoutée révélera le titre du résultat de la recherche sous le style de séparation « nuage » (nous l'ajouterons un peu plus tard). Ainsi, chaque fois qu'un utilisateur entre une nouvelle requête de recherche, le titre se déroulera pour un effet sympa.
Ajouter une nouvelle ligne
Sous le module Texte contenant l'élément de titre de publication/archive, créez une nouvelle ligne à une colonne.
Ajoutez un module de blog à la ligne. Cela affichera les messages/contenus réels de la page de résultats de recherche.
Mettez à jour les paramètres de contenu du module de blog comme suit :
- Messages pour la page actuelle : OUI
- Nombre de messages : 9
- Longueur de l'extrait : 120
- Afficher l'auteur : NON
L'option la plus importante ici est les messages pour la page actuelle. Celui-ci doit être actif pour que la page de résultats de recherche affiche le contenu dynamique de la recherche.
Ensuite, mettez à jour la conception du module de blog comme suit :
- Disposition : Grille
- Police du titre : Muli
- Poids de la police du titre : ultra gras
- Couleur du texte du titre : #3a405a
- Taille du texte du titre : 24 px
- Hauteur de la ligne de titre : 1,3 em
- Police de caractère : Montserrat
- Couleur du corps du texte : #3a405a
- Disposition de la grille, coins arrondis : 10px
- Largeur de la bordure de la disposition de la grille : 0px
- Box Shadow : afficher la capture d'écran
- Position verticale de l'ombre de la boîte : 0px
- Boîte Ombre Flou Force 15px
- Force de propagation de l'ombre de la boîte: -5px
Ensuite, mettez à jour le style de pagination comme suit :
Fond de section et diviseur
Comme touche finale à la conception, mettez à jour les paramètres de la section comme suit :
- Couleur de fond : #eeeeee
- Style de séparateur supérieur : voir capture d'écran
- Couleur du séparateur : #ffffff
- Diviseur Flip: vertical
- Disposition des séparateurs : au-dessus du contenu de la section
- Rembourrage : 100 pixels en haut
Résultat final
Voici le résultat final du modèle de page lors de la recherche du terme « entreprise » sur le site en direct.
Voici le design sur tablette et téléphone.
Et voici un exemple de l'animation du titre des résultats de recherche lors de l'utilisation du formulaire de recherche pour les requêtes supplémentaires sur la page des résultats de recherche.
Dernières pensées
Une page de résultats de recherche peut être un outil utile pour les utilisateurs, c'est donc une excellente idée de lui donner l'attention qu'elle mérite. Avec Divi, vous pouvez créer un modèle de résultats de recherche avec tous les éléments dynamiques nécessaires à l'aide du Divi Visual Builder lors de la conception du modèle. Aucune connaissance du code requise. J'espère que cela vous donnera un peu d'inspiration pour créer un modèle de page de résultats de recherche personnalisé pour votre propre blog ou site.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!