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:
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:
- The blog page,
- All archive pages,
- The shop page,
- All product pages: although this is not really true since the module Publish Content still allows you to display the "long description" of a product as explained on this article,
- The Search Results page,
- Page 404.
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...
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.
- In the template editor,
- Add a new row (in green). 1/1 composition is recommended.
- Then click on "+" to insert a new module.
- Select the module "Publish Content" (Post Content).
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.
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.
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.
Here you will find the following "sub-tabs":
- Text Subtitle
- Sizing and sizing
- Shade box
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.
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.
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).
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.
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.
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.
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.
The Shadow Box sub-tab
If you add a shadow, it will apply to the "box" of your content.
The Animation sub-tab
Same for the animation, it will apply to the "box" of your content.
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.
Here you can:
- Add an ID and/or a CSS class.
- Add CSS code directly within the module.
- 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.
- 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!