Cómo crear cajas de contenido en WordPress

Una caja de contenido es un contenedor visualmente distinto mediante el cual puede enmarcar contenido específico que lo haga destacar del resto. Le ayuda a destacar información clave o anuncios especiales, llamando la atención de los usuarios sobre detalles importantes.

Los cuadros de contenido son adecuados para mostrar secciones de llamada a la acción, testimonios, reseñas y características clave de productos o servicios. Hay varias formas de crear cuadros de contenido en los sitios web de WordPress.

En el siguiente escrito de este artículo, le mostraremos tres métodos prácticos de cómo crear cajas de contenido en WordPress. Quédate con nosotros hasta el final.

Primer método: utilizar el bloque de columnas

Puede crear y diseñar una caja de contenido de nivel básico utilizando el bloque Columnas predeterminado de WordPress. Siga los pasos que se explican a continuación.

Paso 01: Añadir el Bloque de Columnas al Editor

Encuentra el Bloque de columnas de la biblioteca de bloques de Gutenberg pulsando la tecla Botón más (+) y añádelo a tu editor.

Añada el bloque Columnas a su editor

Seleccione la columna de una celda entre las opciones disponibles.

Seleccione el diseño de columna de celda única

Paso 02: Añadir bloques de contenido a la columna

El bloque Columnas te permitirá añadir otros bloques también dentro de él. Puede añadir cualquier bloque que desee para curar su contenido.

Añadir bloques de contenido a la columna

Haga clic en el botón icono más (+) en el bloque de columna. Se abrirá la biblioteca de bloques de Gutenberg, desde la que podrás elegir y añadir el bloque bloque de párrafos.

Añadir el bloque Párrafo al bloque Columnas

Podemos ver que ya hemos añadido contenido de texto al bloque de columna. Después de eso, puedes añadir más bloques a las columnas como quieras. Supongamos que vamos a añadir el bloque Imagen.

Haga clic en el botón Icono de columnas en la barra de herramientas. Pulse el botón icono más (+). Busque y seleccione el Bloque de imágenes de la biblioteca.

Añadir el bloque de imágenes al bloque de columnas

Puede ver que hemos añadido una imagen al bloque de columnas.

Imagen añadida al bloque de columnas

Paso 03: Personalizar todo el bloque de columnas

Seleccionar toda la sección de la columna haciendo clic en el icono de columna de la barra de herramientas. Vaya a la columna Ficha Configuración. Puede ajustar el Anchura de la columna de la opción correspondiente.

Personalizar todo el bloque de columnas

A continuación Ficha Estilos. Tendrás opciones para modificar el color del texto, el color de fondo, la tipografía y las dimensiones del bloque.

Estilizar el bloque de columnas

Desplazándose hacia abajo en la sección, obtendrá más opciones para añadir espacio entre bloques y frontera al bloque de columnas.

Añadir espaciado de bloque y borde al bloque de columnas

Segundo método: utilizar el plugin Ultimate Blocks

Ultimate Blocks es un prometedor plugin de marketing de contenidos con más de 25 bloques personalizados para potenciar tu editor Gutenberg. Tiene varios bloques impresionantes por el cual puede crear más cajas de contenido de buen aspecto en su sitio.

Paso 01: Instalar y activar el plugin Ultimate Blocks

Ir a Plugins > Añadir nuevo plugin. Encuentra el Plugin Ultimate Blocks escribiendo su nombre en el cuadro de búsqueda. Instale y activar una vez que el plugin aparece a continuación.

Instale y active el plugin Ultimate Blocks

Paso 02: Añade el bloque de caja con estilo del plugin a tu editor de Gutenberg

El plugin Ultimate Blocks incluye un bloque específico denominado Caja estilizada para crear cajas de contenido. Búscalo y añádelo al editor.

Añade el bloque con estilo del plugin a tu editor de Gutenberg

El bloque le ofrece cuatro tipos de cajas. Elija el que más le guste para mostrar su mensaje. Cada uno tiene un conjunto único de funcionalidades.

Para el tutorial, seleccionaremos el Caja de características.

Cajas estilizadas

El cuadro de características te permite añadir una imagen, un título y una descripción. Espero que puedas hacerlo tú mismo.

Cosas que puede añadir al cuadro de características

Paso 03: Añadir contenido al bloque

Por defecto, el bloque permite mostrar un producto y describir sus características. Pero puedes añadir y mostrar varios productos con el bloque. Seleccione el tipo de columna desea definir cuántos productos desea mostrar.

Seleccione el tipo de columna

Ahora, añade contenido a las opciones que veas dentro de la ventana Bloque Styled Box.

Añadir contenido al bloque de caja estilizada

Puede ver que hemos añadido contenido al bloque.

Contenido añadido al bloque de caja estilizada

Paso 04: Personalizar y dar estilo al bloque de caja estilizada

Ven al Ficha Configuración. Desde el Seleccione la opción Modo, puede cambiar el cuadro de características por otros cuadros de estilo como los que se muestran arriba, como el cuadro de notificación, el de bordes y el de números.

Después, desde el Opción de control de respuestapuede ocultar el bloqueo de un tipo de dispositivo concreto.

Personalizar el bloque Styled Box

A continuación Ficha Estilos. Puede modificar el Acolchado y Margen del bloque desde esta pestaña.

Estilizar el bloque Styled box

Así, puede crear una caja de contenido utilizando el plugin Ultimate Blocks.

Tercer método: Utilizar el plugin TableBerg

TableBerg es un potente plugin constructor de tablas que puede potenciar la solución de construcción de tablas por defecto de WordPress. También puede crear atractivas cajas de contenido con el plugin. Veamos cómo hacerlo.

Paso 01: Instalar y activar el plugin TableBerg

Como en el método anterior, vaya a Plugins > Añadir nuevo plugin. Encuentra el Plugin TableBerg escribiendo su nombre en el cuadro de búsqueda. Instale y activar eso.

Instalar y activar el plugin TableBerg

Paso 02: Añadir el bloque TableBerg al editor

El plugin viene con un bloque llamado TableBerg. Añádelo al editor.

Busca y añade el bloque TableBerg a tu editor de Gutenberg

Si piensa en construir una tabla, puede definir aquí el número de filas y columnas como en el bloque de tabla por defecto.

Definir columna y fila de tabla

Pero selecciona la fila 1 y la columna 0 mientras creamos una caja de contenido. Usted puede ver el diseño se ha creado al instante.

Añadir contenido al cuadro TableBerg

Paso 03: Añadir contenido al cuadro TableBerg

TableBerg le permite añadir diferentes tipos de contenido a sus filas y columnas mediante la adición de bloques de contenido.

Una vez que coloques el cursor sobre la casilla, verás que aparece la opción de bloqueo en la esquina inferior derecha.

Añadir contenido al cuadro TableBerg

Selecciona uno a uno los bloques que quieras añadir a la caja para curar el contenido que desees. En primer lugar, vamos a añadir el bloque de imagen.

Añadir el bloque de imagen

A continuación, puede ver que hemos añadido texto descriptivo sobre el producto. Hemos añadido y utilizado el Bloque de párrafos por esto.

Añadir párrafo al bloque

Por último, hemos añadido un botón CTA.

Añadir un botón CTA al cuadro TableBerg

Paso 04: Personalizar el cuadro TableBerg

Puede personalizar individualmente cada bloque que haya añadido al cuadro TableBerg. Después, puede personalizar y estilizar todo el cuadro TableBerg.

No estamos mostrando cómo personalizar el bloque individual, ya que haría el tutorial muy largo. Puede verlo en nuestra página de documentación.

Seleccione todo el cuadro haciendo clic en el icono TableBerg de la barra de herramientas.

Personalizar la configuración del cuadro TableBerg

En la pestaña Configuración, puede establecer la anchura deseada para la caja.

Personalizar el ancho de la tabla

Desde el Ficha Estilospuede personalizar el color de fondo, el relleno, el margen y el espacio de la caja.

Personalizar el cuadro de contenido

Así, puede crear un cuadro contextual con el plugin TableBerg.

Notas finales

Ultimate Blocks y TableBerg son dos plugins multifuncionales que pretenden revolucionar el sistema Gutenberg, permitiendo a los usuarios crear contenidos sofisticados fácilmente.

TableBerg todavía está 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ás de 60.000 sitios web de todo el mundo.

Si tiene alguna pregunta al respecto, no dude en hacérnosla en cualquier momento a través del cuadro de comentarios.



El equipo de Tableberg

La oferta anticipada ya está disponible
Este es el texto por defecto para la barra de notificaciones