Le module « Publier un Contenu » (ou Post Content) est disponible depuis la version 4.0 du thème Divi. Vous ne l’avez peut-être pas encore utilisé ? Vous ne voyez peut-être pas non plus à quoi il peut bien servir ?

Parfait, vous êtes au bon endroit !

Vous allez voir que ce module est indispensable dans la moitié des cas de création de templates avec le Divi Theme Builder. Et aussi, qu’il est inutilisable dans l’autre moitié…

Vous découvrirez également toutes ses options de paramétrage…

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – À quoi sert le module « Publier un Contenu » (ou Post Content) de Divi ?

Cette fonctionnalité était attendue de pied ferme et c’est enfin possible !

Le module « Publier un Contenu (Post Content) permet de styliser une bonne fois pour toute la partie contenu (le body) affichée au sein de vos pages et de vos articles. Peu importe avec quoi ce contenu a été créé : avec le Visual Builder ou avec l’éditeur de WordPress (classic ou Gutenberg)…

Autrefois, il fallait passer par l’ajout de CSS pour styliser l’ensemble des titrages d’un site par exemple…

Eh oui, car l’onglet Apparence > Personnaliser > Paramètres Généraux > Typographie ne permet pas de choisir une police customisée pour les différentes balises de titre (h1, h2, h3, etc.).

On ne peut pas non plus différencier les couleurs par type de titre.

On peut seulement choisir une taille de police pour le corps du texte et une autre pour les titre de l’en-tête, idem pour la typographie…

Ce temps là est révolu ! Maintenant, le module « Publier un Contenu » (Post Content Module) vous permet de styliser tous les éléments HTML de vos contenus.

Grâce à lui, vous définirez la taille, la couleur, l’espacement, la typo, les versions responsives, le box-shadow, l’animation et plus encore des éléments suivants :

  • Les titrages h1, h2, h3, h4, h5 et h6,
  • Les blocs citations,
  • Les liens hypertextes,
  • Les images,
  • Les listes à puces,
  • Les listes numérotées,
  • Le body entier (corps).

Mais ne vous inquiétez pas, les options de paramétrages vous sembleront familières car rien ne change à ce niveau-là.

2 – Où peut-on utiliser le module « Publier un Contenu » (Post Content module) ?

Pour commencer, ne cherchez pas le module Publier un Contenu au sein du Visual Builder, celui que vous utilisez au sein de la page ou de l’article pour construire votre layout. Il n’est tout simplement pas disponible ici.

Et c’est normal, il n’est utilisable qu’au sein du Divi Thème Builder !

Puisqu’il sert à styliser de manière dynamique l’ensemble de votre site, il doit obligatoirement être utilisé au sein des templates de thème.

Mais pas n’importe quelle template de thème ! Sur certaines, le module Publier un Contenu (Post Content module) sera indispensable, sur d’autres, il ne servira à rien !

De base, ce module est vraiment utile – et même indispensable – sur les templates d’articles et les templates de pages… Mais vous pourrez l’utiliser sur d’autres types de templates…

Voyons cela de plus près :

Templates pour module Publier un Contenu (Post content)
Templates autorisées pour module Post content

Vous pourrez utiliser le module Publier un Contenu sur :

  • Pages : All pages, Homepage, Specific Page, Children.
  • Articles : All articles, Articles in specific catégory, aricles with specific étiquette, specific articles.
  • WooCommerce Pages : cart, checkout, my account.
  • Projets : All projets, Projets in specific categories de projets, Projets with specific projet tags, specifict projet.

Le module Publier un Contenu sera inutile sur :

Ne tardez plus ! Découvrez le thème Divi ici !

3 – Comment l’insérer au sein d’une template de thème ?

L’insertion du module Publier un Contenu (Post Content module) au sein d’une template de thème est identique à l’insertion de n’importe quel type de module…

Ajouter un nouveau modèle
Cliquez sur « Ajouter un nouveau modèle » (add new template)

Allez à l’onglet Divi > Theme Builder, cliquez sur « Ajouter un nouveau modèle » (Add New Template) et choisissez le type de template à créer.

On vient de le voir, cela peut être une template pour l’ensemble de vos articles ou de vos pages, une template pour les articles classés dans une certaine catégorie etc.

Vous entrerez alors dans l’édition (la construction) de votre template (modèle) : vous pourrez la créer à partir de zéro ou vous pourrez utiliser un layout présent dans votre bibliothèque (découvrir comment importer/exporter une template de thème).

Pour cet exemple (capture d’écran ci-dessous), je crée le modèle (la template) à partir de zéro.

Module Publier un Contenu
Insérez le module « Publier un Contenu » au sein de la template de votre choix
  1. Dans l’éditeur de template,
  2. Ajoutez une nouvelle rangée (en vert). La composition 1/1 est recommandée.
  3. Puis cliquez sur « + » pour insérer un nouveau module.
  4. Sélectionnez le module « Publier un Contenu » (Post Content).
Apparence du module Post Content
Apparence du module Post Content

Une fois inséré, le module Publier un Contenu ressemble à la capture d’écran ci-dessus.

Pas besoin de vous demander à quoi correspond ce texte et de vous dire que vous ne l’avez jamais écrit… C’est normal : c’est un texte dynamique.

Tout ce qui sera modifié ici s’appliquera à tous les contenus utilisant ce modèle de template. Et c’est ça le plus intéressant !

4 – Comment personnaliser le module Publier un Contenu (Post Content module) ?

Une fois que vous avez inséré ce fameux module au sein de votre template, il ne vous restera plus qu’à le modifier…

Pour cela, cliquez sur l’icône de la roue dentée qui apparait au survol de la souris (au hover).

Paramètres module Post Content
Configurez les paramètres du module Post Content

Une fenêtre va s’ouvrir et vous proposera un tas d’options.

Même si vous pensez déjà les connaître toutes, croyez-moi, j’en ai encore découvert quelques-unes lors de la création de ce tutoriel ! Comme quoi, quand on prend le temps de chercher dans les détails, on trouve toujours des choses intéressantes !

Voyons tout cela en détail…

4.1 – Onglet Contenu

Lorsque la popup s’ouvre, c’est l’onglet Contenu qui est présent par défaut.

Onglet Contenu - Fond
Onglet Contenu

Rien de très compliqué ici. Vous pourrez seulement modifier la couleur de fond du module Post Content (la couleur du contenu principal).

4.2 – Onglet Style

C’est dans l’onglet Style que se trouve la majorité des options de design.

Post Content : Onglet Style
Post Content : réglages disponibles dans l’onglet Style

Ici, vous trouverez les « sous-onglet » suivants :

  1. Image
  2. Texte
  3. Texte Sous-titre
  4. Dimensionnement
  5. Espacement
  6. Bordure
  7. Boite ombre
  8. Filtre
  9. Transformer
  10. Animation

Chacun de ces onglets propose des options pour styliser les éléments en question… Tous les choix que vous ferez ici s’appliqueront sur toutes les pages de votre site qui utilisent ce modèle (template de thème).


Le sous-onglet Image

Ici, vous paramètrerez le design de l’ensemble des images insérées dans votre contenu.

Par exemple, vous pourrez

  • Arrondir les angles,
  • ajouter une bordure,
  • choisir l’épaisseur de la bordure,
  • changer la couleur de la bordure,
  • ajouter une ombre à votre image.
Onglet Style - Image
Onglet Style > Image

Le sous-onglet Texte

Ici, vous définirez le design des différents textes de votre contenu.

Non seulement, vous définirez le corps du texte mais également les liens hypertextes, les listes à puces, les listes numérotées et les blocs de citation.

Pour chacun de ces éléments, vous pourrez modifier la typo, le style, la couleur l’alignement, l’espacement, la hauteur de ligne, l’ombre, etc.

Mais surtout, vous pourrez définir des valeurs différentes en fonction des tailles d’écran. C’est idéal pour améliorer le responsive de votre site.

Onglet Style - Texte
Onglet Style > Texte

Le sous-onglet Texte Sous-Titre

Bon, je vous l’accorde, la traduction EN-FR n’est pas géniale (voir ici comment obtenir un Divi bien traduit)…

L’onglet « Texte sous-titre » permet de styliser tous les titrages.

Comme pour le texte classique, vous pourrez définir une typo, une taille, un alignement, une couleur ect. pour chaque type de titre.

N’oubliez pas alors de sélectionner chaque titre afin de le customiser (h1, h2, h3 etc.).

Pensez aussi à faire vos réglages en fonction de la taille des écrans (bureau, tablette, téléphone).

Onglet Style - Texte Sous Titre
Onglet Style > Texte Sous Titre

Le sous-onglet Dimensionnement

Ici, rien de bien sorcier, vous pourrez définir une largeur et une hauteur pour votre contenu, que ce soit en version mobile, tablette ou bureau.

Il serait plutôt conseillé de laisser les valeurs par défaut.

Onglet Style - Dimensionnement
Onglet Style > Dimensionnement

Le sous-onglet Espacement

Le sous-onglet espacement permet d’ajouter du Margin (Marge) et du Padding (Marge interne) à l’ensemble de votre contenu.

Vous pourrez également définir ces valeurs en fonction de la taille des écrans.

Onglet Style - Espacement
Onglet Style > Espacement

Le sous-onglet Bordure

La bordure que vous définirez ici s’appliquera à l’ensemble de la partie contenu.

Vous pourrez définir des angles arrondis, le style de la bordure, l’épaisseur et la couleur.

Onglet Style - Bordure
Onglet Style > Bordure

Le sous-onglet Filtre

J’ai rarement utilisé cette option…

Elle permet d’ajouter un filtre de couleur ou une opacité sur votre contenu.

Cela peut être intéressant sur une image par exemple mais sur l’ensemble du contenu, cela me parait ne pas être optimal.

Onglet Style - Filtre
Onglet Style > Filtre

Le sous-onglet Boîte Ombre

Si vous ajoutez une ombre, elle s’appliquera sur la « boite » de votre contenu.

Onglet Style - Ombre
Onglet Style > Ombre

Le sous-onglet Animation

Idem pour l’animation, elle s’appliquera sur la « boite » de votre contenu.

Onglet Style - Animation
Onglet Style > Animation

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

4.3 – Onglet Avancé

L’onglet Avancé permet d’aller un peu plus loin dans le design.

C’est idéal si vous souhaitez ajouter des ID ou des classes CSS que vous appellerez ultérieurement depuis votre thème enfant ou depuis l’onglet Apparence > Personnaliser > CSS Additionnel.

Post Content : onglet avancé
Post Content : réglages disponibles dans l’onglet avancé

Ici, vous pourrez :

  1. Ajouter un ID et/ou une classe CSS.
  2. Ajouter du code CSS directement au sein du module.
  3. Définir la visibilité : c’est idéal pour activer ou désactiver des éléments en fonction de la taille des écrans. Toutefois, ici, ce sera sur le module Post Content dans sa globalité que vous agirez.
  4. Modifier les transitions (durée et délai).

5 – En conclusion…

Avec ce nouveau module Publier un Contenu (Post Content), on peut enfin définir le design global d’un site ou d’un fichier modèle en deux temps trois mouvements.

On le fait une fois pour toute et ça nous fait gagner un temps fou !

Mais ce qui est le plus appréciable c’est qu’on peut facilement respecter les styles guides d’une charte graphique !

Pour bien débuter avec Divi, découvrez tous les articles pour commencer sereinement !

Module Publier un Contenu (Post Content) de Divi
Utilisation du module Post Content (module Publier un Contenu)

Pin It on Pinterest

Shares
Share This