Le bloc « média & texte »

Comme son nom l’indique, ce bloc est très utile pour mettre en avant un média avec du contenu texte. Ce bloc fait également parti des blocs natifs de Gutenberg.

Nous pouvons avec ce bloc visuellement créer des mises en valeur de média avec du texte très facilement et très rapidement.

Comment ajouter le bloc « Média & texte » dans votre contenu ?

Comme la plupart des blocs, nous pouvons ajouter ce bloc dans notre contenu de plusieurs manières. Soit en appuyant sur le bouton « + » qui correspond au répertoire de blocs qui comprends tous les blocs actifs sur votre site.

Ou alors en utilisant le raccourci « /media » directement dans l’éditeur, et en appuyant sur entrée, le bloc s’ajoutera automatiquement au sein de votre contenu.

Utiliser le bloc « Média & texte »

Comme vous pouvez le constater sur cette page, nous utilisons déjà le bloc Média et texte. Ce bloc se présente sous la forme de deux colonnes, une colonne réservée au media et l’autre au contenu.

La partie média

Pour ajouter un média, nous pouvons le faire de différentes façons :

  • Appuyer sur le bouton « Téléverser » qui va ouvrir une fenêtre dans laquelle nous allons selectionner un média sur notre ordinateur
  • Via le bouton « Bibliothèque de médias » qui va ouvrir une pop-up contenu les différents médias déjà présents sur le site
  • Et petite astuce, nous pouvons également glisser déposer une image directement dans la zone grise nommée « Zone de média »

Une fois votre média sélectionné, l’éditeur se met à jour et prévisualise votre média directement dans l’éditeur !

La partie texte

La partie texte est encore plus simple ! Effectivement de base un bloc paragraphe est déjà présent avec l’option de Taille « Large », si vous souhaitez modifier les options de ce bloc, vous pouvez jeter un oeil pour en savoir plus sur bloc Paragraphe.

Les différents options

Contrairement à d’autres blocs comme le bloc Boutons, le bloc Média & texte ne dispose pas de style prédéfini. Cependant il dispose de plusieurs options disponible dans la barre d’outil qui pourraient grandement vous aider !

Effectivement le bloc Média et texte dispose de plusieurs paramétrages :

  1. L’alignement par rapport au contenu en définissant la largeur du bloc.
  2. La position du média ! La position de base du média est situé à gauche de la partie texte, néanmoins ceci est totalement modifiable en passant via cette option.
  3. L’alignement du contenu, nous pouvons aligner le contenu verticalement ! Le contenu le plus petit va s’adapter en se positionnant en haut, au milieu ou encore en bas du bloc selon vos envies.

Deux dernières options sont également disponibles sur ce bloc. Sobrement nommées « Empiler sur mobile » et « Recadrer l’image pour remplir toute la colonne » qui comme son nom l’indique force la taille du média, elle prendra ainsi toute la largeur et hauteur qui lui est dédiée.

Afin d’améliorer l’accessibilité de votre site pour les personnes qui souffrent d’un handicap, vous pouvez également rajouter un contenu alternatif pour votre image en écrivant un contenu qui décrit le contenu de votre image.

L’option empiler sur mobile active de base permet de forcer le média à passer au dessus du contenu, et ne plus être contraint d’avoir le texte à sa droite ou à sa gauche sur mobile. Cela est très conseillé afin de garder une lisibilité correcte !

Vous pouvez également ajouter un lien sur votre média. De base, l’éditeur vous propose de faire un lien vers le fichier média ou la page du fichier joint. Cependant vous pouvez tout de même faire un lien vers une page de votre site ou celle d’un site externe.

Les réglages de couleurs

Vous pouvez également mettre un fond de couleur en changeant directement les réglages de couleur dans les options du blocs.

Exemple

Faire du contenu comme ça ? Et bien c’est très simple maintenant !