Ajustement CSS de l’ordre des colonnes dans Divi avec flexbox

28 Nov 2017

Bonjour !

Nous avons vu la dernière fois comment aligner ou répartir verticalement les modules d’une colonne dans Divi. Cette fois ça se passe à l’horizontal ; nous allons apprendre à réordonner les colonnes d’une même ligne afin d’ajuster le design d’un site sur tous les types d’écran tout en respectant la logique structurelle du contenu pour la compréhension de l’utilisateur et pour le référencement.

Pourquoi modifier l’ordre des colonnes en fonction des tailles d’écran ?

Colonnes et « responsive design »

Vous avez déjà dû rencontrer ce problème qui est devenu un grand standard avec le « responsive design » : afficher par souci esthétique un élément (disons une colonne Divi dans notre cas !) à droite d’un autre sur desktop, mais l’afficher sur mobile au-dessus de l’autre, pour l’esthétique aussi ou pour la compréhension du contenu.

On retrouve souvent cette problématique avec les mises en page style échiquier photo-texte, car si le layout est correctement réalisé sur un grand écran, on se retrouve avec une alternance [texte-photo]-[photo-texte]-[texte-photo]-etc. des plus laides sur mobile.

Un autre exemple en bas de la page d’accueil de ce site avec des texte, blurbs et boutons.

Plus généralement, la motivation pour changer l’ordre des colonnes part donc d’un désir pour une certaine mise en page sur desktop et une variation sur mobile.

Structure HTML et référencement naturel

Mais le problème est en fait un peu plus profond, car il concerne la structure même du code HTML de la page, et il influence donc aussi le SEO.

En effet, même si à l’horizontal deux colonnes sont inversées, le cerveau s’y retrouve ; et encore, ça dépend du contexte. Par contre, les robots des moteurs de recherche, eux, vont tilter à coup sûr si le code HTML des colonnes est inversé (pour peu qu’elles contiennent un peu de contenu, des balises, du texte…) !

Concrètement, si par exemple une colonne contient du h2 et l’autre des h3 associés, il est clair que la première doit arriver avant la seconde dans le code généré, même si elle affichée à droite sur desktop.

Si l’ordre des colonnes n’est pas bon sur mobile, le verdict est sans appel : le lecteur n’y comprend plus rien non plus, il reste 13 secondes et vous oublie 😉

Adopter une stratégie commune

Bref, si l’on veut obtenir un affichage différent sur desktop et mobile tout en garantissant la qualité du contenu pour le référencement naturel, il faut modifier l’ordre des colonnes souhaitées en préservant la structure logique originale du code HTML.

Deux types d’approche a priori, mais une seule valide

Approches « desktop-first » et adaptation au mobile à rejeter

En parcourant le web à la recherche d’une solution technique à ce problème, on retombe globalement sur deux réponses, toutes les deux archi-horribles :

  • mise en page desktop avec duplication d’une colonne et activation/désactivation en fonction du type d’appareil via les options dans le builder Divi (félicitations à Elegant Themes pour nous pondre des tutoriels aussi dégoûtants),
  • mise en page desktop et inversion des colonnes sur mobile en CSS (en utilisant les float ou flexbox ou autre, moins pire mais toujours inacceptable).

Ces deux approches sont à exclure catégoriquement.

La première évidemment parce qu’il faut maintenir deux colonnes dupliquées pour chaque colonne à déplacer, ou créer pour chacune un objet global en bibliothèque, et parce qu’elle génère du code HTML dupliqué. Et dans les deux cas parce que le code HTML associé aux colonnes n’est pas sain : il est généré « à l’envers » par la mise en page sur desktop.

Avec nos titres h2 et h3 mentionnés précédemment en exemple, les h3 se retrouvent à gauche, donc au-dessus dans le code, beurk ! Cela pose un sérieux problème pour la compréhension du site par Google et donc pour son référencement.

Approche « mobile-first » obligatoire pour un code HTML sain

En se préoccupant d’abord de l’aspect sur mobile, on évite ce désagrément. En effet, le flux vertical simplifié de l’affichage sur petit écran nous donne directement la structure du code à respecter, et donc l’agencement des colonnes à mettre en œuvre dans le constructeur de page (que ce soit avec Divi ou tout autre thème).

Et il ne nous reste plus ensuite qu’à inverser en CSS les colonnes pour l’affichage desktop, et la logique HTML est conservée !

Allez, maintenant que vous avez défini votre stratégie et identifié les lignes à réordonner sur desktop, nous allons passer à la modification effective.

Modification de l’ordre des colonnes en CSS avec flexbox

Nous allons voir deux façons de changer l’ordre d’affichage des colonnes avec la flexbox :

  • par inversion du sens d’empilement,
  • par renumérotation des colonnes.

Attention, en inspectant le code d’une ligne Divi, on voit que les gouttières sont représentées par des marges à droite, une pour chaque colonne, sauf la dernière qui est collée au bord droit. Il faut donc prendre en compte cette marge si on déplace la dernière colonne.
Les marges associés aux 4 tailles de gouttière sont 0, 3%, 5.5% et 8%.

Pour les deux techniques, la classe cible doit être positionnée dans les options avancées de la ligne à réordonner sur desktop, qui j’insiste ne doit pas être réarrangée dans le constructeur de page, mais au contraire doit respecter la structure logique du code HTML logique en reflétant la disposition sur mobile.

Constructeur de page Divi

Inversion d’un nombre quelconque de colonnes

Cette méthode repose sur l’inversion du sens d’empilement des éléments sur l’axe principal de la flexbox, ici la direction horizontale, grâce à la propriété flex-direction.

L’unique code permettant d’inverser l’ordre d’un nombre quelconque de colonnes sur une ligne avec gouttière de 4 :

@media only screen and (min-width: 981px) {
 .column-reverse { display: flex; flex-direction: row-reverse; }
 .column-reverse .et_pb_column:first-child { margin-right: 0 !important; }
 .column-reverse .et_pb_column:last-child { margin-right: 8% !important; }
}

Renumérotation des colonnes

Cette technique permet de modifier manuellement l’ordre d’affichage des colonnes, donc d’effectuer des modifications de mise en page plus subtiles. Il suffit simplement d’attribuer le numéro d’ordre souhaité à chaque colonne.

Par exemple, pour inverser les 2 premières et 2 dernières colonnes d’une ligne de 4 avec une gouttière de 2 :

@media only screen and (min-width: 981px) {
 .column-reorder { display: flex; }
 .column-reorder .et_pb_column:first-child { order: 2; }
 .column-reorder .et_pb_column:nth-child(2) { order: 1; }
 .column-reorder .et_pb_column:nth-child(3) { order: 4; margin-right: 0 !important; }
 .column-reorder .et_pb_column:last-child { order: 3; margin-right: 3% !important; }
}

Le grand classique

Le cas le plus utilisé, je pense, avec une renumérotation équivalente à une inversion pour 2 colonnes et gouttière de 3 :

@media only screen and (min-width: 981px) {
 .column-swap { display: flex; }
 .column-swap .et_pb_column:first-child { order: 2; margin-right: 0 !important; }
 .column-swap .et_pb_column:last-child { order: 1; margin-right: 5.5% !important; }
}

Conclusion

Techniquement, l’ordre des colonnes est donc très facilement modifiable dans Divi.

Prenez garde cependant à l’expérience utilisateur et au référencement… Adoptez une stratégie mobile-first afin de maîtriser la structure HTML de votre mise en page, et faites ensuite vos ajustements de colonnes en CSS pour les grands écrans.

Vous verrez de plus bientôt que cette stratégie facilite énormément la maintenance d’une section contenant des lignes « inversées » comme les échiquiers ou autres mosaïques…

Happy swap 🙂