{"id":1612,"date":"2025-03-29T15:46:45","date_gmt":"2025-03-29T15:46:45","guid":{"rendered":"https:\/\/tableberg.com\/?p=1612"},"modified":"2025-03-29T15:46:48","modified_gmt":"2025-03-29T15:46:48","slug":"como-crear-cajas-de-contenido-en-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/es\/how-to-create-content-boxes-in-wordpress\/","title":{"rendered":"C\u00f3mo crear cajas de contenido en WordPress"},"content":{"rendered":"<p>Una caja de contenido es un contenedor visualmente distinto mediante el cual puede enmarcar contenido espec\u00edfico que lo haga destacar del resto. Le ayuda a destacar informaci\u00f3n clave o anuncios especiales, llamando la atenci\u00f3n de los usuarios sobre detalles importantes.<\/p>\n\n\n\n<p>Los cuadros de contenido son adecuados para mostrar secciones de llamada a la acci\u00f3n, testimonios, rese\u00f1as y caracter\u00edsticas clave de productos o servicios. Hay varias formas de crear cuadros de contenido en los sitios web de WordPress.<\/p>\n\n\n\n<p>En el siguiente escrito de este art\u00edculo, le mostraremos tres m\u00e9todos pr\u00e1cticos de c\u00f3mo crear cajas de contenido en WordPress. Qu\u00e9date con nosotros hasta el final.<\/p>\n\n\n<div class=\"wp-block-tableberg-wrapper wp-block-tableberg-table\" >\n\t\t\t<div class=\"tableberg-table-wrapper\" style=\"border-color: #abb8c3; \">\n\t\t\t\t<table class = \"has-inner-border\" style=\"border-spacing: 0 0; --tableberg-inner-border-top: none; --tableberg-inner-border-right: 1px solid #abb8c3; --tableberg-inner-border-bottom: 1px solid #abb8c3; --tableberg-inner-border-left: none; --tableberg-inner-border-top-first: 1px solid #abb8c3; --tableberg-inner-border-left-first: 1px solid #abb8c3; \" data-tableberg-header=\"converted\" data-tableberg-footer=\"\" data-tableberg-responsive data-tableberg-rows=\"4\" data-tableberg-cols=\"3\" data-tableberg-mobile-width=\"700\" data-tableberg-mobile-mode=\"stack\" data-tableberg-mobile-direction=\"row\" data-tableberg-mobile-count=\"1\" data-tableberg-mobile-header=\"1\" ><colgroup><col style=\"width: 33.333333333333%; min-width: 33.333333333333%; \"\/><col style=\"width: 33.333333333333%; min-width: 33.333333333333%; \"\/><col style=\"width: 33.333333333333%; min-width: 33.333333333333%; \"\/><\/colgroup><tbody><tr class=\"tableberg-header\" style=\"\">\n<th data-tableberg-row=\"0\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p>M\u00e9todo<\/p>\n<\/div><\/th>\n\n<th data-tableberg-row=\"0\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p>Plugin<\/p>\n<\/div><\/th>\n\n<th data-tableberg-row=\"0\" data-tableberg-col=\"2\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p>Vista previa<\/p>\n<\/div><\/th>\n<\/tr><tr class=\"tableberg-odd-row\" style=\"\">\n<td data-tableberg-row=\"1\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-e6a8e2ba9683099d6dff8d7bf30e4e6f\" style=\"color:#671feb\"><a href=\"#Using-the-Columns-Block\">Uso del bloque de columnas<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"1\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center\">No es necesario<\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"1\" data-tableberg-col=\"2\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \"><figure class=\"wp-block-tableberg-image tableberg-image-center size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-Box-using-the-Columns-Block.png\" alt=\"\" class=\"wp-image-1\" style=\"width: 200px;border-top:  ;border-right:  ;border-bottom:  ;border-left:  ;\" \/><\/figure><\/div><\/td>\n<\/tr><tr class=\"tableberg-even-row\" style=\"\">\n<td data-tableberg-row=\"2\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-86045b5d02e709189188f7a38d01267f\" style=\"color:#671feb\"><a href=\"#Using-the-Tableberg-Block\">Uso del bloque Tableberg<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"2\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-320d99aea727b6d31c1ea1b4e8be13e5\" style=\"color:#671feb\"><a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tableberg<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"2\" data-tableberg-col=\"2\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \"><figure class=\"wp-block-tableberg-image tableberg-image-center size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-Box-using-the-Tableberg-Plugin.png\" alt=\"\" class=\"wp-image-1\" style=\"width: 200px;border-top:  ;border-right:  ;border-bottom:  ;border-left:  ;\" \/><\/figure><\/div><\/td>\n<\/tr><tr class=\"tableberg-odd-row\" style=\"\">\n<td data-tableberg-row=\"3\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-c14ddc11fcd1d98d761080ec059ae1db\" style=\"color:#671feb\"><a href=\"#Using-the-Styled-List-Block\">Uso del bloque de lista estilizada<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"3\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-d58cb3b3f80d24b68f17ea7a536e0e5d\" style=\"color:#671feb\"><a href=\"https:\/\/wordpress.org\/plugins\/ultimate-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bloques definitivos<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"3\" data-tableberg-col=\"2\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \"><figure class=\"wp-block-tableberg-image tableberg-image-center size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-Boxes-using-the-Ultimate-Blocks-Plugin.png\" alt=\"\" class=\"wp-image-1\" style=\"width: 200px;border-top:  ;border-right:  ;border-bottom:  ;border-left:  ;\" \/><\/figure><\/div><\/td>\n<\/tr><\/tbody><\/table>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"0-method-1-using-the-columns-block\">M\u00e9todo 1: Utilizar el bloque de columnas<\/h2>\n\n\n\n<p>Puede crear y dise\u00f1ar una caja de contenido de nivel b\u00e1sico utilizando el bloque Columnas predeterminado de WordPress. Siga los pasos que se explican a continuaci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-step-01-add-the-columns-block-to-the-editor\">Paso 01: A\u00f1adir el Bloque de Columnas al Editor<\/h3>\n\n\n\n<p>Encuentra el <strong>Bloque de columnas<\/strong> de la biblioteca de bloques de Gutenberg pulsando la tecla <strong>Bot\u00f3n m\u00e1s (+)<\/strong> y a\u00f1\u00e1delo a tu editor.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block.webp\" alt=\"A\u00f1ada el bloque Columnas a su editor\" class=\"wp-image-435\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Seleccione la columna de una celda entre las opciones disponibles.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-single-cell-column-layout.png\" alt=\"Seleccione el dise\u00f1o de columna de celda \u00fanica\" class=\"wp-image-1629\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-single-cell-column-layout.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-single-cell-column-layout-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-single-cell-column-layout-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-single-cell-column-layout-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-step-02-add-content-blocks-to-the-column\">Paso 02: A\u00f1adir bloques de contenido a la columna<\/h3>\n\n\n\n<p>El bloque Columnas te permitir\u00e1 a\u00f1adir otros bloques tambi\u00e9n dentro de \u00e9l. Puede a\u00f1adir cualquier bloque que desee para curar su contenido.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-Blocks-to-the-Column.png\" alt=\"A\u00f1adir bloques de contenido a la columna\" class=\"wp-image-1630\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-Blocks-to-the-Column.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-Blocks-to-the-Column-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-Blocks-to-the-Column-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-Blocks-to-the-Column-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Haga clic en el bot\u00f3n <strong>icono m\u00e1s (+)<\/strong> en el bloque de columna. Se abrir\u00e1 la biblioteca de bloques de Gutenberg, desde la que podr\u00e1s elegir y a\u00f1adir el bloque <strong>bloque de p\u00e1rrafos<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Paragraph-block-to-the-columns-block.png\" alt=\"A\u00f1adir el bloque P\u00e1rrafo al bloque Columnas\" class=\"wp-image-1631\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Paragraph-block-to-the-columns-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Paragraph-block-to-the-columns-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Paragraph-block-to-the-columns-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Paragraph-block-to-the-columns-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Podemos ver que ya hemos a\u00f1adido contenido de texto al bloque de columna. Despu\u00e9s de eso, puedes a\u00f1adir m\u00e1s bloques a las columnas como quieras. Supongamos que vamos a a\u00f1adir el bloque Imagen.<\/p>\n\n\n\n<p>Haga clic en el bot\u00f3n <strong>Icono de columnas<\/strong> en la barra de herramientas. Pulse el bot\u00f3n <strong>icono m\u00e1s (+)<\/strong>. Busque y seleccione el <strong>Bloque de im\u00e1genes<\/strong> de la biblioteca.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-to-the-columns-block.png\" alt=\"A\u00f1adir el bloque de im\u00e1genes al bloque de columnas\" class=\"wp-image-1632\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-to-the-columns-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-to-the-columns-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-to-the-columns-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-to-the-columns-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Puede ver que hemos a\u00f1adido una imagen al bloque de columnas.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Image-added-to-the-columns-block.png\" alt=\"Imagen a\u00f1adida al bloque de columnas\" class=\"wp-image-1633\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Image-added-to-the-columns-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Image-added-to-the-columns-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Image-added-to-the-columns-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Image-added-to-the-columns-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-step-03-customize-the-entire-columns-block\">Paso 03: Personalizar todo el bloque de columnas<\/h3>\n\n\n\n<p><strong>Seleccionar toda la secci\u00f3n de la columna<\/strong> haciendo clic en el icono de columna de la barra de herramientas. Vaya a la columna <strong>Ficha Configuraci\u00f3n<\/strong>. Puede ajustar el <strong>Anchura<\/strong> de la columna de la opci\u00f3n correspondiente.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Entire-Columns-Block.png\" alt=\"Personalizar todo el bloque de columnas\" class=\"wp-image-1634\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Entire-Columns-Block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Entire-Columns-Block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Entire-Columns-Block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Entire-Columns-Block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>A continuaci\u00f3n <strong>Ficha Estilos<\/strong>. Tendr\u00e1s opciones para modificar el color del texto, el color de fondo, la tipograf\u00eda y las dimensiones del bloque.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-column-block.png\" alt=\"Estilizar el bloque de columnas\" class=\"wp-image-1635\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-column-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-column-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-column-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-column-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Desplaz\u00e1ndose hacia abajo en la secci\u00f3n, obtendr\u00e1 m\u00e1s opciones para a\u00f1adir <strong>espacio entre bloques<\/strong> y <strong>frontera<\/strong> al bloque de columnas.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-block-spacing-and-border-to-the-columns-block.png\" alt=\"A\u00f1adir espaciado de bloque y borde al bloque de columnas\" class=\"wp-image-1636\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-block-spacing-and-border-to-the-columns-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-block-spacing-and-border-to-the-columns-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-block-spacing-and-border-to-the-columns-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-block-spacing-and-border-to-the-columns-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_7ef4228f-ed3e-4329-8d24-eec03fe9aa6e\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 100%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 2px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"4-method-2-using-the-tableberg-plugin\">M\u00e9todo 2: Uso del plugin TableBerg<\/h2>\n\n\n\n<p>TableBerg es un potente plugin constructor de tablas que puede potenciar la soluci\u00f3n de construcci\u00f3n de tablas por defecto de WordPress. Tambi\u00e9n puede crear atractivas cajas de contenido con el plugin. Veamos c\u00f3mo hacerlo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-step-01-install-and-activate-the-tableberg-plugin\">Paso 01: Instalar y activar el plugin TableBerg<\/h3>\n\n\n\n<p>Como en el m\u00e9todo anterior, vaya a <strong>Plugins &gt; A\u00f1adir nuevo plugin<\/strong>. Encuentra el <strong>Plugin TableBerg<\/strong> escribiendo su nombre en el cuadro de b\u00fasqueda. <strong>Instale<\/strong> y <strong>activar<\/strong> eso.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-TableBerg-plugin.png\" alt=\"Instalar y activar el plugin TableBerg\" class=\"wp-image-156\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-TableBerg-plugin.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-TableBerg-plugin-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-TableBerg-plugin-1024x523.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-TableBerg-plugin-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-step-02-add-the-tableberg-block-to-the-editor\">Paso 02: A\u00f1adir el bloque TableBerg al editor<\/h3>\n\n\n\n<p>El plugin viene con un bloque llamado TableBerg. A\u00f1\u00e1delo al editor.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp\" alt=\"Busca y a\u00f1ade el bloque TableBerg a tu editor de Gutenberg\" class=\"wp-image-481\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Si piensa en construir una tabla, puede definir aqu\u00ed el n\u00famero de filas y columnas como en el bloque de tabla por defecto.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table.webp\" alt=\"Definir columna y fila de tabla\" class=\"wp-image-1031\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Pero selecciona la fila 1 y la columna 0 mientras creamos una caja de contenido. Usted puede ver el dise\u00f1o se ha creado al instante.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box.png\" alt=\"A\u00f1adir contenido al cuadro TableBerg\" class=\"wp-image-1645\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7-step-03-add-content-to-the-tableberg-box\">Paso 03: A\u00f1adir contenido al cuadro TableBerg<\/h3>\n\n\n\n<p>TableBerg le permite a\u00f1adir diferentes tipos de contenido a sus filas y columnas mediante la adici\u00f3n de bloques de contenido.<\/p>\n\n\n\n<p>Una vez que coloques el cursor sobre la casilla, ver\u00e1s que aparece la opci\u00f3n de bloqueo en la esquina inferior derecha.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1.png\" alt=\"A\u00f1adir contenido al cuadro TableBerg\" class=\"wp-image-1646\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Selecciona uno a uno los bloques que quieras a\u00f1adir a la caja para curar el contenido que desees. En primer lugar, vamos a a\u00f1adir el bloque de imagen.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block.png\" alt=\"A\u00f1adir el bloque de imagen\" class=\"wp-image-1647\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>A continuaci\u00f3n, puede ver que hemos a\u00f1adido texto descriptivo sobre el producto. Hemos a\u00f1adido y utilizado el <strong>Bloque de p\u00e1rrafos<\/strong> por esto.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-paragraph-to-the-block.png\" alt=\"A\u00f1adir p\u00e1rrafo al bloque\" class=\"wp-image-1648\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-paragraph-to-the-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-paragraph-to-the-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-paragraph-to-the-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-paragraph-to-the-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Por \u00faltimo, hemos a\u00f1adido un bot\u00f3n CTA.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-a-CTA-button-to-the-TableBerg-box.png\" alt=\"A\u00f1adir un bot\u00f3n CTA al cuadro TableBerg\" class=\"wp-image-1649\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-a-CTA-button-to-the-TableBerg-box.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-a-CTA-button-to-the-TableBerg-box-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-a-CTA-button-to-the-TableBerg-box-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-a-CTA-button-to-the-TableBerg-box-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"8-step-04-customize-the-tableberg-box\">Paso 04: Personalizar el cuadro TableBerg<\/h3>\n\n\n\n<p>Puede personalizar individualmente cada bloque que haya a\u00f1adido al cuadro TableBerg. Despu\u00e9s, puede personalizar y estilizar todo el cuadro TableBerg.<\/p>\n\n\n\n<p>No estamos mostrando c\u00f3mo personalizar el bloque individual, ya que har\u00eda el tutorial muy largo. Puede verlo en nuestra p\u00e1gina de documentaci\u00f3n.<\/p>\n\n\n\n<p>Seleccione todo el cuadro haciendo clic en el icono TableBerg de la barra de herramientas.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-Settings-of-the-TableBerg-Box.png\" alt=\"Personalizar la configuraci\u00f3n del cuadro TableBerg\" class=\"wp-image-1650\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-Settings-of-the-TableBerg-Box.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-Settings-of-the-TableBerg-Box-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-Settings-of-the-TableBerg-Box-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-Settings-of-the-TableBerg-Box-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>En la pesta\u00f1a Configuraci\u00f3n, puede establecer la anchura deseada para la caja.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-table-width.png\" alt=\"Personalizar el ancho de la tabla\" class=\"wp-image-1651\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-table-width.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-table-width-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-table-width-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-table-width-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Desde el <strong>Ficha Estilos<\/strong>puede personalizar el color de fondo, el relleno, el margen y el espacio de la caja.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"655\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-content-box.webp\" alt=\"Personalizar el cuadro de contenido\" class=\"wp-image-1652\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-content-box.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-content-box-300x154.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-content-box-1024x524.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-content-box-768x393.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>As\u00ed, puede crear un cuadro contextual con el plugin TableBerg.<\/p>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_2e72e3e8-3320-48be-b190-44b2a8e835a7\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 100%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 2px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"9-method-3-using-the-ultimate-blocks-plugin\">M\u00e9todo 3: Utilizar el plugin Ultimate Blocks<\/h2>\n\n\n\n<p>Ultimate Blocks es un prometedor plugin de marketing de contenidos con m\u00e1s de 25 bloques personalizados para potenciar tu editor Gutenberg. Tiene varios bloques impresionantes por el cual puede crear m\u00e1s cajas de contenido de buen aspecto en su sitio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"10-step-01-install-and-activate-the-ultimate-blocks-plugin\">Paso 01: Instalar y activar el plugin Ultimate Blocks<\/h3>\n\n\n\n<p>Ir a <strong>Plugins &gt; A\u00f1adir nuevo plugin<\/strong>. Encuentra el <strong>Plugin Ultimate Blocks<\/strong> escribiendo su nombre en el cuadro de b\u00fasqueda. <strong>Instale<\/strong> y <strong>activar<\/strong> una vez que el plugin aparece a continuaci\u00f3n.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"655\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin.webp\" alt=\"Instale y active el plugin Ultimate Blocks\" class=\"wp-image-456\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin-300x154.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin-1024x524.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin-768x393.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"11-step-02-add-the-styled-box-block-of-the-plugin-to-your-gutenberg-editor\">Paso 02: A\u00f1ade el bloque de caja con estilo del plugin a tu editor de Gutenberg<\/h3>\n\n\n\n<p>El plugin Ultimate Blocks incluye un bloque espec\u00edfico denominado <strong>Caja estilizada<\/strong> para crear cajas de contenido. B\u00fascalo y a\u00f1\u00e1delo al editor.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Styled-Block-of-the-Plugin-to-Your-Gutenberg-Editor.png\" alt=\"A\u00f1ade el bloque con estilo del plugin a tu editor de Gutenberg\" class=\"wp-image-1637\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Styled-Block-of-the-Plugin-to-Your-Gutenberg-Editor.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Styled-Block-of-the-Plugin-to-Your-Gutenberg-Editor-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Styled-Block-of-the-Plugin-to-Your-Gutenberg-Editor-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Styled-Block-of-the-Plugin-to-Your-Gutenberg-Editor-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>El bloque le ofrece cuatro tipos de cajas. Elija el que m\u00e1s le guste para mostrar su mensaje. Cada uno tiene un conjunto \u00fanico de funcionalidades.<\/p>\n\n\n\n<p>Para el tutorial, seleccionaremos el <strong>Caja de caracter\u00edsticas<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Styled-boxes.png\" alt=\"Cajas estilizadas\" class=\"wp-image-1638\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Styled-boxes.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Styled-boxes-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Styled-boxes-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Styled-boxes-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>El cuadro de caracter\u00edsticas te permite a\u00f1adir una imagen, un t\u00edtulo y una descripci\u00f3n. Espero que puedas hacerlo t\u00fa mismo.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Things-you-can-add-to-the-feature-box.png\" alt=\"Cosas que puede a\u00f1adir al cuadro de caracter\u00edsticas\" class=\"wp-image-1639\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Things-you-can-add-to-the-feature-box.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Things-you-can-add-to-the-feature-box-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Things-you-can-add-to-the-feature-box-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Things-you-can-add-to-the-feature-box-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"12-step-03-add-content-to-the-block\">Paso 03: A\u00f1adir contenido al bloque<\/h3>\n\n\n\n<p>Por defecto, el bloque permite mostrar un producto y describir sus caracter\u00edsticas. Pero puedes a\u00f1adir y mostrar varios productos con el bloque. <strong>Seleccione el tipo de columna<\/strong> desea definir cu\u00e1ntos productos desea mostrar.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"652\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-column-type.png\" alt=\"Seleccione el tipo de columna\" class=\"wp-image-1640\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-column-type.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-column-type-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-column-type-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-column-type-768x391.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Ahora, a\u00f1ade contenido a las opciones que veas dentro de la ventana <strong>Bloque Styled Box<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-content-to-the-styled-box-block.png\" alt=\"A\u00f1adir contenido al bloque de caja estilizada\" class=\"wp-image-1641\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-content-to-the-styled-box-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-content-to-the-styled-box-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-content-to-the-styled-box-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-content-to-the-styled-box-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Puede ver que hemos a\u00f1adido contenido al bloque.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-added-to-the-styled-box-block.png\" alt=\"Contenido a\u00f1adido al bloque de caja estilizada\" class=\"wp-image-1642\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-added-to-the-styled-box-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-added-to-the-styled-box-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-added-to-the-styled-box-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-added-to-the-styled-box-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"13-step-04-customize-and-stylize-the-styled-box-block\">Paso 04: Personalizar y dar estilo al bloque de caja estilizada<\/h3>\n\n\n\n<p>Ven al <strong>Ficha Configuraci\u00f3n<\/strong>. Desde el <strong>Seleccione la opci\u00f3n Modo<\/strong>, puede cambiar el cuadro de caracter\u00edsticas por otros cuadros de estilo como los que se muestran arriba, como el cuadro de notificaci\u00f3n, el de bordes y el de n\u00fameros.<\/p>\n\n\n\n<p>Despu\u00e9s, desde el <strong>Opci\u00f3n de control de respuesta<\/strong>puede ocultar el bloqueo de un tipo de dispositivo concreto.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Styled-Box-block.png\" alt=\"Personalizar el bloque Styled Box\" class=\"wp-image-1643\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Styled-Box-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Styled-Box-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Styled-Box-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Styled-Box-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>A continuaci\u00f3n <strong>Ficha Estilos<\/strong>. Puede modificar el <strong>Acolchado<\/strong> y <strong>Margen<\/strong> del bloque desde esta pesta\u00f1a.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Styled-box-block.png\" alt=\"Estilizar el bloque Styled box\" class=\"wp-image-1644\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Styled-box-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Styled-box-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Styled-box-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Styled-box-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>As\u00ed, puede crear una caja de contenido utilizando el plugin Ultimate Blocks.<\/p>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_61102040-edd2-4f4b-9e13-dd2f6cb65bdb\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 100%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 2px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"14-finishing-notes\">Notas finales<\/h3>\n\n\n\n<p>Ultimate Blocks y TableBerg son dos plugins multifuncionales que pretenden revolucionar el sistema Gutenberg, permitiendo a los usuarios crear contenidos sofisticados f\u00e1cilmente. <\/p>\n\n\n\n<p>TableBerg todav\u00eda est\u00e1 en proceso de desarrollo y promete ofrecer muchas funciones avanzadas muy pronto. Por otro lado, Ultimate Blocks ya es un plugin popular utilizado por m\u00e1s de 60.000 sitios web de todo el mundo.<\/p>\n\n\n\n<p>Si tiene alguna pregunta al respecto, no dude en hac\u00e9rnosla en cualquier momento a trav\u00e9s del cuadro de comentarios.<\/p>\n\n\n\n<p><strong>Lea tambi\u00e9n: <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/tableberg.com\/es\/los-mejores-plugins-para-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Los mejores plugins de WordPress para cajas<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/tableberg.com\/es\/como-crear-cuadros-de-texto-en-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">C\u00f3mo crear cuadros de texto en WordPress<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/tableberg.com\/es\/como-crear-cuadros-de-informacion-en-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">C\u00f3mo crear impresionantes cuadros de informaci\u00f3n en WordPress<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>A content box is a visually distinct container by which you can frame specific content that makes it stand out from the rest. It helps you highlight key feature information or special announcements, drawing users\u2019 attention to important details. Content boxes are suitable to showcase call-to-action sections, testimonials, reviews, and key features of products or [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":8203,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[87,38],"class_list":["post-1612","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-content-box","tag-content-presentation"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/How-to-Create-Content-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\/1612","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=1612"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/1612\/revisions"}],"predecessor-version":[{"id":8206,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/1612\/revisions\/8206"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media\/8203"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media?parent=1612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/categories?post=1612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/tags?post=1612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}