Te has dado cuenta y te molesta... Te gustaría invertir el sentido de las columnas de Divi en la versión móvil.
Cuando creas un diseño con el texto a la izquierda y una imagen a la derecha y luego viceversa en la siguiente línea, la versión móvil está desplazada y tu diseño no es óptimo.
Si está en tu blog, puede desaparecer, pero si está en el sitio de tu cliente, no tardarán en darse cuenta y pedirte que lo arregles.
Buenas noticias, en este artículo verás que es muy sencillo invertir el sentido de las columnas en las versiones para móviles y tabletas. ¡Aquí vamos!
Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.
1 - Invertir las columnas de Divi: video tutorial
Por una vez, empecemos por ver el vídeo. De este modo, verá directamente lo que tiene que hacer para corregir este problema y luego entraremos en las explicaciones detalladas...
2 - El flexbox: una propiedad CSS esencial
Como has visto en el vídeo, puedes cambiar fácilmente la dirección de las columnas en Divi en versión móvil, ¡sólo con 2 o 3 líneas de CSS!
Esto es posible gracias a Flexbox, un proyecto integrado en CSS3 en 2016.
Con la propiedad mostrar:flexpropiedad, ¡puedes hacer muchas cosas! De hecho, puedes hacer cualquier cosa:
- Cambia la dirección con el flexión de la dirección
- Cambiar el cruce de líneas con envoltura flexible
- Cambia la alineación horizontal con justify-content
- Cambia la alineación vertical con alinear elementos y align-content
- Cambiar el orden de los elementos hijos con pedir
- etc.
¡En definitiva, créeme, el flexbox es un salvavidas 🤣 ! Y en el caso de este artículo, es flexión de la dirección que nos permite cambiar la dirección de las columnas de Divi.
Para entender mejor cómo funciona, consulte el artículo Trucos CSS.
¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA
3 - Consultas de medios: esenciales para la respuesta
El otro elemento esencial para cambiar la dirección de las columnas de Divi en el móvil es el uso de consultas de medios.
De hecho, no querrás invertir las columnas en las versiones de escritorio, ¿verdad? Lo que queremos es que funcione sólo en tamaños de pantalla pequeños.
Así que las consultas de medios son esenciales. También es CSS, así que no es nada complicado de entender. Si yo lo aprendí solo con más de 30 años, tú también puedes 🤪.
Las consultas de medios permiten crear reglas CSS basadas en el tamaño de la pantalla. Esta es la bases del diseño responsivo.
En nuestro caso, aquí, necesitamos actuar en pantallas pequeñas, menores de 980px. Por lo tanto, la regla utilizada será @media screen y ( max-width: 980px ).
Para entender bien cómo funcionan las consultas de medios, consulte el artículo publicado en AlsaCréation.
¿Necesitas dominar Divi? ¡Descubre mi formación que te guiará paso a paso en la comprensión y uso de Divi! Más información sobre la formación en Divi.
4 - Invertir la dirección de las columnas de Divi en 3 clics
Como has visto en el vídeo, es muy fácil, aquí tienes los pasos:
- En primer lugar, abra la configuración de la fila (verde) que contiene las columnas que deben invertirse en la versión móvil. Ir a la Avanzado y añadir una clase CSS llamada revertir (esto es un ejemplo, puedes ponerle el nombre que quieras).
- A continuación, ve a la pestaña Divi > Opciones del tema > Personalizar CSS (hay varias formas de hacerlo). añadir código a Divi).
- Añade el siguiente código:
@media screen and ( max-width: 980px ) {
.inverse {
display: flex;
flex-direction: column-reverse;
}
}- Guarde los cambios.
Ya está, ¡nada más fácil! Ahora tus columnas se muestran en el orden correcto cuando visitas tu sitio en versión móvil.
Por supuesto, como se muestra en el vídeo, tendrá que añadir el CSS revertir a todas las filas (en verde) de su sitio que están causando un problema. Los que están en el orden correcto en la versión móvil no necesitan esta clase.
5 - En conclusión
¿Qué te parece este minitratamiento fácil de aplicar?
Investigando un poco en la web, encontré tutoriales mucho más complicados para conseguir el mismo resultado. Por ejemplo, aquí hay dos de ellos:
- Cómo ajustar el orden de las columnas de Divi en los dispositivos móviles
- Cómo controlar el orden de apilamiento de las columnas de Divi en el móvil
¿Qué te parece?
Bravo!
Comme d’habitude, clair, simple et efficace!
Super bien, je vais utiliser. En effet, combien de fois je me suis enquiquiné à faire de belles présentations sur Mac pour les retrouver sans queue ni tête sur portable et obligé de recomposer tout ce que j’avais fait pour que cela soit cohérent.
Intéressant d’autant qu’aujourd’hui on ne peut pas se passer du visuel sur portable. Beaucoup de consultations de site commencent sur l’iPhone pour finir sur l’IPad ou le Mac.
Merci Françoise
Merci Denis. Oui tu as raison… moi pour mes blogs c’est surtout sur desktop que vient le trafic mais c’est normal car c’est ma thématique qui veut ça. Pour les autres thématiques, c’est clairement les versions mobiles qui s’imposent.
Trop bien, merci !! 😀
Bonjour Lycia, je voudrais te soumettre un petit problème auquel je suis confronté et pour lequel je ne trouve pas la solution idéale.
Quand tu utilises le module témoignage dans Divi, celui-est relativement bien fait mais lorsque tu en as beaucoup, cela va vite occuper un espace visuel important, tu peux toujours les mettre sur quatre colonnes et cinq rangs, mais ça risque d’être pénible à l’écran surtout sur ton iPhone, une vraie litanie.
Alors, je m’étais dit pourquoi ne pas essayer de faire ça sous mode carrousel, mais les plugins que j’ai testés ne sont pas terrible (wowcarousel -divi people par exemple) et au niveau du responsive c’est la cata.
Aurais-tu une idée comment gérer le sujet ?
Merci par avance de ta réponse
Salut Gransart, non je n’ai pas trop de solution, il faut trouver un autre plugin, mais tu peux essayer des plugins pas obligatoirement conçus pour Divi, sur le répertoire de WordPress, tu en trouveras certainement un qui convient
J’adore !
Lycia, tu es toujours au rendez-vous quand on a besoin de conseil !
un grand merci pour ce tuto qui va m’être fort utile…
Merci Valérie
Bonjour Lycia, encore moi… ce tuto ne fonctionne pas sur les « sections spéciales » avec des colonnes différentes ?
ou bien j’ai mal fait ? Merci de ton retour,
Valérie
J’ai pas essayé sur les sections spéciales, il est possible qu’elles fassent appel à des classes CSS différentes, il faut inspecter le code.
Lycia,
J’ai fait une demande à ET et voilà le css :
@media (max-width: 980px){
.et_pb_section_6.inverse.et_section_specialty .et_pb_row {
display: flex;
flex-direction: column-reverse
}
}
ça peut servir à d’autres personnes aussi… je partage.
A bientôt
Merci Valérie
Très bon tuto qui me sauve lol. A noter que l’affichage responsive mobile sous l’éditeur Divi n’inverse rien, mais si vous le faites depuis la page de votre site avec la console de développeur (F12), cela s’affiche parfaitement.
Oui François, l’affichage mobile ne sert qu’à observer et non à paramétrer
Merci infiniment Lycia !!!
De rien 😉
Bonjour j’aurais aimé savoir à tout hasard si vous sauriez comment inverser des colonnes d’une section spéciale de Divi ?
Bonne question, j’ai pas essayé, il faut certainement changer la classe CSS