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

Les Blocs Image ajoutent des images individuelles aux pages et aux articles de blog. Vous pouvez utiliser vos propres images ou utiliser Getty Images, en payant des licences d'image.

Il existe six formats de Blocs Image, dont le design et le comportement sont cohérents dans tous les templates.

Remarque : les styles de légende pour la mise en page Inline sont déterminés par votre template.
Remarque : vous pouvez également ajouter des images à votre site grâces aux images de bannière, aux images d'arrière-plan, aux Blocs Galerie et aux Pages Galerie.

Regarder une vidéo

Comparaison des Blocs Image

Voici un aperçu des différences entre les six formats de Blocs Image, accompagné d'un exemple de présentation pour chaque.

Poster

Le Bloc Image Poster affiche le texte par dessus l'image.

poster.jpg

Card

Le Bloc Image Card aligne le texte à gauche ou à droite de l'image.

card.jpg

Overlap

Le Bloc Image Overlap affiche l'image d'un côté et le texte de l'autre, chevauchant en partie l'image. Une couleur d'arrière-plan est ajoutée au titre afin de le mettre en valeur. 

overlap.jpg

Collage

Le Bloc Image Collage affiche l'image d'un côté et du texte sur une « carte » d'arrière-plan, décalé et chevauchant l'image.

collage.jpg

Pile

Le Bloc Image Stack affiche l'image avec le texte en dessous, ainsi qu'une couleur d'arrière-plan en option.

stack.jpg

Inline

Le Bloc Image Inline affiche une image avec une légende optionnelle (notre Bloc Image classique).

inline.jpg

Combiner et associer

Vous pouvez combiner et associer plusieurs styles de Bloc Image sur une page ou un article.

  • Chaque format possède ses propres options de style.
  • Les options de style de format sont universelles pour le site. Par exemple, chaque Bloc Image Poster sur votre site sera conçu de la même manière.

mixed-layout.jpg

Légendes ou titres et sous-titres

  • La mise en page Inline peut prendre en charge une légende de base. C'est un excellent moyen d'afficher un nom d'artiste, de créditer un média ou d'afficher le titre de l'image. Renseignez-vous sur les options de style de légende, lesquelles sont réglées automatiquement.
  • Tous les autres formats offrent des champs de titre et de sous-titre. Ceux-ci ont plus d'options de style et mettent davantage l'accent sur le texte, créant plus d'interaction entre l'image et les mots. Pour en savoir plus, consultez les guides pour les formats PosterCardOverlapCollage, et Stack.

Les styles de mise en page présentent des avantages différents : 

Inline Tout autre format
  • Un champ de légende
  • Les styles de texte sont définis automatiquement (habituellement calqués sur celui du corps de texte)
  • S'affiche au survol
  • La légende est automatiquement transformée en texte alternatif
  • Deux champs de texte : titre et sous-titre
  • Style du texte défini dans l'Éditeur de Style
  • Différentes options d'affichage en fonction du format
  • Ajoutez du texte alternatif manuellement

Étape 1 - Ajouter un Bloc Image

Pour ajouter un Bloc Image

  1. Ouvrez une page ou un éditeur d'article.
  2. Cliquez sur un Point d'Insertion ou sur le +.
  3. Sous Image Layouts (Formats Image), sélectionnez Poster, Card, Overlap, Collage, ou Stack. Pour le format Inline, sélectionnez Image dans le champ Basic.

image-block-menu.jpg

Étape 2 - Ajouter une image

Remarque : nous vous conseillons d'utiliser des images faisant moins de 500 Ko pour obtenir les meilleurs résultats. Pour en savoir plus, consultez la page Formater vos images en vue d'un affichage sur le Web.

Option 1 - Ajouter votre propre image

Dans la fenêtre Edit Image (Modifier l'image), faites glisser votre image dans l'outil de téléchargement d'image. Vous pouvez aussi cliquer sur l'outil de téléchargement et sélectionner un fichier de votre ordinateur. Cliquez sur Apply (Appliquer).

add-image.jpg

Option 2 - Utiliser une image Getty Images

Grâce à notre partenariat avec Getty Images, vous pouvez acheter les droits d'images de stock individuelles pour 10 $. Il s'agit d'une excellente option si vous ne possédez pas déjà votre propre image.

Cliquez sur Getty Image pour chercher, visualiser et acheter les droits d'une image de stock pour votre vignette. Pour en savoir plus, visitez la page Aperçu de Getty Images et Squarespace.

add-getty-image.jpg

Étape 3 - Ajouter du texte et le mettre en forme (facultatif)

Cliquez sur Write here (Écrire ici) pour ajouter une légende ou un titre ainsi que des sous-titres à une image.

Les champs de texte et les options de style varient en fonction de la page :

Pour un meilleur effet, faites court. Essayez de limiter les sous-titres à une ou deux phrases. Cela maintient un bon équilibre entre les mots et l'image. De cette façon, le texte reste également visible sur les appareils mobiles.

Astuce : vous pouvez aussi insérer un texte alternatif afin d'aider les moteurs de recherche à reconnaître votre image.

Étape 4 - Ajuster les paramètres de design

Dans l'onglet Design :

  • Pour la mise en page Inline, définissez l'affichage des légendes, les paramètres de la lightbox et une URL de Destination.
  • Pour les formats Poster, Card, Overlap, Collage, ou Stack, utilisez le menu déroulant Image Link (Lien Image) pour ajouter un bouton ou une URL de Destination.
  • Réglez Image Position (Position Image) pour les formats Card, Overlap, ou Collage.

Étape 5 - Enregistrer

Cliquez sur Apply (Appliquer) pour enregistrer toutes les modifications apportées au Bloc.

Étape 6 - Personnaliser le design

Les Blocs Image Poster, Card, Overlap, Collage et Stack possèdent leurs propres paramètres de style dans l'Éditeur de Style. L'aperçu de l'image sur votre page sera modifié afin que vous puissiez consulter les changements en temps réel. Nous vous recommandons de jouer avec les paramètres jusqu'à ce que vous trouviez un design à votre goût.

Pour en savoir plus, consultez les guides de format :

Déplacer le Bloc Image

Après avoir enregistré l'image, faites glisser le Bloc où vous le souhaitez sur la page. Vous pouvez aussi utiliser cette méthode pour placer du texte autour de l'image. Pour en savoir plus, consultez la page Déplacer des Blocs.

moving_a_block.gif

Redimensionner et recadrer l'image

Pour redimensionner votre image :

Chaque format possède ses propres options de redimensionnement et de recadrage.

Faire ouvrir l'image dans une lightbox

Seule la mise en page Inline prend en charge les lightbox. Pour que votre image s'ouvre dans une lightbox :

  1. Double-cliquez sur l'image pour ouvrir l'éditeur d'image.
  2. Cliquez sur l'onglet Design.
  3. Assurez-vous que votre format est réglé sur Inline.
  4. Cochez la case Enable Lightbox (Activer la lightbox).
  5. Choisissez le style de votre lightbox grâce au menu déroulant Lightbox Theme (Thème de lightbox).
Remarque : les légendes s'affichent toujours dans l'affichage lightbox, par contre les URL de destination ne fonctionnent pas dans les lightbox. 

Modifier l'image à l'aide de l'éditeur d'image Adobe Creative Cloud

Cliquez sur Edit (Modifier) afin de faire pivoter, de recadrer ou d'ajouter des filtres à l'image en utilisant l'éditeur d'image Adobe Creative Cloud.

edit.jpg

Supprimer ou remplacer l'image

Pour supprimer le bloc, cliquez sur l'icône de la corbeille dans l'éditeur de page ou d'article.

Pour supprimer l'image sans supprimer le bloc, ouvrez l'éditeur du Bloc Image et cliquez sur Remove (Supprimer). Vous pouvez ensuite la remplacer par une autre image.

remove.jpg

Modifier le format

Vous pouvez passer à un autre design de format dans l'onglet Design de l'Éditeur de Blocs. Ainsi, vous modifiez le design et le comportement de votre image sans devoir supprimer, puis ajouter à nouveau le bloc.

  1. Double-cliquez sur le bloc dans l'Éditeur de page.
  2. Cliquez sur l'onglet Design.
  3. Sélectionnez le nouveau format.
  4. Pendant la sélection, l'aperçu de l'image sur votre page change afin que vous puissiez consulter les modifications en temps réel.
Remarque : lorsque vous passez du format Inline à tout autre format, vous devrez saisir à nouveau le texte d'image.

Ajouter un lien image ou un bouton

Il existe deux façons de créer des liens dans le Bloc Image :

  • Transformer l'image en un lien cliquable.
  • Ajouter un bouton sous le titre et les sous-titres (tous les formats sauf Inline)

Format Inline

Ajoutez une URL de Destination dans l'onglet Design de l'éditeur de Blocs pour ajouter un lien à votre image.

  • Activer une lightbox désactive les URL de Destination.
  • Le format Inline ne prend pas en charge les boutons.

Tout autre format

Dans l'onglet Design de l'éditeur de blocs, définissez un lien dans le menu déroulant Image Link (Lien Image). Choisissez entre :

  • None (Aucun) - Aucun lien
  • On Image (Sur l'image) - L'image complète devient un lien cliquable.
  • Button (Bouton) - Ajoutez un bouton aligné avec le texte, sous le titre et le sous-titre

Utilisez le champ URL de Destination pour définir votre lien pour l'image ou le bouton. Vous pouvez lier votre image à une autre page de votre site, un site externe ou un fichier.

Utilisez l'Éditeur de Style pour personnaliser votre bouton. Faites défiler jusqu'au champ pour ce format pour faire les ajustements suivants :

  • Button Font (Police de bouton)  - Définir 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)
  • Button Border Color (Couleur de Bordure de Bouton) - Ajuster la couleur du cadre de bordure avec l'ajustement Button Border Width (Largeur de Bordure de Bouton)
  • Button Border Width (Largeur de Bordure de Bouton)
  • Button Padding (Étalonnage de Bouton)
  • Button Rounding (Arrondi de Bouton)
  • Button Separation (Positionnement de Bouton) - Ajuste la position du bouton

button.png

Redimensionner ou recadrer l'image

Pour tous les formats :

Chaque format possède des options de redimensionnement et de recadrage supplémentaires :

Créer un texte alternatif

Le texte alternatif aide les moteurs de recherche à reconnaître votre image.

Les légendes ajoutées dans le format Inline se transforment en texte alternatif pour l'image. Pour utiliser un texte alternatif plutôt qu'une légende, ajoutez le texte de légende et sélectionnez Do Not Display Caption (Ne pas afficher la légende).

Pour toutes les autres formats, les légendes ne se transforment pas en texte alternatif, mais vous pouvez le configurer manuellement à l'aide du format Inline :

  1. Ouvrez l'éditeur de Bloc.
  2. Dans l'onglet Design, choisissez le format Inline.
  3. Utilisez le champ de légende pour ajouter le texte alternatif.
  4. Passez à tout autre format et ajoutez tout texte que vous souhaitez afficher comme légende. Le texte que vous avez ajouté dans le format Inline restera le texte alternatif.
Remarque : si vous ne voyez pas le texte Write here (Écrire ici) avec le format Inline, changez temporairement le style de légende sur Caption Below (Légende en dessous) dans l'onglet Design.

Utiliser une image comme bannière de page

Pour des astuces sur l'utilisation d'un Bloc Image en tant que bannière de page, consultez Ajouter des images de bannière.

image-block-as-a-banner.png

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.

  • À l'exception des formats Inline et Stack, les légendes maintiennent leur largeur définie par rapport à l'image. Cela signifie que les légendes plus longues peuvent être plus difficiles à lire. 
  • Pour voir à quoi ressemblera votre Bloc Image, utilisez la Vue Mobile.
  • Les Blocs image multiples s'empilent verticalement sur mobile.
  • The Card, Collage, Overlap, and Stack layouts have a Dynamic Font Sizing option in the Style Editor. When this is enabled, text won't resize smaller than 14 pixels.

FAQ

L'image est de travers

Cela peut arriver si l'image originale a été prise de travers, puis téléchargée directement sans la rectifier dans un programme d'édition d'image au préalable.

Pour faire pivoter l'image, vous pouvez utiliser l'éditeur d'image Adobe Creative Cloud. Vous pouvez aussi la modifier à l'aide d'un programme externe, puis la retélécharger.

Mes images apparaissent en différentes couleurs

Cela se produit lorsqu'une image est enregistrée en mode CMYK au lieu du mode RGB .

Nous vous conseillons de toujours enregistrer vos images en mode RGB ou sRGB . Le mode de couleur RGB est un format destiné à une utilisation sécurisée sur le Web, alors que le mode CMYK est destiné à l'impression et ne rendra pas correctement dans la majorité des navigateurs. Pour apprendre d'autres astuces de formatage d'image, consultez la page Formater vos images en vue d'un affichage sur le Web.

Quelle est la taille de fichier recommandée ?

Le Bloc Image possède une taille de fichier limite de 20 Mo, mais nous vous conseillons cependant d'utiliser des images faisant moins de 500 Ko pour obtenir les meilleurs résultats. Pour en savoir plus, consultez la page Formater vos images en vue d'un affichage sur le Web.

 

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 40 sur 131
Aperçu des Blocs Image