{"id":984,"date":"2025-01-26T09:35:32","date_gmt":"2025-01-26T09:35:32","guid":{"rendered":"https:\/\/tableberg.com\/?p=984"},"modified":"2025-01-26T09:35:35","modified_gmt":"2025-01-26T09:35:35","slug":"comment-creer-des-zones-de-texte-dans-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/fr\/how-to-create-text-boxes-in-wordpress\/","title":{"rendered":"Comment cr\u00e9er des zones de texte dans WordPress (3 types)"},"content":{"rendered":"

Une zone de texte est une zone d\u00e9sign\u00e9e dans l'\u00e9diteur Gutenberg o\u00f9 vous pouvez cr\u00e9er et publier des textes avec diff\u00e9rentes options de typographie, de police, de couleur, de stylisation et d'autres options de formatage.<\/p>\n\n\n\n

Lorsque vous souhaitez mettre en avant une annonce importante, un t\u00e9moignage ou une br\u00e8ve description de produit, les zones de texte vous permettent de le faire. Dans cet article, nous allons vous montrer plusieurs fa\u00e7ons de cr\u00e9er des zones de texte dans WordPress.<\/p>\n\n\n\n

\n
\"\"
Type 1 :<\/mark> Zone de texte avec arri\u00e8re-plan color\u00e9 \u21b4<\/a><\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
Type 2 :<\/mark> Zone de texte avec bordure \u21b4<\/a><\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
Type 3 :<\/mark> Zones de texte dans le tableau \u21b4<\/a><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n\n

Type 1 : Ajouter une zone de texte avec un arri\u00e8re-plan color\u00e9<\/h2>\n\n\n\n

Il s'agit d'une proc\u00e9dure simple et directe. Il suffit d'ajouter une couleur \u00e0 l'arri\u00e8re-plan du bloc de paragraphe concern\u00e9.<\/p>\n\n\n\n

\u00c9tape 1 : S\u00e9lectionnez un texte dans votre article\/page<\/h3>\n\n\n\n

Ouvrez l'article\/la page o\u00f9 vous souhaitez ajouter la zone de texte. S\u00e9lectionnez le texte de votre choix<\/strong> en pla\u00e7ant votre curseur sur le paragraphe concern\u00e9. <\/p>\n\n\n\n

\"S\u00e9lectionnez<\/figure>\n\n\n\n

\u00c9tape 2 : Ajouter une couleur \u00e0 l'arri\u00e8re-plan du bloc<\/h3>\n\n\n\n

Aller \u00e0 la page Onglet Styles,<\/strong> comme indiqu\u00e9 dans l'image ci-dessous. Cliquez sur le bouton Option d'arri\u00e8re-plan<\/strong> et s\u00e9lectionnez une couleur. La couleur sera instantan\u00e9ment appliqu\u00e9e au bloc que vous pouvez voir en temps r\u00e9el.<\/p>\n\n\n\n

Une fois la couleur appliqu\u00e9e autour et \u00e0 l'int\u00e9rieur du bloc entier, il semblera qu'une bo\u00eete a \u00e9t\u00e9 cr\u00e9\u00e9e autour du bloc, cr\u00e9ant ainsi une zone de texte.<\/p>\n\n\n\n

\"Ajouter<\/figure>\n\n\n\n

Vous pouvez ainsi cr\u00e9er une zone de texte avec un arri\u00e8re-plan color\u00e9.<\/p>\n\n\n\n

\n\n\n\n

Type 2 : Ajouter un texte avec des bordures<\/h2>\n\n\n\n

L'ajout de bordures autour du bloc est une autre fa\u00e7on simple de cr\u00e9er une zone de texte. Suivez les \u00e9tapes expliqu\u00e9es ci-dessous.<\/p>\n\n\n\n

\u00c9tape 1 : S\u00e9lectionner le texte dans l'\u00e9diteur<\/h3>\n\n\n\n

S\u00e9lectionnez \u00e0 nouveau un texte en cliquant sur le bloc de paragraphe souhait\u00e9, comme nous vous l'avons montr\u00e9 dans la m\u00e9thode ci-dessus.<\/p>\n\n\n\n

\"S\u00e9lectionnez<\/figure>\n\n\n\n

\u00c9tape 2 : Le convertir en bloc de groupe<\/h3>\n\n\n\n

Par d\u00e9faut, le bloc paragraphe ne permet pas d'ajouter une bordure autour de lui. Il faut donc le convertir en Bloc de groupe<\/strong>. <\/p>\n\n\n\n

Cliquez sur le bouton Ic\u00f4ne de paragraphe<\/strong> dans la barre d'outils Gutenberg. Une liste appara\u00eet avec l'option Groupe \u00e0 la fin. Cliquez sur l'option Option de groupe<\/strong> sur la liste.<\/p>\n\n\n\n

Le bloc sera converti en bloc du groupe.<\/p>\n\n\n\n

\"Convertir<\/figure>\n\n\n\n

\u00c9tape 3 : Ajouter une bordure et un rayon au bloc<\/h3>\n\n\n\n

Aller \u00e0 la page Onglet Styles<\/strong> du bloc s\u00e9lectionn\u00e9. Faites d\u00e9filer l'onglet un peu plus bas.<\/p>\n\n\n\n

\"Allez<\/figure>\n\n\n\n

Vous verrez le Option de bordure<\/strong>. Placez une valeur en pixels pour d\u00e9finir la largeur de la bordure. Vous pouvez \u00e9galement ajouter un rayon et un rembourrage au bloc si vous le souhaitez. <\/p>\n\n\n\n

Votre zone de texte est donc pr\u00eate. L'ajout d'un rayon et d'un remplissage peut rendre la zone de texte plus pr\u00e9sentable. Vous pouvez donc envisager de les ajouter.<\/p>\n\n\n\n

\"Ajoutez<\/figure>\n\n\n\n
\n\n\n\n

Type 3 : Ajouter des zones de texte dans un tableau<\/h2>\n\n\n\n

Il peut arriver que vous souhaitiez cr\u00e9er plusieurs zones de texte dans la m\u00eame ligne. Mais ce n'est pas possible avec le bloc de paragraphes par d\u00e9faut. Cependant, vous pouvez le faire facilement en cr\u00e9ant un tableau. <\/p>\n\n\n\n

Tableberg<\/strong><\/a> est un plugin de construction de tableaux qui permet de le faire. Installer<\/strong> et activer<\/strong> le plugin et suivez les \u00e9tapes indiqu\u00e9es ci-dessous.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u00c9tape 01 : Ajouter le bloc TableBerg \u00e0 votre site<\/h3>\n\n\n\n

Il suffit de trouver le Bloc TableBerg<\/strong> dans la biblioth\u00e8que de blocs de Gutenberg et ajoutez-la \u00e0 votre \u00e9diteur de pages ou de posts.<\/p>\n\n\n\n

\"Ajoutez<\/figure>\n\n\n\n

\u00c9tape 02 : Cr\u00e9er les colonnes n\u00e9cessaires<\/h3>\n\n\n\n

Comme la table par d\u00e9faut de Gutenberg, cr\u00e9er autant de colonnes que n\u00e9cessaire<\/strong> sur la table.<\/p>\n\n\n\n

\"Cr\u00e9ez<\/figure>\n\n\n\n

\u00c9tape 03 : Ajouter du contenu aux colonnes du tableau<\/h3>\n\n\n\n

Bien que TableBerg permette d'ajouter des listes, des boutons CTA et des images au tableau, nous n'avons ajout\u00e9 que du texte simple pour expliquer le tutoriel.<\/p>\n\n\n\n

\"Ajouter<\/figure>\n\n\n\n

\u00c9tape 04 : Ajouter des couleurs aux colonnes du tableau<\/h3>\n\n\n\n

S\u00e9lectionner une colonne<\/strong> sur la table en pla\u00e7ant votre curseur dessus. Acc\u00e9dez \u00e0 la page Onglet Styles<\/strong>. Cliquez sur le bouton Option d'arri\u00e8re-plan<\/strong> et s\u00e9lectionnez une couleur. Vous verrez que la couleur a \u00e9t\u00e9 appliqu\u00e9e \u00e0 la colonne.<\/p>\n\n\n\n

\"Coloriser<\/figure>\n\n\n\n

En suivant la m\u00eame m\u00e9thode, appliquez diff\u00e9rents types de couleurs aux autres colonnes du tableau. Vous pouvez voir que nous avons appliqu\u00e9 quatre couleurs diff\u00e9rentes aux colonnes du tableau. <\/p>\n\n\n\n

Vos zones de texte sont donc pr\u00eates. Mais si vous souhaitez supprimer la bordure du tableau, suivez l'\u00e9tape suivante.<\/p>\n\n\n\n

\"Appliquer<\/figure>\n\n\n\n

\u00c9tape 05 : Retirer la bordure du tableau<\/h3>\n\n\n\n

S\u00e9lectionnez l'ensemble du tableau en cliquant deux fois sur l'ic\u00f4ne TableBerg dans la barre d'outils. Acc\u00e9dez \u00e0 l'onglet Onglet Styles<\/strong> sur la barre lat\u00e9rale droite. Descendez un peu. D\u00e9sactivez l'option Activer la bordure int\u00e9rieure<\/strong>. Les bordures du tableau seront invisibles.<\/p>\n\n\n\n

\"Supprimer<\/figure>\n\n\n\n
\n\n\n\n

Conclusion<\/h2>\n\n\n\n

Ainsi, vous pouvez cr\u00e9er des zones de texte dans WordPress de diff\u00e9rentes mani\u00e8res. Mais avant de conclure, nous voulons dire une chose : chacune de ces m\u00e9thodes peut ne pas \u00eatre efficace dans tous les cas. <\/p>\n\n\n\n

En fonction de votre type de contenu, vous devez utiliser une m\u00e9thode appropri\u00e9e qui pr\u00e9serve la lisibilit\u00e9. Si vous avez aim\u00e9 cet article, faites-nous part de vos r\u00e9actions dans la bo\u00eete de commentaires ci-dessous. <\/p>\n\n\n\n

D\u00e9couvrez nos archives du blog<\/a> pour d\u00e9couvrir d'autres articles int\u00e9ressants sur WordPress.<\/p>","protected":false},"excerpt":{"rendered":"

A text box is a designated area within the Gutenberg editor where you can craft and publish texts with different typography, font, color, stylization, and other formatting options. When you want to highlight an important announcement, testimonial, or a brief product description, text boxes allow you to do so. In this article, we’ll show you […]<\/p>\n","protected":false},"author":1,"featured_media":7081,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[38,9,39],"class_list":["post-984","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-content-presentation","tag-tableberg","tag-text-boxes"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/How-to-Create-Text-Boxes-in-WordPress.png","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/fr\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/comments?post=984"}],"version-history":[{"count":5,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/984\/revisions"}],"predecessor-version":[{"id":7083,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/984\/revisions\/7083"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media\/7081"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media?parent=984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/categories?post=984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/tags?post=984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}