Blocs Citation

Mettez en évidence les contenus importants ou intéressants à l’aide d’un texte unique et personnalisé.

Dernière mise à jour le 13 septembre 2024

Utilisez les blocs Citation pour ajouter des citations et des témoignages.

Regarder une vidéo

Ajouter un bloc Citation

Pour ajouter un bloc Citation :

  1. Ouvrez un éditeur de page ou de publication, cliquez sur Ajouter un bloc ou un point d’insertion, puis cliquez sur Citation.Pour des étapes plus détaillées, consultez l’article Ajout de contenu avec des blocs.
  2. Ouvrez l’éditeur de bloc en cliquant sur l’icône en forme de crayon sur le bloc.
  3. Saisissez la citation dans le premier champ.
  4. Entrez sa source dans le second champ.
  5. Cliquez sur Design pour ajouter une animation ou activer une couleur d’arrière-plan (sites qui utilisent la version 7.1 uniquement).

Modifier un bloc Citation existant

Pour modifier un bloc Citation existant, double-cliquez sur le bloc ou alors cliquez une fois sur le bloc, puis sur l'icône de crayon ou sur Modifier. Cela ouvre l'éditeur de blocs. Il n'est pas possible de modifier la citation directement sur la page comme vous le feriez pour un bloc Texte.

Personnaliser le style de la citation

La méthode à suivre pour personnaliser le style de la citation dépend du template et de la version de Squarespace.

Polices

Pour personnaliser les polices du bloc Citation :

  1. Pendant que vous modifiez une page, ouvrez le panneau Styles du site, puis cliquez sur  >  à côté de Polices.
  2. Cliquez sur Attribuer des styles
  3. Faites défiler jusqu’à la section bloc Citation pour personnaliser le Texte et la Source.
  4. Pour revenir aux styles du site, cliquez sur Retour, puis sur Styles du site. Ou, si vous avez terminé vos modifications, cliquez sur Quitter, puis sur Enregistrer pour fermer l’éditeur.

Couleurs

Pour personnaliser les couleurs du bloc Citation :

  1. Pendant que vous modifiez une page, ouvrez le panneau Styles du site, puis cliquez sur >  à côté de Couleurs.
  2. Survolez votre thème de couleurs et cliquez sur l’icône crayon.
  3. Faites défiler jusqu’à la section bloc Citation pour modifier les couleurs du texte et de la source.
  4. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.

Autres options de style

Pour personnaliser l’apparence du bloc Citation :

  1. Dans l’éditeur de bloc Citation, cliquez sur Design.
  2. À 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. 
  3. 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 Citation devant une image ou un autre contenu visuel.
  4. 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.

La plupart des templates proposent des options de style pour les blocs Citation. Dans les templates sans options de style, le texte du bloc Citation revêt le style de votre corps de texte. Consultez nos conseils ci-dessous pour découvrir d’autres façons de faire ressortir les citations.

Pour modifier l’apparence de votre bloc Citation, utilisez les ajustements ci-dessous pour ces familles de templates :

Famille de templates Nom de l’ajustement

Adirondack

Bloc Citation

Avenue

n/a

Famille Aviator

Police des citations, texte des citations 

Bedford

Police des citations, couleur des citations 

Brine

Section des blocs Citation (alignement, police des citations, police des sources)

Farro

Section des blocs Citation (alignement, police des citations, police des sources)

Five

Bloc Citation

Flatiron

Police des citations, couleur des citations, taille des citations inline

Forte

Bloc Citation 

Galapagos

n/a

Ishimoto

Citation, taille des citations

Momentum

Bloc Citation

Montauk

n/a

Native

Citations, taille des citations

Pacific

Police des citations, couleur des citations

Skye

Section des blocs Citation (alignement, police, police min., couleur des citations)

Supply

n/a

Tremont

Police des citations, police des citations min 
Wells Citation, taille des citations
Wexley Police de la citation

York

Police des citations, Mettre la citation à l’échelle, Citation min, Couleur du texte des citations, Alignement de la citation, Afficher des guillemets, Police source des citations, Couleur source des citations

Animer la citation

Accéder à cette fonctionnalité

Les animations des blocs Citation ne sont pas prises en charge dans l’Éditeur intuitif. Au lieu de cela, les blocs Citation suivent les paramètres d’animation à l’échelle du site.

Pour animer un bloc Citation :

  1. Dans l’éditeur de bloc Citation, cliquez sur Design.
  2. Sélectionnez un effet dans le menu déroulant. Lorsque vous sélectionnez une option, un aperçu s’affiche sur la page.

Choisissez parmi les options suivantes :

  • Aucun : aucune animation, même s’il existe des paramètres d’animation à l’échelle du site
  • Valeur par défaut du site : le texte correspond aux paramètres d’animation à l’échelle du site
  • Apparaître en fondu : le texte apparaît en fondu
  • Faire glisser vers le haut : le texte glisse vers le haut
  • Mise au point : le texte est flou avant de devenir net
  • Apparition - Le texte glisse du centre vers l’extérieur

Voici un exemple de bloc Citation utilisant l’animation Mise au point.

Quote_block_animations_appear_when_the_block_loads.gif

Autres façons d’ajouter des citations

Voici quelques autres options pour ajouter des citations sur votre site et leur donner une mise en forme unique.

Mettre en forme comme texte de citation

Pour mettre en avant votre citation à l’aide d’un bloc Texte, surlignez le texte et cliquez sur l’icône citation dans l’éditeur du bloc Texte. La citation est alors mise en retrait. Selon votre template, une ligne peut apparaître sur le côté et le texte peut s’afficher en italiques.

Habiller le texte

Pour une citation de style magazine qui attire l’œil, sur une page, placez un bloc Texte autour d’un autre. Pour en savoir plus, consultez l’article Créer une accroche en habillant le texte.

pull-quote.png

Superposition de blocs Citations et de blocs Image

Si vous utilisez l’Éditeur intuitif, vous pouvez placer un bloc Citation sur un bloc Image afin de créer un arrière-plan d’image pour la citation. Vérifiez que l’arrière-plan du bloc est désactivé afin que le bloc Image qui se trouve derrière lui ne soit pas masqué.

Dans l’éditeur classique, il n’est pas possible de superposer des blocs. Ajoutez plutôt un bloc Image avec une superposition de texte et personnalisez ce texte pour qu’il ressemble davantage à une citation en exergue. Consultez l’article Blocs Images pour découvrir des exemples des différentes options de bloc Image disponibles. Voici un exemple avec le bloc Image Poster :

image-block-as-quote.png

Mettre en forme comme texte de titre

Pour donner au texte un style bien visible, ajoutez le texte de la citation à un bloc Texte, puis mettez-le en forme comme un titre. Dans l’éditeur du bloc Texte, mettez en surbrillance le texte et utilisez le menu déroulant de mise en forme pour sélectionner Titre 2 ou Titre 3. Utilisez ensuite les options de Titre 2 ou de Titre 3 dans le panneau Styles du site pour modifier l’apparence du texte.

Astuce

les moteurs de recherche identifient le contenu des titres comme des zones riches en mots-clés pour l’indexation. Par conséquent, les citations mises en forme comme des titres peuvent interférer avec le SEO de votre site. Nous recommandons cette solution uniquement si votre template n’est pas doté de styles pour le bloc Citation et que votre objectif principal est d’améliorer le design de votre citation.

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é.