Tutoriel Kadence : Ajouter une fonctionnalité de recherche avancée avec le bloc Recherche (Adv) des blocs Kadence

La fonction de recherche du site web contribue à améliorer l'accessibilité du contenu.Blocs Kadence Recherche (Adv) dans le plugin Bloc de recherche avancéeIl peut être inséré dans des pages, des articles, des zones de widgets, des modules d'en-tête et d'autres emplacements, et dispose d'importantes capacités de personnalisation.

Recherche (Adv) Fonctions du bloc

Le bloc Recherche (Adv) s'applique à Gutenberg Environnement de l'éditeur, compatible avec Kadence En-tête, barre latérale et autres zones avancées.

Les scénarios d'utilisation les plus courants sont les suivants :

• Champ de recherche en haut de la page

• Recherche de mots-clés sur les pages de produits

• Fenêtres modales de recherche dans les menus réduits

Les styles de recherche peuvent être modifiés en styles standard ou modal pour une plus grande flexibilité dans les différentes mises en page.

Paramètres du style de recherche

• Style de recherche standard
  Le champ de recherche est toujours visible et peut être placé dans les pages suivantesZone de la page principale ou barre de navigation

• Style de recherche modale
  Fenêtre de recherche contextuelle après avoir cliqué sur le bouton, adaptée aux endroits où l'espace est limité

Le bouton de recherche peut être activé dans les deux styles, et permet de personnaliser le texte et le style du bouton.

Vous pouvez définir si le champ de recherche inclut le contenu des produits, adapté aux WooCommerce Le site limite le type de recherche.

Personnalisation des boutons et des icônes

• Bouton de soumission pour le bloc de boutons avancé

• Prise en charge du changement d'icônes (icônes intégrées ou personnalisées) SVG)
• Couleurs, bordures, coins arrondis, polices et autres styles d'apparence ajustables
• Prise en charge de paramètres de couleur et de taille indépendants pour les états normaux et les états de survol

Réglage du style de la boîte d'entrée

Les boîtes de saisie offrent un grand nombre d'options de contrôle visuel telles que la police, la couleur, les marges, etc :

• Définition de la largeur maximale et minimale

• Couleur et taille du texte de l'espace réservé personnalisées

• Ajuster la famille de polices, la taille des polices, la hauteur des lignes, l'espacement des mots

• Ajout d'icônes, définition de la taille des icônes et de la largeur des lignes
• Définition de valeurs pour les coins arrondis et les marges intérieures afin d'optimiser les effets typographiques

Paramètres du style modal

Lorsque la recherche modale est activée, la boîte de recherche est cachée derrière un bouton et s'affiche lorsqu'on clique dessus :

• L'arrière-plan peut être défini comme une couleur unie ou dégradée.
• Prise en charge de l'ajustement du style de l'icône de fermeture
• Contrôler les marges et la taille maximale des fenêtres modales

Ce style convient à l'affichage d'une interface simplifiée dans les pages mobiles.

Options avancées

Le bloc de recherche prend en charge les paramètres supplémentaires suivants :

• Ajouter des marges supérieures et inférieures

• Spécifier les identifiants d'ancrage pour faciliter la localisation des sauts

• Remplir les balises ARIA pour une meilleure prise en charge de l'accessibilité

• augmenter CSS Nom de la classe pour faciliter l'expansion du style ou la manipulation de JS

• Sauvegarder les paramètres actuels par défaut pour les réutiliser rapidement à l'avenir

résumés

Blocs Kadence Le module de recherche (Adv) offre un moyen plus souple de construire des recherches qui répondent aux besoins de mise en page, d'esthétique et de fonctionnalité. Les styles de saisie standard et les fenêtres contextuelles modales permettent l'accès à partir de différents appareils. Associé à des thèmes et à des outils de mise en page avancés, il permet de construire un portail de contenu clairement structuré.

Si vous devez affiner la portée de la recherche, le style des icônes ou la présentation visuelle, vous pouvez l'adapter à la conception actuelle du site web.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.