Le bloc Média & texte permet de placer une image ou une vidéo côte à côte avec du contenu textuel, comme des paragraphes, titres, listes ou boutons. Ce bloc facilite la réalisation de mises en page combinant visuel et texte.
Pour créer cette mise en page, il suffit d’ajouter un bloc Média & texte via l’éditeur Gutenberg.
Ajout de contenus#
Pour insérer une image ou une vidéo dans le bloc, vous pouvez :
- Téléverser un fichier directement depuis votre ordinateur.
- Sélectionner un média déjà présent dans votre médiathèque.
Pour ajouter du texte, saisissez simplement dans la zone prévue à cet effet. Les options de mise en forme sont identiques à celles d’un bloc paragraphe classique.
Barre d’outils du bloc#
Chaque bloc possède une barre d’outils qui apparaît lorsque vous le sélectionnez. Cette barre offre des commandes pour modifier rapidement le bloc.
Modifier l’alignement vertical#
Vous pouvez choisir d’aligner le contenu verticalement :
- En haut
- Au centre
- En bas
Cette option permet d’ajuster l’aspect visuel en fonction de la taille du média et du texte.
Afficher le média à gauche ou à droite#
Par défaut, le média s’affiche à gauche et le texte à droite. Cette disposition peut être inversée pour afficher le média à droite et le texte à gauche.
Insérer un lien#
L’outil Insérer un lien permet de rendre l’image ou la vidéo cliquable, en associant une URL. Les options sont :
- Saisir une URL personnalisée, puis valider avec le bouton Appliquer.
- Utiliser l’URL du fichier média.
- Utiliser l’URL de la page du fichier joint.
Remplacer le média#
L’outil Remplacer donne la possibilité de changer l’image ou la vidéo insérée sans avoir à supprimer puis recréer le bloc. Ce fonctionnement est similaire à celui du bloc Image.
Réglages du bloc#
Dans la colonne latérale des réglages, différents paramètres sont disponibles pour personnaliser le bloc Média & texte.
Empiler sur mobile#
Activez cette option pour que sur les petits écrans (téléphones), le média et le texte s’affichent l’un sous l’autre, au lieu d’être côte à côte. Cela améliore la lisibilité sur mobile.
Recadrer l’image pour remplir toute la colonne#
Cette option agrandit l’image pour qu’elle remplisse toute la largeur et la hauteur de la colonne qui lui est consacrée, évitant ainsi les zones vides.
Texte alternatif#
Cette zone permet de saisir une description textuelle de l’image. Ce texte alternatif est essentiel pour l’accessibilité, notamment pour les lecteurs d’écran.
Résolution#
Permet de sélectionner la taille d’affichage de l’image selon les options proposées, afin d’adapter la qualité et la rapidité de chargement.
Largeur de média#
Détermine la largeur relative du média dans le bloc. Par défaut, le média occupe 50 % de la largeur du bloc, mais ce réglage permet d’ajuster cette proportion.
Onglet Avancé#
Dans l’onglet Avancé, vous pouvez accéder à des réglages complémentaires, comme l’ajout de classes CSS personnalisées pour affiner l’apparence ou l’ajout de code spécifique au bloc.
Pour en savoir plus sur l’ajout de blocs, référez-vous à l’article Ajouter un nouveau bloc.
Pour comprendre le fonctionnement de la barre d’outils commune aux blocs, consultez l’article Barre d’outils des blocs.
Pour les réglages avancés des blocs, consultez Réglages avancés des blocs.