fbpx

Bons plans Alpa14 | Des offres et des réductions intéressantes à découvrir 😃

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

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

      Par où commencer pour créer son site Internet ?

      Toute personne disposant d’un ordinateur et d’une connexion Internet peut créer son propre site Web. Il existe de nombreux outils en ligne qui facilitent le processus. Les sites Web peuvent être utilisés pour promouvoir votre entreprise, communiquer avec les clients et partager vos idées.

      Dans cette vidéo qui est qui est une retransmission d’un Webinar, Léopoldine la fondatrice de la société Webmyday, explique les différentes étapes à suivre et les bonnes questions à se poser pour créer son premier site web professionnel. Elle passe en revue les services et les outils nécessaires à la conception Web et propose des conseils pour créer un site Web efficace.

      Cette vidéo est une excellente ressource pour les débutants qui souhaitent en savoir plus sur les étapes à suivre dans la conception Web ou pour les propriétaires d’entreprise qui ont besoin de créer un site Internet pour leur activité. 

      Sommaire de la vidéo

      0:00 Introduction
      2:41 La formation Webmyday qu’est-ce que c’est ?
      6:22 Faire ou faire faire son site Internet ?
      16:31 Solutions pour faire son site soi-même
      18:24 Solutions pour faire faire son site
      22:33 Coût d’un site Internet
      25:55 Un CMS, qu’est-ce que c’est ?
      26:46 Les CMS les plus connus
      32:57 Le nom de domaine
      33:39 L’ hébergement
      34:54 Quelques hébergeurs
      38:35 4 choses que doit comprendre votre hébergement
      40:01 WordPress qu’est-ce que c’est ?
      40:29 Différence entre WP.com et wp.org
      43:00 Les différentes composants de WP
      46:33 En résumé les étapes pour travailler avec WordPress
      47:47 Conclusion

      Sommaire de la vidéo

      Vous serez peut-être également intéressé par ces articles …

      Formation WordPress éligible au CPF : Webmyday

      Formation WordPress éligible au CPF : Webmyday

      Vous souhaitez créer un site Internet WordPress pour votre entreprise ? Vous êtes complètement débutant ? Dans ce tutoriel vidéo, je vous présente Webmyday la formation WordPress Divi qui va vous permettre de réaliser facilement votre site web en étant accompagné d’un coach sympa pendant 2 mois. 😊

      lire plus
      Offrez-moi un café! Merci :)