Tutorial Divi: Cambiar el orden de las columnas en móvil

En este video tutorial te enseñaremos a cambiar el orden de las columnas en móvil dentro de Divi de manera sencilla con un par de códigos CSS

Tiempo de lectura estimado: 3 minutos

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

Índice

Seguramente te ha pasado que necesitas cambiar el orden de los elementos en móvil, pues bien, eso se puede lograr cambiando el orden de las columnas en móvil, y en este tutorial te enseñaremos a hacerlo de forma super fácil. ¿Quieres ver el resultado? checalo:

¿Cómo podemos cambiar el orden en las de las columnas en móvil?

Cómo puedes ver en la imagen anterior, tenemos un par de columnas dentro de nuestro viewport de pantalla, ahora imaginemos que la columna de la de la izquierda tiene un módulo de texto y la de la derecha un módulo de imagen. De forma predeterminada, Divi apilará estas columnas de izquierda a derecha, por lo que en dispositivos móviles, el módulo de texto estaría en la parte superior y el módulo de imagen en la parte inferior.

Quizá te pueda interesar: Cómo activar el efecto parallax en móvil dentro de Divi.

Pues bien, para cambiar esto, necesitarás algo de CSS, pero no te asustes, será algo sencillo. No vamos a agregar un montón de clases CSS confusas y fragmentos de código largos cómo lo a presentado Elegant Themes en algunos de sus tutoriales, en cambio, ¡vamos a resolverlo con unas pocas lineas de código directamente en el constructor Divi!

Paso #1. Agrega 2 líneas de CSS a la configuración de la fila

Lo primero que debes hacer es agregar algo de CSS a la configuración de la fila en Divi. Este CSS es necesario para indicarle a las columnas dentro de la fila que se muestren con la propiedad flex, con un tipo de CSS.

Ve a la configuración de fila > Avanzada > CSS personalizado > Elemento principal. Ahora pega el siguiente fragmento de CSS:

display: flex;
flex-wrap: wrap;

Paso #2. Indícale a cada columna el número de orden en el que quieres que se muestre:

Dentro de la configuración de la fila, verás las columnas que tienes en ella. Has clic en el icono de configuración de cada columna y ve a la pestaña Avanzado > CSS personalizado > Elemento principal.

order: 1;

Para cada columna, debes decidir en qué orden deseas que se apilen en el dispositivo móvil. Después de esto tienes que agregar las palabras “orden: 1;” y “orden: 2” etc. a las columnas para dar el orden que quieres.

Puedes hacer esto para tantas columnas como quieras, y darle el orden que desees, 2, 3, 4, 5 o 6.

¡Y eso es todo! Así es como puedes cambiar el orden de las columnas en móvil. La columna que estaba a la izquierda en el escritorio, el texto, ahora está a la derecha. La columna que estaba a la derecha en el escritorio, la imagen, ahora está en la parte superior.

Conclusión.

Con este tutorial logramos resolver un problema de manera super simple, pero que al mismo crea un excelente orden en los elementos de nuestro diseño ¿Qué te ha parecido? ¿Sencillo verdad?

Artículos relacionados

Comentarios

  1. de mucha ayuda tu tutorial, me volvia loco por encontrar una solucion. Otra cosita, habría alguna forma de construir libremente una Sección en modo Especialidad? porque las que vienen por defecto no siempre se acomodan a las necesidades propias. Gracias…

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →