Marketing 24/7

2 Formas de Cómo Cambiar el Orden de las Columnas en Divi para Móvil

por | Divi | 0 Comentarios

Una de las preguntas frecuentes en los grupos de Divi, es la de “Cómo Cambiar el Orden de las Columnas en Divi para el Móvil”.

Hace tiempo que tuve la misma necesidad.

Cuando en tu diseño de escritorio tienes una fila con dos columnas, al cambiar a vista de dispositivo móvil, por default, Divi mostrará el contenido de la primera columna arriba y el de la segunda columna abajo.

El inconveniente cuando mostramos información de forma alternada, por ejemplo, imagen en la primera columna y texto en la segunda, y lo contrario en el siguiente renglón o fila, es que en la vista móvil habrá un problema.

Y será que en la vista de escritorio se verá muy bien, pero en tableta y móvil veremos una composición de Imagen–Texto / Texto–Imagen, lo cual lucirá, raro —por no decir horrendo—.

La solución es cambiar el orden de las columnas en Divi para cuando el dispositivo sea una tableta o un móvil, lo cual hace que al apilarse las columnas el diseño tenga más sentido.

Tal cual en la imagen siguiente:

Cambiar el Orden de las Columnas en Divi

Vista en equipo de escritorio con imagen a la izquierda y contenido a la derecha en la primera fila e invertido en la siguiente fila.

Mientras que en tableta y móvil, estaríamos viendo como sigue:

Cambiar el Orden de las Columnas en Divi

Ahora, el mismo diseño en un móvil vemos que la segunda fila muestra primero el contenido y luego la imagen, ya que Divi apila las columnas de izquierda a derecha en los dispositivos como tabletas y móviles.

Cómo Cambiar el Orden de las Columnas en Divi para el Móvil

Sin embargo, pensando un poco en lo que ofrece Divi, descubrí una primera forma de conseguir esto invertir el orden de las columnas.

Porque eso es algo más de lo fuerte en Divi, que siempre proporciona una solución fácil para crear un mejor sitio web.

Ya sea con las opciones nativas del constructor visual, o mediante el uso de CSS.

Es lo mismo en este caso.

Así que, sigue los pasos a continuación para lograr cambiar el orden de las columnas en Divi para el Móvil y así una vista de diseño perfecta para cualquier dispositivo.

Empezamos con esta…

Apilamiento Inverso Sin CSS de las Columnas en Divi para Dispositivos Móviles

La primera forma de cambiar el orden de las columnas en Divi, no requiere de ninguna habilidad adicional o especial más allá de conocer Divi.

Esta forma de cambiar el orden de las columnas en Divi para el móvil no requiere de CSS, ni de JavaScript, ni de plugins.

Todo lo que necesitas es seguir los siguientes pasos.

En tu diseño de imagen–texto / texto–imagen, duplica la segunda fila.

Cómo Cambiar el Orden de las Columnas en Divi

En la fila duplicada, da clic en el icono de configuración e invierte el orden de las columnas, es decir, pon el contenido en la primera columna y en la segunda columna, la imagen.

Configuración fila para Cambiar el Orden de las Columnas en Divi

Ahora, da clic derecho en el ícono de configuración — rueda dentada— de la fila y selecciona Deshabilitar.

Orden de las Columnas en Divi

Y ahí deshabilita para Tableta y Móvil.

DEshabilitar tableta y móvil para Cambiar el Orden de las Columnas en Divi

En la siguiente fila, repite el paso anterior, pero ahora deshabilita Escritorio.

Podremos ver que dejó de ser un diseño raro y ahora el diseño es imagen-contenido / imagen-contenido.

Apilamiento Inverso Con CSS de las Columnas en Divi para Dispositivos Móviles

Yendo un poco más allá, veamos la manera de cambiar el orden de las columnas en Divi para conseguir el miso diseño, pero esta vez con CSS y aprovechando la propiedad “flex”.

No es mucho lo que se necesita para invertir el orden de las columnas con CSS. Lo que tienes que hacer es seguir los pasos y usar el CSS personalizado que dejo más adelante.

Display: flex, que es uno de los nuevos valores HTML5, nos permite maquetar páginas web de una manera más fácil de lo que se hacía con la forma tradicional, en la que utilizábamos propiedades como float, block o inline, entre otras.

La declaración display: flex; no es más que definir un “contenedor flexible” que convierte a sus «hijos» directos, de forma automática, en «elementos flexibles».

Vayamos allá…

En esta imagen del modo WireFrame, se muestra la estructura del diseño, y es en la segunda fila en donde agregaremos una clase CSS.

Vista de Wireframe Divi

Ahora da clic en el icno de configuración de la fila —la segunda— cuyo contenido deseas invertir en los dispositivos móviles —rueda dentada—, y luego a la pestaña de configuración avanzada.

Luego, en el campo de entrada para la Clase CSS de la configuración, ingresa el nombre de la clase para invertir las columnas.

Campos Clase CSS Divi

Por ejemplo, escribe reverse-column en el campo de Clase CSS de la fila.

Puedes nombra la clase como quieras, solo asegúrate de cambiar también el nombre de la clase en el código que agregarás más adelante.

Ahora, después de esto, en el escritorio de WordPress, ve a las opciones de Divi y desplázate a la sección de CSS personalizado.

Agrega ahí el código CSS personalizado a continuación:

Campo CSS Personalizado de Divi

[CSS]
@media screen and ( max-width: 980px ) {
.reverse {
    display: flex;
    flex-direction: column-reverse;
    }
}
[CSS]

Como otra opción para hacer que las columnas se inviertan en tabletas y dispositivos móviles, puedes también agregar este CSS personalizado en el archivo style.css.

Sin embargo, cuando agregues CSS personalizado en el archivo de estilos —style.css—, asegúrate de agregarlo en el archivo de tema hijo —child theme—, o perderás los cambios con las actualizaciones de Divi.

Si de alguna manera, después de aplicar este CSS personalizado, las columnas no se han invertido en los dispositivos móviles, debes revisar que agregaste el nombre de la clase correcta dentro de la fila y/o style.css.

Tercera Opción para Invertir el Orden de las Columnas de Divi en Móvil

Existe una tercera forma, que no solo sirve para lo mismo, sino que podríamos reordenar una fila de más columnas.

Por ejemplo, una fila de tres y ponerle a cada columna el orden en que esta aparecerá en dispositivos móviles.

Para ellos, ve a la configuración de la fila y en la pestaña de Avanzado y abre la sección de CSS personalizado. Pegue entonces el siguiente fragmento de CSS para el Elemento principal —Main Element—.

display: flex;
flex-wrap: wrap;

Esto es tan solo el paso 1. El último paso, que es aún más fácil es ir dentro de la configuración de la fila, donde verás una lista de sus columnas.

Haz clic en el icono de configuración de la columna, luego en la pestaña de Avanzado de la misma y abre la sección de CSS personalizado.

Ahora, para cada columna, debes decidir en qué orden desea que se apilen las columnas en los dispositivos móviles.

Todo lo que tienes que hacer es agregar las palabras “order: 1;”, “order: 2”, etc. a las columnas.

Escribe o copia y pega el siguiente código CSS en el campo de Elemento principal.

order: 1;

Y eso es todo.

Así es como se apilan las columnas en Divi en móvil, lo que es equivale a cambiar el orden de las columnas en Divi de tu vista de escritorio.

La columna con texto —de la segunda fila— que estaba a la izquierda en el escritorio, ahora estará abajo de la imagen en un móvil. Esa misma columna con imagen que estaba a la derecha en el escritorio, ahora en el móvil estará en la parte superior, es decir, arriba del texto.

Como cambiar el orden de las columnas en Divi

Ya lo tienes, Imagen – Texto / Imagen – Texto. Ahora, a utilizarlo cuando haga falta, dependiendo de la forma que más te guste o se te facilite.

Yo solía hacerlo deshabilitando la sección que se mostraba solo en escritorio a la vez que habilitaba la del móvil, pero, aunque no lo he comprobado, esto debe consumir más recursos, lo que ralentizaría un poco la carga de la página.

Aunque no importa el método que elijas, sobre este importante tema de la velocidad de carga de tu web, puedes leer este post sobre Cómo Optimizar WordPress para que Tu Web Cargue Rápido.

Pero al final, todo depende de tus preferencias. Si te ha sido útil este tutorial, regálame un comentario, o dale compartir en la red que tú gustes.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Recursos Recomendados

Divi WordPress Theme ActiveCampaign Bloom Namecheap BanaHosting Swift Performance
Estas son herramientas que uso y recomiendo porque sé lo poderosas que son y tienen un enlace de afiliado, lo que quiere decir que si compras una de estas herramientas recibiré una pequeña comisión sin que eso quiera decir que tú tengas que pagar. El precio seguirá siendo el mismo.

Jorge Salazar

Ayudo a profesionistas independientes y a dueños de pequeñas y medianas empresas a conseguir más leads y más clientes a través del Marketing Digital.

APÚNTATE AQUÍ

Y obtén tutoriales y consejos accionables de Marketing Digital directo en tu bandeja de entrada enviados cada 15 días.

You have Successfully Subscribed!

Pin It on Pinterest

Share This