Mise en page avancée avec les « grilles » CSS dans Divi

9 Déc 2017

Salut everybody of the world,

Continuons un peu notre aventure dans l’ajustement des mises en page Divi avec une courte introduction à un concept enfin reconnu par tous les navigateurs (en version récente pour certains) : les grilles CSS.

En effet, on peut tout-à-fait réaliser grâce à Divi des layout intéressants – et plus ou moins complexes – à l’aide des float (la base du fonctionnement interne des colonnes de Divi, compatible à 100% avec tous les navigateurs, aussi vieux et obsolètes qu’ils soient) et des flexbox (utilisé aujourd’hui par Divi uniquement pour harmoniser les hauteurs des colonnes, et espérons plus tard pour des options plus intéressantes d’alignement et d’ordonnancement), mais les grid CSS nous apportent encore plus de souplesse.

Des arrangements qui sortent de l’ordinaire

Comment donc, par exemple, réaliser l’agencement de l’image de présentation de cet article (sans bien sûr créer une image bitmap) ? Car même s’il a l’air simple, il est en fait impossible à réaliser avec un layout Divi sans utiliser de CSS. Les modules sont en effet imbriqués dans le composition de telle sorte qu’on ne peut en dégager des lignes ou colonnes qui les encapsuleraient.

Eh bien la grille CSS nous permet de faire exactement ce que l’on imagine intuitivement pour placer nos modules : déclarer leurs coordonnées et leur taille, donc les cases de la grille qu’ils occuperont, afin de créer une disposition sur mesure.

Choix de la grille CSS

Pour notre exemple, j’ai volontairement choisi au départ une grille relativement serrée et régulière, dans un but pédagogique. Vous verrez plus loin une grille beaucoup plus adaptée !

Agencement de cinq photos avec grille

Nous constatons tout d’abord sur cette image qu’il est effectivement impossible de découper la composition en lignes ou colonnes Divi classiques, puisque les deux photos horizontales chevauchent la colonne du centre, tout comme les deux photos verticales chevauchent les trois lignes du centre.

Vous pouvez également remarquer que les coordonnées sont placées en face des lignes qui séparent les lignes et colonnes, et non pas en face des lignes et colonnes elles-mêmes. C’est normal, car pour déterminer des coordonnées dans les grilles CSS, on utilise ces lignes qui découpent le tableau.

Enfin, j’ai indiqué un numéro d’ordre sur fond blanc pour chaque photo, afin d’illustrer que le placement des modules est complètement libre. Il ne dépend pas d’un flux, du moins pas forcément, à l’image des flexbox qui permettent de modifier l’ordre de leurs éléments et donc de désolidariser l’affichage du contenu HTML (c’est bien le but du CSS, en même temps).

Approche « mobile-first » exclusivement, pour le SEO

Nous l’avons vu et revu (par exemple pour gérer une mise en page en damier), pour conserver un potentiel optimal de référencement naturel, on ne doit pas sacrifier la logique du contenu pour le design, ce qui impose d’ordonner les éléments de la page en gardant toujours l’affichage mobile à l’esprit (a priori un simple empilement de modules).

Voici donc l’aspect de votre section dans le builder :

Constructeur de page Divi avec une section et des modules sur une colonne

Et on ajoutera dans les options avancées de la ligne une classe CSS associée à l’unique colonne, par exemple « grid-layout ».

Le code CSS de la mise en page en grille

Une fois la grille et la disposition choisies, il nous reste à les implémenter en CSS.

Définition de la grille CSS

Ici, j’ai choisi 5 colonnes réparties régulièrement sur la largeur, et 7 lignes de 100 pixels de hauteur :

.grid-layout {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(7, 100px);
}

On utilise le mot-clé « repeat » car les lignes et colonnes sont réparties régulièrement :

  • les colonnes ont toutes une largeur de « 1fr », c’est-à-dire ici un cinquième de la largeur de la page (une « fraction » sur cinq au total) ;
  • les lignes ont une hauteur fixe de 100 pixels.

A noter qu’il existe plusieurs façons de définir une grille, et que contrairement à cet exemple très basique, il est possible de définir très précisément des agencements très complexes et variés, pas forcément réguliers, y compris avec plusieurs niveaux de z-index pour gérer superpositions, ombres, etc. 😉

Placement des modules dans le grille

L’agencement d’un module est explicité par la zone qu’il couvre sur la grille, donc par la surface comprise entre les lignes qui matérialisent ses côtés. Par exemple, pour la photo en haut à droite, qui est en fait la troisième dans la structure logique et donc sur l’affichage mobile :

.grid-layout .et_pb_text:nth-of-type(3) {
  grid-column: 4 / 6;
  grid-row: 1 / 6;
}

En effet, le rectangle associé est compris entre les colonnes 4 et 6 de la grille, et entre les lignes 1 et 6.

Code CSS global avec modules texte et images de fond

Pour l’exemple, j’ai utilisé des modules texte avec images de fond, car c’est le plus pratique pour gérer des agencements d’images. En effet, la capacité des images de fond à couvrir toute la surface du module (option Taille de l’image d’arrière-plan du module) est ici très intéressante pour garantir l’effet « mosaïque », même si on sacrifie un peu le bord des images, qui sera masqué.

J’ai spécifié une marge nulle pour les modules afin de coller les images entre elles, mais on pourrait la modifier pour faire apparaître une gouttière.

Au passage, j’utilise la flexbox pour centrer les textes des modules horizontalement et verticalement 😉

@media only screen and (min-width: 769px) {

.grid-layout {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(7, 100px);
}

.grid-layout .et_pb_text {
  margin: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-layout .et_pb_text_inner {
  background: rgba(255, 255, 255, 0.8);
  padding: 40px;
  font-size: 3em;
}

.grid-layout .et_pb_text:nth-of-type(1) {
  grid-column: 3 / 4;
  grid-row: 3 / 6;
}

.grid-layout .et_pb_text:nth-of-type(2) {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
}

.grid-layout .et_pb_text:nth-of-type(3) {
  grid-column: 4 / 6;
  grid-row: 1 / 6;
}

.grid-layout .et_pb_text:nth-of-type(4) {
  grid-column: 1 / 3;
  grid-row: 3 / 8;
}

.grid-layout .et_pb_text:nth-of-type(5) {
  grid-column: 3 / 6;
  grid-row: 6 / 8;
}

} /* media query */

Vous remarquerez que j’ai utilisé un media query pour limiter l’utilisation de la grille aux largeurs d’écran supérieures à 768 pixels. Il conviendra bien sûr de trouver la limite acceptable au cas par cas pour la mise en page désirée.

Optimisation de la grille

La grille précédente n’est pas la plus indiquée pour réaliser la mise en page souhaitée ; elle permettait simplement d’illustrer les bases du concept.

Par exemple, on voit que la photo du milieu est plus petite que sur le résultat escompté. On constate aussi que le découpage n’est pas optimal : il y a plus de lignes et colonnes que nécessaire.

La souplesse des grid CSS nous permet en fait d’obtenir une grille bien plus optimale.

En effet, si on regarde attentivement l’image de présentation, nous n’avons besoin que de deux indications : la hauteur de l’image du centre par rapport à la hauteur totale, et sa largeur par rapport à la largeur de la page. Ce qui réduit le nombre de lignes et colonnes à trois.

Si l’on choisit une hauteur arbitraire de 700px, et si l’on augmente la largeur de l’image centrale, on obtient par exemple cette grille :

.grid-layout {
  display: grid;
  height: 700px;
  grid-template-columns: 2fr 3fr 2fr;
  grid-template-rows: 2fr 3fr 2fr;
}

On voit ici que la photo du milieu occupera 3 unités de largeur et de hauteur sur les 7 au total occupées par les modules dans chaque direction (2+3+2).

Agencement de cinq photos avec grille

Et la disposition des modules est un peu simplifiée (seulement trois unités à compter dans les deux dimensions pour identifier une zone) :

.grid-layout .et_pb_text:nth-of-type(1) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.grid-layout .et_pb_text:nth-of-type(2) {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.grid-layout .et_pb_text:nth-of-type(3) {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

.grid-layout .et_pb_text:nth-of-type(4) {
  grid-column: 1 / 2;
  grid-row: 2 / 4;
}

.grid-layout .et_pb_text:nth-of-type(5) {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}

Le meilleur est à venir : si on veut ajuster plus tard la proportion de l’image centrale par rapport au reste, il suffit d’adapter les répartitions horizontale et verticale des cases de la grille. Par exemple, pour une hauteur de 3/5 et une largeur de la moitié de la page :

.grid-layout {
  display: grid;
  height: 700px;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
}

Autre exemple en utilisant les pourcentages de hauteur ou largeur :

.grid-layout {
  display: grid;
  height: 700px;
  grid-template-columns: 30% 40% 30%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

Conclusion

Nous n’avons fait ici qu’effleurer la surface de l’immense richesse des grilles CSS, mais cela dénote déjà des nombreuses possibilités de mises en page originales dans Divi, et surtout de leur facilité de modulation : une fois la grille optimale définie, les ajustements sont simples et immédiats.

A vous de jouer !