The "Post Content" module 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?
Perfect, you're in the right place!
You will see that this module is indispensable in half 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 settings options...
1 – What is the "Post Content" module of Divi for?
This functionality was expected on firm feet and it is finally possible!
The « Publish Content (Post Content) module allows styliser once and for all the content (body) displayed within your pages and articles. No matter what this content was created with: with Visual Builder or with WordPress editor (classic or Gutenberg)...
In the past, it was necessary to add CSS to stylize all the titles of a site for example...
Yes, because the tab Appearance > Customize > General Settings > Typography does not allow you to choose a customised font for the different title tags (h1, h2, h3, etc.).
Nor can we differentiate colors by type of title.
You can only choose one font size for the text body and another for the header titles, idem for typography...
That time is over! Now the « Publish Content » module (Post Content Module) allows you to stylize all HTML elements of your content.
Thanks to it, you will define the size, color, spacing, typo, responsive versions, box-shadow, animation and even more of the following elements:
- Titrations h1, h2, h3, h4, h5 and h6,
- The quotation blocks,
- Hypertext links,
- The images,
- Smartlists,
- The numbered lists,
- The whole body (body).
But don't worry, the setting options will seem familiar to you because nothing changes at that level.
2 - Where can you use the "Post Content Module"?
For starters, do not look for the module Publish Content within the Visual Builder, the one you use within the page or article for build your layout. It is simply not available here.
And it's normal, it's only usable within the Divi Theme Builder !
Since it is used for dynamically stylize your entire siteit must be used within theme templates.
But not any theme template! On some, the Publish Content module (Post Content module) will be indispensable, on others, it will be useless!
The basic module is really useful – and even indispensable – on the Templates for articles and page templates... But you can use it on other types of templates...
Let's take a closer look at this:
You can use the Publish Content module on:
- Pages: All pages, Homepage, Specific Page, Children.
- Articles: All articles, Articles in specific category, aricles with specific label, specific articles.
- WooTrade Pages: cart, checkout, my account.
- Projects: All projects, Projects in specific categories of projects, Projects with specific project tags, specific project.
The Publish Content module will be useless on:
- The blog page,
- All archive pages,
- The shop page,
- All product pages: although this is not really true since the Publish Content module still allows to display the "long description" of a product as explained on this item,
- The Search Results page,
- Page 404.
Don't delay! Discover the theme Divi here !
3 – How to insert within a theme template?
The integration of Post Content Module within a theme template is identical to the insertion of any type of module...
Go to tab Divi > Theme Builder, click "Add a new model" (Add New Template) and choose the template type to create.
We just saw it, it can be a template for all your articles or pages, a template for articles in a certain category etc.
You will then enter the edition (building) of your template (model): you can create it from scratch or you can use a layout present in your library (discover how to import/export a theme template).
For this example (screenshot below), I create the template from scratch.
- In the template editor,
- Add a new row (green). Composition 1/1 is recommended.
- Then click "+" to insert a new module.
- Select the "Post Content" module.
Once inserted, the Publish Content module looks like the screenshot above.
You don't have to wonder what this text is like and tell you that you never wrote... It's normal: it's a dynamic text.
Everything that will be modified here will apply to all content using this template. And that's the most interesting!
4 - How to customize the Post Content module?
Once you have inserted this famous module into your template, you only have to change it...
To do this, click on Icon of the toothed wheel which appears on the mouse (at the hover).
A window will open and offer you a lot of options.
Even if you think you already know them all, believe me, I discovered some of them again when creating this tutorial! Like, when you take the time to look in detail, you always find interesting things!
Let's see in detail...
4.1 – Tab Content
When the popup opens, it's Contents tab which is present by default.
Nothing very complicated here. You can only change the background color of the Post Content module (the color of the main content).
4.2 – Style Tab
It's in Style tab the majority of design options are found.
Here you will find the following sub-tabs:
- Image
- Text
- Text Subtitle
- Dimensioning
- Spacing
- Border
- Shadow box
- Filter
- Transform
- Animation
Each of these tabs offers options to stylize the items in question... All the choices you make here will apply on all pages of your site that use this template (theme template).
The Image tab
Here you will set the design of all the images inserted into your content.
For example, you can
- Rounding the angles,
- add a border,
- choose the thickness of the border,
- changing the border color,
- add a shadow to your image.
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 hyperlinks, smart lists, numbered lists and quotation blocks.
For each of these elements, you can change the typo, style, color alignment, spacing, line height, shadow, etc.
But most importantly, you can define different values according to screen sizes. It's ideal for improve your site's responsive.
Text Sub-Title
Well, I agree with you, the EN-FR translation is not great (see here). how to get a translated Divi)…
Tab "Subtitle text" allows to stylize all titrations.
As with classical text, you can define a typo, a size, an alignment, a color ect. for each type of title.
Then remember to select each title to customize it (h1, h2, h3 etc.).
Also remember to make your settings according to the size of the screens (office, tablet, phone).
The Dimensioning sub-tab
Here, nothing sorcerer, you will be able to define a width and height for your content, whether in mobile version, tablet or desktop.
Instead, it would be advisable to leave the default values.
The Space tab
The sub-tab spacing allows to add Margin (Marge) and Paddy (Internal Marge) to all your content.
You can also set these values according to the size of the screens.
The Border sub-tab
The border you define here will apply to the entire part of the contents.
You can define rounded angles, border style, thickness and color.
Filter sub-tab
I rarely used this option...
It allows you to add a color filter or opacity to your content.
This may be interesting on an image for example but on the whole content, it seems to me not to be 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 animation, it will apply to the "box" of your content.
Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"
4.3 – Advanced Tab
Advanced tab allows to go a little further in the design.
This is ideal if you want to add ID or CSS classes which you will later call from your theme child or from the tab Appearance > Customize > Additional CSS.
Here you can:
- Add an ID and/or CSS class.
- Add CSS code directly within the module.
- Defining visibility: This is ideal to enable or disable elements depending on the size of the screens. However, here it will be on the Post Content module in its entirety that you will act.
- Change transitions (duration and time).
5 - In conclusion...
With this new Post Content moduleFinally, one can define the overall design of a site or a site. model file in two stages three movements.
We do it once and for all and it saves us crazy time!
But what is most appreciative is that one can easily respect the Guide styles a graphic charter!
To start with Divi, discover all the articles to start calmly!
41 Comments