Découvrez les bons plans & les réductions Alpa14

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

Alpa14 les tutoriels faciles !

Catégories

Améliorer la navigation sur votre site avec une page personnalisée de réusultats de recherches

Comment réaliser une page de résultats de recherches personnalisée avec Divi ?
Dans ce tutoriel Alpa14 WordPress, je vous explique comment créer ce type de page web grâce au thème builder de Divi qui va nous permettre créer un modèle. Ce modèle avec son layout, sa mise en page plus engageante que la page par défaut de WordPress s’appliquera automatiquement à chaque fois qu’une recherche sera faite sur le site par un visiteur.

Dans ce tutoriel WordPress, j’utilise Divi d’Elegant Themes et son formidable Divi Visual Builder. Ce super outil vous permettra de créer et d’éditer facilement et visuellement les pages d’un site WordPress.

Licence Divi
Code Promo Divi Supreme
.

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.

     

    Thème Builder
    Modèle de page
    Construire un corps personnalisé

    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.)

      hébergeur web Hostinger
      bannière
      Titre dynamique
      Bannière
      Amelia booking plugin
       LearnDash créer une formation sur un site WordPress

       

      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 blog
      Thinkific one month free
      Licence Divi
      paramétrage module blog

      Toujours dans l’onglet « contenu », dans « Fond », vous pouvez ajouter une couleur de fond au module « Blog ».
      Dans ce cas, le texte apparaissant trop proche des bords, dans l’onglet « Style » il faudra dans « Espacement » ajouter aux alentours de 30pix de marge interne à haut, en bas, à droite et à gauche.

      Marge interne module blog

      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.

      Modules "chercher" et "bouton"
      MalerLite

      Vous serez peut-être intéressé par les articles suivants :

      Thème Divi : Personnaliser le header

      Thème Divi : Personnaliser le header

      Dans ce tutoriel vidéo, je vous montre comment personnaliser l’en-tête d’un site Divi.
      Cet en-tête changera en scrollant, lorsque la page défile. Le logo, le menu et le fond du header changeront de couleur attirant ainsi davantage l’attention du visiteur.
      Cet en-tête comprendra également un bouton d’appel à l’action incitant à davantage d’engagement.
      Grâce au constructeur de thèmes (le thème Builder) du thème Divi, nous pouvons créer des en-têtes personnalisés au design poussé.

      lire plus
      Ajouter un footer WordPress Divi personnalisé

      Ajouter un footer WordPress Divi personnalisé

      Ajouter un footer WordPress ? Rien de plus simple grâce au Thème Builder de Divi. Faire un pied de page WordPress global devient un jeu d’enfant ! C’est ce que je vous montre dans ce tutoriel Vidéo Divi, comment créer un footer WordPress personnalisé en le désignant de manière très fine avec Divi Visual Builder d’Elegant Themes.

      lire plus
      Ajouter une bannière WordPress « Hero Image » optimisée ⏱️

      Ajouter une bannière WordPress « Hero Image » optimisée ⏱️

      Dans ce tutoriel Divi WordPress, je vous montre où trouver une image de qualité gratuite pour un usage commercial, je vous montre également comment la choisir et l’optimiser au bon format. Je vous apprends ensuite comment designer ce bandeau large « Hero Image » grâce au Divi Visual Builder du thème Divi de la société Elegant Themes.

      lire plus