{"id":81159,"date":"2020-01-22T16:30:20","date_gmt":"2020-01-22T15:30:20","guid":{"rendered":"https:\/\/www.ait-themes.club\/?p=81159"},"modified":"2023-10-20T11:30:11","modified_gmt":"2023-10-20T11:30:11","slug":"wordpress-image-block-tutorial-blog","status":"publish","type":"post","link":"https:\/\/www.ait-themes.club\/fr\/wordpress-image-bloc-tutoriel-blog\/","title":{"rendered":"Travailler avec WordPress Image block : Comment ajouter des images dans WordPress [+Astuce secr\u00e8te]"},"content":{"rendered":"<p>Pour de nombreux utilisateurs, travailler avec des images peut \u00eatre tr\u00e8s frustrant. Il n&#039;est pas toujours facile de choisir le bon rapport d&#039;aspect ou de redimensionner correctement les images pour qu&#039;elles s&#039;int\u00e8grent bien dans l&#039;ensemble de la mise en page.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><a href=\"#whyiswordpressimageblock\">Pourquoi utiliser le bloc WordPress Image<\/a><\/li><li><a href=\"#howtoaddimagesinwpblock\">Comment ajouter des images avec le bloc WordPress Image<\/a><\/li><li><a href=\"#otherimageblock\">Processus de mise en forme suppl\u00e9mentaire des images<\/a><\/li><li><a href=\"#extratipaboutimageblock\">Conseil suppl\u00e9mentaire de notre part dans l&#039;article<\/a><\/li><\/ol>\n\n\n\n<p>Les anciennes versions de WordPress (jusqu&#039;\u00e0 la v5.0) ajoutent des images \u00e0 l&#039;aide du bouton + Ajouter un m\u00e9dia. Le probl\u00e8me \u00e9tait que m\u00eame avec une modification minime de la taille de l&#039;image, vous deviez la t\u00e9l\u00e9charger \u00e0 nouveau. Cela signifie une perte de temps et des clics redondants.<\/p>\n\n\n\n<p>Le nouvel \u00e9diteur bas\u00e9 sur des blocs, Gutenberg, modifie la fa\u00e7on dont ajouter des images dans WordPress pour simplifier ce processus pour les utilisateurs finaux. Dans cet article, nous vous montrerons un guide pratique sur l&#039;ajout et la modification du bloc d&#039;images WordPress. De plus, nous expliquerons une autre option de collage d&#039;images - comment copier et coller une image dans la zone de contenu en quelques clics. Nous vous pr\u00e9senterons \u00e9galement les nouvelles fonctionnalit\u00e9s ajout\u00e9es provenant de WP 5.3.<\/p>\n\n\n\n<p>Mais parlons d&#039;abord de la raison pour laquelle vous devriez utiliser des images dans les publications et les pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_is_WordPress_Image_block_must-have_for_your_website\"><\/span><a id=\"whyiswordpressimageblock\"><\/a>Pourquoi le bloc d&#039;images WordPress est-il indispensable pour votre site Web<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Attract_attention\"><\/span>Attirer l&#039;attention<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Les images attirent l&#039;attention des visiteurs du site Web. Ils doivent \u00eatre int\u00e9ressants pour garder les visiteurs sur votre site plus longtemps. Pensez \u00e0 un article de blog sans images. Ce n&#039;est qu&#039;un tas de texte. A premi\u00e8re vue, il n&#039;est pas tr\u00e8s int\u00e9ressant m\u00eame s&#039;il peut \u00eatre pr\u00e9cieux et plein d&#039;informations. De plus, les photos peuvent aider \u00e0 imaginer et \u00e0 mieux d\u00e9crire votre sujet.<\/p>\n\n\n\n<p>Pour cette raison, nous devons utiliser le bloc WordPress Image pour attirer l&#039;attention sur des \u00e9l\u00e9ments importants.<\/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\/blog-post-images-example.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"797\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-images-example.png\" alt=\"Exemple de 2 blogs avec ou sans images\" class=\"wp-image-81169\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-images-example.png 1600w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-images-example-300x149.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-images-example-1024x510.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-images-example-768x383.png 768w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-images-example-1536x765.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a><figcaption>Exemple de 2 blogs avec ou sans images<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Illustrative_text_and_context\"><\/span>Texte illustratif et contexte<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Les images sont \u00e9galement un \u00e9l\u00e9ment essentiel pour comprendre le contenu, car elles permettent aux visiteurs de mieux comprendre de quoi parle l&#039;article. Gr\u00e2ce aux infographies, vous pouvez expliquer les connexions compliqu\u00e9es et dire les choses de mani\u00e8re simple. Cela aide les visiteurs \u00e0 mieux s&#039;orienter dans le probl\u00e8me dont vous parlez.<\/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\/blog-post-infographic.png\"><img loading=\"lazy\" decoding=\"async\" width=\"819\" height=\"903\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-infographic.png\" alt=\"Exemple d&#039;infographie\" class=\"wp-image-81170\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-infographic.png 819w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-infographic-272x300.png 272w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-infographic-768x847.png 768w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/><\/a><figcaption>Infographie pour une meilleure explication du texte<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Make_website_nicer\"><\/span>Rendre le site Web plus agr\u00e9able<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>En outre, les images apportent une touche finale \u00e0 l&#039;ensemble de la conception du site Web. Il ne s&#039;agit pas seulement de la mise en page du site Web, mais aussi de la convivialit\u00e9. Une image correctement choisie et plac\u00e9e peut aider le visiteur \u00e0 naviguer plus facilement sur votre site Web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_add_images_in_WordPress_block_editor\"><\/span><a id=\"howtoaddimagesinwpblock\"><\/a>Comment ajouter des images dans l&#039;\u00e9diteur de blocs WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Pour ins\u00e9rer une image dans une publication ou une page, vous devez ajouter un bloc principal - bloc Image. Il y a plusieurs fa\u00e7ons de le faire :<\/p>\n\n\n\n<p>- Utiliser &quot;+&quot; dans la barre sup\u00e9rieure ou n&#039;importe o\u00f9 dans l&#039;\u00e9diteur<\/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-add.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"800\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-add.png\" alt=\"Ajouter un bloc d&#039;image en cliquant sur &quot;+&quot;\" class=\"wp-image-81171\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-add.png 1280w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-add-300x188.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-add-1024x640.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-add-768x480.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><figcaption>Ajout du bloc WordPress Image en cliquant sur \u00ab + \u00bb<\/figcaption><\/figure><\/div>\n\n\n\n<p>- En utilisant la barre oblique &quot;\/&quot; et en \u00e9crivant le mot &quot;image&quot; apr\u00e8s<\/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-shortcut.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-shortcut.gif\" alt=\"Ajouter un bloc d&#039;image \u00e0 l&#039;aide d&#039;une barre oblique\" class=\"wp-image-81177\"\/><\/a><figcaption>Ajout d&#039;un bloc d&#039;image \u00e0 l&#039;aide de la barre oblique &quot;\/&quot;<\/figcaption><\/figure><\/div>\n\n\n\n<p>Un nouveau bloc sera cr\u00e9\u00e9 o\u00f9 vous pourrez ajouter des images r\u00e9elles.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Uploading_images_to_WordPress\"><\/span>T\u00e9l\u00e9charger des images sur WordPress<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Comment mettre des images l\u00e0 o\u00f9 vous voulez ?<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Utilisez T\u00e9l\u00e9charger et s\u00e9lectionnez une image sur votre disque dur<\/li><li>Utilisez la biblioth\u00e8que multim\u00e9dia, o\u00f9 vous pouvez s\u00e9lectionner des images qui ont d\u00e9j\u00e0 \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9es sur votre site Web<\/li><li>Utilisez la souris et faites glisser et d\u00e9posez l&#039;image<\/li><li>Ins\u00e9rer l&#039;adresse URL de l&#039;image<\/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-image-upload.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"400\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-upload.gif\" alt=\"Options pour t\u00e9l\u00e9charger des images\" class=\"wp-image-81178\"\/><\/a><figcaption>Options disponibles pour t\u00e9l\u00e9charger des images - l&#039;une d&#039;entre elles est le glisser-d\u00e9poser d&#039;une image \u00e0 partir d&#039;un dossier<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Less_known_method_of_adding_WordPress_images\"><\/span>M\u00e9thode moins connue d&#039;ajout d&#039;images WordPress<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Outre le t\u00e9l\u00e9chargement d&#039;images via la fen\u00eatre de t\u00e9l\u00e9chargement, comme mentionn\u00e9 pr\u00e9c\u00e9demment, il existe un autre moyen d&#039;ins\u00e9rer une image (et c&#039;est un moyen tellement rapide\u00a0!). Avec l&#039;\u00e9diteur WordPress am\u00e9lior\u00e9, vous pouvez\u00a0:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Copier l&#039;image \u00e0 partir de n&#039;importe quel contenu, ou<\/li><li>Il suffit de &quot;faire glisser&quot; l&#039;image avec le curseur de la souris<\/li><\/ul>\n\n\n\n<p>Et puis ins\u00e9rez ou d\u00e9placez (d\u00e9posez) l&#039;image s\u00e9lectionn\u00e9e \u00e0 l&#039;emplacement souhait\u00e9 dans la zone de contenu.<\/p>\n\n\n\n<div class=\"wp-block-image wp-image-84761\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"276\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/12\/Drag-and-drop-image-to-post.gif\" alt=\"Faites glisser et d\u00e9posez l&#039;image du message publi\u00e9 vers la zone de contenu\" class=\"wp-image-84761\"\/><figcaption>Faites glisser l&#039;image s\u00e9lectionn\u00e9e et d\u00e9posez-la l\u00e0 o\u00f9 vous en avez besoin (directement dans l&#039;\u00e9diteur WordPress)<\/figcaption><\/figure><\/div>\n\n\n\n<p>La m\u00eame technique que vous pouvez \u00e9galement utiliser au cas o\u00f9 vous voudriez coller une image captur\u00e9e \u00e0 partir de votre \u00e9cran. Seules trois \u00e9tapes simples sont n\u00e9cessaires. D&#039;abord, <strong>tu dois faire une capture d&#039;\u00e9cran<\/strong> \u00e0 l&#039;aide de la fonction d&#039;impression d&#039;\u00e9cran. Par exemple, Windows 10 fournit son outil d&#039;extrait de code par d\u00e9faut appel\u00e9 Snip &amp; Sketch, qui est \u00e9galement disponible via un raccourci - appuyez simplement sur les touches Win + Maj + S ensemble sur votre clavier. S\u00e9lectionnez ensuite la zone d&#039;image que vous souhaitez capturer. La derni\u00e8re \u00e9tape consiste \u00e0 coller l&#039;image copi\u00e9e (ou une partie de celle-ci) dans la zone de contenu \u00e0 l&#039;aide du raccourci de base Ctrl+V.<\/p>\n\n\n\n<p>Et qu&#039;arrive-t-il \u00e0 l&#039;image WordPress que vous avez coll\u00e9e dans votre \u00e9diteur\u00a0? Eh bien, il est automatiquement ajout\u00e9 \u00e0 la m\u00e9diath\u00e8que o\u00f9 vous pouvez modifier cette image.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Image_metadata_limited_options\"><\/span>Options limit\u00e9es des m\u00e9tadonn\u00e9es d&#039;image<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Dans l&#039;\u00e9dition d&#039;image, vous pouvez d\u00e9finir son titre, sa l\u00e9gende, sa description et son texte alternatif. Malheureusement, vous ne pouvez pas modifier le nom du fichier image - il conservera son nom g\u00e9n\u00e9r\u00e9 automatiquement, tel que <em>image-1.png<\/em> et ainsi de suite. Ce type de nom de fichier peut \u00eatre un petit inconv\u00e9nient en termes d&#039;optimisation SEO en raison d&#039;un conflit avec les recommandations de nommage des fichiers. Par cons\u00e9quent, vous devez tenir compte de cet aspect avant de d\u00e9placer des images WordPress vers la zone de contenu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Image_alignment\"><\/span>Alignement des images<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>L&#039;alignement de l&#039;image est l&#039;une des principales caract\u00e9ristiques. Peu importe si vous ajoutez un bloc d&#039;image WordPress dans la publication ou la page, vous devez toujours consid\u00e9rer le placement en fonction de la conception du site Web. Sur la base de cette image, l&#039;alignement peut \u00eatre choisi dans la barre d&#039;outils au-dessus. Par d\u00e9faut, vous pouvez aligner l&#039;image \u00e0 gauche, \u00e0 droite ou la centrer. Certains th\u00e8mes WordPress permettent de centrer les images en largeur ou en pleine largeur. Cela d\u00e9pend vraiment des fonctionnalit\u00e9s du th\u00e8me car tous les th\u00e8mes ne le prennent pas en charge.<\/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-align.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-align.gif\" alt=\"Param\u00e8tres d&#039;alignement des images\" class=\"wp-image-81172\"\/><\/a><figcaption>Options d&#039;alignement des images<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Resizing_images\"><\/span>Redimensionner les images<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>La fonctionnalit\u00e9 r\u00e9volutionnaire du bloc Image dans l&#039;\u00e9diteur WordPress est le redimensionnement pratique. Faites simplement glisser le c\u00f4t\u00e9 de l&#039;image pour la rendre plus petite ou plus grande. De cette fa\u00e7on, vous pouvez modifier la taille de l&#039;image en fonction du texte du contenu. L&#039;\u00e9diteur conserve automatiquement les proportions de l&#039;image, ce qui signifie que vous n&#039;avez pas \u00e0 vous soucier des d\u00e9formations.<\/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-resize.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-resize.gif\" alt=\"Redimensionnement de l&#039;image\" class=\"wp-image-81175\"\/><\/a><figcaption>Redimensionnement fluide de l&#039;image en attrapant ses poign\u00e9es<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"New_block_style_that_transforms_an_image_into_a_circle_shape\"><\/span>Nouveau style de bloc qui transforme une image en forme de cercle<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Si vous utilisez la derni\u00e8re version disponible de WordPress, vous avez peut-\u00eatre remarqu\u00e9 un nouveau style de recadrage circulaire que vous pouvez utiliser pour votre image. La forme de l&#039;image peut \u00eatre modifi\u00e9e via la barre d&#039;outils sup\u00e9rieure en cliquant sur la premi\u00e8re ic\u00f4ne &quot;Modifier le type ou le style de bloc&quot;. La forme par d\u00e9faut (rectangle) sera coup\u00e9e en forme de cercle.<\/p>\n\n\n\n<figure class=\"wp-block-image alignnone size-full wp-image-84327\"><img loading=\"lazy\" decoding=\"async\" width=\"1494\" height=\"787\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/circle-style-of-wordpress-images.png\" alt=\"Forme circulaire de l&#039;image\" class=\"wp-image-84327\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/circle-style-of-wordpress-images.png 1494w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/circle-style-of-wordpress-images-300x158.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/circle-style-of-wordpress-images-1024x539.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/circle-style-of-wordpress-images-768x405.png 768w\" sizes=\"auto, (max-width: 1494px) 100vw, 1494px\" \/><figcaption>Le nouveau design de style cercle pour vos images<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"New_features_in_WordPress_Images_block_added_in_WP_53\"><\/span>Nouvelles fonctionnalit\u00e9s dans le bloc WordPress Images (ajout\u00e9 dans WP 5.3)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Support_for_high_resolution_images\"><\/span>Prise en charge des images haute r\u00e9solution<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>L&#039;un des points forts de WP 5.3 est l&#039;am\u00e9lioration du traitement des images sur la plate-forme WordPress. Travailler avec des images a maintenant deux fonctionnalit\u00e9s principales\u00a0:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Reprise du t\u00e9l\u00e9chargement - Si vous t\u00e9l\u00e9chargez des photos haute r\u00e9solution et que la connexion Internet \u00e9choue, le processus de t\u00e9l\u00e9chargement se poursuivra automatiquement \u00e0 partir du point interrompu<\/li><li>Rotation automatique de l&#039;image - la derni\u00e8re version WP publi\u00e9e garantit que les images mal pivot\u00e9es pivotent automatiquement vers la position correcte lorsqu&#039;elles sont t\u00e9l\u00e9charg\u00e9es<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Settings_in_Inspector\"><\/span>Param\u00e8tres dans l&#039;inspecteur<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pour configurer les dimensions exactes, vous pouvez utiliser l&#039;inspecteur dans la barre lat\u00e9rale droite de l&#039;\u00e9diteur. Les param\u00e8tres de taille d&#039;image offrent des formats pr\u00eats \u00e0 l&#039;emploi tels que vignette, taille moyenne, grande ou pleine taille. Vous pouvez d\u00e9finir la largeur et la hauteur en pixels ou en pourcentages bien s\u00fbr.<\/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-settings.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"803\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-settings.png\" alt=\"Param\u00e8tres de taille d&#039;image disponibles\" class=\"wp-image-81180\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-settings.png 1280w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-settings-300x188.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-settings-1024x642.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-settings-768x482.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><figcaption>Param\u00e8tres de taille d&#039;image<\/figcaption><\/figure><\/div>\n\n\n\n<p>C&#039;est tr\u00e8s rapide et pratique car vous pouvez effectuer toutes les modifications de redimensionnement d&#039;image directement dans le bloc WordPress Images et tout au m\u00eame endroit dans l&#039;\u00e9diteur de blocs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Other_Images_block_settings\"><\/span><a id=\"otherimageblock\"><\/a>Param\u00e8tres du bloc Autres images<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_add_URL_address\"><\/span>Comment ajouter une adresse URL<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Les images peuvent \u00eatre utilis\u00e9es comme images statiques ou elles peuvent \u00e9galement \u00eatre cliquables et li\u00e9es \u00e0\u00a0:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>&nbsp; Fichier multim\u00e9dia<\/li><li>&nbsp; Page de pi\u00e8ce jointe<\/li><li>&nbsp; URL personnalis\u00e9e<\/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-image-link-settings.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"803\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-link-settings.png\" alt=\"Param\u00e8tres de lien d&#039;image\" class=\"wp-image-81183\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-link-settings.png 1280w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-link-settings-300x188.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-link-settings-1024x642.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-link-settings-768x482.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><figcaption>Param\u00e8tres de lien d&#039;image disponibles<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_edit_picture_in_WordPress_Image_block\"><\/span>Comment \u00e9diter une image dans le bloc WordPress Image<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Chaque image peut \u00eatre modifi\u00e9e apr\u00e8s avoir cliqu\u00e9 sur l&#039;ic\u00f4ne du crayon. La fen\u00eatre modale avec la biblioth\u00e8que multim\u00e9dia s&#039;ouvrira o\u00f9 vous pourrez \u00e9crire un texte alternatif, un titre, une l\u00e9gende et une description. De la m\u00eame mani\u00e8re que vous avez d\u00e9j\u00e0 l&#039;habitude de le faire dans l&#039;ancienne version de WordPress avec l&#039;\u00e9diteur classique.<\/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\/media-library.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"800\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/media-library.png\" alt=\"D\u00e9tails de l&#039;image \u00e0 des fins de r\u00e9f\u00e9rencement\" class=\"wp-image-81182\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/media-library.png 1280w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/media-library-300x188.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/media-library-1024x640.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/media-library-768x480.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><figcaption>D\u00e9tails de l&#039;image que vous devez remplir pour am\u00e9liorer le r\u00e9f\u00e9rencement de votre site Web<\/figcaption><\/figure><\/div>\n\n\n\n<p>Pourquoi est-il important de faire remplir ces textes ?<\/p>\n\n\n\n<p>Si les visiteurs cliquent sur l&#039;image pour l&#039;agrandir, ils voient le titre de l&#039;image (par exemple la page d&#039;accueil Citadela) et non le nom du fichier de l&#039;image. De plus, s&#039;il y a un probl\u00e8me avec le chargement de l&#039;image, un texte alternatif sera affich\u00e9 sur votre site Web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Extra_Tips\"><\/span><a id=\"extratipaboutimageblock\"><\/a>Conseils suppl\u00e9mentaires<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Outre toutes ces raisons et param\u00e8tres pour les blocs WordPress Images, il y a la chose la plus importante. Vous pourriez gagner plus de visiteurs sur votre site Web en utilisant des images. Alors comment les obtenir ?<\/p>\n\n\n\n<p>De nos jours, les gens sont paresseux pour lire. Ils pr\u00e9f\u00e8rent faire d\u00e9filer les images pour trouver des r\u00e9ponses. Comment se fait-il que vos photos et images puissent \u00eatre class\u00e9es\u00a0? Les textes sont la r\u00e9ponse. Le titre et la description parfaits de l&#039;image sont tr\u00e8s importants pour l&#039;optimisation du r\u00e9f\u00e9rencement. N&#039;oubliez pas de remplir Texte alternatif. Ensuite, Google peut mieux comprendre l&#039;image. Ainsi, vous auriez plus de chances de le classer dans les r\u00e9sultats de recherche d&#039;images.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_ways_how_to_add_image_caption\"><\/span>2 fa\u00e7ons d&#039;ajouter une l\u00e9gende d&#039;image<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>L&#039;ajout d&#039;une l\u00e9gende d&#039;image est tr\u00e8s simple \u00e0 l&#039;aide de l&#039;\u00e9diteur de blocs. Juste sous l&#039;image, il y a un espace pour \u00e9crire du texte. C&#039;est la premi\u00e8re fa\u00e7on - La l\u00e9gende est \u00e9crite sur cette image exacte sur la sous-page donn\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-image-caption.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-caption.gif\" alt=\"L\u00e9gende\" class=\"wp-image-81173\"\/><\/a><figcaption>L\u00e9gende \u00e9crite directement sous l&#039;image<\/figcaption><\/figure><\/div>\n\n\n\n<p>La deuxi\u00e8me m\u00e9thode consiste \u00e0 \u00e9crire la l\u00e9gende de l&#039;image \u00e0 l&#039;aide de l&#039;ic\u00f4ne en forme de crayon (Modifier l&#039;image) dans la biblioth\u00e8que multim\u00e9dia. De cette fa\u00e7on, vous ajoutez une l\u00e9gende d&#039;image globalement sur l&#039;ensemble du site Web. Cela signifie que si vous utilisez la m\u00eame image \u00e0 trois endroits diff\u00e9rents, elle utilisera toujours cette l\u00e9gende.<\/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-caption-library.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-caption-library.gif\" alt=\"Ajouter une l\u00e9gende d&#039;image dans la m\u00e9diath\u00e8que\" class=\"wp-image-81174\"\/><\/a><figcaption>L\u00e9gende de l&#039;image ajout\u00e9e via la m\u00e9diath\u00e8que<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\">Aimez-vous la facilit\u00e9 avec laquelle vous pouvez ajouter des images dans le bloc d&#039;images WordPress\u00a0? Essayez-le par vous-m\u00eame !<\/p>\n\n\n\n<p class=\"has-text-align-center\">D\u00e9couvrez notre tout nouveau th\u00e8me WordPress Citadela et ses packs de mise en page sur mesure. Ils ont \u00e9t\u00e9 sp\u00e9cialement con\u00e7us et d\u00e9velopp\u00e9s pour diff\u00e9rents types d&#039;entreprises et ils prennent \u00e9galement en charge la nouvelle fa\u00e7on d&#039;\u00e9diter le contenu via l&#039;\u00e9diteur de blocs WordPress.<\/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-image-bloc-tutoriel-blog\/#Why_is_WordPress_Image_block_must-have_for_your_website\" >Pourquoi le bloc d&#039;images WordPress est-il indispensable pour votre site Web<\/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-image-bloc-tutoriel-blog\/#Attract_attention\" >Attirer l&#039;attention<\/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-image-bloc-tutoriel-blog\/#Illustrative_text_and_context\" >Texte illustratif et contexte<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-image-bloc-tutoriel-blog\/#Make_website_nicer\" >Rendre le site Web plus agr\u00e9able<\/a><\/li><\/ul><\/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-image-bloc-tutoriel-blog\/#How_to_add_images_in_WordPress_block_editor\" >Comment ajouter des images dans l&#039;\u00e9diteur de blocs WordPress<\/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-image-bloc-tutoriel-blog\/#Uploading_images_to_WordPress\" >T\u00e9l\u00e9charger des images sur WordPress<\/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-image-bloc-tutoriel-blog\/#Less_known_method_of_adding_WordPress_images\" >M\u00e9thode moins connue d&#039;ajout d&#039;images WordPress<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-image-bloc-tutoriel-blog\/#Image_metadata_limited_options\" >Options limit\u00e9es des m\u00e9tadonn\u00e9es d&#039;image<\/a><\/li><\/ul><\/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-image-bloc-tutoriel-blog\/#Image_alignment\" >Alignement des images<\/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-image-bloc-tutoriel-blog\/#Resizing_images\" >Redimensionner les images<\/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-image-bloc-tutoriel-blog\/#New_block_style_that_transforms_an_image_into_a_circle_shape\" >Nouveau style de bloc qui transforme une image en forme de cercle<\/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-image-bloc-tutoriel-blog\/#New_features_in_WordPress_Images_block_added_in_WP_53\" >Nouvelles fonctionnalit\u00e9s dans le bloc WordPress Images (ajout\u00e9 dans WP 5.3)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-image-bloc-tutoriel-blog\/#Support_for_high_resolution_images\" >Prise en charge des images haute r\u00e9solution<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-image-bloc-tutoriel-blog\/#Settings_in_Inspector\" >Param\u00e8tres dans l&#039;inspecteur<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-image-bloc-tutoriel-blog\/#Other_Images_block_settings\" >Param\u00e8tres du bloc Autres images<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-image-bloc-tutoriel-blog\/#How_to_add_URL_address\" >Comment ajouter une adresse URL<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-image-bloc-tutoriel-blog\/#How_to_edit_picture_in_WordPress_Image_block\" >Comment \u00e9diter une image dans le bloc WordPress Image<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-image-bloc-tutoriel-blog\/#Extra_Tips\" >Conseils suppl\u00e9mentaires<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.ait-themes.club\/fr\/wordpress-image-bloc-tutoriel-blog\/#2_ways_how_to_add_image_caption\" >2 fa\u00e7ons d&#039;ajouter une l\u00e9gende d&#039;image<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>","protected":false},"excerpt":{"rendered":"<p>Pour de nombreux utilisateurs, travailler avec des images peut \u00eatre tr\u00e8s frustrant. Il n&#039;est pas toujours facile de choisir le bon rapport d&#039;aspect ou de redimensionner correctement les images pour qu&#039;elles s&#039;int\u00e8grent bien dans l&#039;ensemble de la mise en page. Pourquoi utiliser le bloc d&#039;images WordPress Comment ajouter des images avec le bloc d&#039;images WordPress Processus de mise en forme suppl\u00e9mentaire des images Conseil suppl\u00e9mentaire de notre part [\u2026]<\/p>","protected":false},"author":1,"featured_media":81168,"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-81159","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\/81159","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=81159"}],"version-history":[{"count":1,"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/posts\/81159\/revisions"}],"predecessor-version":[{"id":94279,"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/posts\/81159\/revisions\/94279"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/media\/81168"}],"wp:attachment":[{"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/media?parent=81159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/categories?post=81159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/tags?post=81159"},{"taxonomy":"citadela-post-location","embeddable":true,"href":"https:\/\/www.ait-themes.club\/fr\/wp-json\/wp\/v2\/citadela-post-location?post=81159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}