Blocs Image

Affichez des images sur votre site et ajoutez des animations, des légendes et des liens.

Dernière mise à jour le 10 février 2025

Utilisez les blocs Image pour ajouter des images à des pages ou à des billets de blog. Chaque bloc Image affiche une image.

Regarder une vidéo

Ajouter une image

Pour ajouter un bloc Image :

  1. Modifiez une page ou une publication, cliquez sur Ajouter un bloc ou sur un point d’insertion, puis sur Image. Pour obtenir de l’aide, consultez l’article Ajouter du contenu avec les blocs.
  2. Cliquez sur l’icône + sur le bloc Image.
  3. Chargez un fichier à partir de votre ordinateur ou de votre appareil mobile, réutilisez une image de votre bibliothèque ou parcourez les images d’archive. Pour des résultats optimaux, utilisez une image dont la taille est inférieure à 500 Ko.
  4. Utilisez l’éditeur de bloc Image pour remplacer, supprimer ou modifier l’image.
  5. Si vous utilisez l’éditeur intuitif, veillez à définir également la disposition mobile.

Astuce

le bloc Image ne s’affiche pas sur votre site si aucune image n’est chargée.

Charger des images à partir d’un appareil mobile

Vous pouvez ajouter des images de votre téléphone ou d’un autre appareil mobile à l’aide de l’application Squarespace.Pour charger une image :

  1. Dans l’éditeur de blocs Image, cliquez sur +, puis choisissez Charger depuis un appareil mobile. Cette opération envoie une notification push à votre appareil.
    • S’il s’agit de votre premier chargement sur ce site, un QR code apparaîtra sur votre ordinateur. Si vous n’avez pas encore l’application Squarespace, scannez le code pour la télécharger, puis cliquez sur Continuer et Envoyer la notification push.
  2. Appuyez sur la notification qui apparaît sur votre appareil pour ouvrir l’outil d’importation de l’application Squarespace. L’application extrait automatiquement les images de la photothèque de votre appareil.
    • Si la notification n’apparaît pas, vérifiez les paramètres de votre appareil pour vous assurer que les notifications push de l’application Squarespace sont activées.
  3. Appuyez sur l’image que vous souhaitez utiliser, puis appuyez sur Charger.
  4. L’image apparaîtra dans le bloc Image de votre ordinateur. Dans l’application Squarespace, appuyez sur Remplacer pour choisir une autre image, ou appuyez sur Terminé pour fermer l’outil de chargement.

Astuce

lorsque vous chargez des images depuis un appareil mobile, cliquez sur Dépannage dans la fenêtre pop-up qui apparaît sur votre ordinateur pour scanner à nouveau le QR code qui télécharge l’application Squarespace, ou trouvez l’option permettant de renvoyer la notification push.

Ouvrir l’éditeur de bloc Image

Dans l’éditeur de bloc Image, vous pouvez :

Pour ouvrir l’éditeur de bloc Image :

  1. Modifiez la page ou la publication.
  2. Cliquez sur le bloc Image.
  3. Cliquez sur l’icône crayon dans la barre d’outils du bloc.

Ajouter un lien d’image

Pour transformer l’image en lien, cliquez sur le bloc pour le surligner, puis sur l’icône Lien dans la barre d’outils du bloc, ou cliquez sur Joindre un lien dans l’éditeur de bloc. Pour la plupart des dispositions de l’éditeur classique, vous devez sélectionner Sur l’image ou Sur le bouton pour que le bouton Joindre un lien apparaisse. Lorsque vous avez terminé, cliquez en dehors de l’éditeur de bloc pour enregistrer les modifications.

N’oubliez pas que l’activation de l’effet lightbox désactive les URL de destination.

Dispositions de l’éditeur classique

Accéder à cette fonctionnalité

Les blocs Image ajoutés aux sections créées avec l’Éditeur intuitif ne disposent pas d’options de disposition intégrées. Créez des dispositions similaires en superposant des blocs Image avec d’autres blocs, tels que des blocs Texte et des blocs Bouton.

Lorsque vous ajoutez un bloc Image dans l’éditeur classique, la disposition Inline s’applique par défaut. Pour changer de disposition, cliquez sur l’onglet Design, puis sélectionnez la disposition souhaitée parmi les options suivantes :

  • Inline - Bloc Image de base, avec des légendes optionnelles en dessous ou au survol de l'image. Définissez la façon dont la légende doit s'afficher dans l'onglet Contenu.
  • Poster - Affiche du texte sur des images, créant ainsi l’effet d’une bannière ou d’un poster.
  • Carte - Affiche des images avec du texte à gauche ou à droite. Le texte est généralement déplacé sous les images dans les navigateurs de petite taille et sur les appareils mobiles, ou lorsque les blocs Image sont utilisés dans des colonnes.
  • Chevauchement – Affiche des images d’un côté et le texte de l’autre (le texte chevauche partiellement l’image). Ajoutez une couleur d’arrière-plan au titre afin de le mettre en valeur. Le texte est généralement déplacé vers le bas des images dans les navigateurs de petite taille et sur les appareils mobiles, ou lorsque les blocs Image sont utilisés dans des colonnes.
  • Collage - Affiche des images d’un côté et le texte sur des « cartes » d’arrière-plan de l’autre, en compensant et en chevauchant l’image. Le texte est généralement déplacé vers le coin inférieur des images dans les navigateurs de petite taille et sur les appareils mobiles, ou lorsque les blocs Image sont utilisés dans des colonnes.
  • En pile - Affiche des images avec du texte en-dessous.

Lorsque vous sélectionnez une disposition, un aperçu du résultat s’affiche sur la page. Pour voir comment s’affiche votre bloc Image sur des appareils mobiles, utilisez la Vue par appareil.

Modifier la disposition et lʼalignement du texte

Dans lʼéditeur classique, vous pouvez modifier la disposition et lʼalignement du texte dʼun bloc Image sans ouvrir lʼéditeur à lʼaide des boutons des actions rapides. Cliquez sur le bloc Image lorsque vous modifiez la page, puis sur les boutons de disposition ou dʼalignement qui apparaissent entre les icônes du crayon et de la corbeille.

quick_actions_-__image_block_classic_layout.png

Définir la forme de l’image

Au-delà du recadrage et du redimensionnement, vous pouvez créer des formes dans les blocs Image pour ajouter de la diversité et un effet visuel unique à vos images. Définissez la forme de l’image dans l’onglet Design de l’éditeur de bloc Image :

Astuce

Si votre site prend en charge l’Éditeur intuitif, vous pouvez utiliser des blocs Forme pour ajouter des formes avec une couleur unie à vos pages sans images.

Coins arrondis

Dans l’onglet Design, utilisez les options Rayon d’angle pour définir le rayon de l’image entière ou de certains angles.

À retenir :

  • Pour supprimer votre rayon d'angle, annulez vos modifications tout en apportant des modifications ou saisissez 0 dans les champs de rayon d'angle.
  • Si les options de rayon d’angle n’apparaissent pas dans l’onglet Design, vérifiez que l’option Forme n’est pas sélectionnée.

Forme

Dans l’onglet Design, cliquez sur Forme, choisissez une valeur de proportion (1:1, 2:3 ou 3:2), puis sélectionnez la forme.Pour supprimer la forme, sélectionnez une autre option dans l’onglet Design (Ajuster/Remplir ou Original).

À retenir :

Redimensionner l’image

Il existe plusieurs manières de redimensionner ou de recadrer les blocs Image. La principale méthode pour redimensionner une image est la suivante :

Pour tous les blocs Image, vous pouvez également utiliser l’éditeur d’image pour recadrer l’image d’origine.N’oubliez pas cependant que ce changement est permanent.

Redimensionner dans l’éditeur classique

Dans l’éditeur classique, vous pouvez réduire la taille du bloc Image en ajoutant des blocs de chaque côté. Créant des espaces vides, les blocs Espaceur sont le moyen le plus courant d’y parvenir.

Pour redimensionner à l'aide de blocs :

  1. Cliquez sur un point d’insertion pour ajouter un bloc Espaceur.
  2. Faites glisser le Bloc Espaceur à gauche ou à droite du Bloc Image.
  3. Cliquez sur la poignée de redimensionnement et faites-la glisser.
Redimensionner une image pour la réduire, à l’aide d’un autre bloc.

À retenir :

  • Pour centrer l'image, placez des Blocs Espaceurs de la même taille de chaque côté.
  • Une option possible pour les dispositions Inline et Poster dans l’éditeur classique consiste à cliquer et à faire glisser la poignée de recadrage pour recadrer l’image verticalement. L’image conservera sa largeur. Seule la hauteur sera modifiée.
  • Dans l’éditeur classique, les paramètres de style des dispositions Carte, Chevauchement et Collage proposent une option de redimensionnement :
  1. Ouvrez le panneau Blocs Image
  2. Faites défiler jusqu’à la section pour cette disposition. (Par exemple, faites défiler jusqu’à la section Bloc Image : Carte.)
  3. Utilisez l'ajustement Largeur de l'image pour la redimensionner. La taille du texte de l’image s’adaptera automatiquement à l’espace disponible.
  4. Cliquez sur Enregistrer.
  1. Ouvrez le panneau Design, puis cliquez sur Styles du site.
  2. Faites défiler jusqu’à la section pour cette disposition. (Par exemple, faites défiler jusqu’à la section Bloc Image : Carte.)
  3. Utilisez l'ajustement Largeur de l'image pour la redimensionner. La taille du texte de l'image s'ajustera automatiquement pour s'adapter à l’espace disponible.
  4. Cliquez sur Enregistrer.

N'oubliez pas que ces modifications affectent tous les blocs Image qui utilisent cette disposition.

Astuce

vous pouvez supprimer la marge intérieure qui est appliquée automatiquement aux blocs Image en ajoutant du code personnalisé. Pour en savoir plus, lisez ce billet sur Squarespace Forum. Notez bien que les modifications de code personnalisé ne sont pas prises en charge par notre service d’assistance. Nous ne sommes donc pas en mesure de vous aider ni pour la configuration de solutions basées sur du code, ni pour leur dépannage.

Remplir le bloc

Vous pouvez définir des images pour remplir toute la zone du bloc dans l’éditeur intuitif et la disposition Inline dans l’éditeur classique. Les autres dispositions classiques remplissent automatiquement la zone du bloc.

  • Éditeur intuitif - Utilisez l’option Remplir dans l’onglet Design pour que l’image remplisse le conteneur. Si vous choisissez Ajuster, l’image sera entourée d’une marge intérieure.
  • Éditeur classique - Activez l’option Étirer dans l’onglet Design.
  • Si l’image est plus large que la zone du bloc Image, elle sera réduite en fonction du bloc sans être rognée.

À retenir :

  • En étirant l’image, vous risquez d’affecter sa qualité.
  • Pour limiter le besoin d’étirement, nous vous recommandons de charger une image d’une largeur comprise entre 1 500 et 2 500 pixels.

Ajouter des animations et des effets d’image

Vous pouvez ajouter des animations subtiles à vos images pour attirer le regard vers votre site :

Ajouter du texte

Les blocs Image créés avec l’éditeur classique disposent d’options de légende intégrées, tandis que l’éditeur intuitif offre plus de polyvalence.

Astuce

nous vous recommandons également d’ajouter un texte de remplacement à chaque image pour améliorer l’accessibilité et le SEO. Pour en savoir plus, consultez l’article Améliorer l’accessibilité des images, de l’audio et des vidéos

Éditeur intuitif

Dans les sections créées avec l’éditeur intuitif, utilisez un bloc Texte pour ajouter du texte à côté d’un bloc Image ou pour le superposer au bloc.

Éditeur classique

Dans les sections de l’éditeur classique, cliquez dans les champs de texte pour ajouter du texte à l’image. Il est possible qu’un texte d’espace réservé tel que Ajouter une description d’image ou Faites-le ressortir soit affiché.

À retenir :

  • Limitez les titres à quelques mots. Pour les sous-titres et les légendes, utilisez une ou deux phrases. Vous obtiendrez ainsi un bel équilibre entre les mots et l’image. Votre texte restera également visible sur les appareils mobiles.
  • Pour ajouter des sauts de ligne dans le texte du titre, appuyez sur Maj + Entrée.
  • Mettez le texte en surbrillance et utilisez la barre d’outils pour modifier la mise en forme (par exemple mettre en gras, mettre en italique ou ajouter un lien).
  • À l’exception des dispositions Inline et Pile, le texte conserve sa largeur définie par rapport à l’image sur les appareils mobiles et les navigateurs de petite taille.
  • Lorsque vous passez de la disposition Inline à toute autre disposition pour la première fois, vous devez saisir à nouveau le texte des images.

La disposition Inline prend en charge une légende basique, tandis que les autres comportent des champs de titre et de sous-titre.

La disposition Inline accepte une légende :

Dans lʼonglet Contenu, sélectionnez une option dʼaffichage dans le menu déroulant de la légende :

  • Désactivé - Aucune légende nʼapparaît, sauf si lʼimage est affichée en lightbox.
  • Légende en dessous : la légende s'affiche sous l'image.
  • Légende superposée – La légende apparaît sur l’image dans une barre gris foncé.
  • Légende superposée (en cas de survol) – La légende apparaît sur l’image dans une barre gris foncé lorsque l’on survole l’image.

Astuce

Si l'option Ajouter une description d'image ne s'affiche pas, sélectionnez temporairement le style Légende en dessous dans l'onglet Contenu.

Les légendes s’affichent toujours avec un effet lightbox. Les légendes ne s’affichent pas si le bloc Image est vide. Pour ajouter un texte sans image, utilisez un bloc Texte.

D’autres dispositions acceptent un titre et un sous-titre :

Polices et couleurs

Éditeur intuitif

Dans les sections de l’Éditeur intuitif, vous pouvez ajouter une couleur de superposition à un bloc Image en activant l’option Superposition dans l’onglet Design. Les superpositions appliquent un filtre coloré sur les images, leur donnant une légère teinte. 

Utilisez le sélecteur de couleurs pour sélectionner la couleur et la transparence de la superposition. Cliquez sur Mode de fusion pour ajouter un effet visuel supplémentaire à la superposition. Ces effets visuels s’afficheront avec de légères différences visuelles en fonction du navigateur de l’utilisateur.

Éditeur classique

La marche à suivre pour personnaliser les polices et les couleurs des blocs Image dans l’éditeur classique dépend de la version de votre site.

Pour définir les styles des blocs Image globalement :

  • Modifiez les polices du bloc dans le panneau Polices.
  • Modifiez les couleurs de la section de ce bloc dans le panneau Couleurs.
  • Personnalisez les couleurs de thème d’éléments tels que le titre, la superposition d’image ou l’arrière-plan du bouton à l’aide des ajustements de couleur du bloc Image.
  • Personnalisez le bouton du bloc dans le panneau Boutons. Les boutons des blocs Image suivent les paramètres de style Principal.
  • Définissez la taille de la police et les autres mises en forme dans la barre d’outils Texte. La taille de police du bouton suit les réglages du paragraphe 2.

Pour définir les styles des éléments spécifiques à la disposition dans le bloc Image, tels que l'alignement du texte ou la largeur du contenu :

  1. Ouvrez le panneau Blocs Image. Pendant que vous modifiez une page, ouvrez le panneau Styles du site, puis cliquez sur Blocs Image.
  2. Faites défiler vers le bas jusqu’à la section de chaque disposition pour modifier les ajustements.

Dans la version 7.0, toutes les dispositions de blocs Image, excepté la disposition Inline, possèdent leurs propres paramètres de style dans Styles du site. Pour trouver ces options :

  1. Ouvrez le panneau Design, puis cliquez sur Styles du site.
  2. Faites défiler vers le bas jusqu’à la section de chaque disposition pour modifier les ajustements.

Le bloc Image Inline ne dispose pas de ses propres ajustements de design dans le panneau Styles du site. Pour en savoir plus sur les styles, les couleurs et les tailles de police des légendes, consultez l’article Personnaliser les légendes dʼimage.

Étapes suivantes

Après avoir configuré le bloc Image, vous pouvez effectuer les opérations suivantes :

Pour résoudre tout problème lié aux images, consultez l’article Mettre en forme les images pour un affichage sur le web.

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