Cómo crear tu primera tabla en WP Table Builder

Requisitos #

Lo que construirás #

En este tutorial, crearemos una simple tabla de productos con cinco tipos de elementos: una cabecera de texto, una imagen del producto, una lista de características, una calificación de cinco estrellas y un botón de llamada a la acción. Al final, sabrás cómo añadir cualquier elemento a cualquier celda y cómo incorporar la tabla final en cualquier lugar de tu sitio web WordPress.

Paso 1: Abrir el constructor de tablas #

Una vez que WP Table Builder esté instalado y activado, abra el panel de administración de su WordPress. Verá un nuevo Constructor de Tablas WP elemento del menú en la barra lateral administrativa izquierda.

Haga clic sobre el Constructor de Tablas WP menú, luego haga clic Agregar nuevo en el menú desplegable.

O bien, haga clic en Constructor de Tablas WP elemento del menú (1) y luego Agregar nuevo (2) desde la barra lateral secundaria.

Paso 2: Configuración de filas y columnas #

En la pantalla de configuración, introduzca el número de colas (1) y columnas (2) que necesite tu tabla y luego haz clic en Crear nuevo (3).

Puedes añadir o eliminar filas y columnas más adelante, así que no te preocupes por conseguir exactamente esto.

Paso 3: Denéme tu tabla #

Ahora verás el WP Table Builder editor. Escribe un nombre para tu tabla en el campo del título en la parte superior (1). Un nombre claro facilita la búsqueda de las tablas más adelante, cuando tengas muchas de ellas.

Paso 4: Comprender los elementos (versión gratuita vs versión Pro) #

WP Table Builder Tiene dos tipos de elementos:

• Elementos básicos (Gratuito y Pro): Texto, Imagen, Lista, Valoración de estrellas, Botón, HTML personalizado, Código corto
• Elementos ProIcono, icono de texto, lista estilizada, valoración en forma de círculo, cinta, distintivo, barra de progreso

Los elementos básicos están disponibles tanto en la versión gratuita como en la versión Pro. Los elementos de la versión Pro requieren una suscripción. WP Table Builder Pro licencia.

Para añadir cualquier elemento, arráglalo desde la barra lateral izquierda y colócalo en una celda de la tabla.

Paso 5: Agregar texto #

El texto es el elemento más común. Hay dos formas de incorporarlo:

• Arrastrar y soltar: Arrastra el Texto elemento de la barra lateral en una celda.
• Haz clic para escribirHaz clic directamente dentro de cualquier celda vacía y empieza a escribir.

Una vez seleccionado un elemento de texto, la barra lateral izquierda muestra las opciones de estilo:

1. Color de la fuente — color del texto
2. Color del enlace — color de cualquier hipervínculo dentro del texto
3. Tamaño de la fuente — tamaño del texto en píxeles
4. Añadir relleno — espaciado interior
5. Margen — espaciado exterior

También aparece una barra de herramientas flotante encima del texto seleccionado con Italizado, cursivo, subrayado, enlace y alineación controlos.

Pas 6: Agregar una imagen #

Arrastra el Imagen Introduzca el elemento en una celda y luego haga clic Subir Seleccionar una imagen de la biblioteca de medios de WordPress o subir una nueva.

Después de seleccionar la imagen, utilice la barra lateral izquierda para configurarla:

• Página general — ajuste el alineamiento de la imagen (1) y añade texto alternativo (2) para SEO y accesibilidad
• Tab de tamaño — Cambiar la anchura y altura de la imagen
• Sección de enlaces — Haced que la imagen sea clickable añadiendo una URL, y opcionalmente, establezcamos que el enlace se abra en una nueva pestaña mediante Meta de enlace → En blanco

Consejo: Siempre añada texto alternativo a las imágenes de tablas. Esto mejora la accesibilidad y ayuda a los motores de búsqueda a entender su contenido.

Paso 7: Agregar una lista #

Arrastra el Lista Introduzca el elemento en una celda y edite los elementos en línea.

Configure la lista a través de tres pestañas en la barra lateral izquierda:

• Página general — Cambiar el tipo de lista (con puntos o numerados), el margen y el relleno
• Tab de fuentes — ajuste el color y el tamaño de la fuente de los elementos de la lista
• Página de diseño — control el espaciado de los elementos y el alineamiento de la lista

Paso 8: Afegeix una puntuació estel·lar #

Arrastra el Calificación con estrellas Introduzca el elemento en una celda y haga clic en las estrellas para establecer la calificación.

Desde la barra lateral izquierda puedes configurar:

1. Máxima calificación — número máximo de estrellas (el valor predeterminado es 5)
2. Valor de calificación — la calificación actual para mostrar
3. Tamaño — tamaño de la estrella
4. Alineamiento — izquierda, centro o derecha
5. Color — color de la estrella
6. Mostrar el número de valoraciones — ¡Gira la palanca para mostrar el valor numérico junto a las estrellas!

Paso 9: Agregar un botón #

Arrastra el Botón Introduzca el elemento en una celda, luego haga clic en él para editar el texto y el enlace del botón.

La barra lateral izquierda te permite personalizar el tamaño, el radio de borde, el color de fondo, el color de sobreposición, el color del texto, el color de sobreposición del texto, el tamaño de la fuente, el alineamiento de los botones, el alineamiento del contenido y el ID del botón.

Tu tabla final debería tener algo parecido a esto:

Paso 10: Guarde su tabla #

Importante: Debes guardar tu tabla antes de poder visualizarla, incrustarla o volver a acceder a ella más tarde. Haz clic en Guardar tabla El botón se encuentra en la parte superior derecha del editor.

Si cierra el editor sin guardar, sus cambios se perderán.

Paso 11: Incorpore la tabla a un post o página #

Una vez guardado, haga clic en Incrustado El botón de la barra de herramientas superior. Esto copia automáticamente el shortcode de la tabla al portapapeles.

Ahora abra cualquier publicación o página de WordPress donde desee que aparezca la tabla y pegue el código corto. Se verá así: [wptb id=123].

• Editor de bloques (Gutenberg): Añadir un Bloque de shortcode y pega el shortcode dentro. (Guía completa de Gutenberg →)
• Editor clásico: Pega el shortcode directamente en el área de contenido.
• Elementor: Utiliza el Widget de shortcode. (Guía completa de Elementor →)
• Divi: Utiliza el Modo de texto y pegue el shortcode. (Guía completa de Divi →)

Publica o actualiza el post y tu tabla aparecerá en la interfaz de usuario.

Solución de problemas #

Mi tabla no aparece en el frontend.

Comprueba que hayas hecho clic Guardar tabla antes de copiar el shortcode, y que el ID del shortcode coincida con la tabla guardada. Si el shortcode sigue mostrando texto plano, consulte Las tablas no se muestran en el panel de WP Table Builder control.

Los elementos no caerán en las células.

Comprueba que estás arrastrando hacia una celda vacía, no hacia el borde de la misma. Actualizar el navegador suele resolver los problemas de arrastre.

Mi tabla se ve mal en el móvil.

WP Table Builder Las tablas son responsivas, pero es posible que tenga que habilitar el modo responsivo. Ver Cómo hacer una tabla responsive.

El estilo de mi tabla se ve diferente en la vista previa del editor. Es posible que el tema esté sobreponiendo los estilos de WP Table Builder’s. Ver Cómo deshabilitar los estilos de tema para una tabla.

Preguntas frecuentes #

Documentos relacionados #

• Cómo instalar y activar el complemento WP Table Builder
• Cómo hacer una tabla responsive
• Cómo usarlo WP Table Builder con el Editor de bloques (Gutenberg)
• Cómo agregar una tabla en Elementor
• Cómo añadir CSS personalizado en WP Table Builder