Respuesta rápida
En Elementor, busque el Código corto Widget (disponible en la versión gratuita), arráglalo a tu página y pega tu WP Table Builder shortcode (por ejemplo, [wptb id="123" not found ]) en el campo Contenido. Haga clic Prueba Para ver la tabla completamente renderizada.
Requisitos #
| Producto | Detalles |
|---|---|
| Plan | Gratuito o Pro |
| Complemento | WP Table Builder instalado y activado (Guía de instalación) |
| Editor de páginas | Elementor Free o Elementor Pro |
| Tiempo necesario | Alrededor de 2 minutos |
Antes de empezar: obtén tu código de tabla #
Necesitarás el código corto de la tabla que quieras incorporar. La forma más rápida de obtenerlo:
- Vá a Constructor de Tablas WP en el panel de control de tu WordPress.
- Abrir la tabla en el editor.
- Haz clic en Incrustado El botón en la parte superior — esto copia automáticamente el shortcode en el portapapeles.
El código corto tendrá la siguiente apariencia: [wptb id="123" not found ]. Guárdelo copiado — lo insertará en la siguiente etapa.
Si aún no has construido una tabla, consulta Cómo crear tu primera tabla en WP Table Builder Primero.
Método 1: Utilizando el widget Shortcode (recomendado) #
Esta es la forma estándar de agregar cualquier contenido basado en shortcodes en Elementor.
Paso 1: Abre tu página en Elementor #
Diríjase a la página o al post donde desee agregar la tabla y haga clic en Edite con Elementor.
Paso 2: Agregar el widget Shortcode #
En el panel de Elementor a la izquierda, busque “Shortcode” en el cuadro de búsqueda del widget. Arrastra el Código corto Añádalo al widget y colócalo en la sección donde quieras que aparezca la tabla.
Paso 3: Pegue el shortcode #
En el panel de ajustes de la izquierda, pegue su código WP Table Builder corto en el Introduzca su código corto campo.
Nota: La tabla puede aparecer en un estilo simplificado dentro del editor Elementor — esto es normal. Haga clic en el icono desplegable junto al botón ‘Publicar’ y haga clic en Ver página para ver la tabla totalmente renderizada tal como se verá para sus visitantes.
Paso 4: Vista previa y publicación #
El lienzo de Elementor puede mostrar una vista previa simplificada de la tabla. Haga clic Vista previa de los cambios o Publicar/Actualizar Para ver la tabla completamente renderizada en el frontend.
¿Por qué la vista previa de Elementor se ve diferente del frontend? #
Este es un comportamiento esperado y no un error. El lienzo de Elementor utiliza un entorno de renderización simplificado que puede no aplicar todos los estilos front-end del tema. La tabla real se renderizará correctamente en la página publicada.
Para ver el resultado exacto del frontend sin publicarlo, haga clic en el icono desplegable junto al botón ‘Publicar’ y haga clic en Ver página — esto abre una vista previa en vivo en una nueva pestaña con los estilos de la interfaz completa aplicados.
Solución de problemas #
El código corto se muestra como texto plano en lugar de como una tabla. Comprueba que has pegado el shortcode en el Introduzca su código corto El campo se encuentra dentro del panel de configuración del widget Shortcode — no en un widget de Texto o Hilo. Si lo escribiste manualmente, comprueba el formato nuevamente: [wptb id="123" not found ] ¿Dónde? 123 Se corresponde con el ID de la tabla real.
La tabla no aparece en absoluto en la interfaz de usuario. Compruebe que WP Table Builder está instalado y activado. Luego compruebe que el ID de la tabla en el shortcode coincide con una tabla existente en WP Table Builder → Todas las Tablas.
La tabla se ve desordenada o sin estilo en Elementor. Comprueba primero la vista previa de la página. Si la tabla se ve desorganizada en la vista previa, es posible que el tema de Elementor o una regla de CSS personalizada esté sobreponiendo los estilos de la tabla de WP Table Builder’s. Intenta añadir un CSS personalizado para corregir el conflicto. Ver Cómo añadir CSS personalizado en WP Table Builder.
La tabla rebasa su contenedor en Elementor. Esto suele ser un problema de compatibilidad con dispositivos móviles. Compruebe los ajustes de compatibilidad con dispositivos móviles de su tabla en WP Table Builder. Ver Cómo hacer una tabla responsive.
Estoy usando Elementor Pro — ¿existe alguna forma mejor de incorporar tablas? No existe ningún widget nativo de Elementor Pro para WP Table Builder, por lo que el Shortcode es el método correcto para todas las versiones de Elementor.
Preguntas frecuentes #
¿ WP Table Builder Funciona con Elementor Free y Elementor Pro?
Sí. El widget de Shortcode está disponible tanto en Elementor Free como en Elementor Pro, por lo que el método es el mismo independientemente de la versión que estés usando.
¿Puedo agregar varias tablas en la misma página de Elementor?
Sí. Agregue un widget de Shortcode independiente para cada tabla, cada uno con su propio shortcode. No hay límite para el número de tablas que puede incluir en una sola página.
¿Se actualizará automáticamente mi tabla si la edito en WP Table Builder?
Sí. El shortcode siempre extrae la última versión guardada de la tabla. No necesitas actualizar tu página de Elementor después de editar una tabla; solo guarda la tabla WP Table Builder y los cambios aparecerán inmediatamente en la interfaz de usuario.
¿Puedo usarlo WP Table Builder dentro de un popup de Elementor?
Sí. Agregue un widget Shortcode dentro de su plantilla de pop-up de Elementor y pegue el shortcode. La tabla se mostrará correctamente cuando se abra el pop-up.
¿La tabla funciona dentro del Grid Loop de Elementor o de las plantillas dinámicas?
El widget de Shortcode se puede añadir a las plantillas de Loop Grid, pero el ID de la tabla en el shortcode será estático — no cambiará dinámicamente según el post. Para contenido de tablas dinámico, necesitaría un desarrollo personalizado.
Documentos relacionados #
- Cómo crear tu primera tabla en WP Table Builder — construye tu primera tabla paso a paso
- Cómo añadir una tabla de WP Table Builder en el editor de bloques de Gutenberg — Guía de integración de Gutenberg
- Cómo usarlo WP Table Builder con Divi — Guía de integración de Divi
- Cómo hacer una tabla responsive — ajustes de respuesta
- Cómo añadir CSS personalizado en WP Table Builder — personalizar los estilos de la tabla
