Divi Children 2.1 sneak peek: Better Customizer, easier Divi customization

Divi Children 2.1 sneak peek: Better Customizer, easier Divi customization

The release of Divi Children 2.0 was a major breakthrough because it introduced the Divi Children Engine and the use of the WordPress Customizer, making Divi customization through child themes a breeze for the site sections that were included in that release (Main Footer, Footer Bottom, Sidebar,…) and also for some custom features like the ones available thanks to the introduction of the Magic Codes.

But as many of you already  know, I´m in my own “crusade” to avoid Divi sites looking all alike. And that implies continuously adding new features to the Divi Children plugin in order to make Divi customization even easier. So, even when you´re not hearing from me, I´m always working on the development of new Divi Children updates on the background.

On this post I´m going to show you a few of the things I´m been working on for the next release, so you´ll get a hint about what to expect from Divi Children 2.1.

Better Customizer settings

With the advent of WordPress 4.0 the Customizer has been further improved with some new features, so I wanted to take advantage of them.

New Customizer panels

customizer-panelsOne of the new features introduced in the WordPress Customizer is the possibility to organize setting sections into collapsible panels, as you´ve probably seen for widgtes.

That makes the Customizer menu less overcrowded and far clearer, so I thought it would be a good idea to organize all the new sections created by Divi Children into separate panels.

At least two panels will be present in your WordPress Customizer for your child themes created by Divi Children:

  • The General Settings panel will contain all the customizing sections that are available for every child theme created by Divi Children, such as Main Footer, Footer Bottom, Sidebar, etc.
  • The Custom Settings will contain those sections that are only applicable to your particular child theme, such as the customizing sections for Divi modules where you´re using Magic Codes.

Note that from now on the name of your child theme will be displayed on the title of any panel created by Divi Children, as you can see in the image before “General Settings” and “Custom Settings”.

Each of this panels will have its own Divi Children Engine Settings Control section, where for the sake of clarity you can hide any section of the panel, once you´re done with the settings included in that particular section.

But the news about the Customizer do not stop here. I´ve also included a modified version of the great Kirki plugin, which will make some setting controls much easier and way more flexible and intuitive. Although Kirki is available as a WordPress plugin, the new code will be automatically embedded in the Divi Children Engine of the child themes created by Divi Children, so you won´t need to install any plugin in your site to enjoy the new features I´ll present next.

New slider controls

One of the nicest new features available for the Customizer settings is the slider type control. A slider control allows you to choose any value in between a certain value range, which gives a lot of options when compared to other types of setting controls, such as the select type.

For example, you can use a slider control to set a margin to any integer value in pixels within the 0px-100px range, instead of being forced to select a value among just a group of predefined values (or having to deal with an extremely long list of available values otherwise).

This is what a Customizer section with slider controls will look like after the Divi Children 2.1 update:

customizer-slider-controls

 Intuitive setting controls using images

Another nice change you´ll find in Divi Children 2.1 is that some Customizer setting controls are being changed from select boxes to images representing what will be accomplished with each available option, thus providing a more intuitive user interface.

For example, this is the way the control to choose the type of bullets used in the Main Footer will look from now on:

select-to-image-control

New Divi customization features

Besides the new Customizer panels and controls (which I think would justify a new plugin update on their own), I´ve being working on some new Divi customization features. Here are the main ones:

Totally customizable footer

The Divi footer became highly customizable after the release of Divi Children 2.0, but there was an important thing still missing to make it completely customizable:

How about being able to customize the Main Footer widget layout itself?

divi-customization-footer-widget-columns

Divi Children 2.1 will allow you to choose your footer widgets layout, giving you the freedom to have a Divi site with 2, 3 or 4 widget columns.

Nice? Wait, there will be some more customization freedom yet: you´ll be able to get an asymmetric layout if you want, with the widget columns having different widths.

Do you still want more customizing power? Ok, you´ll be able to choose the column width ratio when your layout uses different column widths.

Not happy yet? Then I´ll let you set the width of the spaces between widgets columns as well.

And as usual, all that will be on the house, totally free.

Social Icons

When it comes to social icons, Divi includes settings via the epanel just for Facebook, Twitter, Google+ and RSS. But what about the rest of the social media? Divi Children 2.1 will take care of that.

A new Social Icons section has been added to the Customizer, where you can set your social media links and decide which icons will be displayed:

divi-children-social-icons

I know, after the recent release of the new Monarch plugin this new feature may not look that appealing, but it was already developed and included in the Divi Children plugin for the 2.1 release weeks before the release of Monarch.

And it is still great for those who just want to have more social media options for the Divi footer or top header and don´t plan to use a social media plugin.

The Live Custom CSS

divi-customization-live-custom-cssThe availability of a textarea type control for the WordPress Customizer allows now for a new Divi customization feature that is quite simple and straightforward but nevertheless very useful. I´ve called it Live Custom CSS.

It works just like the Custom CSS box you´re already familiar with in the DiviTheme Options epanel, except for a couple of things:

  • The CSS you paste here will only apply to your active child theme, while the epanel Custom CSS affects the Divi parent theme and therefore your whole site, no matter what Divi child theme you are using.
  • Unless the Custom CSS on the epanel, you´ll be able to see your changes work in real time, thanks to the use of the Customizer.

I truly believe that this new feature will be very welcome, as it is quite useful for testing purposes.

I recommend including your custom CSS in your child theme stylesheet once you are sure about it, but the Live Custom CSS box will serve you as the perfect place where you can play and experiment with your CSS until you´re ready to cut the code from it and paste it on your style.css file.

More to come

I´m still working on some other new features which may or may not make it on time for the Divi Children 2.1 update. But anyway, in case they don´t, you can always rely on more Divi customization options being added in the following version.

And, who knows, I may give you a great nice surprise either in Divi Children 2.1 or Divi Children 2.2 later on!

A seamless update

Since I begun developing the Divi Children Engine, I always have in mind to provide ways to make that any possible new feature created by Divi Children could be available to anybody.

Of course, if you´re a new user and just created a new child theme by means of the last version of Divi Children, you´ll have every single Divi Children feature on your child theme.

But what about users who created their child themes with earlier versions of the plugin? Updating the plugin wouldn´t be of any help (except for new child themes), so they will need to update their existing child themes.

Remember that, once your child theme has been created, you don´t need the plugin for your child theme to work (in case you still don´t understand why, please read my post Divi Children plugin, Divi Children Engine and child themes: clarifying concepts).

That´s why I included the Install or Update Divi Children Engine feature since Divi Children 2.0.

Want more features?

If you would like any other new features to be included in Divi Children, please let me know. Some of you already did and that´s the best way for me to know you´ll find the new features useful when they are released.

Disclosure: Some of the links in this post are affiliate links. This means if you click on the link and purchase the item, the owner of this website will receive an affiliate commission.

Divi Children 2.1

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.
Liked this? Please share it!

41 Comments

  1. These forthcoming updates look great Luis!

    The feature that I would be most interested in seeing – ok let me rephrase that – dying to see – would be an option that enables Divi users to create custom CSS without code.

    For example: font sizes & weights of H1-6 tags and paragraph text, line spacing, etc. Just the basics – nothing fancy.

    If it could be made easy for us to apply different styling to the same elements in different sections, all the better. For example, all H1s by default would get a font size of 30px, except for the H1 on the home page which we could give a font size of 40px. Same idea with other page elements.

    I know there are a couple of plugins that aim to do this, but none of them are too user friendly for non-coders in my opinion. With your obvious attention to making your tools truly easy to understand and use, I think this feature would be a home run (well, at least for me it would be).

    It seems there are a lot of folks out there like me who basically get CSS concepts, but don’t know enough (or anything) about how to write the code to make it work and don’t have the time (or don’t care) to learn it if there’s a simpler options that will cover the basics.

    Maybe for DCE 3.0? Hint-hint. 🙂

    Thanks for all your continued work on this outstanding plugin.

    Reply
    • Thank you, Michael

      I´ll take your feedback into account.

      Reply
  2. Looking forward to your new releases.
    You seem to be doing an excellent work. Congratulations.
    Yours.

    Reply
  3. Can’t wait, this plugin has been so useful, and helping me tremendously. Thanks!

    Reply
  4. Since Divi is a great theme and Divi child give us very nice option to customize it beautifully.
    I need some changes Like. I can set Post title, Author name, Date , category above featured image.
    or I also Want that Featured Image shows in left or right with small thumbnail rather than that big picture.
    if you include these features in next update. I really thankful to you.

    Reply
    • Customizing posts is something I´m working on, and for sure you´ll have the option to place your post meta data above the featured image. What´s funny though is that just a couple of days ago I´m being thinking about whether any Divi users would be interested in a smaller featured image size (displaying it for example side by side with the post title and meta data).

      Reply
      • Really happy to know that you are planning to release a child theme as I described above. Thank you.

        Reply
        • Is not exactly a child theme, Deepak. Divi Children it´s a plugin to automatically create Divi child themes.

          Reply
  5. When do you expect to release Divi Children 2.1 ?

    Reply
    • I haven´t set a release date yet, it all depends on several factors such as: The amount of time I´ll have available for this project of course, whether I finally include in this update some other features I´m working on right now, and the amount of time I´ll have to spend on the most boring part of the update: making everything compatible with existing child themes whether they were created by my plugin or not. All in all, I´d say I might be able to release this version in about four weeks.

      Reply
  6. You are a God sent gift for people who love Divi. I salute you!

    Reply
  7. I’m excited to use Divi 2.1. Anyway, is the “Divi Theme Dectector” in your menu a typo? It should be “Divi Theme Detector”? 🙂

    Reply
    • Whoops! It sure was a typo. The permalink was ok but at some moment I rewrote the page title with the wrong spelling, before launching the site, I guess. So it´s been there for several months and I hadn´t noticed it.

      It´s been corrected alredy.

      Thanks a lot, Winston.

      Reply
  8. what’s the process for updating the base Divi theme in a child Divi4u ?

    Reply
    • Hi Michael,

      If you mean updating the parent Divi theme on a site where you´re using a child theme created by the Divi Children plugin, there is nothing special to be done. Just update Divi as you would do in any other case.

      I want to warn you though that I haven´t had the time to try the new Divi 2.2 update yet (its release today took me by surprise). If Elegant Themes only added the new modules they´ve presented on their release post and the additional fixes and improvements listed on it, there shouldn´t be any problem with your child theme, but I´d like to test it in case they changed anything else.

      Reply
  9. Luis, first of all, congratulations on creating such an intelligent solution for us Divi lovers. Although the theme amazing, there are many limitations, especially for some of us who don’t know the ins and out of DIVs, CSS classes, etc 😉

    My wishlist if viable and possible to build in to your solution (in order of importance)

    1. Allow the page builder to be turned on for posts and custom post types. Not sure why they turned off the page builder functionality on posts?

    2. Easily rename “Projects” Post type to preferred name without breaking any of the cool features it brings like filtering, etc.

    3. Ability to clone Projects Post Type and have the functions related to it available

    Thanks again, what you’ve created is shear magic and I’m sure it took a lot of time and effort on your part.

    Reply
    • Thank you, Al. I´ll take all your inputs into account.

      Reply
  10. After installing divi children, individual navigation menus disappeared that were on a one page website … deactivate didn’t repair…

    Reply
    • Every time you activate a new theme for the first time (and a child theme is no different) you´ll need to reassign your menus.

      Reply
      • thanks I’ll go back in and try again

        Reply
  11. One thing I find is missing for business sites is the ability to have the category roll have no side bar – without fussing with CSS mods.

    Reply
  12. Luis Alejandre great job on this stuff. I am new to website development and new to Divi. Very new and I dont know CSS or HTML so things like this help a lot. I currently am having some issues with installing the plug-in. I uploaded, installed and activated the 2.0.0 plug-in and I get this message

    “Wait! You need to install Divi before you can create a child theme for it!”

    Divi 2.2 is installed. That aside I have not gotten to dig in deep with your plug-in yet.

    I would like to see the ability to change the text colors in the modules to a greater degree instead of just “Light” and “Dark”

    Also the ability to change the Font and Font size of the “Title” sections within each module.

    Reply
    • Hi Zac,

      Have you changed the Divi default theme folder name? The plugin checks if Divi is already installed by making sure its sytlesheet exists in your site. It looks for /wp-content/themes/Divi/style.css. Can you verify whether that file exists?

      Reply
      • Luis,

        When I uploaded the Divi Theme I had it named Divi 2.2. I renamed it to Divi and that worked!

        Thanks!

        Reply
  13. Hi

    Will Divi 2.2 been supported in your new version? Any estimate on when the new version will be releashed?

    Best regards
    Erik

    Reply
    • Hi, Erik.

      Sure, Divi 2.2 will be supported. Divi Children 2.1 is almost ready, but I still need some more days before I can release it, as the whole Divi Children Engine is being revamped.

      Reply
  14. Hi Luis,

    I would like to have links in the Divi footer open in a new tab… I’ve found a possibility that modifies the footer.php in my child on the Divi support forum, but the code has already been adjusted by Divi Children 2.0, leaving me in the dark… Would this be a feature for 2.1, and/or, might you have some php to add/change, with specifics…?

    As so many are, I am appreciating what you are making possible, a lot…

    Kind regards,

    John.

    Reply
    • Hi John

      Yes, I´ve added some “open in a new tab” options for Divi Children 2.1, and the footer credits is one of them.

      If you´re using a child theme which was created or updated by Divi Children 2.0 (already including the Divi Children Engine), you can modify some lines of code in order to have that working before Divi Children 2.1 is available (I´m working hard on it but there are still some days to go). I´ll send you those changes via email.

      Reply
      • Thanks Luis, the code works perfectly…

        Looking forwards to 2.1…
        🙂

        Kind regards,
        John.

        Reply
  15. Such a good idea, Luis! Thanks for creating this!

    We have a site created with another page builder theme, OptimizePress. I’d love to convert it to Divi, but it makes my head hurt to think of the mess that would have to be cleaned up. Do you happen to know anyone who knows both themes well and would offer this as a service?

    Thanks!

    Reply
    • Thanks a lot, Sheila.

      Regarding your request, I´m sending you an email about it.

      Reply
    • First, I think Divi is a great theme builder, made even more special by Luis with his plugin. But while I’ve done a few sites with Divi for the speed and ease of it, I still stick to ET’s basic themes to avoid “Lock-In”. Once you go down the Divi road, there is no turning back – or rather what you see is nothing near what you will end up with if you change. So you are essentially locked into the theme. I’ve seen complaints about this on ThemeForest as developers have abandoned custom themes and left users high and dry wondering what to do next. It ain’t pretty, so be careful.

      Reply
  16. I just went through one hell of time trying to switch the top-header and the main header so the thicker main header was on top. Although I got it working with the css mods, I couldn’t get it to work properly. Looks fine unless you are logged into worpress. instead of pushing down the header area, it overlaps and leaves a horrible white gap.

    Perhaps maybe a quick theme setting to rotate the bars, correctly.

    Reply
  17. First of all… Divi Children saved me within two days. Thank you so much! Don’t wait. Download this now. I do have a question. I am brand new to this. How do I change the avatar size. It is covering the comment section. Any help is greatly appreciated.

    Reply
    • What do you mean the gravatars are covering the comment section? Can you provide a link to the site?

      Reply
  18. I was wondering if you could put in a way to delete classes if you no longer want to use them? You have this awesome ability to customize with class names in the pages but I found that I didn’t need some of them and I see no way to get rid of them from the customizer or my page source without going into the files and editing them.

    Reply
    • Hi Karina,

      That´s already been included for the next Divi Children 3.0 update. Custom Classes and Custom IDs will be way more friendly as they will be not just easily created, but also easily renamed (by you as you like) or removed. It´s been quite a challenge to develop those features and make them compatible with existing child themes, but they are finally working and will be part of the exciting news for the next release.

      Reply
  19. Hello! I am having a hard time achieving a full width content page on my Divi Child Theme.

    I have a page with 2 columns. One full width image module and column below with 3 image modules in 1/3 + 1/3 + 1/3 layout.

    This is a screen of the page:

    http://s1315.photobucket.com/…/picture1_zps15ac15fd.jpg.html

    What I want to achieve is something like this layout, a display of content fullwidth:

    http://s1315.photobucket.com/…/picture2_zps8b9d1f22.jpg.html

    The top column with only one image module scales up to cover the page´s fullwidth and the column below with 3 image modules also scales up to larger size.

    Could anyone please explain how may I achieve this layout?
    I have tryed to create a Full Width Page template to achieve this but so far I have failed. Please find attached screens of the layouts.

    Thank you!

    Reply
    • Hi Dario,

      Your screenshots are not available on those links, so I can´t figure out what you´re trying to achieve.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

×

Get the new Divi 3.0... With a special membership discount for our readers! Get a DISCOUNT on Elegant Themes membership