The "Post Content" module is available from the version 4.0 of the Divi theme. Perhaps you haven't used it yet? Or perhaps you don't see what it can be used for?
Great, 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 setting options...
Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.
1 - What is the purpose of Divi's "Post Content" module?
This feature has been eagerly awaited and is finally possible!
The "Post Content" module allows you to style the content (the body) displayed within your pages and posts once and for all. It doesn't matter with what this content was created: with the Visual Builder or with the WordPress editor (classic or Gutenberg)...
In the past, it was necessary to add CSS to style all the titles of a site for example...
Yes, because the Appearance > Customise > General Settings > Typography tab does not allow you to choose a custom font for the different title tags (h1, h2, h3, etc.).
It is also not possible to differentiate colours by type of title.
You can only choose one font size for the body text and another for the header titles, and the same goes for the typography...
Those days are over! Now, the Post Content Module allows you to style all the HTML elements of your content.
With it, you will define the size, colour, spacing, typeface, responsive versions, box-shadow, animation and more of the following elements:
- The titrations h1, h2, h3, h4, h5 and h6,
- Quote blocks,
- Hypertext links,
- The images,
- Bulleted lists,
- Numbered lists,
- The whole body.
But don't worry, the settings options will look familiar because nothing changes there.
2 - Where can I use the Post Content module?
For starters, don't look for the Publish Content module 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 indispensable, on others, it will be useless!
Basically, this module is really useful - and even essential - for article templates and page templates... But you can use it for other types of templates...
Let's take a closer look:
You can use the Publish Content module on :
- 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.
- Projects : All projects, Projects in specific project categories, Projects with specific project tags, specifict 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 you to display the "long description" of a product as explained in this article,
- The Search Results page,
- Page 404.
Don't delay! Discover the Divi theme here !
3 - How to insert it into a theme template?
Inserting the Post Content module into a theme template is the same as inserting any other type of module...
Go to the tab Divi > Theme Buildertab, click on "Add a new template (Add New Template) and choose the type of template to create.
As we have just seen, this can be a template for all your articles or pages, a template for articles in a certain category, etc.
You will then enter the editing (construction) of your template: you can create it from scratch or you can use a layout from 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). The 1/1 composition is recommended.
- Then click on "+" to insert a new module.
- Select the "Post Content" module.
Once inserted, the Publish Content module looks like the screenshot above.
You don't need to ask yourself what this text is about and tell yourself that you have never written it... It's normal: it's a dynamic text.
Anything changed here will apply to all content using this template. And that's the best part!
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 cogwheel icon that appears on mouse-over (hover).
A window will open and offer you a number of options.
Even if you think you already know them all, believe me, I discovered a few more while creating this tutorial! Just goes to show, when you take the time to look into the details, you always find interesting things!
Let's look at it in detail...
4.1 - Content tab
When the popup opens, the Content tab is present by default.
Nothing very complicated here. You can only change the background colour of the Post Content module (the colour of the main content).
4.2 - Style tab
The Style tab contains the majority of the design options.
Here you will find the following "sub-tabs":
- Text Subtitle
- Shadow box
Each of these tabs offers options for styling the elements in question... All the choices you make here will apply to all the pages on your site that use this template.
The Image sub-tab
Here you will set the design of all the images inserted in your content.
For example, you can
- Round off the corners,
- add a border,
- choose the thickness of the border,
- change the colour of the border,
- add a shadow to your image.
The Text sub-tab
Here you will define the design of the different texts in your content.
Not only will you define the body text, but also hyperlinks, bulleted lists, numbered lists and quotation blocks.
For each of these elements, you can change the typeface, style, colour, alignment, spacing, line height, shadow, etc.
Most importantly, you can set different values for different screen sizes. This is ideal for improving the responsiveness of your site.
The Text Sub-Tab
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 the classic text, you can define a typeface, size, alignment, colour etc. for each type of title.
Don't forget to select each title to customise it (h1, h2, h3 etc.).
Also remember to make your settings according to the size of the screens (desktop, tablet, phone).
The Sizing sub-tab
Here, nothing too complicated, you will be able to define a width and height for your content, whether it is mobile, tablet or desktop.
It would be advisable to leave the default values.
The Spacing sub-tab
The Spacing sub-tab allows you to add Margin and Padding to all your content.
You will also be able to set 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 will be able to define rounded corners, border style, thickness and colour.
The Filter sub-tab
I have rarely used this option...
It allows you to add a colour filter or opacity to your content.
This can 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 be applied to the 'box' of your content.
The Animation sub-tab
The same goes for the animation, which will be applied 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 with the design.
This is ideal if you want to add CSS IDs or classes that you will call later from your child theme or from the Appearance > Customise > Additional CSS tab.
Here you can :
- Add an ID and/or a CSS class.
- Add CSS code directly within the module.
- Define visibility: this is ideal for enabling or disabling elements according to screen size. However, in this case, you will be acting on the Post Content module as a whole.
- Modify transitions (duration and delay).
5 - In conclusion...
With this new Post Content module, you 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 appreciable is that one can easily respect the guide styles a graphic charter!
Getting started with Divi, discover all the articles to start with peace of mind!