With the new Divi Children 3 you can create Divi child themes that allow you to fully customize the Divi post meta for your single posts. You will be able not just to change the styling, but also to add new post meta elements or even to arrange the Divi post meta layout as you like thanks to the new Post Meta EZ-Builder.

Everything we will be talking about in this post applies to Divi post meta for single posts only. We will not be dealing here with blog feeds, archive pages or the Divi Blog module, for instance.

The default Divi post meta options for single posts

Let´s see in the first place which are the default customizing options available for Divi post meta. Out of the box, Divi provides four post meta elements available for single posts:

• Author
• Date
• Categories
• Comments

These meta elements can be enabled or disabled in the Divi Theme Options panel, under the Layout tab:

So much about post meta elements and their layout. You can not modify the order in which the elements are displayed, and you don´t have more meta elements available (what about tags, for example?) other than those four types. Also, wouldn´t you like to be able to easily customize the default texts of your Divi post meta line (like “Published by:“, for example)?

Regarding their style, you have a few settings available for the Divi post meta in the Divi Theme Customizer, under Blog > Post:

So you can customize your Divi post meta text size, line height, letter spacing and font style. But what about using icons, or customizing colors, separators, spacings, margins, alignment, or even adding a background? If you´d like to have those options available for you, just keep reading.

New customizing options brought to you by Divi Children for Divi post meta

So you want more customizing options for your Divi post meta, don´t you? Then child themes created by Divi Children are here to help, because they cover both aspects involved in customizing your post meta with total freedom: the content of the post information to be displayed, which can be easily arranged by means of the Post Meta EZ-Builder, and the post meta styling, which can be customized with the controls provided in a couple of new sections in the Customizer.

The first thing to point out is that in a child theme created by Divi Children you will have more elements available to build your Divi post meta, because now your options are:

• Author
• Date
• Date – Last Modified
• Categories
• Comments
• Tags

Also, you will not only be able to add or remove these post meta elements, but the Post Meta EZ-Builder included in the Meta Elements section of the Customizer will even allow you to arrange them in any order you like.

Furthermore, within the Post Meta EZ-Builder you can also customize the text to be displayed before each element.

Regarding the post meta custom styling, you´ll find two different new sections in the Customizer for that purpose:

• The Meta Styles section, where you can customize everything that deals with the post info elements inside the Divi post meta line, like using icons and customizing their color, size or padding, customizing the separator between meta elements (character, color, padding, font-weight) or customizing the colors used for text, links or links on hover.
• The Custom Post Styles section, which will be available if you choose to create your own custom post layout by means of the new Post Layout Builder (we´ll talk about it in a detailed, separate tutorial). In this case the customizing options will apply to your Divi post meta as a whole, as an array or line of meta elements, not to the individual elements. You´ll be able to customize the top, bottom and horizontal margin of the post meta line, as well as its alignment. Also, you can add a semi-transparent color background and customize the vertical and horizontal padding of the post meta inside it.

How to add, remove or arrange your Divi post meta elements

First of all, you should have your CSS output set to “Development Mode” in the Output Mode section of the Customizer, so you can preview your changes. If you have never set it yet to “Production Mode” then you´re all set and you don´t have to do anything about it, because Development Mode is the default mode in your child theme. Otherwise, make sure your child theme output mode is set to Development Mode and hit the Save & Publish button of the Customizer before you continue customizing your child theme.

Now you´re ready to start playing with the Post Meta EZ-Builder. Open the “Child Theme” – Posts Customizer panel and then the Meta Elements section and make sure you choose Custom Post Meta (it should be selected as default anyway), so the EZ-Builder will appear:

The default elements you will find in the Post Meta EZ-Builder the first time you open it are the four default Divi post meta elements: Author, Date, Categories and Comments. By the way, you need to make sure that you have all those enabled in the Divi Theme Options panel if you want to use them on your posts.

The only difference you´ll find on your post when you open the Pos Meta EZ-Builder for the first time is that the author name is preceded by the text “By:” instead of “by“, the date is preceded by “Published on:” and the categories by “Categories:“:

The reason for this is because each post meta builder element comes with two fields: the first one is where you select the element type, while the second one is a text field where you can customize the text to be displayed before the element (supposing your not using icons to label your meta elements, in which case you don´t need any text). The custom texts you saw appearing in the image above are just the default values of the second field for the elements Author, Date and Categories:

To add a new meta element, just click on the [+] button you´re already familiar with and select the desired element (the new element will appear open so that you can fill its option fields). To remove any element you´ll need to open it first so both the “X” and the red “Remove” link appear, so it´s not easy to delete them accidentally. Finally, to rearrange your Divi post meta elements, just drag them and put them in the desired order:

How to style your Divi post meta

Now that you´ve created and arranged your Divi post meta, let´s make it a little more stylish by means of Customizer, beyond the native Divi customizing options for it.

Post meta with icons

Would you like to display your post meta with icons instead of a text description for each meta element, as they do for example in WP Tavern, or in many other blogs? It´s easier done than said!:

Customize your post meta icons color

Your post meta icons can be easily customized to be displayed with any color you like:

Customize your post meta icons with different colors

But the icons can also be customized one by one to have different colors:

Customize the size of your post meta icons

The size of your post meta icons can be customized separately from the meta text size that you can adjust with the Divi native customizer settings:

Customize the space between elements by modifying the icons padding

You can easily give your post meta elements a bit more air, just by adjusting the icons left padding:

Custom post meta separators

Bored of the Divi post meta default separator, that little dot? You can now select a different character to be used as the post meta separator:

Customize the separator color

As we saw before with the icons option, you can of course customize the colors of your post meta separators:

Customize the spacing around the separators

As with the icons, you can also give your meta elements some more air by modifying the separators horizontal padding:

Customize the separator font weight

Your post meta separators can also look thinner or thicker, depending on the style you want to have for your post info:

Further customizing your Divi post meta

As I mentioned before, there are more customizing features available for your post meta through the Custom Post Styles section if you are using a custom post layout built with the Post Layout Builder. We will see all this in a different tutorial, but here is is a sample of what you can do:

As you saw, now with the Post Meta EZ-Builder and the new style settings available, customizing your Divi post meta is really a piece of cake.

• Author
• Recent Posts

Luis Alejandre

Luis is the creator of Divi4u and the editor of this blog. You can read more about Luis in his About page. Luis also created and runs the free online WordPress tool WPThemeDetector.

Latest posts by Luis Alejandre (see all)

• New Divi Children 3.0.10 update released - April 7, 2022
• New Divi Children 3.0.7 version for WordPress 4.9 - November 15, 2017
• Understanding Divi Children Output Mode - October 11, 2017