Tutorial Divi: Cómo añadir más columnas en las filas

Como ya sabrás, las filas de Divi solo admiten 4 columnas por defecto, lo que viene a ser suficiente la mayoría de las veces, pero no todas ¿le añadimos más?

No todos los módulos de Divi son ideales para ponerlos a más de 4 columnas pero ¿a que más de una vez te hubiese gustado poner más módulos de anuncio (blurb) en una misma columna? A mi también.

La magia del CSS

Aunque a veces suelo ponerlo lo último en esta ocasión me apetece poner primero el CSS necesario para poder disponer de más columnas en Divi.

Solo tienes que añadir las siguientes clases desde CSS adicional del personalizador:

/*
Más columnas en Divi
*/
.diez-columnas .et_pb_module {width: 10%; float: left;}
.nueve-columnas .et_pb_module {width: 11.11%; float: left;}
.ocho-columnas .et_pb_module {width: 12.5%; float: left;}
.siete-columnas .et_pb_module {width: 14.28%; float: left;}
.seis-columnas .et_pb_module {width: 16.66%; float: left;}
.cinco-columnas .et_pb_module {width: 20%; float: left;}

¿Quieres añadir más columnas? ¿Doce por ejemplo?

Solo tienes que recalcular el porcentaje del ancho y añadir la nueva clase, por ejemplo a capón en el CSS personalizado de tu fila:

.doce-columnas {width: 8.33%; float: left;}

¿Y para móviles?

¡Cierto, que no se nos olvide que hay que evitar cualquier horror en dispositivos móviles!

Para compatibilidad con móviles y tabletas varias no olvides añadir unas clases CSS adicionales para los tamaños de dispositivo más habituales en tu web, por ejemplo:

/*
Más columnas en Divi también en móviles
*/
@media (max-width: 980px){
.diez-columnas .et_pb_module {width: 20%;}
.nueve-columnas .et_pb_module {width: 33.3%;}
.ocho-columnas .et_pb_module {width: 25%;}
.siete-columnas .et_pb_module {width: 25%;}
.seis-columnas .et_pb_module {width: 33.3%;}
.cinco-columnas .et_pb_module {width: 33.3%;}
}
 
@media all and (max-width: 767px) {
.diez-columnas .et_pb_module {width: 100%;}
.nueve-columnas .et_pb_module {width: 100%;}
.ocho-columnas .et_pb_module {width: 100%;}
.siete-columnas .et_pb_module {width: 100%;}
.seis-columnas .et_pb_module {width: 100%;}
.cinco-columnas .et_pb_module {width: 100%;}
}

Con este código de ejemplo adaptamos las proporciones de las columnas en tabletas y forzamos una columna por ancho en móviles.

Añadiendo filas en Divi con más de 4 columnas

Una vez preparada la infraestructura ya solo nos queda ir añadiendo columnas, para lo que tendremos que hacer un pequeño truco a Divi, para engañarle un poco.

Fuerza la anchura completa en la fila

Es importante que lo primero que hagas en la fila en la que vas a añadir más de 4 columnas es que sea de anchura completa, sino es posible que no quepan adecuadamente.

Así que, antes de decidir las columnas, haz clic en los ajustes de la fila y activa el ancho completo.

Añade tu clase CSS personalizada

Sin salir de los ajustes de la fila pásate por la pestaña de CSS personalizado y añade la clase elegida.

Ya casi está, ahora pulsa «Guardar y salir«.

Añade una columna de ancho completo

O de una sola columna, como prefieras llamarlo.

Empieza a añadir módulos

Siguiendo el ejemplo más típico, añadiremos módulos Anuncio (o blurb), que siempre son pocos. Así que añadimos el primero…

Sobre los ajustes de este primer módulo algunos consejos de mi cosecha:

  • Título: el que quieras
  • Ubicación (imagen/icono): Superior
  • Tamaño imagen: a ser posible no muy grande, de 300px por ejemplo
  • Orientación del texto: Centro
  • Contenido: el que quieras
  • Etiqueta de administración: algo que te permita identificarlo

Copia el módulo tantas veces como columnas

Lo siguiente es hacer copias del módulo tantas veces como columnas quieras mostrar, teniendo en cuenta por supuesto la clase que hayas añadido, no vayas a elegir la clase de seis columnas y metas ocho módulos ¿vale?

Una vez personalizados los títulos y etiquetas de administración tendrás algo así:

Guarda y publica

Aunque no lo creas ya has terminado ¿a que no era difícil?

El ejemplo anterior quedaría tal que así…

Con lo que has conseguido insertar más de 4 columnas por fila en Divi.

¿Quieres más? Solo tienes que seguir copiando y personalizando módulos y ¡no se te olvide! cambiar la clase CSS a aplicar a la fila, por ejemplo la de diez columnas…

Con este truco nos saltamos una de las pocas limitaciones de Divi, para que nunca más tengas que limitarte a 4 columnas por fila.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(17 votos, promedio: 4.9)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

15 comentarios en “Tutorial Divi: Cómo añadir más columnas en las filas”

  1. Buen aporte. Hace tiempo usé un plugin llamado «Divi Extended Column Layouts». Hace lo mismo pero desde el constructor Divi, sin necesidad de añadir código. Lo malo, tiene un bug que no permite abrir la fila después de añadir más de cuatro columnas. Si lo solventaran sería perfecto.

    Un saludo

  2. Fernando, muchas gracias! Esta solución es ideal para poner logotipos
    (que siempre me pasan un montón, tipo patrocinadores). Instalado y
    aplicado en 1 minuto!

  3. Buenas, en primer lugar agradecerte este gran aporte, totalmente útil y eficaz. Mi pregunta es si hay alguna forma de hacer esto mismo pero para el módulo blog, que solo te da a elegir entre ancho complerto (1 columna) o rejilla (3 columnas) y a mi me gustaria poder poner mas de 3.¡ Muchas gracias por anticipado!

  4. Hola Fernando! Esta genial este website! Gracias por compartir todo tu conocimiento!
    Necesito saber como crear un icono para un blurb. Hice los dibujos en illustrator pero no consigo dar con el tamaño adecuado, o es muy chico y se pixela o es muy grande y queda mal. Podrás ayudarme con este tema?

  5. Hola Fernando: Gracias de nuevo por tus posts, para muchos de nosotros son mágicos 🙂 nos sirven y mucho a todos los que estamos empezando con wp y divi. y me has solucionado un montón de problemas en los que estaba bloqueado.
    Necesito de tu sabiduría… tengo un problema con los módulos blurb o anuncios en Divi, he configurado una pagina con bloques de 3 columnas, ordenados como Video 1, Video 2, etc. de izquierda a derecha y de arriba a abajo hasta el 9, y al mostrar la página en dispositivos móviles me los descoloca todos, ordenándolo por columnas en lugar de filas, no se si me he explicado… ¿podrías decirme como se pueden mostrar correctamente en dispositivos móviles?. Si lo necesitas y me das tu permiso, te pongo la página para que puedas verificarlo.
    Muchas gracias de antemano.
    Saludos, Goyo.

  6. Pingback: Todos lo que debes saber sobre los tamaños de imagen en Divi y sus módulos

  7. Matias Gimenez

    Fernando, buen día.
    Si ya tengo añadida una clase css con un efecto de zoom, como hago para sumarle la clase css de columnas?
    Oses necesitaría que la fila tenga dos clases css, una que corresponda a la fila y la otra al efecto que le realizo a los objetos que quiera poner.

    Saludos,

    Matias

  8. Bazares onLine

    Hola Fernando. Agradezco tu información. Apenas voy iniciando y poco entiendo. El resultado se ve super, ¿pero se puede que en móviles se muestren 2 columnas por ancho? Cuando se tienen 12 elementos en total como en mi caso, no se me hace estético.

  9. Jerry Calambas

    Hola buena tarde, de momento me parece genial esta ayuda, solo que al dia de hoy «Divi su estructura para código ya no es igual a la del ejemplo» ¿puede alguien por favor indicarme en que parte del «actual Divi» insertar el código? gracias por la la atencion y de antemano por la valiosa respuesta

  10. Blash Aka Pajarraco Mayor

    El truco está muy bien y es fácil, pero en el responsibe la cosa empieza a fallar. Cuandop reduzco la pantalla, se descolocan, pero sobre todo, si hay texto, el texto lejos de hacerse pequeño y adaptarse, empieza a mostrarse vertical el texto.

    En mi caso, estaba intentando poner 7 llamadas a la acción, y como estas llevan texto pues pasa lo que te he comentado.

Deja un comentario

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

 

Ir arriba Ir al contenido