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.

Antes (1 columna)

Divi muestra una columna en el móvil de forma predeterminada

Después (2-6 columnas)

Mostrar varias columnas en la misma fila en el móvil en Divi

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 móviles disponibles:

  • 1 columna en el móvil

    Si no cambias nada, la fila Divi mostrará solo una columna en el móvil.

  • 2 columnas en el móvil
  • 3 columnas en el móvil
  • 4 columnas en el móvil
  • 5 columnas en el móvil
  • 6 columnas en el móvil

Opciones de columnas de tableta disponibles

  • 1 columna en tableta

    Esto es útil si desea evitar que Divi muestre, por ejemplo, tres columnas en la tableta cuando muestre seis columnas en el escritorio.

  • 2 columnas en tableta
  • 3 columnas en tableta
  • 4 columnas en tableta
  • 5 columnas en tableta
  • 6 columnas en tableta

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.

Número de columnas

Clase CSS móvil

Clase CSS de tableta

Uno

[no class needed]

one-col-tab

Dos

Dos Col-Mob

Dos col-tab

Tres

Tres Col-Mob

tres col-tab

Cuatro

Four-Col-Mob

Four-col-tab

Cinco

Cinco Col-Mob

Cinco col-tab

Seis

Six-Col-Mob

six-col-tab

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.

2 columnas en móvil y 4 columnas en tablet

2 columnas en móvil y 4 columnas en tablet en Divi

Agregue las clases CSS two-col-mob four-col-tab en la configuración de fila para lograr esto.

3 columnas en móvil y 3 columnas en tablet

3 columnas en móvil y 3 columnas en tablet en Divi

Agregue las clases CSS three-col-mob three-col-tab en la configuración de fila para lograr esto.

3 columnas en el móvil y 6 columnas en la tableta

3 columnas en móvil y 6 columnas en tablet

Agregue las clases CSS three-col-mob six-col-tab en la configuración de fila para lograr esto.

1 columna en móvil y 2 columnas en tablet

2 columnas en móvil y dos columnas en tablet

Agregue las clases CSS two-col-tab en la configuración de fila (una columna para dispositivos móviles es predeterminada en Divi, por lo que no se necesita CSS personalizado para eso).

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.

Agregar clases CSS de columna a la fila
1. Agregue clases(es) CSS a su fila.
Crear ajustes preestablecidos de fila globales
2. Cree un nuevo ajuste preestablecido global.
Elija la estructura de columnas móviles

3. Utilice los ajustes preestablecidos en cualquier página o publicación.

¡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

-->[/et_pb_code][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter="on" custom_padding_last_edited="on|phone" admin_label="Row - CONTENT" module_class="dvcs_card_featured" _builder_version="4.16" _module_preset="default" background_color="#521d91" use_background_color_gradient="on" background_color_gradient_type="circular" background_color_gradient_direction_radial="top left" background_color_gradient_stops="#4a42ec 0%|#521d91 100%" background_color_gradient_start="#4a42ec" background_color_gradient_end="#521d91" width="90%" max_width="1120px" module_alignment="center" custom_margin="|||||false" custom_margin_tablet="|||||false" custom_margin_phone="|||||false" custom_margin_last_edited="on|desktop" custom_padding="50px|32px|50px|32px|true|true" custom_padding_tablet="" custom_padding_phone="|22px||22px||true" link_option_url="https://diviguiden.se/divi" link_option_url_new_window="on" border_radii="on|8px|8px|8px|8px" global_colors_info="{}"][et_pb_column type="4_4" _builder_version="4.16" _module_preset="default" custom_padding="|||" global_colors_info="{}" custom_padding__hover="|||"][et_pb_text _builder_version="4.18.0" _module_preset="1397eec0-e19d-4e2f-ac5e-d5b2bde2b06f" text_font="|||on|||||" text_text_color="#96cbd6" text_font_size="12px" text_orientation="center" background_layout="dark" text_font_size_phone="12px" global_colors_info="{}"]

Enlace de afiliados

[/et_pb_text][et_pb_text admin_label="Text - MAIN" _builder_version="4.18.0" _module_preset="1397eec0-e19d-4e2f-ac5e-d5b2bde2b06f" text_font="||||||||" header_font="||||||||" header_2_font="|700|||||||" header_2_text_align="center" header_2_text_color="#ffffff" header_2_font_size="37px" max_width="85%" max_width_tablet="95%" max_width_phone="100%" max_width_last_edited="on|phone" custom_margin="-22px||6px|||" custom_margin_tablet="32px||10px" custom_margin_phone="0px||15px|" custom_margin_last_edited="on|desktop" custom_padding="|10px|12px|10px||true" custom_padding_tablet="|32px||32px||true" custom_padding_phone="|0px||0px" custom_padding_last_edited="on|tablet" header_2_font_size_tablet="31px" header_2_font_size_phone="19px" header_2_font_size_last_edited="on|desktop" header_2_line_height_tablet="" header_2_line_height_phone="1.4em" header_2_line_height_last_edited="on|desktop" global_colors_info="{}"]

806 875 clientes ya han desatado el verdadero potencial de WordPress. Descarga Divi y comienza a crear sitios web hermosos hoy.

[/et_pb_text][et_pb_button button_url="https://divimundo.com/divi/" url_new_window="on" button_text="EXPLORA DIVI AHORA" button_alignment="center" admin_label="Button - SIGN UP TODAY" _builder_version="4.18.0" _module_preset="default" button_text_color="#333333" button_bg_color="#F7F8FA" transform_translate_linked__hover="off" custom_margin="0px||0px|" custom_margin_tablet="0px||0px|" custom_margin_phone="0px||0px" custom_margin_last_edited="on|desktop" custom_padding="14px|32px|14px|32px|true|true" custom_css_main_element="font-weight:bold !important;" box_shadow_style="preset3" box_shadow_color="rgba(0,0,0,0)" box_shadow_horizontal_last_edited="off|desktop" global_colors_info="{}" transform_styles__hover_enabled="on" transform_scale__hover_enabled="on" transform_translate__hover_enabled="on" transform_rotate__hover_enabled="on" transform_skew__hover_enabled="on" transform_origin__hover_enabled="on" transform_translate__hover="0px|-1px" box_shadow_color__hover_enabled="on" box_shadow_horizontal__hover_enabled="on" box_shadow_color__hover="rgba(255,74,158,0.2)" box_shadow_horizontal__hover="0px" button_bg_color__hover_enabled="on|hover" button_bg_color__hover="#FFFFFF" button_bg_enable_color__hover="on"][/et_pb_button][et_pb_text admin_label="Text - SECONDARY" _builder_version="4.18.0" _module_preset="1397eec0-e19d-4e2f-ac5e-d5b2bde2b06f" text_font="||||||||" text_text_color="rgba(255,255,255,0.75)" text_font_size="18px" header_font="||||||||" text_orientation="center" max_width="850px" custom_margin="40px||32px||false" custom_margin_tablet="32px||32px||true" custom_margin_phone="15px||0px||false" custom_margin_last_edited="on|desktop" text_font_size_tablet="17px" text_text_align="center" global_colors_info="{}"]

Pruebe hoy y obtenga su dinero de vuelta dentro de 30 días si usted no está contento. 100% libre de riesgos.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" _builder_version="4.17.4" _module_preset="default" background_color="#FFFFFF" custom_margin="||||false|false" global_colors_info="{}"][et_pb_row _builder_version="4.17.4" _module_preset="default" background_color="RGBA(255,255,255,0)" global_colors_info="{}"][et_pb_column type="4_4" _builder_version="4.16" _module_preset="default" global_colors_info="{}"][et_pb_text _builder_version="4.18.0" _module_preset="1397eec0-e19d-4e2f-ac5e-d5b2bde2b06f" header_2_font_size="32px" header_2_font_size_tablet="28px" header_2_font_size_phone="23px" global_colors_info="{}"]

Artículos Relacionados

[/et_pb_text][et_pb_blog posts_number="3" _builder_version="4.18.0" _module_preset="d557fc3a-2152-401e-a7c8-c8666bb17e64" read_more_font="|700||on|||||" read_more_letter_spacing="0.5px" read_more_line_height="3em" global_colors_info="{}" custom_css_title_last_edited="on|phone" custom_css_title_phone="margin-bottom:5px"][/et_pb_blog][et_pb_button button_url="@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6IjI5MDY2In19@" button_text="Más artículos" button_alignment="center" _builder_version="4.18.0" _dynamic_attributes="button_url" _module_preset="default" button_font="|700|||||||" custom_margin="||60px|||" global_colors_info="{}"][/et_pb_button][et_pb_divider color="#d6d6d6" _builder_version="4.16" _module_preset="default" global_colors_info="{}"][/et_pb_divider][et_pb_comments _builder_version="4.18.0" _module_preset="default" header_level="h6" header_text_color="#7d75d9" custom_button="on" button_font="|700|||||||" button_use_icon="off" hover_enabled="0" custom_css_reply_button="color:#fff !important;" custom_css_message_field="border-radius:10px;" global_colors_info="{}" custom_css_reply_button__hover_enabled="on|hover" custom_css_reply_button__hover="color:#fff !important;" button_text_color="#FFFFFF" sticky_enabled="0"][/et_pb_comments][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" admin_label="Section - CTA BACKGROUND OVERLAY" module_class="dvcs-highlighted-overlay" _builder_version="4.16" _module_preset="default" background_color="rgba(78,47,188,0.8)" locked="off" global_colors_info="{}"][/et_pb_section]

Descargo de afiliados

Todo el contenido de DiviMundo es financiado por ustedes, nuestros queridos lectores. Algunos de los enlaces son enlaces de afiliados. Esto significa que si hace clic en el enlace y compra algo, recibiré una comisión de afiliado. Pero nunca te costará más. ¡Gracias por su apoyo!

Victor Duse, fundador de DiviMundo