Como hemos dicho repetidamente en muchas de las entradas de nuestro blog, Tableberg es un plugin versátil. No es sólo un plugin constructor de tablas; también puedes usarlo para proyectos de diseño web multipropósito. Por ejemplo, cuadros de características, secciones de llamada a la acción, infografías, procesos paso a paso y mucho más.
En este post tutorial, le mostraremos cómo mostrar los pasos del proceso en WordPress para que pueda mostrar guías paso a paso a los visitantes de su web. ¡Empieza ya!
- Paso 01: Añadir el bloque Tableberg al editor
- Paso 02: Establecer el color de fondo para filas individuales
- Paso 03: Enumerar los números de paso del proceso
- Paso 04: Escribir los títulos de los pasos y sus descripciones
- Paso 05: Añadir imágenes a las celdas correspondientes
- Paso 06: Añada su información de contacto
- Paso 07: Personalizar el borde de la tabla
- Paso 08: Vista previa de los pasos del proceso
- Conclusión
Paso 01: Añadir el bloque Tableberg al editor
El plugin Tableberg añade un bloque denominado Tableberg a la biblioteca de bloques. Añádalo al editor pulsando el botón icono más (+).
Establezca el número de filas y columnas que necesita para mostrar el proceso. Para este tutorial, establecemos 3*9 para columnas y filas.
La tabla está lista. A continuación, añadiremos contenido a sus filas y columnas para mostrar los pasos del proceso.
Paso 02: Establecer el color de fondo para filas individuales
Tableberg le permite configurar el color de las filas individualmente. Para ello seleccionar una fila e ir a la ficha Estilos. A continuación, haga clic en [PRO] Color de fondo de fila. Espero que puedas hacer el resto.
Puede ver que hemos establecido diferentes colores para las filas individualmente. Como el color y la estilización de todos los demás elementos dependerán del fondo, hemos establecido los colores de las filas de antemano.
Paso 03: Enumerar los números de paso del proceso
Enumera los números de los pasos que cubrirás en el proceso. Haz la texto en negrita, alinearlos en el centro, fija a color del textoy aumentar su tamaño.
Paso 04: Escribir los títulos de los pasos y sus descripciones
Ahora, empieza a escribir los títulos y las descripciones de los pasos en cada columna. Puedes utilizar dos bloques de párrafos, uno para el título y otro para la descripción. A continuación, establece el color del texto en blanco.
Puede hacer que el tamaño del texto del título sea ligeramente mayor que el del texto de la descripción para que sea fácil distinguirlos por separado.
Paso 05: Añadir imágenes a las celdas correspondientes
La última columna está reservada para añadir imágenes. Vamos a añadir imágenes a las celdas de la columna correspondiente a las filas de la tabla.
Por lo tanto, añada el bloque de imagen by clicking the icono más (+) a la celda correspondiente. Puede cargar imágenes, ya sea desde la unidad local o desde su biblioteca multimedia.
Puede ver que hemos añadido una imagen a la celda. Puede aumentar el tamaño de la imagen arrastrando el icono circular mientras lo mantiene pulsado simultáneamente.
Del mismo modo, complete añadiendo imágenes a todas las demás celdas de la última columna manteniéndolas relevantes para el contenido.
Paso 06: Añada su información de contacto
Del mismo modo, utilizando el bloque de párrafo, añada información de contacto para que los visitantes y usuarios puedan ponerse en contacto con usted para solicitar ayuda.
Ahora, añada el Bloque Lista estilizada a la última fila de la tabla.
Seleccione un icono que represente el sitio web. Junto al icono, escriba la dirección de su sitio web.
Paso 07: Personalizar el borde de la tabla
Tableberg le permite eliminar, colorear y modificar la anchura del borde interior y exterior de la mesa. Configurando adecuadamente estas opciones, podrá embellecer aún más su tabla.
Ir a la Ficha Estilos. Desplácese hacia abajo por la pestaña y llegue a la Sección fronteriza. En el tutorial de hoy, hemos eliminado los bordes exteriores y de columna, excepto el borde de fila. Hemos establecido el color blanco y 1 px de ancho para los bordes de fila.
Paso 08: Vista previa de los pasos del proceso
Accede a la página de vista previa. Comprueba si tu diseño se muestra perfectamente. Hemos mostrado la mayor parte de la imagen que se puede ver en la pantalla de abajo.
Conclusión
Tableberg es un emocionante y prometedor plugin versátil para la creación de tablas. Además de tablas, con el plugin puede crear varias secciones web magníficas. Por ejemplo, puede explorar cómo añadir cuadros de función en WordPress.
Cubriremos más entradas de blog mostrando más cosas extraordinarias y diseños que puedes crear con el plugin. Así que, quédate con nosotros y seguir explorando nuestros blogs para hacer crecer su base de conocimientos.
