Cómo cambiar el número de columnas en Mobile In Divi (con ajustes preestablecidos globales)

¡Finalmente! Aquí hay una manera sólida y fácil de cambiar el número de columnas en dispositivos móviles y tabletas en Divi. Al agregar un poco de CSS personalizado, obtendrá control total sobre cuántas columnas mostrar en dispositivos móviles y tabletas en cada fila Divi.

Desbloquee de 2 a 6 columnas en dispositivos móviles y tabletas con un buen espacio entre y debajo de las columnas. Esta es una solución más robusta que algunas soluciones rápidas y sucias, por ejemplo display:flex , o width:50%,que se comparten en varios grupos de Facebook y blogs. Nos mantendremos consistentes usando el mismo tipo de código que Divi ya usa para las columnas de escritorio, y también lo aplicaremos para pantallas más pequeñas.

Al final del artículo, mostraré cómo puede ahorrar tiempo utilizando los ajustes preestablecidos globales de Divi para cambiar el número de columnas en dispositivos móviles y tabletas, sin tener que agregar clases CSS personalizadas a sus filas.

1. Agregue CSS para habilitar múltiples columnas en dispositivos móviles y tabletas en Divi

El primer paso para cambiar el número de columnas en Divi para móviles y tabletas es agregar algún CSS personalizado.

1. Inicie sesión en su panel de WordPress
2. Ir a Divi » Personalizador de temas » CSS adicional
3. Copie y pegue el CSS a continuación:

Consejo profesional: Copie todo el fragmento de CSS para acceder a todas las opciones de columna adicionales para dispositivos móviles y tabletas. Si solo necesita una opción específica, por ejemplo, 2 columnas en el móvil, solo necesita copiar esa parte específica del fragmento (fila 3-21 a continuación).

/*** Change Mobile Columns By DiviMundo.com ***/

/* 2 Columns Mobile */
@media all and (max-width: 767px) {
	.two-col-mob .et_pb_column {
		width:47.25% !important;
	}
	
.two-col-mob .et_pb_column:nth-last-child(-n+2) {
		margin-bottom:0;
	}

	.two-col-mob .et_pb_column:not(:nth-child(2n)) {
			margin-right:5.5% !important;
	}
}

/* 3 Columns Mobile */
@media all and (max-width: 767px) {
	.three-col-mob .et_pb_column {
		width:29.6667% !important;
	}

	.three-col-mob .et_pb_column:nth-last-child(-n+3) {
		margin-bottom:0;
	}

	.three-col-mob .et_pb_column:not(:nth-child(3n)) {
		margin-right:5.5% !important;
	}
}

/* 4 Columns Mobile */
@media all and (max-width: 767px) {
	.four-col-mob .et_pb_column {
		width:20.875% !important;
	}

.four-col-mob .et_pb_column:nth-last-child(-n+4) {
		margin-bottom:0;
	}

	.four-col-mob .et_pb_column:not(:nth-child(4n)) {
		margin-right:5.5% !important;
	}
}

/* 5 Columns Mobile */
@media all and (max-width: 767px) {
	.five-col-mob .et_pb_column {
		width:15.6% !important;
	}

	.five-col-mob .et_pb_column:nth-last-child(-n+5) {
		margin-bottom:0;
	}

	.five-col-mob .et_pb_column:not(:nth-child(5n)) {
		margin-right:5.5% !important;
	}
}

/* 6 Columns Mobile */
@media all and (max-width: 767px) {
	.six-col-mob .et_pb_column {
		width:12.083% !important;
	}

	.six-col-mob .et_pb_column:nth-last-child(-n+6) {
		margin-bottom:0;
	}

	.six-col-mob .et_pb_column:not(:nth-child(6n)) {
		margin-right:5.5% !important;
	}
}

/*** Change Tablet Columns By DiviMundo.com ***/

/* 1 Column Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.one-col-tab .et_pb_column {
		margin-right:0 !important;
		width:100% !important;
	}
	
		.one-col-tab .et_pb_column:not(:last-child) {
		margin-bottom:30px !important;
	}
}

/* 2 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.two-col-tab .et_pb_column {
		width:47.25% !important;
	}

.two-col-tab .et_pb_column:nth-last-child(-n+2) {
		margin-bottom:0;
	}

	.two-col-tab .et_pb_column:not(:nth-child(2n)) {
		margin-right:5.5% !important;
	}
}

/* 3 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.three-col-tab .et_pb_column {
		width:29.6667% !important;
	}

.three-col-tab .et_pb_column:nth-last-child(-n+3) {
		margin-bottom:0;
	}

	.three-col-tab .et_pb_column:not(:nth-child(3n)) {
		margin-right:5.5% !important;
	}
}

/* 4 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.four-col-tab .et_pb_column {
		width:20.875% !important;
	}

.four-col-tab .et_pb_column:nth-last-child(-n+4) {
		margin-bottom:0;
	}

	.four-col-tab .et_pb_column:not(:nth-child(4n)) {
		margin-right:5.5% !important;
	}
}

/* 5 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.five-col-tab .et_pb_column {
		width:15.6% !important;
	}

.five-col-mob .et_pb_column:nth-last-child(-n+5) {
		margin-bottom:0;
	}
	
	.five-col-tab .et_pb_column:not(:nth-child(5n)) {
		margin-right:5.5% !important;
	}
}

/* 6 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.six-col-tab .et_pb_column {
		width:12.083% !important;
	}

	.six-col-tab .et_pb_column:nth-last-child(-n+6) {
		margin-bottom:0;
	}

	.six-col-tab .et_pb_column:not(:nth-child(6n)) {
		margin-right:5.5% !important;
	}
}

Opciones de columnas de tableta disponibles

2. Agregue clases CSS a sus filas Divi para cambiar el número de columnas en dispositivos móviles y tabletas

Para aplicar el nuevo recuento de columnas para dispositivos móviles y tabletas, debe agregar las clases CSS correspondientes a su fila Divi. Eso en realidad tomará menos tiempo que leer este párrafo del texto.

1. Habilite Divi Visual Builder en la página que desea editar
2. Edite la fila (ese es el cuadro con el borde verde) haciendo clic en la rueda dentada
3. Ir a Avanzado » ID CSS y clases » Clase CSS
4. Agregue una o dos clases CSS, que coincidan con el número de columnas que desea usar, de la tabla siguiente.

Tenga en cuenta: A veces, Divi Visual Builder no muestra la nueva estructura de columnas de la manera correcta en el backend. Guarde y obtenga una vista previa en el frontend para ver el resultado final.

La tabla anterior es en realidad un ejemplo en vivo de este código usando las clases «three-col-mob three-col-tab» para mostrar tres columnas en la tableta y tres columnas en el móvil (lo mismo que en el escritorio).

Ejemplos de cómo aplicar las clases CSS en las filas Divi

Simplemente separe la clase móvil y la clase de tableta con un espacio simple, por ejemplo: two-col-mob four-col-tab

Aquí hay cuatro ejemplos de cómo puede aplicar las clases CSS para cambiar el número de columnas en dispositivos móviles y tabletas en sus filas Divi. Simplemente deje el campo Clase CSS vacío si desea usar el número predeterminado de columnas.

3 columnas en móvil y 3 columnas en tablet

1 columna en móvil y 2 columnas en tablet

3. Consejo profesional: use los ajustes preestablecidos globales de Divi para cambiar el número de columnas en dispositivos móviles y tabletas

Este último paso no es necesario, pero es una buena manera de acelerar su proceso de diseño agregando diferentes estructuras de filas móviles a su biblioteca de preajustes globales de Divi.

De esta manera, no es necesario agregar clases CSS personalizadas cada vez que desee cambiar el número de columnas seguidas. En su lugar, puede elegir los números de fila que desea usar en el menú desplegable Ajustes preestablecidos cuando agregue una nueva fila.

Cambio de números de fila móviles con Divi Global Presets

1. Asegúrese de haber agregado el CSS personalizado en el Personalizador de temas (consulte el paso 1 anterior)
2. Cree una nueva fila en una página, una publicación o en un diseño en la Biblioteca Divi. No importa qué estructura de columna elija para la fila.
3. Cierre el modal Insertar módulo y abra Configuración de fila haciendo clic en la rueda dentada
4. Ir a Avanzado » ID CSS y clases
5. Introduzca la(s) clase(s) CSS que desea agregar a su ajuste preestablecido (consulte el paso 2 anterior), por ejemplo , dos col-mob cuatro col-tab
6. Ahora, haga clic en el ajuste Preset: Default (Ajuste preestablecido: predeterminado) en la barra superior púrpura de la configuración de fila
7. Haga clic en Crear nuevo ajuste preestablecido a partir de estilos actuales.
8. Asigne un nombre claro a su nuevo ajuste preestablecido , por ejemplo, 2 col mob | 4 col tab
9. Asegúrese de que Asignar ajuste preestablecido a predeterminado esté establecido en NO y guárdelo haciendo clic en el botón verde de marca de verificación
10. Repita el proceso para agregar tantos ajustes preestablecidos de fila que desee.

¡Eso es todo! Para cambiar el número de columnas en dispositivos móviles y tabletas, simplemente haga clic en el interruptor Ajuste preestablecido en la configuración de fila y elija una de su lista.

¡Eso es todo por hoy!

Espero que hayas disfrutado de este post. Suscríbete a DiviMundo en YouTube y únete a nuestro grupo de Facebook para obtener contenido más nítido sobre WordPress y diseño web.

👉 Publicación relacionada: Cómo ajustar el orden de apilamiento de columnas de Divi en dispositivos móviles

👉 Post relacionado: Cómo cambiar el número de columnas en el módulo Divi Blog

👉 Post relacionado: Cambiar el número de columnas en el módulo Divi Gallery en diferentes puntos de interrupción