¿Cómo puedo invertir el orden de las columnas de Divi en la versión móvil?

Publicado el 08/07/2021 | 17 comentarios

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.

inverser colonnes divi
Invertir las columnas de Divi sólo en la versión móvil

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.

column reverse divi
Propiedad: flex-dirección - Valor: columna-inversa

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:

snippet reverse column
Cambiar la dirección de las columnas de Divi
  1. 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).
  2. 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).
  3. Añade el siguiente código:
@media screen and ( max-width: 980px ) {
    .inverse {
        display: flex;
        flex-direction: column-reverse;
    }
}
  1. 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:

¿Qué te parece?

inverser colonne mobile
inverser colonnes
reverse column

740 palabras

3

Puede que a ti también te guste:

Comment personnaliser le curseur de la souris sur votre site ?

¿Cómo personalizar el cursor del ratón en su sitio?

¿Desea un sitio personalizado hasta el último detalle? Tengo un tutorial rápido y fácil para ayudarle a personalizar el cursor del ratón en su sitio. De este modo, cuando sus visitantes pasen por encima de un enlace, el cursor estará totalmente personalizado.

17 Commentaires

  1. françoise

    Bravo!
    Comme d’habitude, clair, simple et efficace!

  2. Denis

    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.

  3. Lycia Diaz

    Merci Françoise

  4. Lycia Diaz

    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.

  5. Lucie

    Trop bien, merci !! 😀

  6. Gransart

    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

  7. Lycia Diaz

    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

  8. valerie M.

    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…

  9. Lycia Diaz

    Merci Valérie

  10. Valérie M.

    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

  11. Lycia Diaz

    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.

  12. Valérie M.

    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

  13. Lycia Diaz

    Merci Valérie

  14. François

    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.

  15. Lycia Diaz

    Oui François, l’affichage mobile ne sert qu’à observer et non à paramétrer

  16. Marine

    Merci infiniment Lycia !!!

  17. Lycia Diaz

    De rien 😉

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto