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
Í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?
Excelente guia amigo, me costo en un comienzo por la estructura de la web que estoy diseñando, pero logré solucionarlo. Gracias.
¡Que bueno que te ha funcionado!
Buenos días y gracias por todo lo primero.
¿Sabéis si es posible cambiar el orden de módulos en una columna en vista móvil? No lo encuentro por ningún lado.
Gracias otra vez
En este caso no Cristina, allí lo que te aconsejaría sería que dupliques los módulos y restringas la vista en desktop, luego ordena los módulos como deseas que se vean en móvil.
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…
Que bueno que te ha funcionado Juan. Respecto a tu pregunta, no la entiendo mucho, si la reformulas quizá pueda ayudarte con una respuesta. Saludos.
Hola!
Logre modificar el orden de las columnas, pero ¿se podrá hacer lo mismo con el contenido dentro de las comunas?
Que tal Edgar, allí lo recomendable es colocar lo módulos en el orden que lo necesitas.
hola! se puede hacer esto para secciones especiales? la que se hace en color naranja. Lo probé y no me funcionó.
Gracias
Que tal, no, no aplica para la sección especial.
Hola a todos … una pregunta… ¿es posible ordenar los módulos con un sistema parecido a lo que hiciste con las columnas?
Que tal Víctor, me parece que no, porque recuerda que el sistema de más columnas en realidad lo que se colocan son más módulos como tal, y no más columnas o filas.
Ok… comprendo… bueno la manera en como lo solucioné es hice una columna y ordené de acuerdo como lo necesitaba que se mostrara en dispositivos móviles (no sé si es correcto como lo hice pero funciono) entonces alineaba hacia la izquierda o derecha según iba necesitando e iba ajustando la separación tanto de altura como de relleno para que quedara como lo necesitaba