Remarque : même si nos guides les plus populaires ont été traduits en espagnol, certains guides sont uniquement disponibles en anglais.
Image Blocks overview

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'exemples de présentation.

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 aura la même présentation.

mixed-layout.jpg

Légendes ou titres et sous-titres

  • The Inline layout supports one basic caption. This is best for displaying an artist name, crediting a media outlet, or displaying the image title. Learn about caption style options, which are set automatically.
Note: Captions won't display if the Image Block is empty. 
  • 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 différents formats présentent des avantages variés : 

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 the text in the Site Styles panel
  • 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, sélectionnez Poster, Card, Overlap, Collage, ou Stack. Pour le format Inline, sélectionnez Image dans le champ Basique.

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

In the Edit Image window, drag your image into the image uploader. You can also click Upload an Image to select a file from your computer. Click Apply.

add_your_own_image.jpg

Option 2 - Use a stock image

With our stock image integrations, you can add free and premium stock images directly from your site. This is a great option if you don't already have an image to use.

Click Search For Image to search, preview, and add a stock image for your thumbnail. To learn more, visit Searching and adding stock images

search_for_an_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

The Poster, Card, Overlap, Collage, and Stack Image Blocks have their own style settings in the Site Styles panel. The preview of the image on your page will change so you can view the changes in real time. We recommend playing around with the settings until you find a design you like.

Pour en savoir plus, consultez les guides pour chaque format :

Add animation

We're testing new animation options on a small number of randomly selected sites. If you’re in this group, you can add visual effects to Image Blocks. Visitors will see the animations when they load or refresh the page.

To add animation:

  1. In any Image Block editor, click the Animations tab. (If you don't see the Animations tab, your site isn't in the test group.)
  2. Select an effect from the Animate Image Block drop-down menu to apply to the image and any text. As you select an option, you’ll see a preview of how it loads on the page.

Choose from:

  • Fade In - Block fades in
  • Focus In - Block looks blurry, then comes into focus
  • Slide Up - Block slides upward
  • Collide - Image and text slide inward from the sides
  • Reveal - Image and text slide outward from the center
  • Custom - Choose separate image and text animations
  1. To animate the image and text separately, select Custom, then select options for Animate Image and Animate Image Text.

Choose from:

  • Fade In - Image or text fades in
  • Slide Up - Image or text slides upward
  • Slide Down - Image or text slides downward
  • Slide from Left - Image or text slides in from the left
  • Slide from Right - Image or text slides in from the right

Animations are only available in a small number of sites, selected randomly. Since we’re currently testing this feature, we can’t add it to sites that don’t have it. We hope to add this feature to all sites in the near future.

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

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 le bloc à nouveau.

  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 n'est pas compatible avec 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.

Use the Site Styles panel to customize the button. Scroll down to the section for that layout to adjust these tweaks:

  • 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 tous les autres formats, les légendes ne se transforment pas en texte alternatif, mais vous pouvez le configurer manuellement sur le 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 le 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.

  • Pour voir à quoi ressemblera votre Bloc Image, utilisez la Vue Mobile.
  • With the exception of Inline and Stack layouts, captions maintain their set width relative to the image. This means that longer captions may be harder to read.
  • Captions for the Card, Collage, and Overlap layouts move from alongside the image to below the image.
  • The Card, Collage, Overlap, and Stack layouts have a Dynamic Font Sizing option in the Site Styles panel. When this is enabled, text won't resize smaller than 14 pixels.
  • Les Blocs image multiples s'empilent verticalement sur mobile.

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 : 42 sur 135
Image Blocks overview