Un cuadro de iconos suele consistir en un pequeño gráfico acompañado de un breve texto. Con los recuadros de iconos, puede resaltar aspectos como características clave, servicios, ventajas y ofertas de una forma visualmente cautivadora y significativa.
También puede utilizar cuadros de iconos para mostrar testimonios, llamadas a la acción, pasos del proceso, etc. Tableberg es un versátil plugin constructor de tablas. Puede crear cuadros de icono magnífico y atractivo fácilmente con el plugin.
En las siguientes partes de este artículo, te explicaremos cómo añadir cajas de iconos en WordPress con el plugin. Obtener el plugin haciendo clic en los enlaces de abajo.
Cree bonitas mesas
Con el editor de bloques
Paso 01: Añadir el bloque Tableberg al editor
Añada el Bloque Tableberg a su editor como lo haría con cualquier bloque de Gutenberg.
Fije el número de filas y columnas según el número de cuadros de iconos que desee crear.
Por ejemplo, en este tutorial, crearemos tres cajas de iconos. Por lo tanto, vamos a establecer 3 columnas y 1 fila.
Puedes ver el número de cajas que se han creado. A continuación, vamos a añadir contenido para crear cajas de iconos.
Paso 02: Añadir un Icono a una Caja/Celda
Tableber te permite añadir varios elementos a sus celdas mediante los cuales puedes hacer las celdas de la tabla super atractivas. Los explicaremos en esta sección.
Añadir un color de fondo a las celdas
Seleccionar toda la tabla mediante haciendo clic en el Icono Tableberg en la barra de herramientas. A continuación, vaya a la pestaña Ficha Estilos. Debajo de la pestaña, verás las opciones de color. Usando la opción adecuada, establece un fondo para las celdas de la tabla.
Nota: Debe establecer el color de fondo al principio, ya que todos los elementos de la caja de la tabla se diseñarán basándose en él.
Añadir un icono a un cuadro/celda
Puedes añadir bloques dentro de las celdas de la tabla como el editor de bloques de Gutenberg. Click the plus (+) icon en una celda. Busque y añada el Bloque de iconos a la célula.
Cambiar y seleccionar un icono
Ir a la Ficha Configuración en la barra lateral derecha mientras mantiene seleccionado el bloque Icono. En esta pestaña, tendrá opciones para aumentar el tamaño del icono, establecer rotacióny cambiar el icono.
Puede seleccionar un icono de la biblioteca de iconos existente o importar uno de su unidad local.
Colorear el icono
Ir a la Ficha Estilos. Ajuste el Color del icono y el Color de fondo.
Efectivamente, la disposición del color de fondo no queda bien, ¿verdad? Lo tenemos cubierto.
Desplácese un poco hacia abajo por debajo de la pestaña Estilos. Verá la pestaña relleno, margen, y radio opciones.
Puede crear un diseño para el color de fondo colocando valores adecuados, como en la imagen siguiente.
Paso 03: Añadir Texto a la Celda/Caja
Ningún cuadro de icono tiene sentido sin contenido de texto. Add the Paragraph block debajo del icono de la celda.
Añadir un título sobre el cuadro de iconos. Siguiente, alinearlo centralmente, seleccione un colory establecer un tamaño para el texto.
Del mismo modo, añada una descripción de la caja de iconos mediante la opción Bloque de párrafos.
Paso 04: Añadir un Botón a la Celda/Caja
Puede dirigir a los usuarios a otra página, documentación o recurso añadiendo un botón. Añada el botón Bloque de botones a la célula.
Después de añadir el botón, añadir una copia CTAcambie su texto y color de fondoy aumentar el tamaño de la copia.
Paso 05: Añadir espacios entre los bloques
La celda parece congestionada, ¿verdad? Es porque no hay suficiente espacio entre los bloques de la celda. Pero puedes resolver este problema fácilmente.
Seleccionar toda la celda. Go to the Ficha Estilos. Desplácese un poco más abajo.
Obtendrás Relleno de celdas y Espacio entre bloques opciones. Utilizando estas opciones, puede crear los espacios necesarios entre estos bloques.
Así pues, su caja de un icono está lista.
Paso 06: Duplicar el cuadro de iconos
Puedes crear manualmente otras cajas de iconos del mismo modo, o puedes duplicar la caja. Tableberg tiene una función muy interesante para duplicar filas y columnas.
Haga clic en el botón [Pro] Editar Tabla de la barra de herramientas. El resto puedes hacerlo tú mismo. Para una guía detallada, explora este post en cómo añadir cuadros de servicio en WordPress. Hemos explicado cómo utilizar esta función en la parte posterior de este post.
Puede ver en la imagen de abajo que hemos duplicado la caja de iconos y cambiado su contenido.
Paso 07: Añadir espacios entre las celdas
Ir a la Ficha Estilos. Desplácese hasta Espacio entre celdas. Esta opción le permite añadir espacio entre las celdas, como en la imagen siguiente.
Paso 08: Eliminar el borde de la celda
En la pestaña Estilos, verá el botón Borde de la mesa y Inner Border opciones. Ajuste las valor del borde a 0 en ambos lugares. Esto eliminará los bordes de las celdas.
Así, puede crear una caja de iconos en WordPress.
¡Cerrando!
Espero que te haya gustado este tutorial. Siguiendo los pasos descritos en esta guía, puedes añadir y personalizar fácilmente cuadros de iconos para alinearlos con tu marca y resaltar eficazmente la información clave.
Antes de irte, tómate unos minutos para aprender cómo formatear tablas en WordPress.
