Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.
Blocs Image

Utilisez les blocs Image pour ajouter des images à des pages ou à des billets de blog avec toute une variété de dispositions. Chaque bloc Image affiche une image.

Astuce : pour ajouter plusieurs images à un bloc, utilisez les blocs Galerie. Pour découvrir comment ajouter des images à d’autres zones de votre site, consultez nos guides sur les bannières, les arrière-plans, les pages Galerie et les images de produits.

Regarder une vidéo

Ajouter un bloc Image

Pour ajouter un bloc Image :

  1. Modifiez une page ou un billet de blog, cliquez sur un point d’insertion, puis sélectionnez Image pour un bloc Image Inline, ou sélectionnez PosterCarteChevauchementCollage ou Pile pour les autres dispositions. Pour en savoir plus, consultez l’article Ajouter des blocs.

Menu du bloc avec les options du bloc Image en surbrillance.

  1. Utilisez l’onglet Contenu pour ajouter une image.
  2. Utilisez l’onglet Design pour modifier la disposition et ajouter un lien vers l’image.
  3. Utilisez l’onglet Animations pour animer le bloc.
  4. Cliquez sur Appliquer pour enregistrer vos modifications.

Pour obtenir des instructions plus détaillées, consultez les sections ci-dessous.

Ajouter une image

Vous pouvez ajouter des images à votre bloc Image à partir de plusieurs sources. Certaines options ne sont disponibles que sur l’application pour ordinateur tandis que d’autres ne sont disponibles que dans l’application Squarespace.

Dans l’onglet Contenu de l’éditeur de bloc Image, téléchargez une image ou ajoutez une image à l’aide de nos intégrations d’images d’archive. Vous pouvez également réutiliser une image d’archive ou une image téléchargée dans la fenêtre Recherche d’images.

Astuce :le résultat sera meilleur avec des images de 500 Ko ou moins. Pour découvrir d’autres astuces liées au format des images, consultez l’article Mettre en forme les images pour un affichage sur le Web.

Option 1 – Téléchargez une image

Pour télécharger votre propre image, cliquez sur Télécharger une image. Vous pouvez également faire glisser l’image dans l’outil de chargement à partir de votre ordinateur.

Dans l’onglet Contenu du bloc Image, cliquez sur Télécharger une image pour ajouter votre propre image.

Option 2 – Ajoutez une image d’archive

Pour ajouter une image d’archive, cliquez sur Rechercher une image. Faites votre choix parmi les options gratuites ou premium. Pour en savoir plus, consultez l’article Rechercher et ajouter des images d’archive.

cliquez sur rechercher dans l’onglet Contenu d’un bloc Image

Dispositions des blocs Image

Voici des exemples pour chaque disposition du bloc Image. Vous pouvez modifier la disposition dans l’onglet Design. Lorsque vous sélectionnez une disposition, un aperçu du résultat s’affiche sur la page.

Astuce : lorsque vous passez de la disposition Inline à toute autre disposition, vous devez saisir à nouveau le texte de l’image.

Les blocs Image Inline affichent les images avec une légende optionnelle en dessous ou en superposition.

Exemples de blocs Image Inline, l’un avec une légende en dessous et l’autre avec une légende superposée.

Les blocs Image Poster affichent le texte par dessus les images, créant l’effet d’une bannière ou d’un poster.

Exemple de bloc Image Poster.

Les blocs Image Carte affichent les images avec le texte à gauche ou à droite, ainsi qu’une couleur d’arrière-plan en option. 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.

Exemple de bloc Image Carte.

Pour choisir le côté sur lequel l’image s’affiche, utilisez le menu déroulant Position de l’image dans l’onglet Design du bloc Image.

Les blocs Chevauchement d’images affichent les 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é 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.

Exemple de bloc Image Chevauchement.

Pour choisir le côté sur lequel l’image s’affiche, utilisez le menu déroulant Position de l’image dans l’onglet Design du bloc Image.

Les blocs Image Collage affichent les images d’un côté et le texte sur une « carte » d’arrière-plan de l’autre côté, le texte étant décalé et chevauchant l’image. 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.

Exemple de bloc Image Collage.

Pour choisir le côté sur lequel l’image s’affiche, utilisez le menu déroulant Position de l’image dans l’onglet Design du bloc Image.

Les blocs Image Pile affichent les images avec le texte en dessous, ainsi qu’une couleur d’arrière-plan en option.

Exemple de bloc Image Pile.

Ajouter un lien d’image ou un bouton

Dans l’onglet Design, vous pouvez transformer l’image en lien ou ajouter un bouton à sa disposition.

Pour transformer l’image en lien dans la disposition Inline, ajoutez l’URL dans la zone URL de destination ou cliquez sur l'icône engrenage pour accéder à des options supplémentaires.

À retenir :

  • L’activation de l’effet lightbox désactive les URL de destination.
  • Le format Inline n'est pas compatible avec les boutons.

Pour toutes les autres dispositions de bloc Image, utilisez le menu déroulant Lien de l’image. Vous avez les options suivantes :

  • Aucun – Aucun lien
  • Sur l’image – L’image tout entière se transforme en lien. Ajoutez l’URL ou cliquez sur l'icône engrenage pour accéder à des options supplémentaires dans la zone URL qui s’affiche sous le menu déroulant.
  • Bouton – Un bouton inséré dans le texte s’affiche (sous le titre et le sous-titre). Personnalisez le texte du bouton et ajoutez l’URL dans les zones qui s’affichent sous le menu déroulant, ou cliquez sur l'icône engrenage pour accéder à des options supplémentaires.
  • Vous pouvez définir le style du bouton en accédant au panneau Styles du site.

Ajouter des animations (application pour ordinateur uniquement)

Dans l’onglet Animations de l’éditeur de bloc Image, vous pouvez ajouter des animations que les visiteurs verront lorsqu’ils chargeront ou actualiseront la page. Nous vous recommandons d’essayer plusieurs options afin de trouver les animations les plus adaptées à vos besoins.

Pour ajouter une animation :

  1. Dans l’éditeur de bloc Image, cliquez sur Animations.
  2. Sélectionnez un effet dans le menu déroulant du bloc Image animée afin de l’appliquer à l’image et au texte. Lorsque vous sélectionnez une option, un aperçu du résultat s’affiche.
  3. Pour animer séparément l’image et le texte, sélectionnez Personnalisé, puis sélectionnez des options pour Animer l’image et Animer le texte de l’image.

Faites votre choix parmi les options d’animation suivantes (disponibles pour votre image, votre texte ou les deux) :

  • Fondu – Le bloc, l’image ou le texte apparaissent en fondu
  • Glissement vers le haut – Le bloc, l’image ou le texte glissent vers le haut
  • Glissement vers le bas - L’image ou le texte glisse vers le bas
  • Extrait horizontal – Le bloc ou l’image sont chargés en calques horizontaux
  • Extrait vertical – Le bloc ou l’image sont chargés en calques verticaux
  • Incliner vers le haut – Le bloc ou l’image sont agrandis et inclinés vers le haut
  • Incliner vers le bas – Le bloc ou l’image sont agrandis et inclinés vers le bas
  • Mise au point – Le bloc, l’image ou le texte sont flous avant de devenir nets
  • Collision - L’image et le texte glissent depuis les côtés vers l’intérieur
  • Apparition - L’image et le texte glissent depuis le centre vers l’extérieur
  • Glissement en partant de la gauche - L’image ou le texte glisse en partant de la gauche
  • Glissement en partant de la droite - L’image ou le texte glisse en partant de la droite

Voici un exemple de bloc Image collage utilisant ces paramètres :

  • Bloc Image animée - Personnalisé
  • Image animée – Faire glisser vers la gauche
  • Texte d’image animé – Faire glisser vers la droite

Exemple de bloc Image avec animations.

Ajouter du texte

Après avoir cliqué sur Appliquer pour enregistrer le bloc, cliquez sur Écrire une légende ici, Écrire un titre ici ou Écrire un sous-titre ici pour ajouter un texte correspondant à l’image.

Pour de meilleurs résultats, le texte doit rester court. Essayez de limiter les sous-titres à une ou deux phrases. Ceci maintient un bon équilibre entre les mots et l’image. Le texte reste également visible sur les appareils mobiles.

Légendes ou titres et sous-titres

Les champs de texte et les options de style varient selon la mise en page. 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 Design, sélectionnez une option d’affichage dans le menu déroulant de la légende :

  • Ne pas afficher la légende – Aucune légende n’apparaît, sauf si l’image est affichée en lightbox.
  • Légende en dessous – La légende apparaît sous l’image, alignée à gauche.
  • 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 Écrire une légende ici ne s’affiche pas, sélectionnez temporairement le style Légende en dessous dans l’onglet Design.

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 :

Redimensionner l’image

Il existe plusieurs manières de redimensionner ou de recadrer les blocs Image. Vos options dépendent de la disposition.

Les blocs Image Inline conservent la largeur du fichier image initial. Si le fichier image est plus étroit que la zone de contenu, vous verrez un espace vide des deux côtés de l’image. Ceci permet de conserver la qualité initiale de l’image. Pour remplir l’espace vide et afficher l’image sur toute la largeur du bloc, cochez l’option Étirer dans l’onglet Design du bloc. En étirant l’image, vous risquez d’affecter sa qualité.

Il existe également d’autres options pour modifier la taille et le recadrage de l’image :

Dans la disposition Poster, les images sont étirées automatiquement pour occuper toute la largeur du bloc.

Il existe plusieurs options pour modifier la taille et le recadrage de l’image :

Il existe plusieurs options pour modifier la taille et le recadrage de l’image :

Il existe plusieurs options pour modifier la taille et le recadrage de l’image :

Il existe plusieurs options pour modifier la taille et le recadrage de l’image :

Dans la disposition Pile, les images sont étirées automatiquement pour occuper toute la largeur du bloc.

Il existe plusieurs options pour modifier la taille et le recadrage de l’image :

Définir le style du bloc Image

Certaines dispositions proposent leurs propres paramètres de style pour les polices, les couleurs et les boutons.

Pour trouver ces options :

Dans le Menu principal, cliquez sur Design, puis sur Styles du site.

Le bloc Image Inline ne dispose pas de ses propres options Styles du site. Le style des légendes est défini par le modèle.

Faites défiler vers le bas jusqu’à la section Bloc Image : Poster pour modifier ces ajustements. Ces ajustements affectent tous les blocs Image Poster de votre site :

  • Alignement du texte : gauche, droite, centre
  • Police du titre – Définissez la police et la taille du titre
  • Couleur du titre
  • Police du sous-titre – Définissez la police et la taille du sous-titre
  • Couleurs du sous-titre
  • Couleur des liens Inline – Définissez la couleur des liens du titre et du sous-titre
  • Séparation du titre – Définissez l’espace entre le titre et le sous-titre
  • Couleur de superposition de l’image – Ajoutez un filtre de couleur sur l’image
  • Largeur du contenu – Définissez la largeur de la légende
  • Couleur d’arrière-plan du titre – Ajoutez une couleur derrière le titre

Si vous avez ajouté un bouton, utilisez ces ajustements pour le personnaliser :

  • Police du bouton – Définissez la police et la taille du bouton
  • Button Font Color (Couleur de Police de Bouton)
  • Button Background Color (Couleur d'Arrière-Plan du Bouton)
  • Couleur de la bordure du bouton – Modifiez la couleur de la bordure à l’aide de l’ajustement Largeur de la bordure du bouton
  • Button Border Width (Largeur de Bordure de Bouton)
  • Button Padding (Étalonnage de Bouton)
  • Arrondi du bouton
  • Séparation du bouton – Définissez la position du bouton

Lorsque vous avez terminé, cliquez sur Enregistrer.

Astuce : vous pouvez définir l’opacité pour chaque ajustement de couleur.

Faites défiler vers le bas jusqu’à la section Bloc Image : Carte pour modifier ces ajustements. Ces ajustements affectent tous les blocs Image Carte de votre site :

  • Dimensionnement dynamique des polices – Redimensionne le texte selon la largeur du bloc et du navigateur. Le texte du titre et du sous-titre ne sera pas redimensionné en dessous de 14 pixels.
  • Position du contenu : En haut, Au centre, En bas
  • Alignement du texte : Gauche, Centre, Droite, Identique, Opposé – Alignez le titre et le sous-titre. Identique aligne le texte du même côté que l’image. Opposé aligne le texte de l’autre côté.
  • Largeur de l’image – Définissez la taille de l’image
  • Police du titre – Définissez la police et la taille du titre
  • Couleur du titre
  • Police du sous-titre – Définissez la police et la taille du sous-titre
  • Couleurs du sous-titre
  • Couleur des liens Inline – Définissez la couleur des liens du titre et du sous-titre
  • Séparation du titre – Définissez l’espace entre le titre et le sous-titre
  • Couleur d’arrière-plan de la carte – Modifiez l’arrière-plan qui s’affiche derrière le texte
  • Marge intérieure de la carte – Définissez la marge intérieure bordant le texte
  • Séparation de la carte – Ajoutez de l’espace entre l’image et l’arrière-plan de la carte
  • Couleur de superposition de l’image – Ajoutez un filtre de couleur sur l’image
  • Couleur d’arrière-plan du titre – Ajoutez une couleur derrière le titre

Si vous avez ajouté un bouton, utilisez ces ajustements pour le personnaliser :

  • Police du bouton – Définissez la police et la taille du bouton
  • Button Font Color (Couleur de Police de Bouton)
  • Button Background Color (Couleur d'Arrière-Plan du Bouton)
  • Couleur de la bordure du bouton – Modifiez la couleur de la bordure à l’aide de l’ajustement Largeur de la bordure du bouton
  • Button Border Width (Largeur de Bordure de Bouton)
  • Button Padding (Étalonnage de Bouton)
  • Arrondi du bouton
  • Séparation du bouton – Définissez la position du bouton

Lorsque vous avez terminé, cliquez sur Enregistrer.

Astuce : vous pouvez définir l’opacité pour chaque ajustement de couleur.

Faites défiler vers le bas jusqu’à la section Bloc Image : Chevauchement pour modifier ces ajustements. Ces ajustements affectent tous les blocs Image Chevauchement de votre site :

  • Dimensionnement dynamique des polices – Redimensionne le texte selon la largeur du bloc et du navigateur. Le texte du titre et du sous-titre ne sera pas redimensionné en dessous de 14 pixels.
  • Position du contenu : En haut, Au centre, En bas
  • Alignement du texte : Gauche, Centre, Droite, Identique, Opposé - Alignez le titre. Identique aligne le texte du même côté que l’image. Opposé aligne le texte de l’autre côté.
  • Largeur de l’image – Définissez la taille de l’image
  • Chevauchement du titre – Définissez le degré de superposition du titre sur l’image. Ceci affecte la taille du texte.
  • Police du titre – Définissez la police et la taille du titre
  • Couleur du titre
  • Police du sous-titre – Définissez la police et la taille du sous-titre
  • Couleurs du sous-titre
  • Couleur des liens Inline – Définissez la couleur des liens du titre et du sous-titre
  • Séparation du titre – Définissez l’espace entre le titre et le sous-titre
  • Couleur de superposition de l’image – Ajoutez un filtre de couleur sur l’image
  • Couleur d’arrière-plan du titre – Ajoutez une couleur derrière le titre

Si vous avez ajouté un bouton, utilisez ces ajustements pour le personnaliser :

  • Police du bouton – Définissez la police et la taille du bouton
  • Button Font Color (Couleur de Police de Bouton)
  • Button Background Color (Couleur d'Arrière-Plan du Bouton)
  • Couleur de la bordure du bouton – Modifiez la couleur de la bordure à l’aide de l’ajustement Largeur de la bordure du bouton
  • Button Border Width (Largeur de Bordure de Bouton)
  • Button Padding (Étalonnage de Bouton)
  • Arrondi du bouton
  • Séparation du bouton – Définissez la position du bouton

Lorsque vous avez terminé, cliquez sur Enregistrer.

Astuce : vous pouvez définir l’opacité pour chaque ajustement de couleur.

Faites défiler vers le bas jusqu’à la section Bloc Image : Collage pour modifier ces ajustements. Ces ajustements affectent tous les blocs Image Collage de votre site :

  • Dimensionnement dynamique des polices – Redimensionne le texte selon la largeur du bloc et du navigateur. Le texte du titre et du sous-titre ne sera pas redimensionné en dessous de 14 pixels.
  • Position du contenu : En haut, Au centre, En bas
  • Alignement du texte : Gauche, Centre, Droite, Identique, Opposé - Alignez le titre et le sous-titre. Identique aligne le texte du même côté que l’image. Opposé aligne le texte de l’autre côté.
  • Largeur de l’image – Définissez la taille de l’image
  • Largeur du contenu – Définissez la largeur de la légende. Ceci affecte la taille du texte.
  • Décalage du contenu – Définissez le degré de superposition de la légende sur l’image. Ceci affecte la taille du texte.
  • Police du titre – Définissez la police et la taille du titre
  • Couleur du titre
  • Police du sous-titre – Définissez la police et la taille du sous-titre
  • Couleurs du sous-titre
  • Couleur des liens Inline – Définissez la couleur des liens du titre et du sous-titre
  • Séparation du titre – Définissez l’espace entre le titre et le sous-titre
  • Arrière-plan de la carte – Modifiez la couleur d’arrière-plan qui s’affiche derrière la légende
  • Marge intérieure de la carte – Définissez la marge intérieure bordant la légende
  • Couleur de superposition de l’image – Ajoutez un filtre de couleur sur l’image

Si vous avez ajouté un bouton, utilisez ces ajustements pour le personnaliser :

  • Police du bouton – Définissez la police et la taille du bouton
  • Button Font Color (Couleur de Police de Bouton)
  • Button Background Color (Couleur d'Arrière-Plan du Bouton)
  • Couleur de la bordure du bouton – Modifiez la couleur de la bordure à l’aide de l’ajustement Largeur de la bordure du bouton
  • Button Border Width (Largeur de Bordure de Bouton)
  • Button Padding (Étalonnage de Bouton)
  • Arrondi du bouton
  • Séparation du bouton – Définissez la position du bouton

Lorsque vous avez terminé, cliquez sur Enregistrer.

Astuce : vous pouvez définir l’opacité pour chaque ajustement de couleur.

Faites défiler vers le bas jusqu’à la section Bloc Image : Pile pour modifier ces ajustements. Ces ajustements affectent tous les blocs Image Pile de votre site :

  • Dimensionnement dynamique des polices – Redimensionne le texte selon la largeur du bloc et du navigateur. Le texte du titre et du sous-titre ne sera pas redimensionné en dessous de 14 pixels.
  • Alignement du texte : gauche, droite, centre
  • Police du titre – Définissez la police et la taille du titre
  • Couleur du titre
  • Police du sous-titre – Définissez la police et la taille du sous-titre
  • Couleurs du sous-titre
  • Couleur des liens Inline – Définissez la couleur des liens du titre et du sous-titre
  • Séparation du titre – Définissez l’espace entre le titre et le sous-titre
  • Arrière-plan de la carte – Modifiez la couleur d’arrière-plan qui s’affiche derrière la légende
  • Marge intérieure de la carte – Définissez la marge intérieure bordant la légende
  • Couleur de superposition de l’image – Ajoutez un filtre de couleur sur l’image

Si vous avez ajouté un bouton, utilisez ces ajustements pour le personnaliser :

  • Police du bouton – Définissez la police et la taille du bouton
  • Button Font Color (Couleur de Police de Bouton)
  • Button Background Color (Couleur d'Arrière-Plan du Bouton)
  • Couleur de la bordure du bouton – Modifiez la couleur de la bordure à l’aide de l’ajustement Largeur de la bordure du bouton
  • Button Border Width (Largeur de Bordure de Bouton)
  • Button Padding (Étalonnage de Bouton)
  • Arrondi du bouton
  • Séparation du bouton – Définissez la position du bouton

Lorsque vous avez terminé, cliquez sur Enregistrer.

Astuce : vous pouvez définir l’opacité pour chaque ajustement de couleur.

Blocs Image sur mobile

Chaque format conserve sa mise en forme sur mobile. Le texte se déplacera sur mobile pour s'adapter à l'appareil et conservera une position similaire par rapport à l'image.

  • Pour voir à quoi ressemblera votre Bloc Image, utilisez la Vue Mobile.
  • À l’exception des dispositions Inline et Empilé, les légendes conservent leur largeur définie par rapport à l’image. Les légendes plus longues peuvent donc être difficiles à lire.
  • Avec les dispositions Carte, Collage et Chevauchement, les légendes ne sont pas affichées le long de l’image, mais en dessous de l’image.
  • L’option Dimensionnement dynamique de la police est disponible dans le panneau Styles du site pour les dispositions Carte, Collage, Chevauchement et Pile. Lorsque cet ajustement est activé, le texte ne se redimensionne pas en dessous de 14 pixels.
  • Les Blocs image multiples s'empilent verticalement sur mobile.

Étapes suivantes

Après avoir configuré le bloc Image, vous pouvez suivre les étapes ci-dessous pour le réorganiser, le modifier ou le supprimer :

  • Faites un glisser-déposer du bloc pour le déplacer ou créer des colonnes et des lignes. Pour en savoir plus, consultez l’article Déplacer des blocs.
  • Utilisez l’éditeur d’image pour recadrer les images, les faire pivoter ou ajouter des filtres d’image.
  • Remplacez l’image en cliquant sur Supprimer dans l’onglet Contenu de l’éditeur de bloc et en chargeant une nouvelle image. De cette façon, vous n’avez pas à ajouter un nouveau bloc Image.
  • Pour créer un effet d’image de bannière avec le bloc, déplacez-le en haut de la page. Pour en savoir plus, consultez l’article Ajouter des images de bannière.
  • Supprimez le bloc.

FAQ

L’image est de travers

Si l’image du fichier chargé est couchée sur le côté, elle sera affichée de la même façon sur votre site. Pour faire pivoter l’image, utilisez l’éditeur d’image.

Les couleurs de mes images ont changé suite au téléchargement

Si l’image est enregistrée en mode CMJN et non en modeRVB, ses couleurs sur votre site Squarespace peuvent être différentes de celles du fichier image initial.

Enregistrez toujours vos images en mode RVB ou sRVB . Le mode couleur RVB est parfaitement adapté à une utilisation sur le Web, tandis que le mode CMJN est destiné à l’impression et son rendu sera incorrect dans la plupart des navigateurs. Pour découvrir d’autres astuces liées à la mise en forme des images, consultez l’article Mettre en forme les images pour un affichage sur le Web.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 55 sur 194