The module "Publish Content" (or Post Content) is available from the version 4.0 of the Divi theme. Maybe you haven't used it yet? Maybe you don't see what it's for either?

Perfect, you've come to the right place!

You will see that this module is essential in half of the cases of creation of templates with the Divi Theme Builder. And also, that it is unusable in the other half....

You will also discover all its configuration options....

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - What is the purpose of the "Publish Content" module (or Post Content) of Divi?

This feature was expected from the ground up and it's finally possible!

The module "Publish Content (Post Content) allows you to stylize once and for all the content part (the body) displayed within your pages and articles. No matter what this content was created with: with the Visual Builder or with the WordPress editor (classic or Gutenberg)...

In the past, it was necessary to add CSS to stylize all the titles of a site for example...

That's right, because the tab Appearance > Customize > General Settings > Typography does not allow you to choose a custom font for the different title tags (h1, h2, h3, etc.).

Nor can the colours be differentiated by type of title.

You can only choose one font size for the body of the text and another for the header titles, the same for the typography...

That time is over! Now, the "Publish Content" module (Post Content Module) allows you to style all the HTML elements of your content.

Thanks to it, you will define the size, color, spacing, typography, responsible versions, box-shadow, animation and more of the following elements:

  • The titrations h1, h2, h3, h4, h5 and h6,
  • Quotation blocks,
  • Hypertext links,
  • The images,
  • The bulleted lists,
  • The numbered lists,
  • The whole body (body).

But don't worry, the settings options will seem familiar to you because nothing changes at that level.

2 - Where can the "Publish Content" module be used?

To start, don't look for the module Publish Content within the Visual Builder, the one you use within the page or article to build your layout. It is simply not available here.

And that's normal, it can only be used within the Divi Theme Builder!

Since it is used to dynamically style your entire site, it must be used within the theme templates.

But not just any theme template! On some, the Post Content module will be essential, on others, it will be useless!

Basic, this module is really useful - and even essential - on article templates and page templates... But you can use it on other types of templates...

Let's take a closer look:

Templates pour module Publier un Contenu (Post content)
Authorized templates for Post content module

You will be able to use the Publish Content module on:

  • Pages: All pages, Homepage, Specific Page, Children.
  • Articles : All articles, Articles in specific categorory, aricles with specific label, specific articles.
  • WooCommerce Pages: cart, checkout, my account.
  • Projects : All projects, Projects in specific categories of projects, Projects with specific project tags, specifict projet.

The module Publish Content will be useless on:

Don't delay any longer! Discover the Divi theme here !

3 - How to insert it in a theme template?

The insertion of the module Publish Content module within a theme template is identical to the insertion of any type of module...

Ajouter un nouveau modèle
Click on "Add new template

Go to the tab Divi > Theme Builderclick on "Add a new template" (Add New Template) and choose the type of template to create.

We have just seen it, it can be a template for all your articles or pages, a template for articles classified in a certain category etc.

You will then enter the edition (construction) of your template (model): you can create it from scratch or you can use a layout in your library (discover how to import/export a theme template).

For this example (screenshot below), I create the model (template) from scratch.

Module Publier un Contenu
Insert the "Publish Content" module into the template of your choice
  1. In the template editor,
  2. Add a new row (in green). 1/1 composition is recommended.
  3. Then click on "+" to insert a new module.
  4. Select the module "Publish Content" (Post Content).
Apparence du module Post Content
Appearance of the Post Content module

Once inserted, the Publish Content module looks like the screenshot above.

No need to wonder what this text corresponds to and to tell you that you have never written it... It's normal: it's a dynamic text.

Any changes made here will apply to all content using this template template. And that's the most interesting thing!

4 - How to customize the Post Content module?

Once you have inserted this famous module into your template, all you have to do is modify it...

To do this, click on the gearwheel icon that appears when the mouse hovers over it.

Paramètres module Post Content
Configure the settings of the Post Content module

A window will open and offer you a lot of options.

Even if you already think you know them all, believe me, I still discovered some of them when I created this tutorial! Like what, when you take the time to look into the details, you always find interesting things!

Let's look at all this in detail....

4.1 - Content tab

When the popup opens, the Content tab is present by default.

Onglet Contenu - Fond
Content tab

Nothing very complicated here. You will only be able to change the background color of the Post Content module (the color of the main content).

4.2 - Style tab

The Style tab is where most of the design options are located.

Post Content : Onglet Style
Post Content: settings available in the Style tab

Here you will find the following "sub-tabs":

  1. Image
  2. Text
  3. Text Subtitle
  4. Sizing and sizing
  5. Spacing
  6. Border
  7. Shade box
  8. Filter
  9. Transforming
  10. Animation

Each of these tabs provides options to style the elements in question... All the choices you make here will apply to all the pages of your site that use this template (theme template).


The Image sub-tab

Here, you will configure the design of all the images inserted in your content.

For example, you may want to

  • Round off the angles,
  • add a border,
  • choose the thickness of the border,
  • change the color of the border,
  • add a shadow to your image.
Onglet Style - Image
Style tab > Image

The Text sub-tab

Here, you will define the design of the different texts of your content.

Not only will you define the body of the text but also the hyperlinks, bulleted lists, numbered lists and quotation blocks.

For each of these elements, you can modify the typeface, style, color, alignment, spacing, line height, shadow, etc.

But above all, you can define different values depending on the screen sizes. This is ideal to improve the responsiveness of your site.

Onglet Style - Texte
Style tab > Text

The Text Sub-Title Sub-Title Sub-Title

Well, I grant you, the EN-FR translation is not great (see here how to get a well translated Divi)…

The "Subtitle text" tab allows you to style all titles.

As with classic text, you can define a typeface, size, alignment, color, etc. for each type of title.

Do not forget to select each title in order to customize it (h1, h2, h3 etc.).

Also remember to make your adjustments according to the size of the screens (desk, tablet, telephone).

Onglet Style - Texte Sous Titre
Style tab > Text Under Title

The Dimensioning sub-tab

Here, nothing too hard, you can define a width and height for your content, whether it is in a mobile, tablet or desktop version.

It would be better to leave the default values.

Onglet Style - Dimensionnement
Style tab > Sizing

The Spacing sub-tab

The spacing sub-tab allows you to add Margin (Margin) and Padding (Internal Margin) to all your content.

You can also define these values according to the size of the screens.

Onglet Style - Espacement
Style tab > Spacing

The Border sub-tab

The border you define here will apply to the entire content area.

You can define rounded angles, border style, thickness and color.

Onglet Style - Bordure
Style Tab > Border

The Filter subtab

I have rarely used this option....

It allows you to add a color filter or opacity to your content.

It may be interesting on an image for example, but on the whole content, it seems to me that it is not optimal.

Onglet Style - Filtre
Style tab > Filter

The Shadow Box sub-tab

If you add a shadow, it will apply to the "box" of your content.

Onglet Style - Ombre
Style Tab > Shadow

The Animation sub-tab

Same for the animation, it will apply to the "box" of your content.

Onglet Style - Animation
Style tab > Animation

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

4.3 - Advanced tab

The Advanced tab allows you to go a little further in the design.

This is ideal if you want to add IDs or CSS classes that you will later call from your children's theme or from the Appearance tab > Customize > Additional CSS.

Post Content : onglet avancé
Post Content: settings available in the advanced tab

Here you can:

  1. Add an ID and/or a CSS class.
  2. Add CSS code directly within the module.
  3. Define visibility: it is ideal for enabling or disabling elements depending on the size of the screens. However, here, it will be on the Post Content module as a whole that you will act.
  4. Modify transitions (duration and delay).

5 - In conclusion....

With this new module Publish Content (Post Content), we can finally define the overall design of a site or a template file in no time at all.

We do it once and for all and it saves us a lot of time!

But what is most appreciated is that we can easily respect the guide styles a graphic charter!

To get started with Divi, discover all the articles to start serenely!

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

Pin It on Pinterest

Shares
Share This