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.

Regarder une vidéo

Cette vidéo concerne la version 7.0 de Squarespace. 

Ajouter un bloc Image

Pour ajouter un bloc Image :

  1. Modifiez une page ou une publication, 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 du contenu à l'aide des blocs.

Menu des blocs 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

Dans l'onglet Contenu de l'éditeur de Bloc image :

  • Pour charger votre propre image, cliquez sur Charger une image. Vous pouvez également faire glisser l’image dans l’outil de chargement à partir de votre ordinateur.
  • 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
  • Vous pouvez également réutiliser des images à partir de la fenêtre Recherche d'images.

in_the_content_tab_of_the_image_block__click_upload_an_image_to_add_your_own_image.png

À retenir :

  • Pour des résultats optimaux, utilisez une image dont la taille est inférieure à 500 Ko. 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.
  • L'éditeur de Bloc image ne s'affiche pas sur votre site si aucune image n'est téléchargée.
  • Si l'image est de travers, vous pouvez la faire pivoter dans l'éditeur Image Editor.

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.

inline_image_block_-_caption_Below.pnginline_Image_Block_-_caption_overlay.png

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

poster_Image_Block.png

Les blocs Image Carte affichent les images avec le 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.

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

card_Image_Block.png

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.

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

overlap_Image_Block.png

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.

collage_Image_Block.png

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.

stack_Image_Block.png

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 le champ 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
  • Image active - L'image entière devient un lien. Ajoutez une URL dans le champ URL qui apparaît sous le menu déroulant, ou cliquez sur l'icône engrenage pour obtenir des options supplémentaires.
  • 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 champs qui s’affichent sous le menu déroulant, ou cliquez sur l'icône engrenage pour accéder à des options supplémentaires. Pour en savoir plus sur la personnalisation du bouton, consultez l'article ci-dessous

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.

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.
Astuce : dans la version 7.1, vous pouvez appliquer des animations globalement à toutes les images de votre site.

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 du texte à 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 :

  • Deux champs de texte, l’un au-dessus de l’autre
  • Styles définis dans le panneau Design
  • Ajoutez du texte de remplacement manuellement dans le champ Nom de fichier de l'onglet Contenu .

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.

Pour modifier la taille et le rognage de l'image :

Pour modifier la taille et le rognage de l'image :

Pour modifier la taille et le rognage de l'image :

Pour modifier la taille et le rognage de l'image :

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

Pour modifier la taille et le rognage 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. L’emplacement de ces paramètres dépend de la version de votre site.

Version 7.1

Dans la version 7.1, certaines dispositions proposent leurs propres paramètres de style.

Le bloc Image Inline ne dispose pas de ses propres options dans le panneau Design. Les styles de légende correspondent aux sélections de couleur et de police de la section.

Les autres dispositions ont des options uniques dans le panneau Design :

  1. Dans le Menu principal, cliquez sur Design, puis sur Blocs Image
  2. Faites défiler l’écran vers le bas jusqu’à la section de chaque disposition pour modifier les ajustements. Ces ajustements affectent tous les blocs Image de votre site qui utilisent cette disposition.
  3. Pour modifier la police du bloc, modifiez la police de votre site.
  4. Pour modifier les couleurs du bloc, modifiez les couleurs de la section de ce bloc
  5. Pour appliquer un style au boutondu bloc, ajustez les paramètres du bouton de votre site. La police du bouton correspond à la police de votre site. La couleur du bouton correspond aux couleurs de la section en question. 

Version 7.0

Dans la version 7.0, certaines dispositions proposent leurs propres paramètres de style dans le panneau Styles du site. 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 template.

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 par appareil.
  • À lʼexception des dispositions Inline et Stack, les légendes conservent leur largeur définie par rapport à lʼimage. Cela signifie que les légendes plus longues peuvent être plus difficiles à lire ou peuvent être tronquées sur les appareils mobiles.
  • 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.

Résoudre les problèmes de couleurs d'image

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.

É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.
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 66 sur 253