Une mise en page en damier est composée d’une alternance de textes et d’images.
Cette mise en forme est assez courante car elle fonctionne bien dans beaucoup de cas de figure.
Ce n’est pas très complexe à concevoir avec Divi, mais néanmoins certains peinent parfois à la mettre en place.
Dans ce tutoriel, je vais donc vous expliquer en détails comment procéder pour obtenir ce type de rendu.

La structure

Tout d’abord, voici un aperçu de la structure de la page.
Une section contient plusieurs lignes de 2 colonnes (ou plus), qui elles-mêmes contiennent différents modules.
Vous pouvez voir un module Texte ainsi qu’un module Diapo (qui représente un cas particulier que je vous détaillerai un peu plus tard).
Et je vous expliquerai également quel est ce module que j’ai nommé “spacer”…

Commencez donc par préparer votre structure en ajoutant une section et une ligne de 2 colonnes.
Nous allons nous concentrez sur cette première ligne, puis, une fois paramétrée, nous la dupliquerons.

Paramétrez la ligne

Dimensionnement

Dans les paramètres de la ligne, apportez les réglages suivants dans Style -> Dimensionnement.

1. Activez la largeur de gouttière personnalisée
2. Réduisez au minimum l’espacement des colonnes
3. Harmonisez la hauteur des colonnes
4. Réglez la largeur de la ligne sur 100%
5. Surpassez la largeur du conteneur principal du site en la précisant à 100%
6. Optionnel : vous pouvez définir une hauteur minimum pour votre ligne.
   Dans mon exemple, je lui ai attribuée une valeur de 50vh (soit 50% de la hauteur de l’écran)

Espacement

Juste en dessous, dans Espacement, définissez la marge interne haute et basse sur 0.
Ceci afin de supprimer les espaces haut et bas pour que les diverses lignes se touchent bien.

Paramétrez la colonne d’image

Dans l’onglet Contenu des paramètres de la ligne, cliquez sur l’icone de roue dentée pour afficher les réglages correspondant à la colonne qui contiendra votre image.

Insérez une image de fond

Afin que l’image s’adapte proportionnellement en hauteur et longueur lors du redimensionnement de la page, nous n’utiliserons pas un module Image mais une image de fond de colonne.

Dans Contenu -> Fond, sélectionnez l’image de votre choix.
Si vous le souhaitez, vous pouvez même activer l’effet de parallaxe.

Ajoutez un spacer

Il faut garder à l’esprit que lors de la réorganisation des colonnes sur tablettes et mobiles, la colonne d’image ne contenant aucun élément pour lui définir une hauteur, celle-ci “disparaitra” (voir capture ci-dessus).
Ma méthode est donc d’utiliser un spacer : un élément qui ajoutera donc de l’espace là où on en a besoin.

Pour ce faire, insérez un module Code dans votre colonne.
Nul besoin de lui ajouter de contenu, il suffit juste de lui attribuer une hauteur.

Dans les paramètres du module Code, allez dans Style-> Dimensionnement et définissez une hauteur pour Tablette et Téléphone.
J’ai choisi une valeur de 40vh (40% de la hauteur de l’écran), mais à vous de voir ce qui convient le mieux à votre design.

Paramétrez la colonne de texte

De même que pour la colonne image, cliquez sur l’icone de roue dentée pour afficher les réglages correspondant cette fois à la colonne qui contiendra votre texte.

Espacement

Dans Style -> Espacement, définissez une marge interne pour la colonne de texte.
Mieux vaut définir une valeur en pour cent afin de conserver le côté adaptatif de la propriété et que ça fonctionne sur les diverses tailles d’écrans.

Insérez des modules

Un module Texte

Dans la colonne de droite, ajoutez un module Texte.
Aucun réglage en particulier n’est à effectuer, hormis le paramétrage des styles que vous désirez.

Le cas du module Diapo

Si vous ajoutez un slider, il va falloir effectuer quelques petits ajustements pour que celui-ci occupe tout l’espace de la colonne.

Dimensionnement

Dans Style -> Dimensionnement, définissez la hauteur du slider sur 100%.

Et, même chose que pour la colonne contenant l’image : il faut ici aussi penser à la hauteur du slider sur mobile.
Précisez donc la hauteur dans Tablette et Téléphone.
Comme pour le spacer, j’ai également utilisé une valeur de 40vh.

ID et classes CSS

Dans Avancé -> ID et classes CSS, ajoutez une classe qui va permettre de définir en CSS une hauteur minimum pour chaque slide.

Ajoutez des CSS personnalisées

Ajoutez cette règle CSS dans les options du thème ou de la page, ou encore dans le fichier style.css si vous avez un thème enfant.
Celle-ci permettra donc de passer la hauteur tous les slides sur 100%.

Si vous avez besoin d’en savoir plus sur l’utilisation de CSS personnalisées avec Divi, je vous invite à lire notre article 7 manières d’ajouter des CSS à Divi.

Dupliquez la ligne

Pour créer la deuxième ligne, dupliquez la ligne que vous venez de paramétrer en cliquant sur l’icone désigné sur l’image ci-dessus.

Inversez les colonnes

Comme l’illustre la capture d’écran ci-dessus, il suffit, depuis l’onglet Contenu, de glisser/déposer la première colonne sous la seconde pour les inverser.

Ajustements complémentaires

Centrer verticalement le contenu

Dans la plupart des cas, le contenu de la colonne de texte méritera d’être centré verticalement.
Pour ce faire, suivez notre tutoriel Centrer du contenu verticalement sur Divi pour retrouver les règles CSS nécessaires.
Il vous suffira ensuite d’ajouter la classe centrer-verticalement à votre colonne de texte, dans Avancé -> ID et classes CSS -> Classe CSS.

Inverser les colonnes sur mobile

Lors de la réorganisation des colonnes sur mobiles, l’alternance des modules Texte et Image sera perdue.
Je vous invite donc à suivre notre tutoriel Inverser l’ordre des colonnes sur mobile pour rémédier à ça.

Égaliser la hauteur des lignes

Vous, ou votre client, êtes un peu maniaque et souhaitez que toutes les lignes aient la même hauteur, bien qu’elles possèdent un contenu d’une longueur différente ?
Vous pouvez adapter notre tutoriel Égaliser automatiquement la hauteur de vos sections afin que toutes les lignes aient la même hauteur que la ligne la plus haute.

Le mot de la fin

Vous connaissez maintenant tous les détails pour créer une mise en page en damier avec Divi.
Si vous souhaitez casser un peu la rigueur de ce type de gabarit, vous pouvez jouer avec des effets de superposition sur des titres ou des images. Pour ce faire, utiliser au choix les marges négatives, la translation verticale ou le positionnement en absolu.
Enfin, vous pouvez également appliquer des effets au scroll sur certains éléments pour dynamiser votre page.

Partager