Tutoriel du thème Avada : utiliser l'élément de recherche, rendre la recherche sur le site plus intelligente, pratique et commode !

Thème AvadaNon seulement il hérite des capacités de recherche intégrées de WordPress, mais il fournit également un moteur de recherche facilement personnalisable. Élément de rechercheIl peut être inséré dans leN'importe où sur le siteréaliserRecherche en temps réeletFiltrer les types de contenuet d'autres fonctions avancées. Cet article vous guidera à travers l'ensemble des Éléments de recherche Avadaet fournit des étapes de configuration détaillées pour vous aider à obtenir rapidement des formulaires de recherche de qualité professionnelle.

Qu'est-ce qu'Avada Search Element ?

Élément de recherche Avada est un composant de l'élément Avada Builder qui fournit aux sites web les éléments suivantsRecherche de contenuLa barre de recherche peut être insérée dans n'importe quelle zone de la page, par exemple :

• Contenu de la page
• Disposition de l'en-tête
• Disposition du pied de page
• Section de mise en page personnalisée

Il prend en charge Recherche globale WordPressLes éléments suivants sont également disponiblesExcellentes caractéristiques: :

• Recherche en direct
• Prise en charge de la recherche de types de contenu spécifiques (articles, portfolios, etc.)
• Afficher des méta-informations telles que l'image vedette, le type d'article, la catégorie, etc.
• Personnalisation complète du design (bordures, polices, arrière-plans, couleurs, etc.)

II. comment ajouter et configurer des éléments de recherche

Ajouter un élément de recherche

• Accédez à l'éditeur de pages (Avada Live Builder).
• Repérez l'endroit où vous souhaitez insérer le champ de recherche.

• Cliquez sur Ajouter un élément (+) pour rechercher et sélectionner les éléments suivants Recherche.

• commandant en chef (militaire)Éléments de rechercheInsérez la page et vous pouvez commencer à configurer ses paramètres.

Configuration de l'onglet Général

1. le contenu des résultats de la recherche

• Sélectionnez le type de contenu à rechercher. La valeur par défaut est vide, ce qui indique que le site entier sera recherché.
• Par exemple, si votre contenu vidéo est de type Portefeuille (Portfolio), vous pouvez spécifier que seul ce type doit être recherché.

2. activer Live Search

Activer ou désactiver "Recherche en temps réel"Il est recommandé de l'activer. Les options suivantes apparaissent lorsqu'il est activé :

• Nombre minimal de caractères pour Live Search: Nombre de caractères saisis par l'utilisateur avant que la recherche en temps réel ne commence à se déclencher ; la valeur par défaut est de 3.
• Live Search Nombre de messages: Nombre de suggestions affichées, par défaut 100, réglable entre 10 et 500.
• Afficher l'image vedette: Affichage ou non des vignettes des résultats des suggestions de recherche (par défaut : oui).
• Afficher le type de message: Affichage ou non des balises de type de contenu (par exemple, post, page, etc.).
• Limiter la recherche aux titres des messages: Indique si la recherche doit porter uniquement sur le titre (la valeur par défaut est non, ce qui signifie que la recherche doit porter sur le texte intégral).

3. Placeholder

Le texte de la boîte de recherche, par exemple, peut être défini comme "Recherche de vidéos".

Configuration de l'onglet Design (Style Apparence)

1. conception du formulaire de recherche

Étapes : Recherche -> Conception

Les styles optionnels sont les suivants :

• Nettoyer
• Classique

Vous pouvez choisir l'un d'entre eux en fonction du style du site web.

2. Polices et couleurs

• Taille de la police par défaut 16px
• couleur de la policeLa couleur 7 d'Avada est utilisée par défaut
• La couleur d'arrière-plan, la couleur de la bordure et la couleur de mise au point peuvent être librement personnalisées (à l'aide des préréglages de couleurs Avada).

3. rayon d'un angle arrondi

Le rayon de la bordure du champ est fixé par défaut à 6px, ce qui donne un effet légèrement arrondi.

4. Style de la boîte déroulante de recherche en direct

Personnalisable :

• couleur de fond
• Lien Couleur
• Couleur des méta-informations (par exemple, catégorie d'article)
• Hauteur maximale du conteneur (par exemple 500px)
• Style de la barre de défilement (par défaut, cachée, personnalisée)

Onglet Extras (paramètres avancés)

Vous pouvez ajouter une animation de chargement à la barre de recherche, par exemple :

• glisser dans
• s'effacer
• rebondissant
• Agrandissement et 7 autres effets

Peut être réglé sur Aucun si aucune animation n'est nécessaire.

effet du test

1. Enregistrez la page et actualisez la page d'accueil.
2. Faites défiler jusqu'à la zone de la barre de recherche insérée.
3. Saisissez un mot-clé (par exemple, "tutoriels"ou "Vidéo") pour afficher les résultats des suggestions en temps réel.
4. En cliquant sur l'un d'entre eux, vous accéderez directement à la page correspondante ; en appuyant sur la touche "Entrée", vous accéderez à la page standard de résultats de recherche de WordPress.

Suggestions d'utilisation et conseils pratiques

• Si votre contenu est divisé en types tels que des articles, des produits, des vidéos, etc., il est recommandé de passer l'option Contenu des résultats de la recherche Contrôle précis des types de recherche.
• L'activation de la recherche en direct améliore le sentiment d'interaction, et il est recommandé de fixer un nombre maximal raisonnable de résultats et de caractères de déclenchement.
• La boîte de recherche est placée dans l'en-tête ou dans l'encadré.Mise en évidence de la page d'accueilqui contribue à accroître l'engagement des visiteurs.
• La barre de recherche peut être ajoutée à l'en-tête, à la barre adhésive ou à la zone hors canevas à l'aide de l'outil Layout Builder.

résumés

Avada Search Element est un composant puissant et hautement personnalisable qui non seulement améliore l'expérience de recherche de l'utilisateur, mais permet également l'uniformité visuelle et l'optimisation de l'interaction grâce à un style riche et des options de contrôle du contenu. Pour en savoir plus sur WordPress et Tutoriel AvadaBienvenue à suivreRéseau de fluctuation des photonsLe partage quotidien d'informations pratiquesConseils pour la création de sites webExpérience en matière d'optimisation de sites web.