Cómo utilizar TablePress con Elementor (Widget + Shortcode)

Conclusiones clave

• TablePress funciona con Elementor de dos maneras: un widget llamado tabla TablePress que TablePress 3.4 agrega al panel Elementor y el código corto [id de tabla=1 /] colocado en el widget Shortcode.
• El widget de tabla TablePress en Elementor tiene un menú desplegable de tabla y un campo de parámetros de configuración, y no tiene pestaña Estilo.
• TablePress activa la clasificación, búsqueda y paginación de visitantes de forma predeterminada, con 10 filas por página.
• El desplazamiento horizontal está desactivado de forma predeterminada en TablePress, por lo que una tabla de cinco columnas se desborda en un teléfono de 390 px hasta que la marques en la configuración de la tabla.
• Para una tabla corta que debe editarse y diseñarse dentro de Elementor, un widget de tabla como Master Addons Dynamic Table funciona menos que TablePress.

TablePress y Elementor trabajan juntos sin ningún complemento puente. Creas la tabla en TablePress y luego la colocas en una página de Elementor con el widget de tabla de TablePress o con un código corto. La tabla mantiene su clasificación, búsqueda y paginación.

Esta guía cubre ambos métodos, el estilo y la configuración que corrige tablas anchas en teléfonos. También dice cuándo un widget de tabla simple es la mejor opción. Todo aquí se probó con TablePress 3.4 y Elementor 4.3.

Paso 1: cree o importe la tabla en TablePress

La tabla en sí está hecha fuera de Elementor, en las pantallas de TablePress en el panel de WordPress.

1. Instalar y activar Prensa de mesa de complementos, agregue nuevo.
2. Abierto Prensa de mesa en el menú del panel.
3. Para escribir una tabla, haga clic Agregar nuevo, ingrese un nombre, establezca el número de filas y columnas y complete las celdas.
4. Para traer una hoja de cálculo, haga clic Importar, elige Carga de archivos, seleccione el archivo, mantenga Agregar como nueva tabla y haga clic Importar.
5. Tenga en cuenta el ID de la tabla. La primera tabla es ID 1.

TablePress importa archivos Excel, CSV, HTML y JSON. Importamos un CSV de seis filas de tarifas de envío y llegó con la primera fila ya configurada como encabezado.

Paso 2: agréguelo con el widget de tabla TablePress

TablePress registra su propio widget Elementor, por lo que este método no necesita código corto.

1. Edita tu página con Elementor.
2. Busque en el panel de widgets MesaPrensa mesa.
3. Arrastre el widget a un contenedor.
4. Abre el Tabla desplegable y elige tu mesa. Las tablas se enumeran por ID y nombre.
5. Publica la página.

El Avanzado la sección debajo del menú desplegable contiene un campo, Parámetros de configuración. Acepta los mismos parámetros que pondrías en un código corto, para los casos en los que una página debería mostrar la tabla con diferentes opciones.

O agréguelo con un código corto

El código corto hace el mismo trabajo y funciona en cualquier lugar donde lo hagan.

1. Arrastra Elementor Código corto widget en un contenedor.
2. Tipo [table id=1 /], reemplazando 1 con la identificación de su tabla.
3. Hacer clic Aplicar para cargar la vista previa.

En nuestra página de prueba, el widget y el código corto imprimían la misma tabla. Utilice el widget cuando pueda, porque al seleccionar desde un menú desplegable se evitan errores tipográficos en el ID.

Clasificación, búsqueda y paginación

Estos se activan para cada tabla nueva. Los cambias por tabla, en el cuadro llamado Características de la tabla para visitantes del sitio en la pantalla de edición de la mesa.

Para una tabla con seis filas, la búsqueda y la paginación están abarrotadas. Desmarquelos y la tabla se mostrará como una cuadrícula simple.

Estilismo de una mesa TablePress en Elementor

El widget de tabla TablePress no tiene controles de estilo de tabla en Elementor, por lo que la apariencia se establece en otros tres lugares.

• Opciones de mesa en la pantalla de edición de la tabla: qué filas son el encabezado y el pie de página Colores de fila alternos, Destacando el vuelo estacionario de la fila, y un Clases CSS adicionales campo.
• Css personalizado para colores, fuentes y bordes. TablePress le da a cada tabla una clase según su ID, para que pueda apuntar a una tabla.
• La pestaña Avanzado del widget en Elementor para margen, acolchado y ancho alrededor de la mesa.

Un breve ejemplo de CSS que rediseña el encabezado de la tabla 1:

.tablepress-id-1 thead th {
  background: #101223;
  color: #ffffff;
}
.tablepress-id-1 tbody td {
  padding: 12px 16px;
}

Péguelo en Apariencia, Personalizar, CSS adicional o en cualquier caja de CSS personalizada que tenga su configuración. Elementor Pro tiene uno por elemento y los complementos maestros Extensión CSS personalizada agrega uno también.

Arreglar la mesa en los teléfonos

En un teléfono de 390 px de ancho, nuestra tabla de cinco columnas pasaba por el borde derecho de la pantalla y la última columna no se podía leer.

1. Edite la tabla en TablePress.
2. Bajo Características de la tabla para visitantes del sitio, ticăloșă Desplazamiento horizontal.
3. Hacer clic Guardar cambios y recarga la página en tu teléfono.

TablePress también vende una función de Tablas responsivas en su plan Pro ($89 al año cuando verificamos), con modos que apilan o colapsan filas en pantallas pequeñas. Otras formas de manejar tablas anchas están en nuestra guía tablas responsivas en Elementor.

Cuando un widget de tabla es la mejor opción

TablePress está diseñado para datos. Para una tabla pequeña que realmente forma parte del diseño de la página, agrega pasos: una segunda pantalla de administrador, CSS en otro lugar y un complemento para mantener actualizado.

¿Solo necesitas una mesa pequeña? El Widget de tabla dinámica lo construye en el panel Elementor, con una pestaña Estilo y filas que se apilan en los teléfonos.

Dynamic Table no tiene clasificación, búsqueda ni importación, así que use TablePress para datos y el widget para tablas de diseño como un cronograma o una hoja de especificaciones. Las otras opciones se comparan en nuestro Resumen de complementos de la tabla Elementor.

Preguntas frecuentes

Pensamientos finales

TablePress y Elementor encajan bien para las tablas de datos: importe el archivo, ingrese el widget de la tabla TablePress y recuerde activar el desplazamiento horizontal para teléfonos. El estilo requiere un poco de CSS porque el widget no tiene pestaña Estilo.

Para tablas cortas que deberían parecer parte de la página, Tabla dinámica mantiene las células y el estilo dentro de Elementor.

Lectura relacionada

• Cómo crear una tabla en Elementor (4 formas)
• Los mejores complementos de índice para WordPress