Uniformisation du modèle de page Divi

1 Mar 2018

Bonjour !

Je voudrais aborder dans cet article le design du modèle de page de Divi, qui souffre à mon avis d’un cruel manque d’homogénéité.

Quand je crée un site, j’utilise toujours le builder pour les pages classiques, mais jamais pour le blog, les articles ou les catégories, et ce pour plusieurs raisons :

  • les articles ne nécessitent pas pour moi de mise en page complexe ou très design ;
  • par contre ils nécessitent une barre latérale pour les catégories et articles récents, ce qui réduit de toute façon l’espace pour d’éventuelles colonnes ;
  • l’utilisation judicieuse des widgets permet de se passer du builder pour ajouter de la matière à la sidebar si c’est indispensable ;
  • une injection rapide d’une section Divi sauvegardée en bibliothèque permet de personnaliser l’entête si besoin.

Donc sur un site j’ai toujours des pages construites avec le builder, des articles rédigées avec l’éditeur WordPress, et des pages générées par WordPress (blog, catégories, archives, 404, search).

Mon problème, c’est que le design global des pages en fait, marges et sidebar  est différent selon qu’on utilise le builder ou non. Je trouve que cela nuit à l’homogénéité du site et que ça lui donne une touche un peu amateur.

Les deux modèles de page Divi

Voici en images les deux modèles :

Article Divi sans builder

Article Divi sans builder

Page Divi avec builder

Page Divi avec builder

J’ai choisi un article pour illustrer le cas d’une page sans builder, mais la mise en page est la même pour les pages (classiques WordPress), l’index du blog, les pages « catégorie », « archive »…

Vous pouvez donc constater que sans le constructeur de page :

  • le trait de séparation entre partie principale et sidebar se prolonge jusqu’aux extrémités verticales de la page ;
  • la marge globale de la page (après entête et avant pied de page) est plus fine (plus généralement, elle est différente pour toutes les tailles d’écran).

Personnellement, je préfère la mise en page du builder, que je trouve plus élégante, donc nous allons voir comment styliser la mise en page sans builder pour uniformiser le tout.

L’inspecteur à la rescousse

Afin de corriger les éléments qui ne me plaisent pas dans la mise en page par défaut, j’ai « inspecté » mes pages (avec et sans builder).

Avec Firefox sous Windows, on appelle l’inspecteur avec [CTRL-SHIFT-C], puis on clique sur l’élément souhaité.

On peut aussi cliquer sur l’élément avec le bouton droit et sélectionner l’option « Examiner l’élément », mais avec les entêtes ou plus généralement les hover, on n’arrive pas toujours à attraper le bon 😉 De plus le raccourci clavier permet d’inspecter tout le code de la page rapidement, juste au survol de la souris, c’est très pratique.

Marge globale de la page

Avant de continuer, notez que tout ce que j’explique dans ce paragraphe s’applique aux paramètres par défaut de mise en page dans le « personnaliseur » de thème, notamment hauteur de section et de ligne, en mode desktop comme sur mobile. Si votre configuration est différente, il faudra adapter le code CSS fourni.

Dans le cas d’une page construite sans builder, on découvre ainsi que la marge supérieure est en un padding de 58 pixels affecté à un div de type « conteneur » qui encapsule le contenu de la page, quelle que soit la largeur de la page. Or, avec le builder, on a un padding de section et un padding de ligne qui varient avec la largeur :

  • au-delà de 1350 pixels de large, padding section = 54px, padding ligne = 27px ;
  • entre 1350 pixels et 980 pixels, padding section = 4%, padding ligne = 2% ;
  • en-deça de 980 pixels, padding section = 50px, padding ligne = 30px.

Donc pour reproduire ce comportement, il faut simplement modifier le padding supérieur du conteneur d’article avec ce paramétrage.

Pour la marge inférieure, c’est (à peine) plus compliqué, car elle se compose d’abord d’une marge et d’un padding pour l’article (et sur une page d’index, il peut y avoir plusieurs éléments article à la suite, chacun avec padding et marge, que je ne veux pas modifier, par simplicité et j’avoue, peur des effets de bord). Il y aussi un padding sur la #left-area que je ne toucherai pas par simplicité. Et enfin, en mode mobile, la sidebar se retrouve en bas, avec un padding encore différent et un padding pour le dernier widget. En résumé et en chiffres :

  • au-delà de 980 pixels de large, padding = 25px et margin = 27px pour l’article, padding = 23px pour la #left-area ;
  • en-deça de 980 pixels, padding = 28px pour la sidebar, margin = 30px pour le dernier widget.

Bref, pour factoriser et faire au plus simple, il faut ajouter un padding inférieur au conteneur équivalent à la différence entre la marge recherchée et la marge crée par les différents padding et margin cités précédemment.

Au final, on obtient :

@media only screen and (min-width: 1350px) {
 #main-content .container {
  padding: 81px 0 6px 0;
 }
}
@media only screen and (max-width: 1349px) {
 #main-content .container {
  padding: 6% 0 calc( 6% - 75px ) 0;
 }
}
@media only screen and (max-width: 980px) {
 #main-content .container {
  padding: 80px 0 22px 0;
 }
}

Personnalisation des marges

Si jamais vous avez modifié les marges globales de vos sections et lignes dans le customizer de thème, il sera nécessaire d’adapter le code ci-dessus.

Par exemple, si pour les téléphones vous avez réduit les hauteurs à 40px et 20px au lieu des valeurs par défaut 50ps et 30px, il faudra ajouter :

@@media only screen and (max-width: 768px) {
 #main-content .container {
  padding: 60px 0 2px 0;
 }
}

En effet, le padding supérieur à appliquer aux téléphones devient 60px (section 40 + ligne 20), et le padding inférieur 2px (on veut 60px mais on a déjà 58px pour widget + sidebar).

Ligne de séparation entre contenu et barre latérale

L’inspecteur nous renseigne à nouveau sur le code d’une page classique (sans builder). On se rend compte que le trait qui sépare contenu principal et barre latérale est matérialisé par la couleur de fond d’un pseudo-élément ::before associé au conteneur rencontré auparavant, de largeur 1 pixel, et qui s’étend sur toute la hauteur de la page.

Inspecteur de code sur une page Divi

Or, on voudrait qu’il soit limité à la hauteur de la sidebar uniquement. Malheureusement, pas d’autre choix que de le supprimer complètement et de le rajouter sur la barre latérale :

@@media only screen and (min-width: 981px) {
 #main-content .container::before {
  display: none;
 }
 #main-content #sidebar {
  border-left: 1px solid rgba(0,0,0,.1);
 }
}

Résultat final

Au final, on obtient avec ces deux bouts de code le résultat escompté, semblable à une page construite avec le builder :

Article Divi sans builder améiloré

Conclusion

Avec quelques lignes de CSS, le modèle de page Divi devient identique sur tout le site (marges verticales et barre latérale).

On peut alors régler la largeur de la barre latérale (dans les options du « personnaliseur » de thème) pour uniformiser encore davantage avec une largeur identique à celle du builder, ou au contraire créer une cassure « contrôlée » entre le site et le blog avec une largeur très différente. Personnellement, j’aime la largeur de 28.