Le bloc Formulaire de recherche vous permet d'ajouter une boîte de recherche entièrement fonctionnelle à n'importe quelle page SeedProd, offrant aux visiteurs un moyen instantané de trouver le contenu qu'ils recherchent. Que vous construisiez un blog, une page de destination ou un site Web complet, l'ajout d'un formulaire de recherche permet de réduire les frictions et de maintenir l'engagement des utilisateurs en présentant rapidement le contenu pertinent.
Le bloc offre une configuration flexible — choisissez entre un bouton icône ou un bouton texte, définissez un texte d'indication personnalisé, contrôlez la hauteur et la largeur du formulaire, et ajustez les couleurs de la zone de saisie de recherche et du bouton. Vous pouvez aligner le formulaire dans n'importe quelle position et ajuster l'espacement pour une mise en page épurée et cohérente sur toutes les tailles d'écran.
Ajouter le bloc Formulaire de recherche à vos pages
Suivez ces étapes pour ajouter un bloc Formulaire de recherche à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser le bloc Formulaire de recherche dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Formulaire de recherche pour ouvrir ses paramètres. Dans l'onglet Contenu, la section Paramètres du formulaire de recherche vous permet de configurer le texte d'indication, le style du bouton, la taille du formulaire et l'alignement.
- Texte d'indication : Entrez le texte indicatif affiché dans le champ de saisie de recherche avant qu'un visiteur ne commence à taper (par exemple, « Rechercher… » ou « Que recherchez-vous ? »). Cela guide les utilisateurs sur ce qu'ils peuvent rechercher.
- Type de bouton : Choisissez l'apparence du bouton de soumission de recherche — Icône affiche un bouton icône compact (choisissez entre une loupe ou une flèche), tandis que Texte affiche un bouton avec une étiquette texte complète. Lorsque Texte est sélectionné, un champ Texte apparaît pour que vous puissiez définir l'étiquette du bouton (par exemple, « Rechercher » ou « Aller »).
- Icône : (Visible lorsque le Type de bouton est défini sur Icône.) Sélectionnez le style d'icône à utiliser pour le bouton de recherche — une icône de loupe circulaire ou une icône de flèche.
- Taille : Définissez la hauteur globale du formulaire de recherche à l'aide du curseur (30–80 px). Cela contrôle la hauteur du champ de saisie et du bouton sur la page.
- Alignement : Définissez l'alignement horizontal du formulaire de recherche — Gauche, Centre ou Droite.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez ajuster les couleurs et les dimensions du formulaire de recherche, puis contrôler l'espacement et la visibilité sur les appareils.
Couleurs et largeur :
- Arrière-plan de la recherche : Définissez la couleur d'arrière-plan du champ de saisie de recherche.
- Couleur du texte de recherche : Définissez la couleur du texte tapé dans le champ de saisie de recherche, ainsi que la couleur du texte d'indication.
- Arrière-plan du bouton : Définissez la couleur d'arrière-plan du bouton de soumission de recherche.
- Couleur du bouton : Définissez la couleur de l'icône ou du texte du bouton de soumission de recherche.
- Largeur : Définissez la largeur globale du formulaire de recherche en pourcentage de son conteneur (10–100 %). Utilisez une valeur inférieure pour rendre le formulaire plus étroit, ou définissez-la à 100 % pour une barre de recherche pleine largeur.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc de formulaire de recherche (Haut, Droite, Bas, Gauche). Cela détermine l'espace qui apparaît entre le formulaire et les éléments environnants sur la page.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc de formulaire de recherche (Haut, Droite, Bas, Gauche). Cela crée un espace de respiration entre le formulaire de recherche et les bords du bloc.
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc de formulaire de recherche. Cet ID est créé automatiquement par SeedProd pour le style personnalisé ou le ciblage JavaScript.
- Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML à l'élément wrapper du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, data-search|enabled).
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc de formulaire de recherche sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc de formulaire de recherche sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc de formulaire de recherche sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez parmi divers effets d'animation qui se jouent lorsque le bloc de formulaire de recherche apparaît à l'écran. Les options incluent Bounce, Fade In, Zoom In, Rotate In, et bien d'autres.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc de formulaire de recherche et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc de formulaire de recherche à votre page ! Un formulaire de recherche bien placé améliore la navigation et maintient l'engagement des visiteurs en les aidant à trouver exactement ce dont ils ont besoin sans quitter votre site. Expérimentez avec les styles de bouton, les couleurs des champs de saisie et les paramètres de largeur pour créer une expérience de recherche qui s'intègre parfaitement à la conception de votre page.