Ajoutez une barre de recherche à l'en-tête de votre site Squarespace 7.1

Table of Contents

• Introduction
• Setting up the Search Bar
  • Adding the Code
  • Updating the CSS
• Placing the Search Block
• Finding the Search Block Selector
• Adding the Selector to the Code
• Testing the Search Bar
• Conclusion

🧭 Introduction

Dans cet article, nous allons apprendre comment ajouter une barre de recherche dans l'en-tête de votre site Squarespace 7.1. Nous allons également voir comment placer cette barre de recherche sur chaque page et la rendre fonctionnelle sur les appareils mobiles.

🛠️ Setting up the Search Bar

Avant de commencer, nous devons effectuer les étapes nécessaires pour mettre en place la barre de recherche.

Adding the Code

La première chose à faire est de copier le code de l'article et de le coller dans l'injection de code avancé de votre site Squarespace. Pour ce faire, rendez-vous dans les paramètres avancés, puis dans l'injection de code.

Assurez-vous que vous avez déjà chargé jQuery sur votre site. Si vous ne savez pas ce qu'est jQuery ou si vous ne l'avez pas encore chargé, vous pouvez laisser le code tel quel.

Updating the CSS

Ensuite, nous allons ajouter le code CSS nécessaire à la personnalisation de notre barre de recherche. Pour cela, nous allons accéder à la section "Design" de notre page d'accueil et ajouter le code CSS personnalisé dans l'éditeur.

Assurez-vous de laisser suffisamment d'espace pour le code CSS et collez-le dans l'éditeur. Enregistrez les modifications pour voir les effets du code CSS.

🚀 Placing the Search Block

Maintenant que nous avons configuré les bases, nous devons ajouter un bloc de recherche à chaque page de notre site Squarespace.

Pour éviter d'avoir à ajouter manuellement le bloc de recherche à chaque section ou à chaque page, nous allons le placer dans le pied de page. Pour ce faire, nous allons choisir "Modifier", faire défiler jusqu'au pied de page et ajouter un bloc de recherche à cet endroit.

Une fois que vous avez ajouté le bloc de recherche, enregistrez les modifications.

🔍 Finding the Search Block Selector

Maintenant, nous devons repérer le sélecteur ID unique du bloc de recherche que nous venons d'ajouter. Pour cela, nous allons rafraîchir notre site Squarespace dans une nouvelle fenêtre en mode incognito.

Utilisez l'inspecteur web pour trouver le sélecteur ID du bloc de recherche. Cliquez avec le bouton droit de la souris sur le bloc et sélectionnez l'option "Inspecter".

En utilisant le surlignage automatique de l'inspecteur web, trouvez le sélecteur ID du bloc de recherche en remontant dans la hiérarchie des éléments jusqu'à ce que vous trouviez le bon.

Copiez le sélecteur ID une fois que vous l'avez trouvé.

📝 Adding the Selector to the Code

De retour dans l'injection de code avancé, collez le sélecteur ID du bloc de recherche dans la partie du code où il est indiqué "block ID here". Assurez-vous de conserver le signe "#" avant le sélecteur ID.

Enregistrez les modifications pour recharger la page et visualiser les résultats.

✅ Testing the Search Bar

Une fois que vous avez terminé toutes les étapes précédentes, vous pouvez tester votre barre de recherche. Vous devriez maintenant voir la barre de recherche dans l'en-tête de votre site Squarespace. Essayez de l'utiliser pour effectuer une recherche et vérifiez si elle fonctionne correctement.

🎯 Conclusion

Félicitations ! Vous savez maintenant comment ajouter une barre de recherche dans l'en-tête de votre site Squarespace 7.1. Vous savez également comment la placer sur chaque page et vous assurer qu'elle fonctionne sur les appareils mobiles. Profitez de cette fonctionnalité pour améliorer l'expérience utilisateur de votre site Squarespace.

Highlights:

• Apprenez comment ajouter une barre de recherche dans l'en-tête de votre site Squarespace 7.1.
• Placez la barre de recherche sur chaque page et assurez-vous qu'elle fonctionne sur les appareils mobiles.
• Améliorez l'expérience utilisateur de votre site Squarespace en ajoutant une fonction de recherche.

FAQ: Q: Est-ce que je dois charger jQuery sur mon site Squarespace avant d'ajouter la barre de recherche ? R: Si vous avez déjà chargé jQuery sur votre site Squarespace, vous pouvez supprimer cette partie du code. Sinon, vous pouvez laisser le code tel quel.

Q: Est-ce que la barre de recherche fonctionne sur les appareils mobiles ? R: Oui, la barre de recherche est conçue pour fonctionner sur les appareils mobiles. Vous pouvez la tester en utilisant un appareil mobile ou en utilisant le mode mobile de votre navigateur web.

Q: Est-ce que je peux personnaliser le style de la barre de recherche ? R: Oui, vous pouvez personnaliser le style de la barre de recherche en modifiant le code CSS dans l'éditeur de CSS personnalisé. Vous pouvez ajuster les couleurs, la taille, la police, etc. selon vos préférences.

Q: Est-ce que je peux déplacer la barre de recherche à un autre endroit de mon site Squarespace ? R: Oui, vous pouvez déplacer la barre de recherche en modifiant le code CSS et en ajustant les positions dans l'éditeur de CSS personnalisé.