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.

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 ».

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.

Nos autres articles

Sep 06 2021

Interview d’Anne-Gaël : motion designer

Aujourd’hui, on rencontre Anne-Gaël, qui va nous expliquer son métier, son parcours et sa vision du motion design.
Juil 06 2021

Comment ajuster la taille du menu Divi sur tablette ?

Dans ce tutoriel, nous verrons comment réduire la police du menu de Divi sur des largeurs d’écran spécifiques afin que l’en-tête ne soit pas sur deux...
Jan 05 2021

Comment installer Google Analytics sur votre site Divi ?

Dans ce tutoriel, nous allons voir comment installer Google Analytics sur votre site construit avec le thème Divi, sans l’aide d’un plugin.