Lo notaste, y te molesta... Te gustaría. invierte la dirección de las columnas de Divi en versión móvil.
De hecho, cuando creas un diseño con texto a la izquierda y una imagen a la derecha entonces viceversa en la siguiente línea, la versión móvil se cambia y tu diseño no es óptimo.
Si está en su blog, puede pasar, pero si está en el sitio web de su cliente, no le llevará mucho tiempo verlo y pedirle que lo corrija!
Buenas noticias, en este artículo verás que es muy simple invertir la dirección de la columna en versión móvil y tableta ¡Oye! ¡Aquí vamos!
1 – Columnas Divi inversas: Tutorial de vídeo
Una vez que no es habitual, empecemos viendo el video. Así, verás directamente lo que necesitas hacer para corregir este problema y luego nos movemos a las explicaciones detalladas...
2 - El flexbox: propiedad CSS esencial
Como viste en el video, podemos fácilmente modificar la dirección de las columnas Divi en versión móvil, simplemente gracias a 2 o 3 líneas de CSS !
Esto es posible gracias a la Flexbox, un proyecto integrado con CSS3 en 2016.
Con la propiedad display:flex¡Podemos hacer muchas cosas! Podemos hacer cualquier cosa de hecho:
- Cambiar dirección con propiedad Dirección flex
- Cambiar el interruptor a la línea con flex-wrap
- Cambiar la alineación horizontal con justificación-contenido
- Cambiar la alineación vertical con Temas alineados y align-content
- Cambiar el orden de los elementos del niño con orden
- etc.
De todos modos, créeme, flexbox salva vidas! Y en el caso de este artículo, es Dirección flex que nos permite cambiar la dirección de las columnas Divi.
Para entender mejor cómo funciona esto, no dude en consultar El artículo CSS Tricks.
¿Lo sabías? Puedes probar Divi gratis visitando en esta página y haciendo clic en "Pruébalo GRATIS"
3 – Les media queries : indispensables pour le responsive
Otro elemento esencial para modificar la dirección de las columnas Divi en el móvil es el uso de consultas de medios.
De hecho, no quieres columnas inversas en versiones de escritorio, ¿verdad? Lo que queremos es que sólo actúa en tamaños pequeños de pantalla!
Así que... consultas de medios son indispensables. También es CSS, así que nada complicado de entender. Si lo aprendí sola a más de 30 escobas, también puedes aprenderlo. 🤪.
El consultas de medios permite crear reglas CSS dependiendo del tamaño de las pantallas. Es el base de diseño sensible.
En nuestro caso, aquí necesitamos actuar en pantallas pequeñas, menos de 980px. Por lo tanto, la regla utilizada será @media pantalla y ( max-width: 980px ).
Para entender cómo funcionan las consultas mediáticas, no dude en consultar El artículo publicado en AlsaCreation.
¿Necesitas dominar Divi? Descubre mi entrenamiento que te acompaña paso a paso en la comprensión y uso de Divi! Más información sobre Divi training.
4 - columnas Divi inversas en 3 clics
Como viste en el video, es muy fácil, aquí están los pasos:
- Primero, abre la configuración de la línea (verde) que contiene las columnas para ser revertidas en una versión móvil. Vaya a la pestaña Avances y añadir una clase CSS inversión (Este es un ejemplo, puedes nombrarlo como quieras).
- Luego vas a la pestaña Divi Opciones temáticas Personalizar CSS (hay varias maneras añadir código en Divi).
- Añade el siguiente código:
@media screen and ( max-width: 980px ) {
.inverse {
display: flex;
flex-direction: column-reverse;
}
}- Guarda tus cambios.
¡Ahí, nada más simple! Ahora sus columnas muestran el orden correcto cuando visita su sitio en una versión móvil.
Por supuesto, como se indica en el vídeo, tendrá que añadir la clase CSS inversión en todas las filas (verde) de su sitio que plantean un problema. Aquellos en el orden correcto en la versión móvil no necesitan esta clase.
5 - En conclusión
¿Qué dices de este mini-tips fácil de aplicar?
Al hacer algunas investigaciones en la web, encontré tutoriales mucho más complicados para lograr finalmente el mismo resultado! Por ejemplo, aquí hay dos:
- Cómo ajustar el orden de columnas Divi en dispositivos móviles
- Cómo controlar el orden de apilación de columnas Divi en móvil
¿Qué piensas?
19 comentarios