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

Ajouter un bloc Image

Pour ajouter un bloc Image :

  1. Modifiez une page ou un billet, cliquez sur un point d’insertion, puis cliquez sur Image. Pour obtenir de l’aide, consultez l’article Ajouter du contenu avec les blocs.
  2. Utilisez lʼonglet Contenu pour ajouter une image et un lien image.
  3. Cliquez sur lʼonglet Design pour changer de disposition et animer le bloc.
  4. Lorsque vous avez terminé, cliquez en dehors de l’éditeur de bloc. Vos modifications sont enregistrées automatiquement.

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 :

Cliquez sur l’icône +, puis choisissez comment ajouter votre image :

  • Pour charger une image depuis votre appareil, cliquez sur Charger un fichier.
  • Pour réutiliser une image, cliquez sur Sélectionner dans la bibliothèque.
  • Pour trouver et ajouter des images d’archive, sélectionnez Parcourir les image d’archive.

Après avoir ajouté une image, vous pouvez :

  • Modifier votre image ou ajouter des effets d’image
  • Définir le point focal de votre image en cliquant sur les trois points, puis sur Point focal
  • Changer l’image en cliquant sur Remplacer
  • Supprimer l’image en cliquant sur les trois points, puis sur Supprimer.

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

Ajouter un lien d’image ou un bouton

Dans lʼonglet Contenu, 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 Lien 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.
  • La disposition Inline n’est pas compatible avec les boutons.

Pour toutes les autres dispositions de bloc Image, utilisez le menu déroulant Lien. Vous pouvez choisir parmi les options suivantes :

  • None (Aucun) - Aucun lien
  • Sur l’image – L’image tout entière se transforme en 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.

Choisir une disposition

Lorsque vous ajoutez un bloc Image, 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 se déplace généralement sous les images dans les petits navigateurs et les appareils mobiles, ou lorsque les blocs d'images sont utilisés dans des colonnes.
  • Chevauchement – Affichez 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 du texte sur des « cartes » d'arrière-plan de l'autre, en compensant et au survol de l'image. Le texte se déplace généralement vers le coin inférieur des images dans les petits navigateurs et appareils mobiles, ou lorsque les blocs d'images 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.

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

Ajouter des animations

Il n’est pas possible d’ajouter des animations à l’aide de l’application Squarespace.

Dans lʼonglet Design 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 Design, puis sur Animations.
  2. Sélectionnez un effet dans la liste afin de lʼappliquer à lʼimage et au texte. Lorsque vous sélectionnez une option, un aperçu sʼaffiche sur la page.
  3. Pour animer lʼimage et le texte séparément, sélectionnez Personnalisé, puis sélectionnez les options pour Image et Texte.
Astuce : avec 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
  • Révéler – 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 :

  • Animation : Personnalisé
  • Animation dʼimage : Faire glisser vers la gauche
  • Animation de texte : Faire glisser vers la droite

Exemple de bloc Image avec animations.

Ajouter du texte

Dans le bloc Image, 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. De cette façon, vous obtiendrez un bel équilibre entre les mots et l'image. De cette façon, le texte reste également visible sur les appareils mobiles.
  • Pour ajouter des sauts de ligne dans le texte du titre, appuyez sur Maj + Entrée. Si vous ajoutez des sauts de ligne en appuyant uniquement sur Entrée, les sauts de ligne disparaissent après l’enregistrement de la page.
Astuce : mettez le texte en surbrillance pour modifier la mise en forme à l’aide de la barre d’outils de texte (par exemple mettre en gras, mettre en italique ou ajouter un lien).

Légendes ou titres et sous-titres

Les champs de texte et les options de style varient selon la disposition. 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.
Conseil : 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 :

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.

Pour définir les styles des blocs d'images globalement :

  • Modifiez les polices du bloc dans le panneau Polices.
  • Modifiez les couleurs pour la section de ce bloc dans le panneau Couleurs.
  • Personnalisez les couleurs de thème des é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.
  • Définissez la taille de la police et les autres mises en forme dans la barre d'outils Texte. La taille de la 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 d'image, tels que l'alignement du texte ou la largeur du contenu :

  1. 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. Dans le Menu principal, cliquez sur Design, puis 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.

Ajouter des formes d’image

Utilisez des formes d’image pour ajouter de la diversité et un effet visuel unique à vos images. La forme que vous choisissez apparaît au-dessus de votre image, comme un masque. Vous pouvez ajouter des formes d’image à n’importe quelle disposition de bloc Image. Choisissez parmi trois valeurs de proportion : 1:1, 2:3 et 3:2.

Pour ajouter des formes d’image, procédez comme suit :

  1. Dans l’éditeur de blocs Image, cliquez sur Design.
  2. Choisissez Forme, puis cliquez sur Forme.
  3. Choisissez une valeur de proportion, puis cliquez sur la forme que vous souhaitez utiliser.

Après avoir choisi une forme, vous pouvez :

  • Utiliser le point focal pour personnaliser l’apparence de votre image dans la forme.
  • Activer les animations pour ajouter un effet visuel.
  • Supprimer la forme. Dans l’onglet Design, choisissez Original pour revenir à la forme d’origine.

À retenir :

Ajouter un rayon d'angle

Vous pouvez arrondir les angles d'une image à l'aide du paramètre rayon d'angle. Dans l'onglet Conception de l'éditeur de blocs d'images :

  1. Accédez à Rayon d'angle et cliquez sur définir le rayon de l'image entière ou de certains angles.
  2. Dans le champ Rayon d’angle, saisissez des nombres (exprimés en pixels) pour modifier la forme de la bordure.
  3. Survolez Terminé et cliquez sur Enregistrer.

À retenir :

  • Les modifications apportées au rayon d'un bloc d'image ne s'appliquent qu'au bloc d'image individuel. Il ne modifie pas l'image sur votre site.
  • Pour supprimer votre rayon d'angle, annulez vos modifications tout en apportant des modifications ou saisissez 0 dans les champs de rayon d'angle.

Redimensionner l’image

Vous pouvez redimensionner ou recadrer les blocs d'images de différentes manières, en fonction de la disposition. Pour en savoir plus, consultez Redimensionner une image.

Astuce : vous pouvez supprimer la marge intérieure automatiquement appliquée aux blocs dʼ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.

Blocs Image sur mobile

Chaque disposition de bloc Image conserve sa mise en forme sur les appareils mobiles. Le texte sera déplacé sur les appareils mobiles 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 Pile, les légendes conservent leur largeur définie par rapport à l’image. Les légendes plus longues peuvent donc être difficiles à lire ou être tronquées sur les appareils mobiles. Ce problème est particulièrement visible dans la disposition Poster, qui est conçue pour une quantité limitée de textes.
  • Les légendes de la disposition Carte se déplacent du côté de lʼimage vers le dessous de lʼimage. Pour les dispositions Collage et Chevauchement, les légendes se déplacent du côté de lʼimage vers le bas 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 cette option est activée, le texte n’est pas redimensionné en dessous de 14 pixels.
  • Plusieurs blocs Images s'empilent verticalement sur mobile.

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

Si une image est enregistrée en mode CMJN et non en mode RVB, 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 le réorganiser, le modifier ou le supprimer :

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