Le module de recherche de Divi

Définition

Introduction

En utilisant le module de recherche, vous pouvez placer un formulaire de recherche n'importe où sur votre site. Ce formulaire de recherche permettra à vos visiteurs d'effectuer des recherches dans tout le contenu de votre site Web, y compris toutes les pages et les posts de blog. Cela vous donne la fonctionnalité du widget de recherche WordPress ainsi que la flexibilité du Divi Builder. Non seulement vous pouvez contrôler l'emplacement des formulaires de recherche sur la page, mais vous pouvez également personnaliser sa conception.

Procédure

Comment ajouter un module de recherche à votre page

Avant de pouvoir ajouter un module de recherche à votre page, vous devrez d'abord basculer dans le Divi Builder. Une fois que le thème Divi a été installé sur votre site Web, vous remarquerez un bouton Utiliser Divi Builder au-dessus de l'éditeur de messages chaque fois que vous créez une nouvelle page. Cliquez sur ce bouton pour activer le Divi Builder, ce qui vous donne accès à tous les modules de celui-ci. Ensuite, cliquez sur le bouton Utiliser Visual Builder pour lancer le constructeur en mode visuel. Vous pouvez également cliquer sur le bouton Utiliser Visual Builder lorsque vous naviguez sur votre site Web à l'avant si vous êtes connecté à votre tableau de bord WordPress.

Le module de recherche de Divi

Une fois que vous êtes entré dans Visual Builder, vous pouvez cliquer sur le bouton gris + pour ajouter un nouveau module à votre page. Les nouveaux modules ne peuvent être ajoutés qu'à l'intérieur des rangées. Si vous commencez une nouvelle page, n'oubliez pas d'ajouter d'abord une ligne à votre page.

Le module de recherche de Divi

 

Localisez le module de recherche dans la liste des modules et cliquez dessus pour l'ajouter à votre page. La liste des modules est consultable, ce qui signifie que vous pouvez également taper le mot "recherche" et ensuite cliquer sur le bouton entrer pour trouver et ajouter automatiquement le module de recherche ! Une fois le module ajouté, vous serez accueilli avec la liste d'options du module. Ces options sont séparées en trois groupes principaux : Contenu, Style et Avancé.

Exemple de cas d'utilisation : Ajout d'un module de recherche personnalisée à une page de blog pleine largeur

Pour cet exemple, je vais vous montrer comment ajouter un module de recherche pour être un appel à l'action en haut d'une page de blog. Cela permet aux utilisateurs de rechercher facilement le contenu de votre blog sans encombrement.

Cette page a un en-tête pleine largeur en haut avec le module de recherche directement en dessous. Sous le module de recherche se trouve un module Blog utilisant la disposition de la grille.

Le module de recherche de Divi

A l'aide de Visual Builder, ajoutez une nouvelle section standard à la page du blog avec une ligne pleine largeur (1 colonne). Insérez ensuite le module de recherche dans la rangée.

Le module de recherche de Divi

Maintenant, revenez en arrière pour éditer la largeur de la ligne contenant votre module de recherche. Sous l'onglet Conception des Paramètres de ligne, donnez à la ligne une largeur personnalisée de 300px. Le module de recherche restera ainsi compact et centré sur la page.

Le module de recherche de Divi

 

Vidéos

Vidéo de présentation du module de recherche de Divi

Trucs et astuces

Conclusion

Grâce à ce module de recherche, Divi vous permet d'être cohérent et d'inviter vos visiteurs à faire des recherches sur tout le contenu de votre site Web.

À bientôt pour un nouveau tutoriel ! ;)

 

Pour aller plus loin

Pour en savoir davantage sur Elegant Themes Divi et son utilisation

Le module de barre latérale Divi

Le module de texte de Divi

> Consultez notre rubrique d'aide Elegant Themes Divi

 

Notez cet article


Vous avez noté 0 étoile(s)

Cet article vous a-t-il été utile ?

Merci !

N'hésitez pas à commenter nos pages afin de nous aider à les améliorer si besoin.

Vous n'avez pas trouvé votre réponse ?

Envoyez nous un message afin d'avoir une réponse rapidement



comments powered by Disqus
Top