Los cuadros de información son ahora una herramienta común para los sitios web que necesitan compartir información importante de forma clara y atractiva. Básicamente, si quieres llamar la atención sobre una promoción en particular, dirigir la atención de tu espectador hacia detalles clave y avisos importantes, o animar a tus usuarios hacia CTAs fructíferas, las cajas de información ofrecen una solución sencilla para hacer que tus mensajes destaquen.
Los cuadros de información no sólo desglosan la información importante en secciones más pequeñas y fáciles de leer, sino que también desempeñan un papel importante a la hora de guiar la navegación del usuario. Con la incorporación de cuadros de información, le resultará más fácil guiar a sus visitantes por los puntos esenciales sin abrumarlos y en un formato organizado, limpio y amigable.
Ahora, si estás aquí para leer este artículo, significa que ya estás familiarizado con el concepto de cajas de información o que estás aprendiendo sobre ellas por primera vez. Sin embargo, puede que aún te ronde una pregunta por la cabeza, y es cómo se crea un cuadro de información. Es por eso que hemos preparado una guía paso a paso para guiarte a través de los conceptos básicos de cómo crear cajas de información en WordPress. Aquí, te proporcionaremos dos enfoques diferentes para ayudarte a elegir la opción más adecuada. Así que, ¿a qué esperas? Vayamos directamente a ellos.
Método 1: Utilizar los bloques de columnas
El Bloque Columna del editor Gutenberg es una forma sencilla de crear cuadros de información si quieres hacerlo sin la ayuda de plugins. Te permite organizar el contenido básico en un formato estructurado. A continuación te explicamos cómo configurar un cuadro de información con este método:
Paso 1: Añadir un bloque de columnas al editor
Crea una nueva entrada o página en WordPress y ábrela en el editor Gutenberg. Procede a añadir un Bloque de Columna haciendo clic en el botón Icono "+". y seleccione "Columnas" de las opciones de bloque.
Ahora, elija un diseño con una sola columna o varias columnas, dependiendo de cómo quieras que aparezca el cuadro de información. Para comodidad de los principiantes, hemos elegido una sola columna para crear nuestro cuadro de información.
Paso 2: Añadir diferentes bloques para añadir contenido
A continuación, añada contenido al bloque de columnas para crear un cuadro de información visualmente distinto. Haga clic en el botón Icono "+". para añadir su bloque preferido. Esto, a su vez, te guiará a la biblioteca de bloques de Gutenberg. Por ejemplo, empezamos con una imagen en la parte superior de nuestro cuadro de información. Entonces, busca el bloque Imagen en la biblioteca y selecciónala. Continúa subiendo tu imagen desde la biblioteca multimedia o súbela desde tu dispositivo.
Una vez que haya cargado su imagen, puede ajustar el alineación de su imagen y personalizar el talla de la misma. Puedes alinear la imagen a la izquierda, al centro o a la derecha. Aquí, hemos alineado la imagen en el centro pero manteniendo el mismo tamaño.
Ahora, necesitamos un título adecuado para resaltar nuestra imagen. Para añadir un Rúbrica comience por seleccionar la imagen, lo que abrirá la barra de herramientas, y desde allí, seleccione el bloque padre.
Una vez seleccionado el bloque principal, el botón + icono aparecerá. Entonces, pulsa el icono +, busca el Rúbrica y haga clic en él. Continúe añadiendo los textos en el bloque Título y alinéelos como desee.
Una vez que hayas terminado, repite el procedimiento anterior de añadir bloques. Aquí, hemos añadido un bloque de párrafos y un bloque de botones uno tras otro. En primer lugar, elija el bloque de párrafos y añada el texto necesario. Alinea esos textos como creas necesario.
La siguiente tarea son los botones. Busque los bloques Button de la biblioteca, seleccione el bloque y añada los textos que irán en ese botón.
Una vez que hayas terminado, alinee sus botones la forma que más te guste y luego añadir enlaces a su botón.
Paso 3: Personalizar todo el bloque
Las opciones de personalización le permiten ajustar varios aspectos para conseguir un aspecto pulido. Seleccione su sección completa de la columna haciendo clic en el icono de columna de la barra de herramientas. Ahora, puede empezar su personalización ajustando los parámetros anchura de la columna para asegurarse de que encaja bien en el diseño de su página.
A continuación, pase al Ficha Estilos. Desde aquí, puede elegir el color de los textos, enlaces y fondos; puede modificar tipografía y personalizar el bloque dimensiones.
Si se desplaza más abajo, encontrará la configuración para añadir Espacio entre bloques y Frontera y Sombras.
Hemos cambiado el color del texto y del fondo, modificado el relleno e introducido algunos bordes y radios. Una vez publicado el cuadro de información, tendremos el resultado final.
Método 2: Uso del plugin Tableberg
El plugin Tableberg, utilizado principalmente para crear tablas, también puede aprovecharse para diseñar cuadros de información con un formato estructurado. A continuación se explica cómo crear un cuadro de información con Tableberg:
Paso 1: Instalar y activar el plugin Tableberg
Vaya a su panel de WordPress, navegue hasta Plugins > Añadir nuevo, busque "Tablebergy haga clic en Instalar ahora. Una vez instalado, pulse Activar para activar el plugin.
Paso 2: Crear una nueva tabla
Haga clic en el botón + icono de su editor y busque Tableberg de la biblioteca. Una vez que lo encuentres, haz clic en él.
Ahora, necesitas seleccionar el número de columnas y filas para tu caja de información. Aquí, vamos a crear una caja de una sola columna; por eso hemos seleccionado 1 fila y 1 columna.
Paso 3: Añadir contenido a la tabla
Como hicimos en el primer método, empezaremos añadiendo imágenes en nuestro cuadro de información. Pulsa el botón + iconobusque el Bloque de imágenesy añádela a tus mensajes. A continuación, sube la imagen desde tu dispositivo o biblioteca multimedia.
De nuevo, si necesita algún ajuste en la alineación y el tamaño, haga lo mismo que se muestra en la imagen de abajo.
A continuación, vamos a poner el texto después de la imagen mediante la adición de un Bloque de párrafos. Haz clic en el signo +, busca el bloque de párrafo y añádelo. Si crees necesario algún cambio en la alineación, hazlo.
La última tarea es añadir botones. Selecciona el botón bloque principalencuentre el + iconoBuscar botonesy añádelo al editor.
Una vez que hayas completado esto, añadir texto a sus botones, compruebe el alineaciones de su botón, y añadir enlaces a ella.
Paso 4: Personalice su mesa
Después de configurar la caja Tableberg con su contenido, puede proceder a personalizar y dar estilo a la caja en su conjunto. Pero ten en cuenta que también puedes personalizar cada bloque individual que hemos utilizado aquí. Por ahora, nos ceñiremos a la tabla completa.
En primer lugar, haga clic en el botón Icono Tableberg de la barra de herramientas para seleccionar todo el cuadro. A continuación, deslícese hasta el Ficha Configuración y ajuste el anchura de la caja para que se ajuste al diseño de su página o entrada.
A continuación, pase al Ficha Estilos para personalizar la caja".s color de fondo, relleno, margen y espacio.
Si se desplaza más abajo, encontrará más opciones para cambiar el tabla, borde interior y de columna, color de fuente global, etc.
Así es como puedes hacer un cuadro de información perfecto. Si necesita más de un cuadro de información, sólo tiene que modificar el número de columnas y filas y seguir el mismo procedimiento.
Conclusión
Y ahí lo tiene, su cuadro de información Tableberg con un estilo perfecto. Con unos pocos retoques, su contenido puede pasar de ordinario a llamativo, atrayendo la atención justo donde importa. Las posibilidades de personalización son infinitas, así que deja volar tu imaginación. Experimente con los colores, juegue con los bordes y añada toques finales que hagan de cada cuadro una delicia visual. Deje que sus cuadros de información no sólo transmitan información, sino que también añadan un toque de estilo a todo su sitio web.