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 sélectionnez Image pour un bloc Image Inline, ou sélectionnez Poster, Carte, Chevauchement, Collage 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 et un lien image.
  2. Cliquez sur lʼonglet Design pour modifier la disposition et animer le bloc.
  3. 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 :

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

À 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.
  • Une fois lʼimage téléchargée, vous pouvez la modifier à lʼaide de lʼéditeur dʼimages.
  • 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 au champ Lien ou cliquez sur l'icône engrenage pour obtenir 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. 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. Vous trouverez plus d’informations sur la personnalisation du bouton ci-dessous.

Dispositions des blocs Image

Voici des exemples pour chaque disposition du bloc Image. Vous pouvez changer de 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 des légendes facultatives sous lʼimage ou superposées à celle-ci. Définissez lʼaffichage de la légende dans lʼonglet Contenu.

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 apparaît, sélectionnez Image à gauche ou Image à droite dans lʼonglet Design du bloc Image.

card_Image_Block.png

Les blocs Image Chevauchement 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 apparaît, sélectionnez Image à gauche ou Image à droite dans lʼonglet Design du 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.

Pour choisir le côté sur lequel lʼimage apparaît, sélectionnez Image à gauche ou Image à droite dans lʼonglet Design du bloc Image.

collage_Image_Block.png

Les blocs Image Pile affichent les images avec le texte en dessous.

stack_Image_Block.png

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 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 pour maintenir un bel équilibre entre les mots et lʼimage. Cela permet également de garder le texte visible sur les appareils mobiles.

Astuce : mettez le texte en surbrillance pour apporter des modifications de mise en forme simples à 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 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 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 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 Content.

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.

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 :

Astuce : vous pouvez supprimer la marge intérieure automatiquement appliquée aux blocs dʼimage en ajoutant du code personnalisé. Pour plus dʼinformations, consultez ce billet sur le Forum Squarespace.

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.

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 dans le panneau Design. Pour personnaliser le bloc Image :

  1. Dans le Menu principal, cliquez sur Design, puis sur Blocs Image.
  2. Faites défiler vers le bas jusqu’à la section de chaque disposition pour modifier les ajustements. Vous trouverez ci-dessous le détail des ajustements spécifiques à chaque disposition.
  3. Pour modifier la police du bloc, modifiez la police de votre site. La taille de police du bouton suit les réglages de Paragraphe 2.
  4. Pour modifier les couleurs du bloc, modifiez les couleurs de la section de ce bloc.

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 police et de couleur de la section.

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

  • Alignement du texte : Gauche, Centre, Droite – Alignez le titre et le sous-titre
  • Largeur du contenu – Définissez la largeur de la légende
  • Séparation du titre – Définissez l’espace entre le titre et le sous-titre
  • Séparation du bouton – Définissez la position du bouton

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

  • Position du contenu : En haut, Au centre, En bas
  • Alignement du texte : Gauche, Centre, Droite, Correspondant, Opposé – Alignez le titre et le sous-titre. Correspondant 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
  • Séparation de l’image – Définissez l’espace entre l’image et le texte
  • Séparation du titre – Définissez l’espace entre le titre et le sous-titre
  • Séparation du bouton – Définissez la position du bouton

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

  • Position du contenu : En haut, Au centre, En bas
  • Alignement du texte : Gauche, Centre, Droite, Correspondant, Opposé – Alignez le titre et le sous-titre. Correspondant 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.
  • Séparation du titre – Définissez l’espace entre le titre et le sous-titre
  • Séparation du bouton – Définissez la position du bouton

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

  • Position du contenu : En haut, Au centre, En bas
  • Alignement du texte : Gauche, Centre, Droite, Correspondant, Opposé – Alignez le titre et le sous-titre. Correspondant 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
  • Décalage du contenu – Définissez le degré de superposition de la légende sur l’image. Ceci affecte la taille du texte.
  • Marge intérieure du contenu – Définissez la marge intérieure bordant la légende
  • Séparation du titre – Définissez l’espace entre le titre et le sous-titre
  • Séparation du bouton – Définissez la position du bouton

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

  • Alignement du texte : Gauche, Centre, Droite – Alignez le titre et le sous-titre
  • Séparation de l’image – Définissez l’espace entre l’image et le texte
  • Séparation du titre – Définissez l’espace entre le titre et le sous-titre
  • Séparation du bouton – Définissez la position du bouton

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 – Alignez le titre et le sous-titre
  • 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
  • Couleur de la police du bouton
  • 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
  • Largeur de la bordure du bouton
  • Marge intérieure 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, Correspondant, Opposé – Alignez le titre et le sous-titre. Correspondant 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
  • Couleur de la police du bouton
  • 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
  • Largeur de la bordure du bouton
  • Marge intérieure 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, Correspondant, Opposé - Alignez le titre. Correspondant 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
  • Couleur de la police du bouton
  • 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
  • Largeur de la bordure du bouton
  • Marge intérieure 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, Correspondant, Opposé – Alignez le titre et le sous-titre. Correspondant 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
  • Couleur de la police du bouton
  • 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
  • Largeur de la bordure du bouton
  • Marge intérieure 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
  • Couleur de la police du bouton
  • 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
  • Largeur de la bordure du bouton
  • Marge intérieure 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 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 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. Ce problème est particulièrement visible dans la disposition Poster, qui est conçue pour une quantité limitée de textes.
  • 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 cette option est activée, le texte n’est pas redimensionné 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 le réorganiser, le modifier ou le supprimer :

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