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

Les blocs Image ajoutent des images individuelles aux pages et aux billets de blog. Vous pouvez charger vos propres images ou ajouter des photos d'archive à l'aide de nos intégrations Unsplash ou Getty Images.

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

Remarque : les légendes ne s’affichent pas si le bloc Image est vide. 
  • 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
  • Personnalisation du style de texte dans le panneau Styles du site
  • 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

Dans la fenêtre Modifier une image, faites glisser votre image dans l’outil de chargement d’image. Vous pouvez également cliquer sur Charger une image pour sélectionner un fichier enregistré sur votre ordinateur. Cliquez sur Appliquer.

add_your_own_image.jpg

Option 2 - Utiliser une image d’archive

Grâce à nos intégrations d’images d’archive, vous pouvez ajouter des images d’archive gratuites et premium à partir de votre site. Cette option est idéale si vous n’avez aucune image à utiliser.

Cliquez sur Rechercher une image pour rechercher, prévisualiser et ajouter une image d’archive pour votre miniature. Pour en savoir plus, consultez l’article Rechercher et ajouter des images d’archive

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

Les blocs Poster, Carte, Chevauchement, Collage et Pile ont leurs propres paramètres de style dans le panneau Styles du site. L’aperçu de l’image sur votre page change afin que vous puissiez voir les modifications en temps réel. Nous vous conseillons de tester les paramètres jusqu’à ce que vous trouviez un design qui vous convienne.

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

Ajouter une animation

Nous testons actuellement de nouvelles options d’animation sur un nombre limité de sites choisis au hasard. Si votre site a été sélectionné, vous pouvez ajouter des effets visuels aux blocs Image. Les visiteurs voient les animations lorsqu’ils chargent ou qu’ils actualisent la page.

Pour ajouter une animation :

  1. Dans un éditeur de bloc Image, cliquez sur l’onglet Animations. (Vous ne verrez pas l’onglet Animations si votre site ne fait pas partie du groupe test.)
  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.

Vous avez le choix entre les options suivantes :

  • Fondu - Le bloc apparaît en fondu
  • Mise au point - Le bloc est flou avant de devenir net
  • Glissement vers le haut - Le bloc glisse vers le haut
  • 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
  • Personnalisé - Choisissez des images et du texte animés
  1. 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.

Vous avez le choix entre les options suivantes :

  • Fondu - L’image ou le texte apparaît en fondu
  • Glissement vers le haut - L’image ou le texte glisse vers le haut
  • Glissement vers le bas - L’image ou le texte glisse vers le bas
  • 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

Les animations ne sont disponibles que sur un nombre limité de sites qui ont été choisis au hasard. Cette fonctionnalité étant actuellement en phase de test, nous ne pouvons pas l’ajouter aux sites qui n’y ont pas accès. Nous espérons pouvoir ajouter cette fonctionnalité à tous les sites dans un avenir proche.

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 de bloc.
  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 

Cliquez sur Modifier pour faire pivoter l’image, pour la recadrer ou pour y ajouter des filtres à l’aide de l’Éditeur d’image intégré.

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.

Utilisez le panneau Styles du site pour personnaliser le bouton. Faites défiler l’écran vers le bas jusqu’à la section consacrée à cette disposition pour 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 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.
  • À l’exception des dispositions Inline et Empilé, les légendes conservent leur largeur définie par rapport à l’image. Les légendes plus longues peuvent donc être difficiles à lire.
  • 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.

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, utilisez l’Éditeur d’image. Vous pouvez aussi la modifier dans un programme externe, puis la télécharger à nouveau.

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 : 44 sur 139
Présentation des blocs Image