Comment ajouter une recherche Ajax en temps réel à votre site Web Divi

Ajax est un excellent moyen d'ajouter une recherche en direct à Divi. Avec Ajax, la page n'a pas besoin de se recharger pour montrer aux utilisateurs les résultats de la recherche. Cela permet à vos visiteurs de voir les résultats beaucoup plus rapidement, ce qui les aide à rester plus longtemps sur vos pages. Le résultat est un site Web plus propre et plus fluide.

La recherche Ajax n'est pas intégrée à Divi, mais elle peut facilement être ajoutée à l'aide d'un plugin tiers. Dans ce didacticiel, nous verrons comment ajouter une recherche Ajax à Divi et comment styliser la recherche pour l'adapter au design de votre site Web.

Passons au tutoriel.

Aperçu

Avant de commencer, voici à quoi ressemblera notre recherche Ajax lorsque nous aurons terminé. Il s'agit de la vue Bureau. Je vais ajouter une recherche Ajax à une boutique WooCommerce. J'utilise la page d'affichage du pack de mise en page de la boutique en ligne. Nous allons également styliser la recherche pour qu'elle corresponde à la mise en page. Bien sûr, puisqu'il s'agit d'un site de test, je triche et j'utilise les produits de test WooCommerce. Les résultats fonctionneront de la même manière avec tous les produits.

Voici à quoi ressemble le même design sur un téléphone.

Comment ajouter une recherche Ajax en temps réel à votre site Web Divi

Abonnez-vous à notre chaîne Youtube

1. Installation de Divi Ajax Search

Tout d'abord, achetez Divi Ajax Search sur le Divi Marketplace. C'est normalement 29 $ et comprend une utilisation illimitée et un an de support et de mises à jour. Divi Ajax Search vous permet de rechercher des pages, des publications, des projets et des produits WooCommerce. Cela fonctionne de la même manière avec chacun de ces types de publication. Il peut rechercher le titre, l'extrait et l'image en vedette et les afficher en fonction de vos paramètres.

Pour installer le plugin, allez dans Plugins > Add New et sélectionnez Upload Plugin .

Sélectionnez Choisir un fichier et accédez à l'emplacement du fichier sur votre ordinateur et sélectionnez-le. Cliquez sur Installer maintenant .

Une fois le plugin installé, sélectionnez Activer le plugin .

2. Ajoutez la recherche Ajax à votre site Web Divi

Voici un aperçu de la mise en page d'origine. il comprend l'en-tête, les catégories qui chevauchent l'image d'en-tête et le module WooCommerce pour afficher les produits. Je vais ajouter la fonction de recherche Ajax au-dessus du module boutique. Je vais également le styliser pour qu'il corresponde aux éléments de la mise en page.

Ajouter la recherche Divi Ajax à la mise en page

Cliquez sur l'icône sous le module boutique pour ouvrir le module modal. Faites défiler ou recherchez Divi Ajax Search et ajoutez-le à la mise en page. Je montre la vue filaire, mais toutes les vues fonctionnent de la même manière.

Faites glisser et déposez le module au-dessus du module de la boutique.

Configuration de la zone de recherche

Cliquez sur l'engrenage pour ouvrir les options. Je suis passé à la vue du bureau pour pouvoir voir mes modifications en direct.

Tout d'abord, nous allons ajuster le texte de l'espace réservé. Le texte de l'espace réservé par défaut utilise le mot Rechercher. C'est bien, mais je le remplace par Rechercher nos produits afin que l'utilisateur sache qu'il recherche dans le magasin plutôt que dans des articles de blog ou d'autres contenus. Je laisserai le texte Order By , Order et No Results Text à leurs valeurs par défaut.

• Texte d'espace réservé – Recherchez nos produits
• Résultat de la recherche – 10
• Trier par – date
• Commande – desc
• Aucun texte de résultat – Aucun résultat trouvé

Décidez de ce qu'il faut afficher dans les résultats de la recherche

Dans la section intitulée Zone de recherche, sélectionnez ce que vous souhaitez rechercher. Je laisse les paramètres par défaut, qui incluent le titre, le contenu et l'extrait.

Ensuite, choisissez les types de publication. Vous pouvez l'avoir pour rechercher des articles, des pages, des projets, des produits ou tout ce qui précède. Je sélectionne Produits.

Rechercher dans:

• Titre
• Teneur
• Extrait

Types de messages :

• Des produits

Sélectionnez ce qu'il faut afficher

Faites défiler jusqu'à la zone d'affichage pour choisir le mode d'affichage des résultats. Je conserve les paramètres par défaut pour l'icône de recherche, le titre, l'extrait et l'image en vedette. J'ai également activé le prix du produit, changé le nombre de colonnes à 4 et choisi d'utiliser la maçonnerie. Cela me donnera la mise en page que je veux.

Afficher l'icône de recherche :

• Oui

Champs d'affichage :

• Titre
• Extrait
• L'image sélectionnée
• Prix ​​du produit

Le nombre de colonnes:

• 4

Utiliser la maçonnerie :

• Oui

Afficher la barre de défilement

Accédez aux paramètres de la barre de défilement et décidez d'afficher ou de masquer la barre de défilement. J'inclus la barre de défilement afin que l'utilisateur sache mieux qu'il peut faire défiler.

Barre de défilement:

• Spectacle

Résultat de la recherche Divi Ajax

La saisie d'un terme de recherche affiche les résultats sous le champ de recherche. Cela a l'air bien, mais cela ne se démarque pas du contenu du site Web. Nous le styliserons de manière à ce qu'il s'adapte au design du site et ne se confond pas avec les images du produit.

3. Adaptez le module à votre site Web

Pour styliser le champ de recherche, j'utiliserai des éléments de conception de la mise en page que j'utilise. Au bas de la page de la boutique de la mise en page de la boutique en ligne se trouvent quelques éléments de conception. L'un est un module d'inscription par e-mail intéressant. Je vais m'en inspirer pour l'arrière-plan et le terrain. J'utiliserai également la couleur d'arrière-plan du CTA Acheter maintenant pour les résultats de la recherche. Je suis particulièrement attentif à trois éléments de conception :

• Couleur de fond du bulletin – #757d79
• Acheter CTA Couleur de fond – #dcae83
• Rembourrage pour les deux – 50px (haut, bas), 60px (droite, gauche)

Styliser le champ de recherche

Ouvrez les paramètres d'arrière-plan dans l'onglet contenu. Cette section comporte trois zones d'arrière-plan différentes. Allez au dernier. Cela s'appelle simplement l'arrière-plan. Entrez la couleur ici.

• Couleur de fond – #757d79

Dans l'onglet Conception, accédez aux paramètres d'espacement et entrez le remplissage. Cela nous permettra de voir la zone autour du terrain afin que nous puissions mieux voir les résultats au fur et à mesure. Cela donne également au champ de recherche beaucoup de couleurs autour de celui-ci, qui correspondront aux éléments de la mise en page.

• Rembourrage 50px (haut, bas), 60px (droite, gauche)

Dans les paramètres du champ de recherche, ajoutez la couleur d'arrière-plan du champ et la couleur du texte du champ. J'ai fait correspondre le champ à l'arrière-plan du module et j'ai simplement sélectionné du blanc pour le texte.

• Couleur d'arrière-plan du champ – #757d79
• Couleur du texte du champ – #ffffff

Dans les mêmes paramètres, faites défiler jusqu'à Couleur de bordure de champ et choisissez le blanc. Nous pourrions également ajuster l'épaisseur et le rayon de la bordure. Je vais le laisser carré pour qu'il corresponde au champ de texte du module optin.

• Couleur de la bordure du champ – #ffffff

Ouvrez les paramètres de l'icône de recherche et sélectionnez le blanc.

• Couleur de l'icône de recherche – #ffffff

Ouvrez les paramètres du chargeur et sélectionnez le blanc pour la couleur du chargeur . Le chargeur ne sera visible que momentanément, mais il sera plus beau s'il correspond au reste des éléments.

• Couleur du chargeur – #ffffff

Styliser le champ de résultats

Ouvrez les paramètres d'arrière - plan dans l'onglet Contenu et ajoutez la couleur Résultat de la recherche Boîte et recherche de fonds Point de résultat. Cela ne sera pas visible pendant que nous styliserons le module car il ne s'affiche que lorsqu'il affiche les résultats de la recherche.

• Couleur de fond – #dcae83

Dans l'onglet Conception, ouvrez les paramètres du texte de l'élément du résultat de la recherche . Dans l'onglet Titre, sélectionnez le style de police tout en majuscules et choisissez le blanc pour la couleur du texte. Je laisse tous les autres paramètres de titre par défaut.

• Style de police de titre – TT
• Couleur du texte du titre – #ffffff

Ouvrez l'onglet Extrait et sélectionnez le blanc pour la couleur du texte de l' extrait .

• Couleur du texte de l'extrait – #ffffff

Ouvrez l'onglet Prix. Sélectionnez Semi Bold pour le poids du prix et blanc pour la couleur du texte.

• Poids de la police de prix – Semi-gras
• Couleur du texte de l'extrait – #ffffff

Résultats

Voici à quoi ressemble la recherche Ajax sur le bureau avec mon style. Les résultats de la recherche s'affichent presque immédiatement. Il a l'air élégant et lisse.

Voici à quoi cela ressemble sur Phone. Les résultats s'empilent et s'ajustent pour s'adapter à l'écran.

Mettre fin aux pensées

L'ajout de la recherche Ajax à votre site Web Divi est rapide et facile avec le plugin Divi Ajax Search. Il est facile à utiliser, facile à styliser pour correspondre à votre site Web, et les résultats sont rapides et fantastiques. Vous disposez de nombreuses options pour les types de publication qu'il peut rechercher et pour les types de contenu qu'il affichera dans les résultats.

Désormais, votre site Web Divi peut avoir une fonction de recherche Ajax conçue par des professionnels que vos visiteurs apprécieront !

Nous voulons de vos nouvelles. Avez-vous ajouté une recherche Ajax en temps réel sur votre site Divi ? Faites-nous part de votre expérience dans les commentaires.

Image en vedette via Kroster / shutterstock.com