Tutorial completo de Elementor Tables: ¡Construye tablas de datos bonitas y usables desde cero!

Cuando se utiliza Elementor para hacer una página, para mostrar la comparación de precios, lista de características, configuración de parámetros, catálogo de cursos y así sucesivamente, a menudo se utiliza "Elementor tabla". Muchas personas se limitan a utilizar el texto + diseño de columnas apiladas, o bien no se ve bien, o terminal móvil directamente versión bomba. En este artículo, vamos a empezar desde cero, cómo hacer Elementor tabla, cómo hacer que se vea bien, cómo tener en cuenta el PC y los teléfonos móviles, paso a paso para que quede claro.

Uno,Qué se puede hacer con las tablas de Elementor? Elija primero el programa adecuado

Las tablas no son un widget independiente en Elementor, pero se implementan de varias formas, con tres escenarios comunes:

1. Tabla de simulación de disposición de columnas
   • Construir filas y columnas con Sección + Columnas
   • Cada celda se rellena con componentes de Editor de texto, Icono y Botón.
   • Ideal para pequeñas cantidades de datos, comparaciones de precios, páginas de comparación de características
2. Plugin de formularios de terceros + código corto de Elementor
   • Construye tablas con plugins como TablePress, WP Data Tables, etc.
   • Cómo insertar llamadas a widgets de código corto en Elementor
   • Para "tablas de datos reales" con grandes cantidades de datos que necesitan ser ordenados/buscados/paginados.
3. Plantilla + Repetidor (juego avanzado)
   • Uso de Elementor Pro + Campos personalizados (p. ej. ACF)
   • Generación de formularios dinámicos con Loop / Repeater
   • Ideal para listados de productos actualizados con frecuencia, estadísticas de artículos, planes de clases, etc.

Los dos conjuntos más prácticos se destacarán más adelante:

• Puro Elementor Column Layout para hermosas tablas ligeras
• Plugin de formularios de terceros con Elementor para formularios de datos funcionales

Piensa antes de empezar: ¿Para qué sirve este formulario de Elementor?

Piense en estas preguntas antes de empezar a arrastrar componentes:

1. ¿Qué tipo de datos se muestran?
   • Información comparativa (paquetes, características, versiones)
   • Lista de parámetros (configuración, especificaciones, dimensiones)
   • Calendario/progreso (calendario del curso, programa de actividades)
2. ¿Dónde centran los usuarios su lectura?
   • ¿Se trata de una comparación rápida?
   • ¿O navega línea por línea?
   • ¿Es necesario clasificarla y buscarla?
3. ¿Cuál es el porcentaje de dispositivos a los que se accede?
   • Los formularios de Elementor deben priorizar la adaptación si el móvil es una gran prioridad
   • Tabla compleja de varias columnas, se recomienda utilizar directamente un plug-in de tabla de terceros más económico

En resumen:

• No hay muchos datos, pero el sentido del diseño es importante → Elementor Column Layout para "tablas visuales".
• Más datos, énfasis en la operatividad → usa plugins para hacer "formularios funcionales", Elementor se encarga de la maquetación y el empaquetado.

III. Utilización de Elementor Column Layout para tablas básicas(adecuado para pequeñas cantidades de datos)

1. Creación de secciones y columnas

1. Crea una nueva Sección en la página de edición de Elementor.
2. Elija el número de columnas que necesite, por ejemplo:
   • 3 Columnas: Comparación de paquetes adecuados para tres grados
   • 4 columnas: adecuado para comparaciones de características de varias versiones
3. Esto se establece en el Diseño de la Sección:
   • Anchura del contenido: en recuadro o a todo lo ancho, según el diseño general.
   • Espacio entre columnas: ajuste a "Estrecho" o personalizado para evitar que las columnas queden apelotonadas.

2. Configurar las filas de cabecera

1. Añada una Sección Interior en la parte superior de cada columna o simplemente ponga un Título.
2. como "cabecera" de la columna, por ejemplo:
   • Nombre del programa (Básico / Estándar / Avanzado)
   • Nombre de la categoría (parámetro, función, descripción)
3. Unificado con estilo:
   • color de fondo
   • Tamaño y peso de la fuente
   • relleno superior e inferior (para que la cabecera parezca más "en bloque")

Haciendo que el color de la cabecera sea ligeramente más oscuro y el contraste más pronunciado, el formulario de Elementor en su conjunto tendrá inmediatamente una sensación de estructura.

3. Añadir líneas de contenido

Cada fila puede construirse como tal:

1. Añadir editor de texto o Lista de iconos
2. Asegúrese de que el contenido de una misma línea sea estilísticamente uniforme, por ejemplo:
   • Utilice la lista de iconos con iconos pequeños para todos ellos.
   • O todo en texto plano con una breve descripción
3. Utiliza la función de copiar y pegar estilos de Elementor:
   • Establezca primero el estilo de una columna
   • A continuación, haga clic con el botón derecho en "Copiar estilo" y péguelo en los componentes de otras columnas.

Esto mantendrá un estilo visual uniforme del formulario más rápidamente.

4. Añadir énfasis y orientación

Uno de los usos habituales de los formularios de Elementor es "destacar una opción recomendada":

• Añadir a la columna central:
  • Diferentes colores de fondo
  • Sombras más grandes
  • Botones más visibles (por ejemplo, "más populares" "programas recomendados")
• Utilice la descripción de texto Insignia / Etiqueta pequeña:
  • "Apto para principiantes".
  • "La mejor relación calidad-precio"

Estos se pueden realizar utilizando Heading + fuentes pequeñas o Icon Box, que parece una página de comparación pero en realidad es una tabla flexible de Elementor.

En cuarto lugar, el uso de un formulario de terceros plug-ins + Elementor para hacer formularios de datos funcionales

Si se requiere ordenar, buscar y paginar, se recomienda tener en cuenta:

• TablePress
• Tablas de datos WP
• Mesas Ninja

Estos plug-ins están dedicados a los formularios de datos, que luego son llamados a través de Shortcode en Elementor.

1. Utilizar plug-ins para crear tablas

1. Nuevo formulario en el backend del plugin
2. Añadir columnas, filas y campos
3. Habilitar: cuadro de búsqueda, clasificación, paginación, etc.
4. Registre el Shortcode generado por el plugin (ej. [table id=1 /])

2. Inserción de tablas en Elementor

1. existe Añadir widgets de código corto a Elementor
2. Pega el Shortcode de arriba.
3. Establece la sección periférica:
   • anchura máxima
   • margen interior
   • Color de fondo (por ejemplo, gris claro)
4. Puede añadir títulos, texto explicativo y un párrafo completo para acompañar la tabla.

Las ventajas de hacerlo:

• Gestión centralizada de los datos de los formularios y revisión de una actualización completa del sitio web
• Búsqueda Ajax, la experiencia de clasificación más fuerte que el diseño de columna Elementor puro
• Adecuado para documentación técnica, listas de precios, listas de parámetros, programas de cursos, etc.

V. Deja Los formularios de Elementor son bonitos y fáciles de usar.habilidades de diseño

1. Controlar la anchura de las columnas para evitar el hacinamiento

• Minimizar el uso de diseños con más de 5 columnas
• Utilice menos frases largas para los contenidos de texto, en su lugar utilice frases o subpárrafos.
• Utilice negrita e iconos para la información importante, a fin de reducir la dependencia del apilamiento de texto.

2. Colores y espaciado contrastados

• Color de fondo ligeramente más oscuro en la cabecera de la tabla, área de datos sencilla y limpia.
• Las filas pueden alternarse con colores más claros (el efecto pseudo "paso de cebra" puede simularse con Sección + Sección interior).
• Asegúrese de que cada celda tiene suficiente relleno para que la tabla parezca que "respira".

3. Prestar atención a la experiencia móvil

1. Cambiar a vista móvil en la configuración Responsive de Elementor
2. Compruébalo:
   • ¿El texto está amontonado
   • ¿Los botones son demasiado pequeños para poder pulsarlos fácilmente?
   • Si demasiadas columnas dan lugar a una mala experiencia de desplazamiento horizontal
3. En caso necesario:
   • Cambiar el diseño de varias columnas a apiladas verticalmente en los teléfonos móviles.
   • O utilizar dos estructuras: una "tabla comparativa lado a lado" para PC y una "lista de tarjetas" para móviles.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres