Mise en page automatique CSS en « damier » avec Divi

4 Déc 2017

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).Backend Divi structure en damier
  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.