I should apologize in the first place because of the delay in this release, which was originally scheduled for mid July. Several things took longer than expected. Some of them were caused by new Divi releases in between, but the main reason was that I wanted to make the new Divi Children Engine (more about that in a moment) fully compatible with any Divi child theme.
If this is not your first visit to this site, you may have noticed that several things have changed here today. I´ve updated Divi to its newest version 2.1.2, installed the new Divi Children 2.0 and then updated my child theme by means of the plugin. After that, customizing some parts of this site like the sidebar or the footer was a breeze.
What´s new in Divi Children 2.0
I guess it should be much easier to answer the question What´s not new in Divi Children 2.0? Almost everything has changed. If you take a look at the plugin changelog you´ll get an impressive list, and I haven´t gone into much detail on it.
In fact, part of the hardest time I had when developing this new version was related to my commitment to make all the new features compatible not only with the latest releases of Divi, but also with any already existing Divi child theme.
Divi Children 1 was nice because it allowed you to easily create child themes of Divi at one button click. It automatically grabbed the information about you and your site, and included a function to customize your footer credits. It also allowed you to change the default screenshot and included a patch for a Divi issue and a couple more convenient features.
But that is not what I had in mind when I started this project. As I stated on my post Divi Children 2.0 sneak peek: Customizing Divi even further, without code, the real purpose of Divi Children is to help you customize Divi to a much broader extent.
I don´t like the Divi sites out there looking pretty much the same (and that is exactly what Divi detractors hold as the main argument against Divi). So the way I devised to fight that was by using child themes, and more particularly by using a plugin that could create highly customizable Divi child themes.
And, if you keep reading this post, you will realize how many things have changed in Divi Children 2.0 to make that possible.
The new footer credits
In Divi Children 1, every time you created a new child theme you could fill a form (or just accept the values grabbed by the plugin for you) to customize the footer credits line. But that was not too flexible. The values you entered were hardcored in the function that generated the footer credits, so if you wanted to change anything afterwards you would have needed to edit the footer.php file.
I realized that there were many Divi users that were complaining about Divi not allowing the user to modify the footer credits through the Divi Theme Options panel (the epanel). That is why I included the credits settings from the first version of Divi Children.
But, since I want you to customize Divi in a very easy and flexible way, I´ve made those credit settings be part of your theme options. Not part of your Divi parent theme options, but of your child theme options. What this means is that now you will be able to change your footer credits values individually for every one of your Divi child themes. You will not modify them through the epanel, but by means of the WordPress Customizer (which will also allow you to preview your changes while you make them).
In addition, a new element has been added to the footer credits: “Developed by“. It was added with developers in mind: you can now use that new element to link to yourself or to your company.
Also, the “Powered by” element is now more flexible and don´t have to necessarily link to WordPress.org. For instance, in this site I´m using it with a link to the Divi theme page.
The Divi Children Engine
And now let´s talk about the main innovation in Divi Children 2.0: the Divi Children Engine. What is that? It is the heart of your future child theme´s system to let you customize Divi on the fly. It can actually be considered as a customization engine, therefore the name I gave it.
Does that name sound pretentious to you? Well, as this is a free plugin, I felt I could just name it as I wanted, since nobody will ask for their money back. But to tell you the truth, I don´t think the Divi Children Engine will disappoint you anyway (actually, I hope it wouldn´t disappoint you even if you paid some money for it!).
Now seriously, what the Divi Children Engine really is is this: A collection of code files packed together in a separate folder in your child theme that will take care of a lot of things to help you customize Divi very easily, without having to touch a single line of code and previewing all your changes thanks to the WordPress Customizer.
Apart from all the customizing capabilities provided by it, the awesomeness of the Divi Children Engine relies in that all its code is kept separated from the rest of your child theme files. That way it can be updated at any time to include new features or to comply with future new versions of Divi without messing your child theme files.
The Divi Children Engine can even be installed in any existing Divi child theme, even in one that wasn´t created by Divi Children. That is what the new “Install or Update Divi Children Engine” tab on the plugin main page is for, besides for updating your Divi Children Engine to future new versions:
The plugin will check the stylesheet and the functions.php and footer.php files (if they do exist) of your selected Divi child theme and will take care of everything to make sure that the Divi Children Engine can work properly with your child theme.
Divi Children will show you the status of the different files in terms of compatibility, as well as the actions to be automatically performed by the plugin in order to install or update the Divi Children Engine in your Divi child theme:
When updating your child theme files you won´t lose your existing custom CSS and functions, the plugin will just add the lines required to support the Divi Children Engine.
But just in case, whenever you install or update the Divi children Engine, the plugin will also make backup copies of any of your existing style.css, functions.php or footer.php files before updating them.
The only particular case when you may need to touch your files is for your footer.php file if your child theme has one, but only if that file includes modifications you made to your footer template manually. If your footer.php file was created by an earlier version of the Divi Children plugin and you didn´t touch it afterwards, you won´t need to worry about a thing.
The new footer.php file
Divi Children 1 created a footer.php from text templates, pasting a function used to generate the footer credits and saving the resulting file as a php file in your child theme folder. But that has proved to be a source of problems.
For instance, when Divi 2.1 was released it included the new Back To Top button, but that feature needed some new code in the footer.php file. So the Divi parent footer.php template was updated. But, if you were using a child theme created by Divi Children 1, your site would make use of your child footer template that was created based on the Divi 2.0 footer.php file and not on that of Divi 2.1, so the new feature wouldn´t work on your site.
That will not happen again. What Divi Children 2.0 does now is this: instead of creating a footer.php file from template files packed with the plugin, it creates that file dynamically from the parent footer.php that belongs to the Divi version you have installed in your own site.
That means that if you update your Divi parent theme to a new version, all you´ll have to do is to update your child footer.php as well. That way your footer will keep updated even if the Divi version used is more recent than the Divi Children plugin version.
How do you update your footer? Divi Children 2.0 will take care of that too, that´s what the other new tab on the plugin main page, “Update Footer“, is for:
Customize Divi by means of the WordPress Customizer
Now here is where the real fun starts! Every child theme created by Divi Children 2 will have a number of customizing sections available for you in the WordPress Customizer (in fact, every Divi child theme that includes the Divi Children Engine, whether it was originally created by Divi Children 2.0, by an earlier version of Divi Children or by yourself manually).
These are the first customizing sections packed with Divi Children 2.0:
You can customize the Divi main footer in every aspect of it: background color, paddings, text and links hover colors, titles and normal text sizes, titles in uppercase… even the bullets are customizable now:
Here again, you can customize Divi footer bottom in many ways: paddings, background color, text color, social icons size, social icons color, social icons hover color… you can even display the social icons using the original colors from each service, like with the original Twitter or Facebook logo colors for example:
We´ve already seen this section earlier on this post, above in the “The new footer credits” paragraph. In this settings section is where you can enter your footer credits values or change them at any moment.
This section allows you to customize your main sidebar, although it is not the only section that you will have available to customize Divi sidebars, as you will realize in a while. Take a look at what you can achieve, you can even make your sidebar wider by reducing or getting rid of the sidebar left margin and hiding the vertical divider:
And, of course, on the main sidebar you also have the chance to customize again everything like colors, paddings, sizes, bullets, etc. You can even display the widget titles and the widget elements inside backgrounded boxes:
Post Meta Data
A new function included in the Divi Children Engine allows you to use icons for the post meta data to be displayed on your posts, and this section lets you customize that. I didn´t like the way Divi displays author, date, categories and comments on posts, so I decided that one of the first things that should be done to customize Divi would be to display that data in a more friendly fashion. So here is what I´ve included in the Divi Children Engine to do that:
The post meta data settings also include options to choose whether you want to show tags or not at the bottom of your post, to display them with or without a tag icon, as well as the color of the icon:
The new Divi Children Custom Selectors
So far we have seen Customizer setting sections that are available for the entire site, but the Divi Chidren Engine also include some custom selectors and special codes that can be used to customize Divi modules separately.
When editing pages, you´ll find at the right hand side of the Page Builder a collapsible box named “Divi Children Custom Code”.
There you can create some custom CSS classes and IDs that you can paste on Divi modules to customize them separately. You´ll find also what I´ve named “Magic Codes” which will be explained later on this post.
The Divi Children Custom Classes and IDs are predefined selectors developed to customize Divi modules. Divi Children 2.0 comes with the first pack of custom selectors that include the following:
- Sections with Custom Rows (Class)
- Custom Full Width Headers (Class)
- Custom Call To Actions (Class)
- Custom Sidebars (ID)
And the good news is that you can create as many of each of these custom selectors as you want, therefore extending the customizing capabilities to no end.
For instance, you may want to have two different types of Full Width Headers with different styles on various pages of your site, or even on the same page for that matter.
To achieve that, you need to create two custom classes for the two different header styles (you will notice that by default no custom selectors are created for a fresh child theme).
Nothing easier, just go to the “Custom Full Width Headers (class)” module of the “Divi Children Custom Code” box and hit the + icon.
You will get a new custom selector (custom_fullwidth_header_1 for the first one) that you can copy and paste on any of your Fullwidht Header Divi modules.
To prevent the accidental creation of too many custom selectors of the same kind (for example by an inexperienced user hitting repeatedly the + icon without understanding what´s going on), you will see the + icon disappearing after a new selector has just been created.
All you have to do is save your page as a draft or update it if it was already published, and you´ll be ready to create a new custom selector (custom_fullwidth_header_2 in this case).
So now you should copy each of your two Custom Full Width Headers classes and paste it on the on the “CSS Class” field of each of the Fullwidht Header Divi modules you want to customize separately. Then save your module settings, save or update your page and your modules will be ready to be customized by using the WordPress Customizer:
You will find that, for every new custom selector you´ve created that way, a new settings section will be added in the WordPress Customizer. For example, if you created the two new Custom Full Width Headers classes of the above example, when you open the Customizer you´ll get two new sections named “Divi Child – Full Width Header 1” and “Divi Child – Full Width Header 2” .
Now that we´ve seen how to create and use the Divi Children Custom Selectors, let´s see what you can do to customize Divi modules with the first set of these selectors packed with the Divi children 2.0 release.
Custom Full Width Headers
You can customize paddings, font sizes and font colors. In the following animated image you can see how two different headers are being customized with different settings, even when they are on the same page. They are just using two different Custom Full Width Headers classes:
Custom Call To Actions
How about being able to customize Divi Call To Actions? And how about being able to do it in different ways depending on where they are displayed?
The default Divi Call To Actions look all of them pretty much the same because there are not many options for customizing them. So it seemed a good idea to include a type of Divi Children custom classes to be able to change a lot of things such as the module width, the paddings, the background (with transparency control), the corner radius, the title size, or even the size of the button:
Sections with Custom Rows
The customizing settings available for these custom selectors do not affect a single Divi module, but a whole Divi section. The idea of creating special sections with customizable rows came to my mind when trying to create a particular page with Divi modules in 2 columns.
I noticed that if you wanted to display rows with columns, some element to visually link the modules within one row was missing. For example, let´s say you have a section with several rows, each row containing an Image module and a Call To Action module that relates to the image. Displaying that Divi section will yield a “gallery” or “grid” effect. You wouldn´t know whether the relationship between modules is vertical or horizontal, or whether the modules are related to each other at all.
But if you place a background for each row, the horizontal relationship will be clear enough. Now you can accomplish that effect on your site with the Sections with Custom Rows classes.
You can customize not only the background (with opacity control) and the margin between rows or the padding inside rows, but also the top and bottom paddings for the whole section. Therefore, even if you don´t want to display the backgrounds for each row, you can also use this custom selectors for just customizing the spacing between rows and between Divi sections.
Please be aware that this custom sections are optimized for two columns as they are right now.
These custom IDs allow you to customize Divi sidebar modules separately. By creating different selectors you will be able to modify the styling of several different sidebars, for example the sidebars used in Divi Specialty Sections. You can change many settings in just seconds, as we saw it was possible for the main sidebar of your site:
The Magic Codes
What I´ve named “Magic Codes” are IDs that don´t affect the CSS but the functionality of some Divi modules. Magic Codes, uh? A fancy name again, Luis? Yep, I don´t think you´ll ask your money back because of that either.
The first couple of Magic Codes packed with the plugin where born as the answer to a request made by one of our readers, N. E. Montgomery, on the comments to the Divi Children 2.0 sneak peek post:
One thing I’ve been really wanting was to be able to have one module displaying the most recent post, then a module below or to the side with the other most recent posts, but skipping the first one so it’s not listed twice.
I had to give it a thought because that feature implied the modification of a Divi core function and a question aroused: How can I tell Divi where I want the blog feed to behave in a different fashion? It had to be something selectable.
The way I figured that out was this: Every Divi module form comes with a couple of fields for custom selectors: “CSS ID” and “CSS Class“. So, in the modules for which we want to change their functionality, why not leave “CSS Class” for real CSS customization and use “CSS ID” to tell Divi that we want the module to do something different?
And that´s where the name Magic Codes comes from: We´ll be using CSS selectors to do things that may not be related to CSS at all, but it works!
By pasting the newest_post_feed and the no_newest_post_feed Magic Codes on the “CSS ID” field of different Divi Blog Modules you can force the blog feeds to display the most recent post only or just the opposite, all posts except the most recent one:
Choose what you want to see in the WordPress Customizer
As you create new Divi Children custom selectors, your WordPress customizer can get really overcrowded. But once you have finished customizing some parts of your Divi site you won´t need some settings anymore, or at least not all the while.
If you are a developer working on a client site you would for example customize the footer bottom and, once you are happy with the results, just forget about the settings that are needed to modify it. Better yet, you would like to hide those settings.
That way you can keep your Customizer clean and not so cluttered, so you can focus on what you need to customize next.
That´s why the Divi Children Engine creates for every child theme a settings section named “Divi Child Settings Control”. On that section you can hide any of the sections added by the Divi Children Engine, just by checking whatever you don´t want to see on the Customizer. Of course, you can always uncheck them back at any time.
What is next?
Do you like what you are seeing so far? Then let me tell you that this is just the beginning. The flexibility brought by the Divi Children Engine and the new install/update system will allow for lots of other cool things to help you customize Divi through your child themes.
The main hard work is already done, so it will be much easier now to add more Customizer sections, as well as new Custom Selectors or new Magic Codes in the next future (for releases 2.1, 2.2 …).
There are still many things that make Divi sites look too alike, and there is also a lot of room left for improvements to allow you customize Divi in seconds.
I really hope that you enjoy this new release, it was developed with you the Divi user in mind. Sorry about this post being so long, but as you´ve seen there were too many things to tell.
Please, give me some feedback through the comments!
And now it´s time to stop reading, so go download the new Divi Children 2.0 and start playing with your Divi site!
(Yes, I said playing and I meant it: you´re gonna learn how to customize Divi while you play with it)
Latest posts by Luis Alejandre (see all)
- How to Get a Quasi-Sticky Footer for Divi - May 11, 2017
- Of child themes and missing Divi sliders - November 25, 2016
- Divi Children 2.0.9 and the new Divi footer credits editor - September 10, 2016