CONTACT

    Bonjour,

    Nous allons aujourd'hui continuer notre périple dans l'agencement des colonnes et des modules dans Divi grâce à la flexbox CSS. Cette fois nous parlerons d'automatisation, afin de faciliter les mises en page sur deux colonnes de style "damier" ou "mosaïque", et de simplifier leur maintenance.

    Vous verrez qu'en plus d'améliorer le processus de développement, les techniques abordées sont complètement SEO-friendly 🙂

    Inconvénients d'une mise en page manuelle

    Imaginons donc que nous voulons créer une section de style damier, contenant des lignes de deux colonnes, en alternant texte et photo à droite et à gauche. Un cas très classique aujourd’hui, et qui est souvent maltraité (oui, tout attaché !).

    Naturellement, on a envie de concevoir la mise en page en priorité desktop, c'est-à-dire en créant les colonnes et en positionnant les modules comme on les imagine sur un affichage desktop, donc alternés droite-gauche.

    Incompatibilité avec les principes de base du SEO

    Premier problème, nous l'avons vu dans le dernier article, cette méthode n'est pas saine vis-à-vis du référencement naturel.

    En effet, si par exemple le texte d'un module contient des balises de titre, alors cela signifie que l'image associée (qu'elle soit à droite ou à gauche) doit se trouver après dans le code, pour respecter la structure logique du contenu (l'image et le texte alternatif qui l'accompagne doivent impérativement correspondre au titre du paragraphe englobant).

    Si nous plaçons dans le builder Divi une image à gauche, elle sera "contenue" dans le paragraphe précédent, donc pratique à proscrire. Il faut absolument adopter une démarche "mobile-first" et conserver toutes les images à droite.

    Évolution et maintenance insupportables

    Second problème, et c'est le sujet qui nous intéresse dans cet article, un arrangement manuel de la sorte est complètement rédhibitoire par rapport aux modifications futures !

    En supposant que nos textes ne contiennent pas de titre (mais ce n'est surement pas le cas le plus courant), on pourrait se dire qu'une mise en page à la main est possible et qu'elle est quand même "SEO-propre". OK, mais pensons maintenant à l'avenir de notre section.

    Quelques exemples tout bêtes :

    • J'ai commencé mon damier par le texte à gauche, et je voudrais essayer la configuration inverse. Euh, aïe, je dois échanger à la main tous les modules de toutes mes lignes !
    • Je voudrais insérer une nouvelle ligne dans ma section... Même combat, je dois inverser toutes les lignes suivantes (ou précédentes).
    • Je voudrais déplacer ou supprimer une ligne, idem.

    En gros, dès qu'on dépasse 2 ou 3 lignes, les modifications dans l'agencement commencent à devenir sérieusement pénibles. Il faut vraiment procéder autrement si on ne veut pas faire de cauchemars à base de rectangles bleus, verts et gris !

    L'automatisation ou le miracle du CSS

    Heureusement, le CSS est là pour nous aider ; il fournit tous les outils nécessaires pour réaliser et surtout modifier ces mises en page automatiquement, en respectant les contraintes SEO liées à la hiérarchie des titres.

    Le sélecteur CSS ":nth-of-type()"

    Le principe est simple : nous allons utiliser ce que nous avons déjà vu en CSS pour ajuster le placement des colonnes ou encore aligner verticalement les modules d'une colonne, mais au lieu d'appliquer le CSS à une ligne ou à une colonne, nous allons cibler automatiquement tous les éléments qui nous intéressent au travers de la section qui les encapsule.

    Pour ce faire, on utilise par exemple le sélecteur CSS :nth-of-type(), qui permet de désigner d'un seul coup un ensemble d'éléments du même type, ici les lignes de la section à altérer.

    Exemple du damier texte-image

    Voici donc ma méthode pour créer automatiquement un damier "SEO-cool" et facile à mettre à jour par la suite :

    1. Création des lignes avec colonnes texte et image, le texte étant TOUJOURS à gauche, l'image à droite (structure logique pour le SEO).
    2. Application de la classe "checkerboard" à la section damier contenant les lignes.
    3. Ajout du CSS dans les options globales Divi ou celles de la page uniquement.

    Pour le choix des lignes à cibler, deux cas :

    • on commence texte à gauche : il faut inverser les colonnes des lignes paires ;
    • on commence texte à droite : on inverse les lignes impaires.

    Le CSS pour démarrer texte à gauche :

    @media only screen and (min-width: 981px) {
      .et_pb_section.checkerboard .et_pb_row:nth-of-type(even) {
        display: flex;
        flex-direction: row-reverse;
      }
    }

    Pour démarrer texte à droite, on utilise :nth-of-type(odd) pour cibler les lignes paires.

    Remarque : Je considère ici que la valeur de gouttière est 1, afin de supprimer les marges entre les colonnes. Pour des gouttières de 2, 3, 4, il faut penser à inverser la marge à droite des deux colonnes comme on a vu dans l'article précédent :

    @media only screen and (min-width: 981px) {
      .et_pb_section.checkerboard .et_pb_row:nth-of-type(even) {
        display: flex;
        flex-direction: row-reverse;
      }
      .et_pb_section.checkerboard .et_pb_row:nth-of-type(even) .et_pb_column:first-of-type {
        margin-right: 0 !important;
      }
      .et_pb_section.checkerboard .et_pb_row:nth-of-type(even) .et_pb_column:last-of-type {
        margin-right: 8% !important;
      }
    }

    Exemple du centrage vertical

    Et si vouliez centrer verticalement le contenu de toutes les colonnes d'une section ? Ajoutez la classe "vertical-center" à votre section et le CSS suivant :

    @media only screen and (min-width: 981px) {
      .et_pb_section.vertical-center .et_pb_row {
        display: flex;
      }
      .et_pb_section.vertical-center .et_pb_column {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }

    Bonus : Même plus besoin de cocher "harmoniser les hauteurs des colonnes" car le "display: flex" sur les lignes a le même effet 🙂

    Pas de limites...

    Et pourquoi pas combiner les deux exemples ? Et tiens, ajoutons aussi 10% de padding horizontal aux modules texte pour les décolles des bords. On obtient au final :

    @media only screen and (min-width: 981px) {
      .et_pb_section.checkerboard .et_pb_row {
        display: flex;
      }
      .et_pb_section.checkerboard .et_pb_row:nth-of-type(odd) {
        flex-direction: row-reverse;
      }
      .et_pb_section.checkerboard .et_pb_column {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .et_pb_section.checkerboard .et_pb_text {
        padding: auto 10%;
      }
    }

    Bien sûr, selon vos besoins, il faudra surement adapter la gouttière ou le padding des lignes pour ajuster l'espacement des éléments. Vous voudrez peut-être utiliser des modules textes uniquement avec des images de fond afin de remplir complètement les "cases" du damier (images en mode "cover").

    Vous pourrez également utiliser plusieurs modules par case afin d'enrichir votre layout.

    Bref, maintenant que le processus d'inversion des colonnes est en place, à vous de faire évoluer le bloc de code CSS pour coller à votre cahier des charges et réaliser des mises en page "damier" au millimètre !

    Conclusion

    Facile, non ? Avec quelques lignes de CSS, on réalise une mise en page automatique et optimale pour le référencement naturel en quelques secondes, à partir d'un simple empilement d'éléments. Vous pouvez par la suite ajouter, déplacer ou supprimer des lignes, et toutes les éléments seront toujours automatiquement positionnés, centrés, "paddés"...

    Plus de déplacement de modules à la main, plus d'options à modifier pour toutes les lignes, plus de classe à positionner pour toutes les lignes ou colonnes !

    Et même si la démarche n'est pas complètement naturelle au début et qu'elle vous semble plus chronophage, vous verrez que vous y gagnerez beaucoup en maintenance.

    Si de plus vous procédez de la même façon sur toutes vos pages (et tous vos sites pour certains), donc conception "mobile-first" puis CSS, il suffira de quelques bouts de CSS dans votre boîte à outils pour modifier instantanément l'apparence d'une section où qu'elle soit. Très pratique pour tester rapidement plusieurs configurations.

    15 commentaires sur cet article

    1. C'est magique !
      Merci pour ce partage !
      L'année dernière j'ai fait un site avec une mise en page en damier et aujourd'hui je dois le modifier… j'en profite pour mettre en pratique ce super tuto !
      Merci !!!

    2. Bonjour,

      Merci beaucoup pour ces présieuses explications.

      Du coup pour faire un damier à 4 colonnes par ligne au lieu de 2, pouvez-vous m'éclairer sur la façon correcte de procéder ? il y aura forcement une image à droite d'un texte ?

      Merci par avance pour votre retour

      1. Bonsoir,

        Le code devrait marcher pour 4 colonnes.
        Il va par contre inverser les lignes paires en entier, donc les modules 1-2-3-4 deviennent 4-3-2-1.
        Donc à voir si l'ordre des éléments 1-2 et 3-4 est important.
        Sinon avec la propriété order, on peut choisir un ordre personnalisé : 2-1-4-3

        Je ne comprends pas votre remarque "il y aura forcement une image à droite d'un texte ?", pouvez-vous expliciter ?

    3. Bonjour,

      Merci pour votre réponse si rapide.
      La précision sur la propriété order m'a aussi été très utile.

      J'ai pu bâtir et ordonner mon damier à 4 colonnes, alternant texte et image proprement.

      Effectivement ma question sur l'image à droite du texte n'avait pas de raison d'être; je m'étais mal représenté les alternances.

      Si je peux encore vous poser une question concernant l'empilement des textes et des images pour la version mobile : actuellement les images paraissent écrasées sous les textes. Pouvez-vous m'indiquer la marche à suivre ?

      En vous remerciant encore.

      1. Bonjour,
        Qu'entendez-vous par "paraissent écrasées" ? C'est un peu vague et on n'utilise peut-être pas le même vocabulaire 😉
        Envoyez-moi une capture par email, si vous voulez.

    4. Bonjour,
      Je reviens vers vous car je ne parviens pas à solutionner une problématique relative à la modification des points de rupture de divi concernant une présentation en damier de 4 colonnes sur plusieurs lignes.
      Puis-je vous soumettre mon code ?
      En vous remerciant

      1. Bonsoir,
        Je n'ai pas approuvé votre précédent commentaire contenant le code car il est un peu long et spécifique, mais je le regarde dès que possible.

    5. Bonsoir,

      Juste un mot pour vous informer que le problème est résolu ! En vous remerciant encore.

      Cordialement

    6. Bonjour,
      je voudrais utiliser cette mise en page automatique dans une section spéciale.
      Je me demande comment adapter votre code.
      Pourriez-vous m'y aider?

      bonne journée.

      1. Bonjour,
        Les lignes (vertes) des sections spéciales peuvent être ciblées par la classe .et_pb_row_inner, donc il suffit de remplacer .et_pb_row dans le CSS fourni 😉

    Laisser un commentaire

    Votre adresse IP ne sera pas collectée.
    Vous pouvez renseigner votre prénom ou votre pseudo si vous êtes un humain ;-)