Cómo Hacer Tablas con Divi

En esta guía vemos cómo hacer una tabla con Divi para desplegar y comparar información que también se pueda personalizar fácilmente. Incluso te muestro cómo hacer una tabla de más de 6 columnas con Divi.

WordPres es Mejor con Divi

  • Cómo Instalar Divi. En esta guía te explico paso a paso cómo instalar Divi en WordPress y activar la licencia.
  • Presets. La herramienta Presets o Estilos predefinidos de Divi es esencial cuando hacemos tablas ya que nos permite modificar rápidamente los estilos generales de la tabla Divi.

Cómo hacer una tabla con Divi

En esta guía vemos cómo hacer una tabla con Divi para desplegar y comparar información que también se pueda personalizar fácilmente. Incluso te muestro cómo hacer una tabla de más de 6 columnas con Divi.

Divi no cuenta con un módulo de tabla, más allá de la Tabla de precios, que puede servirnos en algunos casos para hacer otro tipo de tablas.

Por eso es común que muchos se sientan algo frustrados o no sepan cómo avanzar a la hora de tener que hacer una tabla con Divi.

Pero vas a ver que no es nada complicado.

Cómo hacer una tabla paso a paso

Te recomiendo ver el video ya que ahí muestro cómo hacer tablas con Divi en detalle y paso a paso.

Primero que nada creamos una nueva página en WordPress y la editamos con Divi. Elegimos la opción Construir desde cero.

Paso 1 – Sección para la tabla

Accedemos a los ajustes de la sección predeterminada del constructor y simplemente añadimos lo siguiente.

CSS PERSONALIZADO:

  • Elemento principal:
min-width: 900px;

Paso 2 – Fila para la tabla

Luego insertamos dentro de la sección una fila con estructura de 1 columna y configuramos así.

TAMAÑO:

  • Ancho entre columnas: 1
  • Ancho: 95%.
  • Ancho máximo: 95%

CSS PERSONALIZADO:

  • Elemento principal:
display:flex !important;
flex-wrap: nowrap;

Esto va a hacer que las columnas de esta fila se van a mostrar «siempre» al lado unas de otras. Incluso cuando accedemos desde dispositivos móviles.

Es importantísimo para que no se desarme la tabla en estos dispositivos.

Paso 3 – Módulo de Texto

Insertamos en la fila un módulo de texto. Los módulos de texto van a conformar las celdas de la tabla así que les aplicamos formato a gusto y criterio.

Mínimamente hay que setear ésto:

TAMAÑO:

  • Altura: 80px
  • Margen base : 0px.
  • Relleno superior: 25px

BORDE:

  • Ancho de borde: 1px
  • Color: #cccccc.

También podemos asignarle un fondo destacado a la celda superior que hará las veces de encabezado y nos quedaría algo así.

Paso 4 – Duplicar columnas

Ahora duplicamos la columna tantas veces cómo columnas necesitemos en nuestra tabla y nos va a ir quedando así:

Tengamos en cuenta que, de esta forma, solo podremos crear hasta 6 columnas ya que las filas de Divi no admiten un mayor número en su estructura.

Cómo hacer una tabla de más de 6 columnas con Divi

Si necesitamos hacer una tabla con Divi que tenga más de 6 columnas, en el ejemplo anterior borramos las columnas duplicadas dejando 1 sola columna.

Paso 5 – Configuramos la sección

Vamos a los ajustes de la sección y añadimos el mismo CSS que habíamos definido antes para la fila.

CSS PERSONALIZADO:

  • Elemento principal:
display:flex !important;
flex-wrap: nowrap;

Esto va a hacer que, si insertamos o duplicamos una fila en esta sección, las filas se van a mostrar al lado unas de otras en lugar de abajo.

Paso 6 – Duplicamos las filas

Y ahora duplicamos las filas tantas veces necesitemos para lograr una tabla con cualquier cantidad de columnas.

Cómo podemos ver las filas se ubican al lado unas de otras en vez de abajo y cada fila de Divi se convierte así en una columna de la tabla. Sí, aunque suene raro.

Esto te permite añadir la cantidad de columnas que necesites sin ninguna limitación.

 

Dejame debajo un comentario contándome que te pareció esta posibilidad de Divi y ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.

Jorge Baffa

Jorge Baffa

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Todas las Guías

los Módulos Divi

WordPress es Mejor con Divi

Algunos de los enlaces que hay en esta página son enlaces de afiliado. Ésto significa que si haces clic en el enlace y compras el producto recibo una pequeña comisión que me ayuda a seguir generando nuevos contenidos.

4 Comentarios

  1. Francisco Brito Diaz

    Hola Jorge,

    Muy buen video y muy práctico, ya que se puede utilizar para infinidad de cosas. Gracias.

    Responder
    • Jorge Baffa

      Gracias Francisco!

  2. Arlen Joplin

    Gracias por tu importación, pero no se adapta en dispositivo móvil :c

    Responder
    • Jorge Baffa

      Sí se adapta. Tal cual muestro en el video.

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *