{"id":81185,"date":"2022-05-23T09:58:00","date_gmt":"2022-05-23T07:58:00","guid":{"rendered":"https:\/\/www.ait-themes.club\/?p=81185"},"modified":"2025-01-20T09:17:34","modified_gmt":"2025-01-20T08:17:34","slug":"wordpress-wrap-text-around-image-wordpress-blog","status":"publish","type":"post","link":"https:\/\/www.ait-themes.club\/fr\/wordpress-envelopper-le-texte-autour-de-limage-wordpress-blog\/","title":{"rendered":"4 fa\u00e7ons d&#039;envelopper du texte autour d&#039;une image dans WordPress"},"content":{"rendered":"<p>Avez-vous besoin de placer du texte autour de l&#039;image de mani\u00e8re \u00e9l\u00e9gante ? Apprenez \u00e0 le faire facilement sans exp\u00e9rience de codage et de conception. L&#039;\u00e9diteur Gutenberg apporte plus d&#039;options pour envelopper du texte autour du texte dans WordPress. <\/p>\n\n\n\n<p>Vous pouvez obtenir simultan\u00e9ment un site Web attrayant et une routine d&#039;\u00e9dition de contenu facile. Choisir l&#039;\u00e9diteur Gutenberg pour votre site Web WordPress vous donne le meilleur outil \u00e0 long terme. Vous aurez plus d&#039;options pour envelopper le texte autour des images diff\u00e9remment. Gutenberg apporte de nombreux avantages comme un code source plus clair du site Web, la vitesse, la s\u00e9curit\u00e9 et la convivialit\u00e9.<\/p>\n\n\n\n<div class=\"wp-block-citadela-blocks-custom-container citadela-block-custom-container size-content bg-type-image inside-space-none bg-size-cover has-bg has-overlay has-border-radius\" style=\"background-color:rgba(234, 234, 234, 1);border-radius:10px\"><div class=\"bg-image-wrapper\" style=\"background-image:url(https:\/\/www.ait-themes.club\/wp-content\/uploads\/2021\/10\/header-layouts-min.png);background-repeat:no-repeat;background-position:36% 49%;border-radius:10px\"><\/div><div class=\"bg-image-overlay\" style=\"opacity:0.5;border-radius:10px\"><\/div><div class=\"inner-holder\">\n<div class=\"wp-block-citadela-blocks-spacer citadela-block-spacer\"><div class=\"inner-holder\" style=\"padding-top:2vw\"><\/div><\/div>\n\n\n         <div \r\n            class=\"citadela-block-responsive-text align-center\"\r\n                                 >\r\n            <p class=\"inner-tag\" style=\"font-size: 22px; line-height: 0.73; color: #392F43;\"><strong>T\u00e9l\u00e9charger le th\u00e8me WordPress CitadelaWP et ses plugins<\/strong><\/p>         <\/div>\r\n      \n\n\n<div class=\"wp-block-citadela-blocks-spacer citadela-block-spacer\"><div class=\"inner-holder\" style=\"padding-top:20px\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-white-color has-vivid-green-cyan-background-color has-text-color has-background has-text-align-center wp-element-button\" href=\"https:\/\/www.ait-themes.club\/fr\/tarification\/\" style=\"border-radius:3px\">ACHETER MAINTENANT<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-citadela-blocks-spacer citadela-block-spacer\"><div class=\"inner-holder\" style=\"padding-top:10px\"><\/div><\/div>\n\n\n\n<p class=\"has-text-align-center\">One-time payment. 14-day money-back guarantee.<\/p>\n\n\n\n<div class=\"wp-block-citadela-blocks-spacer citadela-block-spacer\"><div class=\"inner-holder\" style=\"padding-top:40px\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-citadela-blocks-spacer citadela-block-spacer\"><div class=\"inner-holder\" style=\"padding-top:2vw\"><\/div><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_wrap_text_around_the_image_in_WordPress\"><\/span>Comment enrouler du texte autour de l&#039;image dans WordPress ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>L&#039;\u00e9diteur et les blocs Gutenberg rendent le contenu du site Web plus l\u00e9ger, moderne et lisible sans effort. Nous vous montrons \u00e9galement d&#039;autres fa\u00e7ons d&#039;envelopper du texte autour de l&#039;image dans les types de pages WordPress, de publication et de publication personnalis\u00e9e. Il existe diff\u00e9rents blocs, et vous pouvez \u00e9galement les utiliser en combinaison, comme un ensemble de pi\u00e8ces et de fonctionnalit\u00e9s qui vous offrent des options suppl\u00e9mentaires pour l&#039;enveloppe.<\/p>\n\n\n\n<p>Vous pouvez s\u00e9lectionner le bloc pour le texte envelopp\u00e9 autour de l&#039;image en fonction de la sous-page et de son type de contenu. Vous pouvez choisir un style pour la page de pr\u00e9sentation et un autre pour un article de blog. Tenez \u00e9galement compte du type de contenu qui repr\u00e9sente l&#039;image. S&#039;agit-il d&#039;une image de description ou d&#039;un m\u00e9dia plus repr\u00e9sentatif ou vendeur\u00a0?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Wrap_Text_Around_Image_%E2%80%93_Blocks_Selection\"><\/span>Envelopper le texte autour de l&#039;image - S\u00e9lection de blocs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Il existe 4 blocs que vous pouvez utiliser pour envelopper un bloc de texte autour d&#039;une image. Nous les d\u00e9crivons tous :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Bloc d&#039;image et bloc de paragraphe en savoir plus ci-dessous<\/li><li>Bloc M\u00e9dia et texte en savoir plus ci-dessous<\/li><li><a href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-colonnes-blog\/\">Bloc de colonnes<\/a> en poste individuel<\/li><li><a href=\"https:\/\/www.ait-themes.club\/fr\/image-de-fond-wordpress-blog\/\">Bloc de cluster<\/a> dans un message individuel (fonctionnalit\u00e9 disponible uniquement avec <a href=\"https:\/\/www.ait-themes.club\/fr\/plugins-citadela\/citadelle-pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Plugin Citadela Pro<\/a>)<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" data-id=\"93496\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-Text-Around-Image-Cluster-Block-Example-1024x538.png\" alt=\"Habillage avanc\u00e9 du texte autour de l&#039;image\" class=\"wp-image-93496\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-Text-Around-Image-Cluster-Block-Example-1024x538.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-Text-Around-Image-Cluster-Block-Example-300x158.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-Text-Around-Image-Cluster-Block-Example-768x404.png 768w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-Text-Around-Image-Cluster-Block-Example-1536x807.png 1536w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-Text-Around-Image-Cluster-Block-Example.png 1909w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Emballage avanc\u00e9 dans le bloc de cluster<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"557\" data-id=\"93497\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-Text-Around-Image-Cluster-Block-Example-Settings-1024x557.png\" alt=\"\" class=\"wp-image-93497\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-Text-Around-Image-Cluster-Block-Example-Settings-1024x557.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-Text-Around-Image-Cluster-Block-Example-Settings-300x163.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-Text-Around-Image-Cluster-Block-Example-Settings-768x418.png 768w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-Text-Around-Image-Cluster-Block-Example-Settings-1536x835.png 1536w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-Text-Around-Image-Cluster-Block-Example-Settings.png 1911w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Param\u00e8tres de bloc de cluster<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"wrap-text-and-image-for-better-reading-experience\"><span class=\"ez-toc-section\" id=\"Wrap_text_and_image_for_better_reading_experience\"><\/span><a id=\"wraptextandimagetitle\"><\/a>Enveloppez le texte et l&#039;image pour une meilleure exp\u00e9rience de lecture<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Il y a plusieurs raisons pour lesquelles vous devriez utiliser ce bloc. Vous l&#039;appr\u00e9cierez le plus si vous \u00e9crivez des articles de blog. Les images font partie int\u00e9grante de l&#039;histoire. Peu importe si vous \u00e9crivez un blog de voyage ou un magazine sur l&#039;actualit\u00e9 informatique. Ainsi, lorsque vous ajoutez des photos dans votre contenu, pensez \u00e0 l&#039;alignement des images. Les lecteurs seront en mesure de mieux comprendre ce que vous \u00e9crivez.<\/p>\n\n\n\n<p>Dans de nombreux cas, il est n\u00e9cessaire d&#039;ins\u00e9rer l&#039;image et le texte c\u00f4te \u00e0 c\u00f4te. Ce qui est important?<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Cela doit avoir un sens. L&#039;image doit \u00eatre \u00e0 c\u00f4t\u00e9 du bon texte.<\/li><li>Il doit \u00eatre bien align\u00e9.<\/li><li>Il doit s&#039;adapter \u00e0 l&#039;ensemble de la mise en page du site Web.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Image_and_Paragraph_blocks\"><\/span>Blocs Image et Paragraphe<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft is-resized\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-text-overflow.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-text-overflow.png\" alt=\"Texte enroul\u00e9 autour d&#039;une image dans l&#039;\u00e9diteur WordPress classique\" class=\"wp-image-81202\" width=\"409\" height=\"256\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-text-overflow.png 1280w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-text-overflow-300x188.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-text-overflow-1024x640.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-text-overflow-768x480.png 768w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><figcaption>Exemple de texte pas tr\u00e8s beau qui enveloppait l&#039;image<\/figcaption><\/figure><\/div>\n\n\n\n<p>Alors que dans le <strong>\u00c9diteur classique<\/strong> vous pouvez \u00e9galement placer du texte \u00e0 c\u00f4t\u00e9 de l&#039;image, vous ne pouvez pas parler d&#039;un bel alignement. Surtout si l&#039;image \u00e9tait petite et que vous mettez plus de texte \u00e0 c\u00f4t\u00e9. Le texte recouvrait l&#039;image et \u00e7a n&#039;avait pas l&#039;air sympa.<\/p>\n\n\n\n<p><strong>\u00c9diteur Gutenberg<\/strong> et son bloc Image apportent une fonctionnalit\u00e9 int\u00e9ressante - le redimensionnement de l&#039;image. Faites glisser des points autour de l&#039;image pour modifier automatiquement sa taille et l&#039;alignement du texte.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-text-around-Image-using-Gutenberg-Image-and-Paragraph-Blocks-1024x783.png\" alt=\"Enveloppez le texte autour de l&#039;image \u00e0 l&#039;aide des blocs d&#039;image et de paragraphe Gutenberg\" class=\"wp-image-93465\" width=\"754\" height=\"576\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-text-around-Image-using-Gutenberg-Image-and-Paragraph-Blocks-1024x783.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-text-around-Image-using-Gutenberg-Image-and-Paragraph-Blocks-300x229.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-text-around-Image-using-Gutenberg-Image-and-Paragraph-Blocks-768x587.png 768w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-text-around-Image-using-Gutenberg-Image-and-Paragraph-Blocks.png 1265w\" sizes=\"auto, (max-width: 754px) 100vw, 754px\" \/><figcaption>Redimensionner l&#039;image et choisir l&#039;alignement<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"media-text-block-wordpress-align-text-next-to-image\"><span class=\"ez-toc-section\" id=\"Media_Text_block_%E2%80%93_WordPress_align_text_next_to_image\"><\/span>Bloc m\u00e9dia et texte \u2013 WordPress aligne le texte \u00e0 c\u00f4t\u00e9 de l&#039;image<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#wraptextandimagetitle\">Enveloppez le texte et les images avec le bloc M\u00e9dia et texte<\/a><\/li><li><a href=\"#howtoaddmediaandtextblockeditor\">Comment ajouter un bloc m\u00e9dia et texte dans l&#039;\u00e9diteur<\/a><\/li><li><a href=\"#howdoesmediaandtextwork\">Comment fonctionne ce bloc<\/a><\/li><li><a href=\"#mediaandtextblocksettings\">Param\u00e8tres de bloc de m\u00e9dias et de texte<\/a><\/li><li><a href=\"#whatisstackonmobile\">Que signifie &quot;<i>Pile sur mobile &quot;<\/i> moyenne<\/a><\/li><li><a href=\"#howtojustifytextinwp\">Bonus : Comment justifier du texte dans WordPress<\/a><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-align-text-next-to-image\"><span class=\"ez-toc-section\" id=\"How_to_align_text_next_to_image\"><\/span>Comment aligner le texte \u00e0 c\u00f4t\u00e9 de l&#039;image\u00a0?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-citadela-blocks-spacer citadela-block-spacer\"><div class=\"inner-holder\" style=\"padding-top:2vw\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-citadela-blocks-custom-container citadela-block-custom-container size-wide bg-type-gradient inside-space-small has-bg has-border-radius\" style=\"background-image:linear-gradient(120deg, rgba(247, 195, 250, 0.65) 0%, rgba(159, 159, 233, 1) 100%);border-radius:10px\"><div class=\"inner-holder\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image alignfull size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"400\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2021\/10\/logo-pro-customization-min.png\" alt=\"\" class=\"wp-image-91460\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2021\/10\/logo-pro-customization-min.png 400w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2021\/10\/logo-pro-customization-min-300x300.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2021\/10\/logo-pro-customization-min-150x150.png 150w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:70%\">\n<div class=\"wp-block-citadela-blocks-spacer citadela-block-spacer\"><div class=\"inner-holder\" style=\"padding-top:2vw\"><\/div><\/div>\n\n\n         <div \r\n            class=\"citadela-block-responsive-text weight-800 align-center\"\r\n                                 >\r\n            <p class=\"inner-tag\" style=\"font-size: 30px; font-weight: 800; line-height: 1.5; color: #392F43;\">Commencez maintenant<\/p>         <\/div>\r\n      \n\n\n<div class=\"wp-block-citadela-blocks-spacer citadela-block-spacer\"><div class=\"inner-holder\" style=\"padding-top:10px\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-white-color has-vivid-green-cyan-background-color has-text-color has-background has-text-align-center wp-element-button\" href=\"https:\/\/www.ait-themes.club\/fr\/tarification\/\" style=\"border-radius:3px\">ACHETER MAINTENANT<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-citadela-blocks-spacer citadela-block-spacer\"><div class=\"inner-holder\" style=\"padding-top:1vw\"><\/div><\/div>\n\n\n\n<p class=\"has-text-align-center\" style=\"font-size:16px\">One-time payment. 14-day money-back guarantee.<\/p>\n\n\n\n<div class=\"wp-block-citadela-blocks-spacer citadela-block-spacer negative-height\"><div class=\"inner-holder\" style=\"margin-top:-1vw\"><\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-citadela-blocks-spacer citadela-block-spacer\"><div class=\"inner-holder\" style=\"padding-top:20px\"><\/div><\/div>\n\n\n\n<p>Le bloc M\u00e9dia et texte est une fonctionnalit\u00e9 fantastique. Le bloc M\u00e9dia et texte r\u00e9sout ce probl\u00e8me et assure un alignement parfait du texte sur l&#039;image sans perturber la composition et la mise en page. C&#039;est la raison pour laquelle vous devriez utiliser ce bloc.<\/p>\n\n\n\n<p>Il am\u00e9liore \u00e9galement la conception de sites Web sur les appareils mobiles. Ce bloc d&#039;emballage aide le th\u00e8me WordPress \u00e0 couvrir diff\u00e9rentes mises en page mobiles. Sur smartphone, chaque partie du site doit \u00eatre clairement visible et lisible. \u00c0 quoi ressemblera le bloc Media &amp; Text sur les t\u00e9l\u00e9phones mobiles et les poign\u00e9es de table Fonction &quot;Empiler sur mobile&quot; que nous examinerons ci-dessous.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Dans peu de temps, vous pourrez utiliser le bloc Media &amp; Text dans notre nouveau th\u00e8me WordPress appel\u00e9 Citadela. En savoir plus sur le th\u00e8me Citadela dans un article s\u00e9par\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-add-media-text-block-in-block-editor\"><span class=\"ez-toc-section\" id=\"How_to_add_Media_Text_block_in_block_editor\"><\/span><a id=\"howtoaddmediaandtextblockeditor\"><\/a>Comment ajouter un bloc M\u00e9dia &amp; Texte dans l&#039;\u00e9diteur de blocs\u00a0?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>L&#039;ajout d&#039;un bloc de m\u00e9dias et de texte est aussi simple que l&#039;ajout de n&#039;importe quel autre bloc. C&#039;est un bloc de base qui signifie que vous n&#039;avez pas besoin de t\u00e9l\u00e9charger ou d&#039;installer quoi que ce soit.<\/p>\n\n\n\n<p>En utilisant l&#039;ic\u00f4ne &quot;+&quot; dans le panneau sup\u00e9rieur ou n&#039;importe o\u00f9 dans l&#039;\u00e9diteur et en s\u00e9lectionnant le bloc M\u00e9dia et texte.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-add.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"800\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-add.png\" alt=\"Ajoutez un bloc M\u00e9dia et Texte en cliquant sur &quot;+&quot;\" class=\"wp-image-81200\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-add.png 1280w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-add-300x188.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-add-1024x640.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-add-768x480.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><figcaption>Ajout d&#039;un bloc M\u00e9dia &amp; Texte en cliquant sur &quot;+&quot;<\/figcaption><\/figure><\/div>\n\n\n\n<p>La derni\u00e8re option est de taper &quot;\/&quot; et d&#039;\u00e9crire &quot;media&quot; apr\u00e8s. WordPress vous montrera automatiquement les blocs s\u00e9lectionn\u00e9s correspondant \u00e0 ce que vous avez recherch\u00e9.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-shortcut.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"301\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-shortcut.gif\" alt=\"Ajouter un bloc m\u00e9dia et texte \u00e0 l&#039;aide d&#039;une barre oblique\" class=\"wp-image-81213\"\/><\/a><figcaption>Ajout de m\u00e9dias et de blocs de texte \u00e0 l&#039;aide de la barre oblique &quot;\/&quot;<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-does-media-text-block-work\"><span class=\"ez-toc-section\" id=\"How_does_Media_Text_block_work\"><\/span><a id=\"howdoesmediaandtextwork\"><\/a>Comment fonctionne le bloc M\u00e9dias et texte\u00a0?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Le bloc M\u00e9dia et texte regroupe essentiellement 2 types de contenu diff\u00e9rents en un seul. Le premier est moyen, par exemple une image ou une vid\u00e9o que vous pouvez ajouter via\u00a0:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>T\u00e9l\u00e9charger<\/li><li>M\u00e9diath\u00e8que<\/li><li>Glisser-d\u00e9poser<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-upload.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"301\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-upload.gif\" alt=\"Options de t\u00e9l\u00e9chargement de bloc de m\u00e9dias et de texte\" class=\"wp-image-81215\"\/><\/a><figcaption>Regardez comme il est facile de t\u00e9l\u00e9charger une image en utilisant le glisser-d\u00e9poser<\/figcaption><\/figure><\/div>\n\n\n\n<p>Le deuxi\u00e8me est l&#039;espace pour le contenu du texte. Vous pouvez y \u00e9crire des paragraphes de texte, des listes \u00e0 puces ou des titres. Vous pouvez \u00e9galement y ajouter <a href=\"https:\/\/www.ait-themes.club\/fr\/comment-ajouter-un-bouton-dans-wordpress-editor-blog\/\" target=\"_blank\" rel=\"noopener\">Bloc de boutons<\/a> dont nous parlions tout \u00e0 l&#039;heure.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-button.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"401\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-button.gif\" alt=\"Zone de texte du bloc M\u00e9dia et Texte\" class=\"wp-image-81204\"\/><\/a><figcaption>Dans la zone de texte, vous pouvez ajouter diff\u00e9rents types de contenu<\/figcaption><\/figure><\/div>\n\n\n\n<p>Le bloc M\u00e9dia et texte aligne toujours l&#039;image et le texte c\u00f4te \u00e0 c\u00f4te, quelle que soit la quantit\u00e9 de texte que vous \u00e9crivez. Comment \u00e7a marche? L&#039;image s&#039;ajuste automatiquement en fonction de la hauteur du contenu dans la colonne de texte.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1223\" height=\"875\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text.png\" alt=\"Alignement de l&#039;image dans le bloc M\u00e9dia et Texte\" class=\"wp-image-81199\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text.png 1223w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-300x215.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-1024x733.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-768x549.png 768w\" sizes=\"auto, (max-width: 1223px) 100vw, 1223px\" \/><\/a><figcaption>Exemple d&#039;alignement d&#039;image et de texte<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"media-text-block-settings\"><span class=\"ez-toc-section\" id=\"Media_Text_Block_settings\"><\/span><a id=\"mediaandtextblocksettings\"><\/a>Param\u00e8tres de bloc m\u00e9dia et texte<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"general-block-settings\"><span class=\"ez-toc-section\" id=\"General_block_settings\"><\/span>Param\u00e8tres g\u00e9n\u00e9raux du bloc<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><b>1. Barre d&#039;outils sup\u00e9rieure<\/b><\/p>\n\n\n\n<p>La barre d&#039;outils au-dessus du bloc offre plusieurs options. Si votre th\u00e8me actif le prend en charge, vous pouvez d\u00e9finir le bloc M\u00e9dia et texte sur large ou pleine largeur. Vous pouvez \u00e9galement choisir o\u00f9 vous souhaitez placer l&#039;image ou la vid\u00e9o en cliquant sur\u00a0:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Afficher le m\u00e9dia \u00e0 gauche<\/li><li>Afficher le m\u00e9dia \u00e0 droite<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-align.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-align.gif\" alt=\"Modification de l&#039;alignement de l&#039;image et du texte\" class=\"wp-image-81203\"\/><\/a><figcaption>En cliquant sur les ic\u00f4nes de la barre d&#039;outils, vous pouvez modifier l&#039;alignement et la position de l&#039;image et du texte<\/figcaption><\/figure><\/div>\n\n\n\n<p>Dans la barre d&#039;outils sup\u00e9rieure, il y a aussi une ic\u00f4ne pour \u00e9diter le support o\u00f9 vous pouvez d\u00e9finir le texte alternatif, le titre, la l\u00e9gende ou la description. En savoir plus sur l&#039;\u00e9dition d&#039;images dans notre article <a href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-image-bloc-tutoriel-blog\/\" target=\"_blank\" rel=\"noopener\">Travailler avec le bloc d&#039;images WordPress<\/a>.<\/p>\n\n\n\n<p><b>2. Barre lat\u00e9rale droite<\/b><\/p>\n\n\n\n<p>La barre lat\u00e9rale droite offre un param\u00e8tre suppl\u00e9mentaire pour le bloc M\u00e9dia et texte. Il est possible d&#039;ajouter ici un texte alternatif, de d\u00e9finir une couleur d&#039;arri\u00e8re-plan ou d&#039;ajouter une classe CSS suppl\u00e9mentaire. Vous pouvez \u00e9galement activer la fonction &quot;Empiler sur mobile&quot;.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-color.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-color.gif\" alt=\"Param\u00e8tres de couleur d&#039;arri\u00e8re-plan\" class=\"wp-image-81207\"\/><\/a><figcaption>Changement de couleur de fond en douceur<\/figcaption><\/figure><\/div>\n\n\n\n<p><b><a id=\"whatisstackonmobile\"><\/a>Qu&#039;est-ce que Stack sur mobile\u00a0?<\/b><\/p>\n\n\n\n<p>Gr\u00e2ce \u00e0 cette fonction, l&#039;image et le texte sont bien affich\u00e9s sur les appareils mobiles. Si vous d\u00e9sactivez &quot;Empiler sur mobile&quot;, l&#039;image et le texte resteront c\u00f4te \u00e0 c\u00f4te et seront difficilement lisibles en version responsive.<\/p>\n\n\n\n<p>Si vous activez cette fonction, le contenu du t\u00e9l\u00e9phone mobile sur le c\u00f4t\u00e9 gauche sera affich\u00e9 au-dessus du contenu qui se trouve sur le c\u00f4t\u00e9 droit.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-responsive.png\"><img loading=\"lazy\" decoding=\"async\" width=\"941\" height=\"807\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-responsive.png\" alt=\"Pile sur la fonction mobile pour WordPress envelopper le texte autour de l&#039;image\" class=\"wp-image-81212\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-responsive.png 941w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-responsive-300x257.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-responsive-768x659.png 768w\" sizes=\"auto, (max-width: 941px) 100vw, 941px\" \/><\/a><figcaption>Aper\u00e7u du site Web sur un appareil mobile avec la fonctionnalit\u00e9 activ\u00e9e &quot;Stack on mobile&quot;<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"text-alignment\"><span class=\"ez-toc-section\" id=\"Text_alignment\"><\/span>Alignement du texte<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Une partie du bloc M\u00e9dia et texte est associ\u00e9e \u00e0 une image ou \u00e0 une vid\u00e9o, ainsi qu&#039;\u00e0 du contenu textuel. Il peut s&#039;agir de l&#039;un des types de contenu suivants\u00a0:<\/p>\n\n\n\n<p><b>1. Paragraphe<\/b><\/p>\n\n\n\n<p>Dans la barre d&#039;outils sup\u00e9rieure, vous pouvez d\u00e9finir l&#039;alignement du texte, mettre le texte en gras, en italique ou ajouter un lien URL.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-paragraph.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"900\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-paragraph.png\" alt=\"Paragraphe de mise en forme dans le bloc M\u00e9dia et texte\" class=\"wp-image-81210\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-paragraph.png 1440w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-paragraph-300x188.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-paragraph-1024x640.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-paragraph-768x480.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/a><figcaption>Options de mise en forme du texte<\/figcaption><\/figure><\/div>\n\n\n\n<p>Dans la barre lat\u00e9rale sur le c\u00f4t\u00e9 droit, vous pouvez choisir la taille de la police, la couleur de la police ou la couleur du paragraphe. La fonction int\u00e9ressante est \u00ab Drop Cap \u00bb qui mettra en \u00e9vidence le premier caract\u00e8re du texte. C&#039;est une fonctionnalit\u00e9 int\u00e9ressante dans les messages bloqu\u00e9s pour rendre le texte plus int\u00e9ressant.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-cap.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-cap.gif\" alt=\"Fonction \u00ab lettrine \u00bb \" class=\"wp-image-81206\"\/><\/a><figcaption>Texte en surbrillance avec la fonction \u00ab Lettrine \u00bb<\/figcaption><\/figure><\/div>\n\n\n\n<p><b>2. Cap<\/b><\/p>\n\n\n\n<p>Le titre est tr\u00e8s similaire au paragraphe. Vous pouvez \u00e9galement configurer son apparence, mettre en gras ou en italique et ins\u00e9rer un lien URL. La diff\u00e9rence est que vous pouvez choisir le type de titre - H2, H3, H4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-heading.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"900\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-heading.png\" alt=\"Options d&#039;en-t\u00eate pour le bloc M\u00e9dia et Texte\" class=\"wp-image-81201\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-heading.png 1440w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-heading-300x188.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-heading-1024x640.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-heading-768x480.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/a><figcaption>Options de cap<\/figcaption><\/figure><\/div>\n\n\n\n<p>D&#039;autres tailles de titre et param\u00e8tres d&#039;alignement sont disponibles dans la barre lat\u00e9rale sur le c\u00f4t\u00e9 droit.<\/p>\n\n\n\n<p><b>3. Liste<\/b><\/p>\n\n\n\n<p>Si vous ajoutez un bloc de liste \u00e0 votre contenu, il peut s&#039;agir de puces, d&#039;une liste num\u00e9rot\u00e9e ou d&#039;une liste \u00e0 plusieurs niveaux. Vous pouvez \u00e9galement mettre du texte en gras, en italique et ajouter un lien URL.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-list.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"900\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-list.png\" alt=\"Options de liste dans le bloc M\u00e9dia et texte\" class=\"wp-image-81209\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-list.png 1440w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-list-300x188.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-list-1024x640.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-list-768x480.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/a><figcaption>Lister les options de votre zone de texte<\/figcaption><\/figure><\/div>\n\n\n\n<p><b>4. Bloc de boutons<\/b><\/p>\n\n\n\n<p>Ce bloc qui ajoute un bouton au contenu peut \u00eatre ajust\u00e9 \u00e0 la conception du site Web. La couleur et le style des boutons ou la couleur d&#039;arri\u00e8re-plan peuvent \u00eatre configur\u00e9s dans la barre lat\u00e9rale sur le c\u00f4t\u00e9 droit.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-button.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"900\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-button.png\" alt=\"Options des boutons dans le bloc M\u00e9dia et texte\" class=\"wp-image-81205\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-button.png 1440w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-button-300x188.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-button-1024x640.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-button-768x480.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/a><figcaption>Options de style de bouton<\/figcaption><\/figure><\/div>\n\n\n\n<p>N&#039;oubliez pas de lire l&#039;article sur <a href=\"https:\/\/www.ait-themes.club\/fr\/comment-ajouter-un-bouton-dans-wordpress-editor-blog\/\" target=\"_blank\" rel=\"noopener\">Bloc de boutons<\/a>.<a href=\"https:\/\/www.ait-themes.club\/fr\/comment-ajouter-un-bouton-dans-wordpress-editor-blog\/\">&nbsp;<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"switching-between-block-types\"><span class=\"ez-toc-section\" id=\"Switching_between_block_types\"><\/span>Basculer entre les types de blocs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dans le bloc M\u00e9dia et texte, il est possible de convertir un type de bloc de contenu en un autre. Vous pouvez \u00e9galement modifier le bloc M\u00e9dia et texte en bloc Image et la partie texte sera supprim\u00e9e.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-switch.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-switch.gif\" alt=\"Basculer entre les types de blocs\" class=\"wp-image-81214\"\/><\/a><figcaption>Conversion du bloc M\u00e9dia et texte en un autre bloc<\/figcaption><\/figure><\/div>\n\n\n\n<p>Dans le contenu textuel, il est possible de changer le bloc Paragraphe en bloc Titre ou Liste.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-paragraph-switch.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-paragraph-switch.gif\" alt=\"Conversion du bloc Paragraphe\" class=\"wp-image-81211\"\/><\/a><figcaption>Conversion du bloc Paragraphe en un autre<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bonus-how-to-justify-text-in-wordpress\"><span class=\"ez-toc-section\" id=\"Bonus_How_to_justify_text_in_WordPress\"><\/span><a id=\"howtojustifytextinwp\"><\/a>Bonus : Comment justifier du texte dans WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>L&#039;utilisation d&#039;un texte justifi\u00e9 a ses avantages et ses inconv\u00e9nients. Le texte justifi\u00e9 se trouve g\u00e9n\u00e9ralement dans les livres ou les journaux, mais il n&#039;est plus utilis\u00e9 sur les sites Web. Pourquoi?<\/p>\n\n\n\n<p>Il y a plusieurs ann\u00e9es, la fonction Justify \u00e9tait int\u00e9gr\u00e9e directement dans l&#039;\u00e9diteur WordPress Classic. Texte justifi\u00e9 utilis\u00e9 pour causer des probl\u00e8mes de visibilit\u00e9 dans divers navigateurs ou appareils mobiles. Il est \u00e9galement li\u00e9 \u00e0 la lisibilit\u00e9 difficile du texte justifi\u00e9. Cette fonction a donc \u00e9t\u00e9 d\u00e9pr\u00e9ci\u00e9e et supprim\u00e9e.<\/p>\n\n\n\n<p>Cette fonctionnalit\u00e9 particuli\u00e8re n&#039;existe pas non plus dans le nouvel \u00e9diteur de blocs (Gutenberg).<\/p>\n\n\n\n<p>Alors, comment justifier un texte si vous le voulez vraiment\u00a0?<\/p>\n\n\n\n<p>La solution consiste \u00e0 ajouter un code CSS simple en quelques \u00e9tapes\u00a0:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Il y a un param\u00e8tre pour le bloc CSS suppl\u00e9mentaire de classe de paragraphe dans la barre lat\u00e9rale sur le c\u00f4t\u00e9 droit<\/li><li>\u00c9crivez-y le nom de la classe \u201e<i>justifier<\/i>&quot;<\/li><li>Publier une page ou un article<\/li><li>Si vous le pr\u00e9visualisez, cliquez sur Personnaliser dans la barre sup\u00e9rieure principale<\/li><li>Sur le c\u00f4t\u00e9 gauche, il y a une nouvelle barre lat\u00e9rale avec des param\u00e8tres<\/li><li>Cliquez sur CSS suppl\u00e9mentaire<\/li><li>Ins\u00e9rez le code CCS suivant\u00a0:<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">p.justifier { text-align\u00a0: justifier\u00a0; }\n<\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-justify.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-justify.gif\" alt=\"Justifier le texte avec un CSS personnalis\u00e9\" class=\"wp-image-81208\"\/><\/a><figcaption>La mani\u00e8re de justifier le texte dans un bloc \u00e0 l&#039;aide d&#039;un code personnalis\u00e9<\/figcaption><\/figure><\/div>\n\n\n\n<p>Fait. D\u00e9sormais, le texte de votre bloc M\u00e9dia et texte est justifi\u00e9.<\/p>\n\n\n\n<p>WordPress est devenu plus utilisable sans constructeurs de pages tiers, gr\u00e2ce \u00e0 l&#039;\u00e9diteur Gutenberg. Il a une excellente valeur pour votre site Web d&#039;un point de vue \u00e0 long terme et lors de la cr\u00e9ation ou de la refonte d&#039;un site Web. Les blocs Gutenberg offrent une large gamme de styles, mais vous pourriez trouver la main <a href=\"https:\/\/codex.wordpress.org\/Wrapping_Text_Around_Images\" target=\"_blank\" rel=\"noreferrer noopener\">Code WordPress pour envelopper du texte autour des images<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-citadela-blocks-custom-container citadela-block-custom-container size-content bg-type-image inside-space-none bg-size-cover has-bg has-overlay has-border-radius\" style=\"background-color:rgba(234, 234, 234, 1);border-radius:10px\"><div class=\"bg-image-wrapper\" style=\"background-image:url(https:\/\/www.ait-themes.club\/wp-content\/uploads\/2021\/10\/header-layouts-min.png);background-repeat:no-repeat;background-position:36% 49%;border-radius:10px\"><\/div><div class=\"bg-image-overlay\" style=\"opacity:0.5;border-radius:10px\"><\/div><div class=\"inner-holder\">\n<div class=\"wp-block-citadela-blocks-spacer citadela-block-spacer\"><div class=\"inner-holder\" style=\"padding-top:2vw\"><\/div><\/div>\n\n\n         <div \r\n            class=\"citadela-block-responsive-text align-center\"\r\n                                 >\r\n            <p class=\"inner-tag\" style=\"font-size: 22px; line-height: 0.73; color: #392F43;\"><strong>T\u00e9l\u00e9charger le th\u00e8me WordPress CitadelaWP et ses plugins<\/strong><\/p>         <\/div>\r\n      \n\n\n<div class=\"wp-block-citadela-blocks-spacer citadela-block-spacer\"><div class=\"inner-holder\" style=\"padding-top:20px\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-white-color has-vivid-green-cyan-background-color has-text-color has-background has-text-align-center wp-element-button\" href=\"https:\/\/www.ait-themes.club\/fr\/tarification\/\" style=\"border-radius:3px\">ACHETER MAINTENANT<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-citadela-blocks-spacer citadela-block-spacer\"><div class=\"inner-holder\" style=\"padding-top:10px\"><\/div><\/div>\n\n\n\n<p class=\"has-text-align-center\">One-time payment. 14-day money-back guarantee.<\/p>\n\n\n\n<div class=\"wp-block-citadela-blocks-spacer citadela-block-spacer\"><div class=\"inner-holder\" style=\"padding-top:40px\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-citadela-blocks-spacer citadela-block-spacer\"><div class=\"inner-holder\" style=\"padding-top:2vw\"><\/div><\/div>\n<\/div><\/div>\n\n\n\n<p><em>Quelle est votre opinion sur le bloc Media &amp; Text\u00a0? L&#039;avez-vous d\u00e9j\u00e0 utilis\u00e9 ? Comment aimez-vous travailler avec? Faites-le nous savoir dans les commentaires ci-dessous.<\/em><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table des mati\u00e8res<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-envelopper-le-texte-autour-de-limage-wordpress-blog\/#How_to_wrap_text_around_the_image_in_WordPress\" >Comment enrouler du texte autour de l&#039;image dans WordPress ?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-envelopper-le-texte-autour-de-limage-wordpress-blog\/#Wrap_Text_Around_Image_%E2%80%93_Blocks_Selection\" >Envelopper le texte autour de l&#039;image - S\u00e9lection de blocs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-envelopper-le-texte-autour-de-limage-wordpress-blog\/#Wrap_text_and_image_for_better_reading_experience\" >Enveloppez le texte et l&#039;image pour une meilleure exp\u00e9rience de lecture<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-envelopper-le-texte-autour-de-limage-wordpress-blog\/#Image_and_Paragraph_blocks\" >Blocs Image et Paragraphe<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-envelopper-le-texte-autour-de-limage-wordpress-blog\/#Media_Text_block_%E2%80%93_WordPress_align_text_next_to_image\" >Bloc m\u00e9dia et texte \u2013 WordPress aligne le texte \u00e0 c\u00f4t\u00e9 de l&#039;image<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-envelopper-le-texte-autour-de-limage-wordpress-blog\/#How_to_align_text_next_to_image\" >Comment aligner le texte \u00e0 c\u00f4t\u00e9 de l&#039;image\u00a0?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-envelopper-le-texte-autour-de-limage-wordpress-blog\/#How_to_add_Media_Text_block_in_block_editor\" >Comment ajouter un bloc M\u00e9dia &amp; Texte dans l&#039;\u00e9diteur de blocs\u00a0?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-envelopper-le-texte-autour-de-limage-wordpress-blog\/#How_does_Media_Text_block_work\" >Comment fonctionne le bloc M\u00e9dias et texte\u00a0?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-envelopper-le-texte-autour-de-limage-wordpress-blog\/#Media_Text_Block_settings\" >Param\u00e8tres de bloc m\u00e9dia et texte<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-envelopper-le-texte-autour-de-limage-wordpress-blog\/#General_block_settings\" >Param\u00e8tres g\u00e9n\u00e9raux du bloc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-envelopper-le-texte-autour-de-limage-wordpress-blog\/#Text_alignment\" >Alignement du texte<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-envelopper-le-texte-autour-de-limage-wordpress-blog\/#Switching_between_block_types\" >Basculer entre les types de blocs<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-envelopper-le-texte-autour-de-limage-wordpress-blog\/#Bonus_How_to_justify_text_in_WordPress\" >Bonus : Comment justifier du texte dans WordPress<\/a><\/li><\/ul><\/nav><\/div>","protected":false},"excerpt":{"rendered":"<p>Avez-vous besoin de placer du texte autour de l'image de mani\u00e8re \u00e9l\u00e9gante ? Apprenez \u00e0 le faire facilement sans aucune exp\u00e9rience en codage et en design. L'\u00e9diteur Gutenberg apporte plus d'options pour envelopper du texte autour du texte dans WordPress. Vous pouvez obtenir un site Web bien con\u00e7u et une routine d'\u00e9dition de contenu facile simultan\u00e9ment. Choisir l'\u00e9diteur Gutenberg pour [...]<\/p>","protected":false},"author":1,"featured_media":81198,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_citadela_custom_class":"","footnotes":""},"categories":[4,50],"tags":[15],"citadela-post-location":[],"class_list":["post-81185","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-building-websites-in-wordpress","category-citadela-pro-documentation","tag-gutenberg-wordpress-editor"],"_links":{"self":[{"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/posts\/81185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/comments?post=81185"}],"version-history":[{"count":24,"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/posts\/81185\/revisions"}],"predecessor-version":[{"id":93502,"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/posts\/81185\/revisions\/93502"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/media\/81198"}],"wp:attachment":[{"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/media?parent=81185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/categories?post=81185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/tags?post=81185"},{"taxonomy":"citadela-post-location","embeddable":true,"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/citadela-post-location?post=81185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}