Divi changer l’ordre des colonnes en responsive sur mobile (de quinconce à alternance)

par | 11 Fév 2019 | Apprendre Divi | 8 commentaires

Accueil » Apprendre Divi » Divi changer l’ordre des colonnes en responsive sur mobile (de quinconce à alternance)
partagez-cet-article

Divi : ordre des colonnes sur mobile. Lorsqu’on crée le design d’un site Web, avec Divi ou autre, on peut être amené à créer des alternances, pour créer du rythme, par exemple :

  • Rangée 1, colonne 1 : texte, colonne 2 : image
  • Rangée 2, colonne 1 : image, colonne 2 : texte
  • Rangée 3, colonne 1 : texte, colonne 2 : image
  • Rangée 4, colonne 1 : image, colonne 2 : texte

C’est sympa sur grand écran, mais sur mobile les colonnes disparaissent, chaque colonne passe en pleine largeur, elles passent les unes en-dessous des autres :

Alternance contenu Divi colonnes inversées mobile

Dans ce tutoriel, nous allons voir comment garder cette alternance de colonnes sur grand écran, et la supprimer sur mobile.

Exemple Divi réel : contenu en alternance, en quinconce

Ce que nous avons sur grand écran (desktop) : du contenu en quinconce

colonnes en quinconce divi

Le rendu sur mobile de nos colonnes Divi – en vue téléphone, les colonnes disparaissent, elles passent toutes les unes en-dessous des autres :

Le problème : l’alternance texte/image, image/texte, texte/image, donne un bon effet sur grand écran, mais apporte de la confusion sur mobile.

Nous voudrions avoir :

  • Grand écran : texte/image, image/texte, texte/image
  • Mobile : image/texte, image/texte, image/texte

Pour ce faire, nous allons utiliser du CSS flexbox avec Divi.

CSS Flexbox Divi pour changer l’ordre des colonnes sur mobile

Ajoutez ce CSS à votre site dans votre thème enfant ou dans Divi > Personnaliseur de thèmes > CSS additionnel

/* ordre colonnes sur mobile */
@media all and (max-width: 980px) {
   /* envelopper la rangée dans une flexbox */
   .custom_row {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap; /* Safari 6.1+ */
      flex-wrap: wrap;
   }
   /* classes personnalisées qui désigneront l'ordre
   des colonnes dans la ligne de la flexbox */
   .first-on-mobile {
      -webkit-order: 1;
      order: 1;
   }
   .second-on-mobile {
      -webkit-order: 2;
      order: 2;
   }
   .third-on-mobile {
      -webkit-order: 3;
      order: 3;
   }
   .fourth-on-mobile {
      -webkit-order: 4;
      order: 4;
   }
   /* ajoute une marge à la dernière colonne */
   .custom_row:last-child .et_pb_column:last-child {
      margin-bottom: 30px;
   }
}

Ensuite, appliquez les classes CSS suivantes dans les réglages de la rangée. Pour ajouter une classe à une section, rangée ou module Divi, cliquez sur la roue dentée de l’élément :

Divi réglages rangée

Dans l’onglet « Avancé », vous trouverez le champ « Classe CSS » de votre rangée, et dans l’onglet contenu, vos colonnes :

Divi paramètres colonnes rangée
  • First on mobile (class « first-on-mobile ») signifie : afficher en premier sur mobile
  • Second on mobile (class « second-on-mobile ») signifie : afficher en deuxième sur mobile
  • Third on mobile (class « third-on-mobile ») signifie : afficher en troisième sur mobile
  • Fourth on mobile (class « fourth-on-mobile ») signifie : afficher en quatrième sur mobile

Sauvegardez la page Divi, quittez le Visual Builder, et voici le résultat :

Changer ordre affichage colonne Divi mobile

L’alternance des contenus a bien été supprimée sur affichage mobile, mais reste sur grand écran.

Si cela vous a aidé, ou si vous n’avez pas réussi, laissez un commentaire ci-dessous avec un remerciement ou une question.

8 Commentaires

  1. Badis

    Merci pour ce tuto très clair et précis. J’ai suivi vos conseils et j’ai pu améliorer la présentation de mon site grâce à vous.

    Réponse
    • Jean - netologiste.com

      Bonjour Badis, merci pour votre retour, content d’avoir pu vous aider.

      Réponse
  2. StartDesign

    Bonjour, merci pour votre tuto. J’ai un petit soucis, j’ai bien suivis la procédure, mais ca ne donne aucun résultat. Sur l’affichage mobile ca ne change rien à l’ordre de mes colonnes…

    J’ai pourtant bien appliquez les classes CSS…

    Réponse
    • Jean - Formation Divi WordPress

      Bonjour, vous avez bien appliqué la classe custom_row au conteneur ?
      Il y a peut-être conflit avec votre CSS existant, pouvez-vous essayer dans un projet vierge ?

      Réponse
  3. Alexandre Dennequin

    Bonjour,
    merci pour le tuto. J’ai un peu le même sauf que je veux afficher 3 ou 4 colonnes sur ordi et 2 sur Mobile. Divi me met tout les uns sous les autres.

    Merci de votre retour

    Réponse
    • Jean - netologiste.com

      Bonjour Alexandre,
      C’est quelque chose de différent dans ce cas, il faut appliquer le code des demi-colonnes sur mobile, la width: 47.25%; (ou votre width) et les margin correspondantes
      Je note dans ma longue liste de tâches de faire un tuto là-dessus ou l’intégrer dans une formation
      Vous pouvez aussi me contacter directement pour que je vous aide sur votre site
      Cordialement

      Réponse
  4. Rémi

    Bonjour,
    Merci pour ce tuto, mais dans mes paramêtres de ligne, onglet avancé, j’a n’ai qu’un seul champ pour la class CSS et non un champ par colonne. De ce fait, cela ne fonctionne pas

    Réponse
    • Jean - netologiste.com

      Bonjour Rémi,
      Merci pour votre retour, la partie concernée de l’article a été mise à jour pour la dernière version de Divi.
      Rangée > Contenu > Colonne 1 > Modifier > Avancé > Classe CSS

      Réponse

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

guide-hebergement-wordpress-2019-couv

Formation : "Obtenir son hébergement Web et WordPress"

Un hébergement Web avec votre propre installation de WordPress pour commencer à travailler sur votre site aujourd’hui.

formation WordPress

Formation : "WordPress"

Découvrez WordPress de A à Z : plus de 45 vidéos très détaillées sur le fonctionnement de WordPress.

formation-1-decouvrir-divi

Formation : "Découvrir Divi"

Cette première formation est une bonne introduction à Divi : elle vous permettra de comprendre comment créer et mettre en page des pages sur votre site Internet.

formation2-integration-web-wordpress

Formation : "Divi intégration Web"

Création d'une page Web complexe à partir d'une maquette graphique : l'intégration Web avec Divi et WordPress n'aura plus de secrets pour vous !

Obtenez ma formation Divi gratuitement

Recevez ma formation Divi gratuite avec des astuces pour vous simplifier le quotidien.

Vous allez recevoir un email à l'adresse que vous avez indiqué.