Blocs

Blocs »Bloc d’image

Utilisez le bloc d’image pour ajouter un contenu visuel dans vos pages et articles.

Table des matières

Ajouter un bloc d’image

Ajoutez le bloc d’image à une page en cliquant sur le bouton Ajouter un bloc. Vous pouvez également saisir /image et appuyer sur Entrée.

Ajoutez des images avec une commande de raccourci.
Ajoutez des images avec une commande commençant par une barre oblique.

Des instructions détaillées sur l’ajout de blocs sont disponibles ici.


Ajouter une image

Le panneau des options de média proposera trois options : Charger, Sélectionner une image et Insérer à partir d’une URL.

Trois options vous permettent d’ajouter des images : Charger, Sélectionner une image et Insérer à partir d’une URL.
  • Charger vous permet de choisir une image de votre ordinateur et de la charger sur votre site.
  • Sélectionner une image vous permet de faire votre choix parmi les images existantes sur votre site (Bibliothèque de médias), dans Google Photos ou dans la bibliothèque de photos Pexels gratuites.
  • Bibliothèque de médias vous permet d’utiliser une image se trouvant déjà sur Internet.

En savoir plus sur la Bibliothèques d’images gratuites ici.


Barre d’outils du bloc

Chaque bloc possède des commandes spécifiques afin de faciliter sa modification dans l’éditeur. Vous trouverez ci-dessous un exemple de la barre d’outils du bloc d’image. :

Les icônes de la barre d’outils du bloc d’image sont les suivantes (de gauche à droite) :

  • Modifier le type de bloc
  • Faire monter ou descendre le bloc
  • Modifier l’alignement (gauche, centre ou droite + options large et pleine largeur si le thème prend cette option en charge)
  • Insérez un lien
  • Remplacer l’image
  • Plus d’options

Aligner les images

Si vous souhaitez aligner une image dans un paragraphe, vous devez commencer par insérer l’image juste au-dessus du bloc de paragraphe cible.

Cliquez sur l’image et sélectionnez l’alignement à gauche ou à droite. Cette action permet de fusionner l’image dans le bloc de paragraphe.

Enfin, redimensionnez l’image en choisissant la largeur et la hauteur souhaitées.


Images en mode Large et Pleine largeur

La prise en charge du nouvel éditeur ayant été ajoutée à nos thèmes, les icônes de configuration des images en mode Large et Pleine largeur sont désormais disponibles. Ces deux tailles d’image vous permettront d’agrandir l’image au-delà de la largeur usuelle du contenu du thème.

Image agrandie dans l’éditeur.

Réglages du lien

Les réglages du lien vous permettent de transformer vos images en hyperliens. Vous avez la possibilité de choisir l’action déclenchée par un clic sur l’image : ouverture d’une page de pièce jointe, ouverture du fichier média d’origine ou ouverture d’une URL personnalisée de votre choix.

Si vous optez pour l’ouverture d’une URL personnalisée, saisissez l’URL à associer à l’image dans le champ URL du lien. Si vous cliquez sur la flèche vers le bas près de cette zone, vous pouvez choisir de laisser ou non le lien ouvert sous un nouvel onglet.

De plus, si vous souhaitez associer une image à une page ou un article sur votre site, commencez à saisir le titre de la page ou de l’article dans le champ de recherche. Vous pouvez ensuite le sélectionner dans les résultats et associer l’image à cette page ou article.

Votre image peut être liée à une page de pièce jointe, un fichier média ou une URL personnalisée.

↑ Table des matières ↑

Redimensionner les images

Une fois l’image ajoutée à l’éditeur, vous pouvez la redimensionner et l’aligner afin de bien l’adapter au contenu qui l’entoure.

Redimensionnez une image en faisant glisser ses poignées.
Redimensionnez une image en faisant glisser ses poignées.

Pour redimensionner une image, cliquez pour afficher les poignées de redimensionnement. Cliquez ensuite sur les poignées de redimensionnement et réglez l’image à la taille souhaitée.

Pour redimensionner une image, cliquez pour afficher les poignées de redimensionnement. Cliquez ensuite sur les poignées de redimensionnement et réglez l’image à la taille souhaitée.

Vous pouvez également ajuster, dans les réglages du bloc à droite, la largeur et la hauteur afin de régler la taille de l’image. Les réglages du bloc contiennent, en outre, des options pratiques pour configurer l’image sur 100, 75, 50 et 25 % de sa taille d’origine.


Légendes

Vous pouvez ajouter des légendes aux images de deux façons. Si vous souhaitez ajouter une légende à une instance particulière d’une image, saisissez-la dans l’espace dédié à la légende sous l’image dans l’éditeur.

Si vous souhaitez que la même légende apparaisse dans toutes les instances d’une image, vous devez l’ajouter à l’image dans la Bibliothèque de médias en cliquant sur le bouton Remplacer → Modifier sur le bloc d’image.


Réglages du bloc

Chaque bloc comporte des options spécifiques dans la colonne latérale de l’éditeur qui peuvent permettre davantage de personnalisation que les options disponibles dans la barre d’outils du bloc. Si la colonne latérale ne s’affiche pas, cliquez sur l’icône en forme de pignon en regard du bouton Publier.

Les paramètres du bloc sont disponibles dans la colonne latérale.
Les paramètres du bloc sont disponibles dans la colonne latérale.

Réglages de l’image

Les images peuvent être modifiées selon des pourcentages ou des dimensions en pixels.

Les paramètres d’image comportent un champ de texte permettant d’ajouter un texte alternatif de description, essentiel pour l’accessibilité et le SEO.

Vous pouvez également modifier la largeur et la hauteur d’une image par incréments de 25 % ou en définissant les dimensions exactes en pixels.

Vous pouvez modifier la taille d’une image de nombreuses façons dans l’éditeur WordPress.
Vous pouvez modifier la taille d’une image de nombreuses façons dans l’éditeur WordPress.

Avancé

L’onglet Avancé vous permet d’ajouter une classe CSS à votre bloc. Vous pouvez ainsi écrire du CSS personnalisé et configurer le style du bloc d’image à votre guise. Informations détaillées.

La section avancée vous permet d’ajouter une classe CSS à votre bloc.
La section avancée vous permet d’ajouter une classe CSS à votre bloc.

↑ Table des matières ↑

Autres options AMP disponibles dans les plans Business et eCommerce

Dans les plans Business et eCommerce, le bloc d’image comprend les options suivantes :

  • AMP sans chargement : activez cette option si vous souhaitez masquer le symbole de chargement qui apparaît pendant le chargement de l’intégration sur la page AMP.
  • Effet lightbox AMP : activez cette option pour permettre au composant lightbox de l’image AMP d’occuper toute la vue d’affichage.
Paramètres AMP de l’image du bloc dans les plans de sites Business et eCommerce

Vous disposez également de plusieurs options pour définir les paramètres de mise en page AMP. La mise en page HTML AMP explique ces attributs.

Pages: 1 2