Blocs accordéon

Affichez de gros morceaux de texte dans des sections réductibles pour aider les visiteurs à naviguer dans du contenu riche en texte.

Dernière mise à jour le 10 avril 2024

Utilisez des blocs Accordéon pour afficher le contenu du texte dans des sections réductibles. Cette option est très pratique pour les pages structurées et riches en texte, telles que les FAQ ou les offres de produits. Les blocs Accordéon permettent d’avoir une longueur de page réduite et évitent que vos visiteurs n’aient à la faire défiler à outrance.

Regarder une vidéo explicative

Fonctionnement des blocs Accordéon

Les visiteurs de votre site voient le bloc Accordéon sous la forme d’une liste de titres disponible à côté d’icônes de développement. Selon vos paramètres de design, le premier élément peut être agrandi par défaut.

Les visiteurs cliquent sur chaque titre pour ouvrir le texte de description. Chaque bloc Accordéon ne peut disposer que d’un seul élément. Si vos visiteurs cliquent sur un élément développé, il sera réduit. S’ils cliquent sur un élément alors qu’un autre est déjà développé, l’élément développé précédemment se fermera.

Accordion_block.png

Accordion_block.png

Ajouter un bloc Accordéon

Pour ajouter un bloc Accordéon :

  1. Modifiez une page ou une publication, cliquez sur Ajouter un bloc ou un point d’insertion, puis sélectionnez Accordéon dans le menu.Pour obtenir de l’aide, consultez l’article Ajouter du contenu avec les blocs.
  2. Ouvrez l’éditeur de bloc en cliquant sur l’icône en forme de crayon sur le bloc.
  3. Dans l’onglet Contenu, ajoutez et modifiez des éléments dans le bloc Accordéon. Chaque élément inclut le texte du titre, qui s’affiche toujours, et le texte de description, qui s’affiche lorsque l’élément se développe.
  4. Dans l’onglet Design, personnalisez l’apparence du bloc Accordéon.
  5. Lorsque vous avez terminé, cliquez en dehors de l’éditeur de bloc. Vos modifications sont enregistrées automatiquement.

Ajouter et modifier des éléments

Dans l’onglet Contenu :

  • Cliquez sur un élément de la liste pour en modifier le titre et la description
  • Cliquez sur Ajouter un élément pour l’ajouter
  • Cliquez sur un élément et maintenez la touche enfoncée pour le réorganiser
  • Survolez un élément et cliquez sur l’icône corbeille pour le supprimer.

Lorsque vous ouvrez un élément, d’autres options s’affichent :

  • Modifier le texte du titre dans le champ Titre
  • Modifier le texte de description dans le champ Description
  • Cliquez sur Dupliquer pour créer une copie de l’élément
  • Cliquez sur Supprimer pour supprimer l’élément

Personnaliser le bloc Accordéon

Dans l’onglet Design, vous pouvez personnaliser le texte, la disposition, l’apparence et l’icône du bloc :

  • Cliquez sur Titre pour définir le format et l’alignement du texte du titre.
  • Cliquez sur Description pour définir le format et l’alignement de la description, ainsi que d’autres options telles que :
    • La largeur, qui définit la largeur du texte.
    • La marge intérieure, qui définit la quantité d’espace blanc autour du texte.
    • L’alignement, qui définit de quel côté le texte est aligné.
    • Le placement, qui définit l’endroit où le texte est placé dans le bloc.
  • Activez Développer le premier élément pour que le premier élément soit développé par défaut.
  • Activez l’option Autoriser plusieurs éléments ouverts pour empêcher qu’un élément ne se ferme lorsqu’un autre s’ouvre.
  • Cliquez sur Séparateurs pour personnaliser les lignes divisant chaque élément, ou désactivez-les.
  • Cliquez sur Icône pour définir l’icône de développement sous la forme d’une flèche ou d’un signe plus.
  • Sous Icône, définissez la Taille de l’icône, l’Épaisseur de l’icône et l’emplacement de l’icône.
  • Définissez la marge intérieure des lignes pour modifier la quantité d’espace blanc autour de chaque élément.
  • Sur les sites qui utilisent la version 7.1, activez l’option Couleur d’arrière-plan pour ajouter une couleur à l’arrière-plan du bloc, définir les rayons d’angles et modifier la marge intérieure de l’arrière-plan.La version 7.0 ne prend pas en charge les couleurs d’arrière-plan des blocs.
  • À côté de Trait, activez une ligne continue ou pointillée pour délimiter le bloc. Pour les lignes continues et pointillées, définissez la Couleur et l’Épaisseur du trait. 
  • Cliquez sur le menu déroulant Mode de fusion pour sélectionner un paramètre de transparence. Ces effets sont parfaits si vous superposez un bloc Accordéon devant une image ou un autre contenu visuel.
  • Pour flouter l’Élément ou la Toile de fond, activez l’option Flou et utilisez le curseur pour régler le niveau de flou.

Accéder à cette fonctionnalité

Les personnalisations du Trait, du Mode de fusion et du Flou sont disponibles pour les sections Éditeur intuitif. Pour les sections qui utilisent l’éditeur classique, seule la personnalisation du Trait est disponible.

Police et couleur du texte

La police et la couleur du texte suivent les paramètres de style de votre site. N’oubliez pas que la modification de ces paramètres affecte tous les éléments de votre site ayant les mêmes paramètres :

  • Dans le panneau Polices, les titres des blocs Accordéon suivent les paramètres de Titre et la taille de Titre 4. Les descriptions des blocs Accordéon suivent les paramètres de Paragraphes et la taille de Paragraphe 2.
  • Dans le panneau Couleurs, les titres des blocs Accordéon suivent les paramètres de Titre (petit) correspondant au thème de couleur. Les descriptions des blocs Accordéon suivent les ajustements de Paragraphe (moyen).

Autres couleurs

Dans le panneau Couleurs, utilisez les paramètres situés dans Bloc Accordéon pour modifier la couleur du séparateur, la couleur de l’icône et la couleur d’arrière-plan par défaut.

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.