Divi : une page de résultats de recherches personnalisée

Création du modèle dans le Thème Builder

Rendez-vous dans le Thème Builder,

(Menu WordPress puis Divi > Thème Builder)

Dans le Thème Builder, choisir un espace libre. Cliquer sur le [+] « Ajouter un nouveau modèle ».

La fenêtre « Paramètre des modèles » s’ouvre avec la liste des modèles disponibles. Tout en bas de la liste, cocher la case « Résultats de recherche » pour valider ce modèle.

Cliquer ensuite sur « Ajouter un corps personnalisé » puis « Construire un corps personnalisé ». Nous sommes ensuite conduits sur la page vierge à éditer, une section par défaut est déjà en place.

Paramétrage de la section bannière

Dans la section déjà présente, vous pouvez ajouter, une couleur ou une image en fond de section. Pour cela, rendez-vous dans les paramètres de la section, puis dans l’onglet « Contenu » vous pourrez faire cela dans la partie « Fond ».

Ajouter ensuite une rangée à cette section (rangée ici à 1 colonne).

Dans la vidéo, j’insère 2 modules : 1 module « Résumé » pour faire apparaître une icône loupe puis un module « Texte » en dessous. Je me sers du module texte pour créer un titre dynamique qui changera à chaque nouvelle recherche. Ce titre aura cette allure :  » Résultats pour « mot recherché » ».

Il est aussi possible, d’insérer uniquement le module « Résumé » pour faire apparaître l’icone mais aussi pour créer un titre dynamique. 

– Pour faire apparaître l’icône, dans les paramètres du module, se rendre dans l’onglet « Contenu » puis « Images et icônes » -> Utiliser les cônes.)

– Pour créer un titre dynamique avec le module « Résumé », toujours dans l’onglet « Contenu » dans « Texte » puis « Titre » cliquer sur les 3 petits disques puis choisir « Poster / Titre de l’archive ».

En faisant cette opération, un titre dynamique apparaîtra à la place du titre classique (fixe).

Ensuite dans l’onglet « Style » styliser votre module selon vos goûts (police, taille, couleur etc.)

Insertion du module « Blog » pour afficher les résultats de la recherche.

1. Insérer un nouvelle section sous la section bannière.
2. Insérer dans cette section un rangée à 2 colonnes (1/4-3/4)
3. Dans la colonne de droite (3/4) insérer le module Blog.
   La structure de ce module va nous permettre d’afficher les résultats de recherches sous forme d’extraits.
4. Paramétrer le module Blog : Dans l’onglet « Contenu » puis « Contenu », activer l’option « Messages pour la page en cours », ce qui va permettre d’afficher les résultats en lien avec la requête.
   Activer aussi « Utiliser les extraits ».
   En dessous dans « Éléments », la plupart des options pourront être désactivées. Vous pouvez conserver l’option « Montrer un extrait ».

Insertion des modules « Chercher » et  « Bouton »

Enfin dans la colonne de gauche (1/4), vous pouvez ajouter 2 modules afin d’améliorer le confort de navigation de vos visiteurs.
Tout d’abord vous pouvez insérer un module « Chercher » pour permettre aux internautes de faire facilement une nouvelle recherche. Lors du paramétrage de ce module dans l’onglet « Contenu »  puis « Texte » (Placeholder d’entrée), vous pouvez écrire « Nouvelle recherche » qui s’inscrira dans le champ du module.

Enfin en dessous, vous pouvez aussi placer un bouton qui permettra de rediriger plus facilement les visiteurs une fois leurs recherches terminées.

Ces 2 modules peuvent comme les autres être facilement stylisés selon vos goûts dans l’onglet « Style » de leurs paramètres respectifs.