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:

¿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:

¿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:

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 este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (11 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran.Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

ESTA WEB UTILIZA COOKIES PARA OFRECER LA MEJOR EXPERIENCIA POSIBLE. SI SIGUES NAVEGANDO DAS TU CONSENTIMIENTO PARA LA ACEPTACIÓN DE COOKIES Y NUESTRA POLÍTICA DE PRIVACIDAD más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar