{"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":"como-crear-cuadros-de-texto-en-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/es\/how-to-create-text-boxes-in-wordpress\/","title":{"rendered":"C\u00f3mo crear cuadros de texto en WordPress (3 tipos)"},"content":{"rendered":"

Un cuadro de texto es un \u00e1rea designada dentro del editor de Gutenberg donde puedes elaborar y publicar textos con diferentes tipograf\u00edas, fuentes, colores, estilizaciones y otras opciones de formato.<\/p>\n\n\n\n

Cuando quieras destacar un anuncio importante, un testimonio o una breve descripci\u00f3n de un producto, los cuadros de texto te permiten hacerlo. En este art\u00edculo, te mostraremos varias formas de crear cuadros de texto en WordPress.<\/p>\n\n\n\n

\n
\"\"
Tipo 1:<\/mark> Cuadro de texto con fondo de color \u21b4<\/a><\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
Tipo 2:<\/mark> Cuadro de texto con borde \u21b4<\/a><\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
Tipo 3:<\/mark> Cuadros de texto en la tabla \u21b4<\/a><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n\n

Tipo 1: A\u00f1adir un cuadro de texto con fondo de color<\/h2>\n\n\n\n

Se trata de un proceso sencillo y directo. S\u00f3lo tiene que a\u00f1adir un color al fondo del bloque de p\u00e1rrafo espec\u00edfico.<\/p>\n\n\n\n

Paso 1: Seleccione un texto en su entrada\/p\u00e1gina<\/h3>\n\n\n\n

Abra la entrada\/p\u00e1gina en la que desea a\u00f1adir el cuadro de texto. Seleccione el texto deseado<\/strong> colocando el cursor sobre el p\u00e1rrafo en cuesti\u00f3n. <\/p>\n\n\n\n

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

Paso 2: A\u00f1adir un color al fondo del bloque<\/h3>\n\n\n\n

Ir a la Pesta\u00f1a Estilos,<\/strong> como se indica en la imagen siguiente. Haga clic en el bot\u00f3n Opci\u00f3n de fondo<\/strong> y seleccione un color. El color se aplicar\u00e1 instant\u00e1neamente al bloque, que podr\u00e1 ver en tiempo real.<\/p>\n\n\n\n

Una vez aplicado el color alrededor y dentro de todo el bloque, parecer\u00e1 que se ha creado una caja a su alrededor, creando un cuadro de texto.<\/p>\n\n\n\n

\"A\u00f1adir<\/figure>\n\n\n\n

As\u00ed, puede crear un cuadro de texto con un fondo de color.<\/p>\n\n\n\n

\n\n\n\n

Tipo 2: A\u00f1adir un texto con bordes<\/h2>\n\n\n\n

A\u00f1adir bordes alrededor del bloque es otra forma f\u00e1cil de crear un cuadro de texto. Siga los pasos que se explican a continuaci\u00f3n.<\/p>\n\n\n\n

Paso 1: Seleccionar el texto en el editor<\/h3>\n\n\n\n

Seleccione de nuevo un texto haciendo clic en el bloque de p\u00e1rrafo que desee, tal y como le mostramos en el m\u00e9todo anterior.<\/p>\n\n\n\n

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

Paso 2: Convertirlo en el bloque de grupo<\/h3>\n\n\n\n

Por defecto, el bloque de p\u00e1rrafo no permite a\u00f1adir un borde a su alrededor. Por lo tanto, convi\u00e9rtalo en el bloque Bloque de grupo<\/strong>. <\/p>\n\n\n\n

Haga clic en el bot\u00f3n Icono de p\u00e1rrafo<\/strong> en la barra de herramientas de Gutenberg. Aparecer\u00e1 una lista con la opci\u00f3n Grupo al final. Haga clic en la opci\u00f3n Opci\u00f3n de grupo<\/strong> en la lista.<\/p>\n\n\n\n

El bloque se convertir\u00e1 en el bloque Grupo.<\/p>\n\n\n\n

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

Paso 3: A\u00f1adir borde y radio al bloque<\/h3>\n\n\n\n

Ir a la Ficha Estilos<\/strong> del bloque seleccionado. Despl\u00e1cese un poco por la pesta\u00f1a.<\/p>\n\n\n\n

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

Ver\u00e1 el Opci\u00f3n de frontera<\/strong>. Coloque un valor en p\u00edxeles para definir el ancho del borde. Si lo desea, tambi\u00e9n puede a\u00f1adir radio y relleno al bloque. <\/p>\n\n\n\n

Por lo tanto, su cuadro de texto est\u00e1 listo. A\u00f1adir radio y relleno puede hacer el cuadro de texto m\u00e1s presentable. Como resultado, usted puede considerar la adici\u00f3n de ellos.<\/p>\n\n\n\n

\"A\u00f1adir<\/figure>\n\n\n\n
\n\n\n\n

Tipo 3: A\u00f1adir cuadros de texto en la tabla<\/h2>\n\n\n\n

Es posible que a menudo desee crear varios cuadros de texto en la misma fila. Pero no es posible con el bloque de p\u00e1rrafo predeterminado. Sin embargo, puedes hacerlo f\u00e1cilmente creando una tabla. <\/p>\n\n\n\n

Tableberg<\/strong><\/a> es un plugin constructor de tablas para hacerlo. Instale<\/strong> y activar<\/strong> el plugin y siga los pasos que se indican a continuaci\u00f3n.<\/p>\n\n\n\n

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

Paso 01: A\u00f1ada el bloque TableBerg a su sitio web<\/h3>\n\n\n\n

Basta con encontrar el Bloque TableBerg<\/strong> en la biblioteca de bloques de Gutenberg y a\u00f1\u00e1delo a tu editor de entradas\/p\u00e1ginas.<\/p>\n\n\n\n

\"A\u00f1ade<\/figure>\n\n\n\n

Paso 02: Crear las columnas necesarias<\/h3>\n\n\n\n

Como la tabla predeterminada de Gutenberg, crea tantas columnas como necesites<\/strong> sobre la mesa.<\/p>\n\n\n\n

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

Paso 03: A\u00f1adir contenido a las columnas de la tabla<\/h3>\n\n\n\n

Aunque TableBerg le permite a\u00f1adir Listas, botones CTA e Im\u00e1genes a la tabla, hemos a\u00f1adido texto plano s\u00f3lo para explicar el tutorial.<\/p>\n\n\n\n

\"A\u00f1adir<\/figure>\n\n\n\n

Paso 04: A\u00f1adir colores a las columnas de la tabla<\/h3>\n\n\n\n

Seleccione una columna<\/strong> en la mesa colocando el cursor sobre ella. Vaya a la Ficha Estilos<\/strong>. Haga clic en el bot\u00f3n Opci\u00f3n de fondo<\/strong> y seleccione un color. Ver\u00e1s que el color se ha aplicado a la columna.<\/p>\n\n\n\n

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

Siguiendo el mismo m\u00e9todo, aplica diferentes tipos de colores a otras columnas de la tabla. Puedes ver que hemos aplicado cuatro colores diferentes a las columnas de la tabla. <\/p>\n\n\n\n

As\u00ed, sus cuadros de texto est\u00e1n listos. Pero si desea eliminar el borde de la tabla, siga el siguiente paso.<\/p>\n\n\n\n

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

Paso 05: Eliminar el borde de la mesa<\/h3>\n\n\n\n

Seleccione toda la tabla haciendo clic dos veces en el icono TableBerg de la barra de herramientas. Vaya a la Ficha Estilos<\/strong> en la barra lateral derecha. Despl\u00e1zate un poco hacia abajo. Desactive la opci\u00f3n Activar borde interior<\/strong>. Los bordes de la tabla ser\u00e1n invisibles.<\/p>\n\n\n\n

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

Conclusi\u00f3n<\/h2>\n\n\n\n

Por lo tanto, puede crear cuadros de texto en WordPress de varias maneras. Pero antes de concluir, queremos decir una cosa que es cada uno de estos m\u00e9todos puede no ser eficaz en todos los casos. <\/p>\n\n\n\n

Dependiendo del tipo de contenido, debes utilizar un m\u00e9todo adecuado que mantenga la legibilidad. Si te ha gustado este post, d\u00e9janos tu opini\u00f3n en la caja de comentarios. <\/p>\n\n\n\n

Explora nuestro archivo del blog<\/a> para conocer m\u00e1s art\u00edculos interesantes sobre 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\/es\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/comments?post=984"}],"version-history":[{"count":5,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/984\/revisions"}],"predecessor-version":[{"id":7083,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/984\/revisions\/7083"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media\/7081"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media?parent=984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/categories?post=984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/tags?post=984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}