[et_pb_section fb_built=»1″ admin_label=»section» _builder_version=»4.16″ global_colors_info=»{}»][et_pb_row _builder_version=»4.23″ _module_preset=»default» width=»100%» max_width=»2560px» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»]
Conozco tu situación. Has diseñado una web que se ve genial en ordenador, con un efecto perfecto en la vista del usuario, sin embargo, cuando vas al teléfono, el orden no favorece a la navegación ni muestra el contenido como desearías, y no quieres tener que cambiar la versión en ordenador.
No te preocupes, yo te enseño a escoger el orden de las columnas de las filas de Divi según tus preferencias de forma fácil, sin plugins y sin tener que sacrificar contenidos ni nada de nada.
Dos códigos CSS simples, de tres lineas en total son suficiente.
Vista desde el punto de vista de todos los dispositivos
A continuación te muestro como se ve el primer diseño en escritorio, y luego cómo se ve en el teléfono, primero de forma errónea, cuando no hacemos nada, y segundo, de forma correcta cuando aplicamos la solución de este artículo.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.23″ _module_preset=»default» width=»100%» max_width=»2560px» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.23″ _module_preset=»default» header_3_text_align=»center» global_colors_info=»{}»]
Vista en Escritorio
[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/10/vista-columnas-escritorio.jpg» alt=»vista columnas escritorio» title_text=»vista columnas escritorio» align=»center» _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row column_structure=»1_2,1_2″ _builder_version=»4.23″ _module_preset=»default» width=»100%» max_width=»2560px» global_colors_info=»{}»][et_pb_column type=»1_2″ _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.23″ _module_preset=»default» header_3_text_align=»center» global_colors_info=»{}»]
Vista en el Móvil (antes de arreglar)
[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/10/vista-movil-mal.jpg» alt=»vista movil mal» title_text=»vista movil mal» align=»center» _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][/et_pb_column][et_pb_column type=»1_2″ _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.23″ _module_preset=»default» header_3_text_align=»center» global_colors_info=»{}»]
Vista en el móvil (ARREGLADA)
[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/10/vista-movil-bien.jpg» alt=»vista movil bien» title_text=»vista movil bien» align=»center» _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row admin_label=»row» _builder_version=»4.23″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» width=»100%» max_width=»2560px» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.16″ custom_padding=»|||» global_colors_info=»{}» custom_padding__hover=»|||»][et_pb_text _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»]
Tutorial paso a paso para elegir el orden de las columnas en cada dispositivo en DIVI
Bien, te muestro la solución. Quizás te parezca un poco raro y lioso de primeras, pero si lees con detenimiento este artículo, te garantizo que lo vas a entender a la primera.
A modo de resumen te cuento qué vamos a hacer:
- Vamos a convertir la fila en FLEX, una propiedad CSS, gracias a ella podemos elegir qué caja (columna en este caso) mostrar primero y cuál después.
- Vamos a decirle a la columna que está en la imagen que se muestre la última EN CASO de estar en un dispositivo móvil.
Parece sencillo, ¿no?
¡Pues sí! ¡Vamos a ello!
Paso 1: Convertir la FILA en Flexbox (o flex)
Lo primero será modificar la FILA, lo que en Divi vemos de color verde claro.
[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/10/fila-divi.jpg» alt=»fila divi» title_text=»fila divi» align=»center» _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.23″ _module_preset=»default» custom_padding=»||0px|||» global_colors_info=»{}»]
En la fila nos vamos a ir a Avanzado, y de ahí a CSS personalizado. Tras la última actualización hay dos pestañas, nos vamos a la de la derecha, elementos del módulo, y en elemento principal pegamos este código:
display:flex;
flex-flow: row wrap;
[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/10/modificar-fila.jpg» alt=»modificar fila» title_text=»modificar fila» align=»center» _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.23″ _module_preset=»default» custom_padding=»||0px|||» global_colors_info=»{}»]
Hecho esto nos vamos a Contenido, y nos vamos a modificar la columna que tiene la imagen
[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/10/modificar-columna-imagen.jpg» alt=»modificar columna imagen» title_text=»modificar columna imagen» align=»center» _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.23″ _module_preset=»default» custom_padding=»||0px|||» global_colors_info=»{}»]
Dentro de modificar el estilo de la columna, nos vamos a avanzado, CSS personalizado, elementos del módulo, y seleccionamos las opciones responsive y le damos a la opción del teléfono, y allí le pondremos el código:
order:999;
[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/10/ajustes-responsive.jpg» alt=»ajustes responsive» title_text=»ajustes responsive» align=»center» _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.23″ _module_preset=»default» custom_padding=»||0px|||» global_colors_info=»{}»]
OJO: fíjate que estás haciéndolo solo en el móvil (punto 5 de la imagen)
[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/10/ajustes-columna-con-imagen.jpg» alt=»ajustes columna con imagen» title_text=»ajustes columna con imagen» align=»center» _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.23″ _module_preset=»default» custom_padding=»||0px|||» global_colors_info=»{}»]
¡Listo! Tu columna se ve en orden correcto en el escritorio y en el orden correcto en el móvil.
Puedes jugar con esto y mostrar lo que te convenga en cada momento.
[/et_pb_text][et_pb_text _builder_version=»4.23″ _module_preset=»default» custom_padding=»||0px|||» global_colors_info=»{}»]
Repetir los pasos para cada fila
Lo que lees en este titulito, esto que has aprendido habrá que hacerlo en cada fila que quieras que tenga estas características.
Resultado final
Este es el resultado final. En ordenador se ven filas escalonadas, y en el teléfono, ordenadas.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=»1_2,1_2″ _builder_version=»4.23″ _module_preset=»default» width=»100%» max_width=»2560px» global_colors_info=»{}»][et_pb_column type=»1_2″ _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.23″ _module_preset=»default» header_3_text_align=»center» global_colors_info=»{}»]
En el ordenador
[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/10/vista-columnas-escritorio.jpg» alt=»vista columnas escritorio» title_text=»vista columnas escritorio» align=»center» _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][/et_pb_column][et_pb_column type=»1_2″ _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.23″ _module_preset=»default» header_3_text_align=»center» global_colors_info=»{}»]
En el teléfono
[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/10/vista-movil-bien.jpg» alt=»vista movil bien» title_text=»vista movil bien» align=»center» _builder_version=»4.23″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section]
