Deux colonnes Divi

Comment donner un effet journal avec un texte en deux colonnes sur Divi ?

Marlène

1 mars 2019

Lorsque vous avez de longs textes à intégrer sur votre site WordPress, il peut être intéressant de chercher des alternatives aux présentations classiques offertes par le thème Divi. Par défaut, le thème d’Elegant Themes propose d’insérer un texte en une colonne. Nous allons voir comment répartir un texte en deux colonnes sur une section de Divi comme l’exemple tiré de WAY2AUTONOMY ci-dessous. L’avantage est de diversifier le webdesign de vos pages et de donner un rythme particulier à vos paragraphes.

texte deux colonnes

Sélectionnez votre section et insérez une classe CSS

Choisissez d’abord la section que vous souhaitez mettre en page en deux colonnes. Puis insérez une classe dans les paramètres avancés du module de texte.

Paramètres de texte > Avancé > classe CSS

Ajoutez-y par exemple la classe « deuxcolonnes ».

capture class

Ajouter du code CSS dans la personnalisation du thème Divi

Pour appliquer le texte en deux colonnes sur la section ou la zone de texte choisie, intégrez le code CSS dans Divi > Options du thème > Personnaliser CSS

/*Texte en 2 colonnes*/
@media screen and (min-width: 981px){
.deuxcolonnes
{
-webkit-column-count:2; /* Opera, Safari, Google Chrome */
-moz-column-count: 2; /* Firefox */
column-count: 2; /* Internet Explorer */
}
}
#et-top-navigation .et_pb_button:after {
font-size: 23px;
}

La mention indiquée avant le code @media screen and (min-width: 981px) correspond à une spécification CSS3 Media Quieries. Grâce à elle, la feuille de style ne s’applique que sur les formats desktop. En effet, le rendu des deux colonnes sur tablette et sur mobile peuvent donner un effet « écrasé » au texte. Afin de garder une bonne ergonomie et une lecture facile pour l’internaute, le Responsive Web Design doit être adapté dans la mesure du possible.

Finalement, cette technique permet de donner un rythme original à une page web lorsque l’on a une quantité de texte suffisante. Grâce à la mention des Media Quieries, l’effet est appliqué seulement pour une largeur d’écran minimum sur laptops ou desktops. Cela permet alors de conserver un format classique sur les smartphones et de conserver un format responsive correct.

dégradé noir gris