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.
- 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
What about excerpts?
What about them, Tanausu? Would you add an excerpt to be displayed on the post info line of your single posts?
Hi Luis! sorry i wrote last night from my mobile and half a message was not published :((
The whole question was: Is it possible to add social sharing buttons in the excerpts shown on the main page?
But right now i read again the post, and i see:
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.
So i think it can´t be desplayed 🙁
Thanks for your interest, i´ll keep investigating about this peculiar petition 🙂 🙂
Hello! What if you already have a child theme and you only want to integrate this into it? Thanks, it looks like exactly what I need, great timing!
Hi again. It looks like I found the answer in a comment you responded to in a 2014 post. I’ll be trying it out first chance tomorrow.
Still never got this done, those instructions show an option that is no longer available. Hope you’re well and thanks!
As I explained in the Divi Children 3.0 release post, you won´t be able to update older child themes. It used to be possible to update your existing child themes before Divi Children 2.0.9, and it is possible again (and in a much easier way) after 3.0. For instance, with Divi Children 3.0.3 anybody can update any child theme created by versions 3.0.0, 3.0.1 or 3.0.2 very easily.
I am looking to get these post meta icons on my front page of my site as well. my front is showing list of posts from a specific category. I am using the blog module to display the list.
I have manage to display the icons on the post page. any suggestion how can i get this icons to display on front page as well.
Hi, Aman. As I stated at the beginning of this post:
“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.”
What you´re asking for would require customization of the Divi Blog module.
Divi theme’s color picker is not showing the box to paste or copy the hexadecimal color code.
Hello,
Thanks for your response. What you said make sense. But now is there any way I can customize the blog module?
Thanks
Yes, sure there is, but you´d need to modify the Divi blog module class. It´s not that straightforward to be explained here.
no way to change the icon of author to actual image is there? I see this on a lot of sites and would love it.
No by the time being. Sorry, Derek.
where does it store the settings/css?
They are stored in the database as theme mods for each child theme.
would it not be nicer to place it in an css file?
They need to be available for the Customizer, that´s why they are stored as theme mods. But they don´t need to be accessed individually. For a faster performance, all the applicable CSS rules are stored in a single theme mod to be used when you switch your child theme to Production Mode.
Hi Luis, Been a while since I engaged with you… I have been searching a long time today to try to change the Divi post meta word “by” to “posted by,” and here is the only place where I am seeing that possibility addressed… Thing is I have a highly evolved child theme already, and that is all I am really looking for… I wonder if you might show how this could happen without using your child theme, what I am looking for…?
Kind regards,
John
Hi, John.
Yes, however advanced, Divi is still lacking many options that are available through Divi Children generated child themes.
I guess if you already have an evolved child theme that wasn´t created by Divi Children 3, you´ll need to add some js script to your child theme.