Customize Divi like a pro, Divi Children 2.0 is here!

Customize Divi like a pro, Divi Children 2.0 is here!

I´m very happy to finally announce the release of the new version 2.0 of the Divi Children plugin, which will let you customize Divi to an extent you haven´t seen before.

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).

divi-children-customizing-footer-credits

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:

customize-divi-update-divi-children-engine

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:

customize-divi-update-divi-children-engine-check

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-update-divi-child-footer

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:

Main Footer

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:

customize-divi-main-footer

Footer Bottom

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:

customize-divi-footer-bottom

Footer Credits

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.

Main Sidebar

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:

customize-divi-main-sidebar-1

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:

customize-divi-main-sidebar-2

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:

customize-divi-post-meta-data-1

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:

customize-divi-post-meta-data-2

The new Divi Children Custom Selectors

customize-divi-custom-codeSo 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.

customize-divi-create-custom-selectorsTo 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:

customize-divi-paste-custom-selectors

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:

customize-divi-custom-full-width-headers

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:

customize-divi-custom-call-to-actions

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.

customize-divi-custom-rows-sections

Please be aware that this custom sections are optimized for two columns as they are right now.

Custom Sidebars

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:

customize-divi-custom-sidebars

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:

customize-divi-magic-codes

Choose what you want to see in the WordPress Customizer

customize-divi-hide-sectionsAs 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)

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.0

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!

144 Comments

  1. Luis – this is wonderful! Holy cow, you added a ton of features, some of the things I’d been trying to do with Custom CSS, and a whole bunch I’d never thought of, but are *great*!!! And I’m glad my idea was included 🙂

    Thank you so much for all of this!

    PS – It really *is* playing! I have to finish grading these darn papers, but then I can! Yay, Yay! 😀 😀 😀

    Reply
  2. Luis,
    This is incredibly and utterly amazing. OMG!!! A plugin with this many features should be at least $99. I know I purchased one just last week for another WP framework. . Please tell me that you ARE going to charge for this. I will feel guilty using this without you getting some form of payment. The code free customization that you have added to Divi is beyond description Unbelievable what you have done here. Thank you. – Charles

    Reply
    • Thank you, Charles.

      I´ll tell you: I´m NOT going to charge for it, but don´t feel guilty at all. Just share it so other people can know about it and please provide some feedback once you had the chance to try the plugin.

      Also, I would love to have some information about the preferences among Divi users for future features.

      Reply
      • Would love to be able to put an image inside the very top Divi header bar with the sticky Nav and change both the original size and the sticky “shrunk” size… Either that or be able to place a Nav bar inside the full width header (with left, right or center placement control).

        Reply
  3. PPS – And I love your names for things. 😀

    Reply
  4. I agree 100% that you could charge for this! I can’t afford $99, but I’d sure donate if you set up a donate button… 😀

    Reply
    • Don´t you worry, Nicole

      What you said about my way of naming things is enough payment for me. 😉

      Reply
      • That, and of course also a little help to spread the word.

        Reply
  5. Bravo Luis, bravo.

    Well commented, well written, well done. It makes me happy as a subscriber to receive benefit of a subscription like this one.

    I imagine it took you quite a while write this post/email as well as putting together the framework and code for the updated plugin.

    I’m attending a WordPress Meetup tomorrow night, that has as it’s topic for the evening: “Child Themes in WordPress”

    Divi, as well as your plugin will be something I’ll bring up for sure.

    Thanks again.

    Cheers from Southwest Ohio,

    Michael

    Reply
    • Thank you for your nice comments, Michael

      Yes, it took me quite a while to prepare the release post. But I wanted to give an in-depth overview of all the new features, and also to allow you to see at a glance how each of them works.

      That would be great, if you could mention this plugin at that meetup tomorrow. I´m a convinced advocate of child themes myself, as you can imagine.

      Cheers from Spain!

      Reply
      • Let us know as well if the Nick tries to hire you.

        🙂

        Reply
        • Ha ha. No.

          But I´ll tell you what I´ll try: I´m going to ask Nick to have a post about this site published in their Customer Spotlight series on the Elegant Themes Blog.

          Reply
          • that is the minimun… 🙂

  6. Finally after 2 x 24 H monitoring your site and waiting for Divi children v.2 release, you did it !!! Every DIVI user out there should thanks/grateful for your kindness and this awesome tools.Thanks again

    Reply
  7. Amazing work and really makes changing the theme much easier.
    There is one option i am hoping to see in the future and that is when using the CTA, have an option open the URL in a new window.

    Reply
    • That´s a good one, Ian!

      I haven´t needed to use Call To Actions with outbound links so far, so I hadn´t noticed about that.

      I take note, one more for the wishlist. 🙂

      Reply
    • Ok Ian, your wish has been fulfilled!

      Or, rather, it will be fulfilled: The next plugin update will include a new Magic Code to take care of that option. I´ve already tested it and it seems to work alright.

      Please keep sending good suggestions.

      Reply
      • That i excellent news Luis. I have 2 websites which are seriously in need of that option so i am looking forward to the update. Keep up your excellent work.

        Reply
        • Well if you are in such a hurry, Ian, you better look in your email inbox.

          You´ve got a nice surprise in exchange for your great suggestion! 😉

          Reply
          • I feel like a child on Christmas morning 🙂

            The added function works beautifully and will sure make my life easier when I am using the CTA modules.

      • I second that! I don’t really know what CTA is but I also wanted to suggest being able to open links in footer with a “target_blank” option.
        Great job anyhow, many thanks for your work!

        Reply
        • Thank you Jerome. I take note of it.

          CTA stands for “Call-To-Actions”.

          Reply
  8. thank you, my plugin version says Version 2.0.0, but my child theme says version 1.0…what did i do wrong? i deleted old plugin, then downloaded and activated the new one. i am using divi 2.1.2 thank yo for any help.
    http://www.mcniffdesigns.net

    Reply
    • There is nothing wrong, Susan

      The plugin version has nothing to do with your child theme version. You don´t even need the plugin for your child theme to work. Actually, after your child theme has been created or updated by Divi Children, you could deactivate or even delete the plugin. All the customizing features will be in your child theme, thanks to the Divi Children Engine.

      When you create a new child theme using Divi Children you have to fill a form (or validate the default values). The default value for your child theme version is 1.0.0. Once you hit the “Create Divi Child Theme” button, that will be the version number of your child theme if you didn´t change that value.

      If you then make manual changes to your child theme and want to change the version number, you´ll need to edit your style.css file.

      Reply
    • thanks for your reply, i’m all set, this is fabulous, can’t wait to see what is next

      Reply
  9. Wow and wow and wow… Been wrestling with finding the ways and means to uniquely style Divi in child themes for a while now, very much not wanting the two sites we are presently redesigning with Divi to look like all the other Divi sites, even as much as we truly value Divi and all it enables…

    Sooo much appreciated… We have a whole huge lot of css in both child themes as it is, both created with Divi Children 1.x, and I’ll be very curious how all that is handled with Divi Children 2.0… I’ll let you know if any glitches, or not…

    And after reading this (slowly, word for word) really looking forward to seeing what you will unveil next… and I also like your names for the features…

    Kind regards from New Mexico 🙂

    Reply
    • Hi John,

      Don´t worry about updating your child themes by means of Divi Children 2.0, even if you have a lot of CSS already modified in them.

      As I explained on this post, all the new features are handled by the new Divi Chlidren Engine that will be installed in your child theme when you use the “Install or Update Divi Children Engine” feature of the plugin. Your stylesheet will also be updated, but all the CSS rules you have there will be preserved. The plugin will just add some lines that are needed for some of the new features to work alright (for the current version, the only CSS rules added are related to the icons used by the post meta data), plus a single line used for future versions of the plugin to know about the update status of your child theme.

      Plus, a backup copy of your original stylesheet will be saved by the plugin in your child theme folder anyway. Just in case.

      Let me know if you have any trouble with it.

      Best regards.

      P.S.: The duplicated predefined layouts issue you discovered in Divi has not been addressed by ET yet in any of the Divi updates after 2.0, so in Divi Children 2.0 I had to change the patch (which code was based on ET fixing that issue for Divi versions greater than 2.0).

      Reply
  10. Man… what is it???

    I can’t believe! This piece of gold is free?

    Luis you is just awesome! That’s a whole new life for Divi’s sites!

    Thank you so much.

    Reply
  11. My compliments Luis,

    So far I came just watching the news about this pluguin. When I met this proposal pluguin, found it interesting, but I did not feel encouraged to use it.

    But now my dear friend, I can not give more back to what this plguin offering me this! I’m leaving brings the computer screen to write this review acknowledging the good job he did of his time creating this rich work.

    In a few days here will leave another feedback about my experience with Divi Children 2.0

    Reply
    • Muito obrigado, Rangel 😉

      Looking forward to your feedback.

      Reply
  12. I’m sorry. I would like to leave an “elegant” comment, but the only thing that comes to mind is WOW!

    Reply
    • Who says WOW is not elegant? 😉

      Thank you Bob!

      Reply
  13. Hey Luis,
    First of all, great work on this plugin.
    Second I still haven’t tried your new children plugin but I am excited about your magic codes functionality.
    How about this for a feature request: be able to insert latest post meta data (title, description etc.) via magic codes into a slider?
    You think this would be possible?

    Reply
    • Thank you Igor

      I haven´t looked much into the slider module yet, but let´s see if I´m getting your request right: Do you mean populating a slider with your latest posts?

      Reply
      • Just for starters what I’m thinking is to populate a single slide slider with the latest post meta data (featured image, title and excerpt) using perhaps your magic codes.

        Reply
  14. Oooh! I second that–populate a slider with posts by category! 😀 😀 😀 Maybe we could check off what meta we’d like to show. And Luis: I have zero idea how difficult any of this is; feel free to say heck no.
    Thanks!

    Reply
    • It doesn´t seem too easy, because slides in Divi slider modules are populated in a static fashion. But we´ll see, I´ll give it a try.

      I´m right now enjoying a vacation at a southern Spanish beach until the end of August 🙂 , but I´ll look into that as soon as I come back to full work.

      Reply
      • Jealous! 😀 I bet I’m not the only one who would love to see pictures when you get back. Have a great time,
        Nicole

        Reply
  15. Returning here to leave my satisfactory testimony about this plugin created by Luis. Great plugin! Already in the plugins repository Wordpess?

    Reply
    • Thanks a lot for caring to stop by and leave your positive feedback.

      The plugin is not in the WordPress Plugins Repository, it needs to be downloaded from this site.

      Reply
  16. Hard to add anything to the praise already tossed at you!…BUT I WILL!

    Im sure I dont appreciate half of what this plugin means, (being a weekend web hacker), I was searching for a way to make my contact form leap off the page a little and messing with css scares the hell out of me… but if i saw a nice themed box on the RHS, I just might gain the courage to tinker.

    Reply
    • Thanks Michael

      I´m not sure I´m getting what you´re looking for, though. Do you mean you would like a contact form on your sidebar, at the right hand side of your main page?.

      Reply
      • Perhaps I need to read the article before commenting, I noticed custom css classes added from your plugin for “custom full width headers/call to actions, So i presumed there might be one specific to to a contact form and that I made “tweaks” to the css within this box somehow?
        But do i still need to get all dirty in css someplace?
        Is there a how to?

        Reply
        • Hi Michael,

          The Divi Children Engine does not include any custom selector for the Contact Form module (yet).

          What do you need for customizing your contact form? Maybe your needs could lead to a good idea for a new Divi Children feature. 🙂

          Reply
          • layout and ability to add probably a border and back shading/opacity to make it more obvious on background … Id like to add extra fields but thats beyond scope of this (im presuming)

  17. Hello !!! I’m Fred, from Brazil… Thanks for this plugin !!! Amazng !!! I Can’t find the option ” navigation “, under the schemes option, that comes with primary menu, secondary menu and footer menu … Can you show me where are these options now or wh ats the new names for these options? Thanks again !!!!!!!!!

    Reply
    • Hi Fred,

      Thanks for your kind words about Divi Children.

      I don´t know what may have happened in your case, but Divi Children doesn´t change anything about the default preexisting settings in the Customizer. The Navigation section should still be there, under Background Image (which goes under Schemes). Are you still missing that settings section?

      Reply
  18. Hello.
    Thank you for your plugin.
    I have downloaded the plugin to a Mac Book Pro. The file goes to the downloads folder automatically, and unzips itself into several folders and files. Therefore, I cannot (or do not know how) upload the plugin to the plugins page on my dashboard.
    I have copied via FTP the files and folders unzipped to a folder adjacent to the Divi one under the WP/content folder on my server, and then created the style.css file.
    I can see then the child theme on the Appearance/Themes option, but nothing of the Children Engine or custom facilities you speak about anywhere else, and certainly not in the WordPress customiser.
    What have I done wrong?
    How can I mend it?
    Thank you.

    Reply
    • What you did wrong is this: you´re mistaking the Divi Children plugin for a premade child theme of Divi. I don´t know why this is happening to so many people (for example in your case, your first sentence is “Thank you for your plugin“, but then you´re trying to use it as a child theme). I even had to write a post to try to clarify things: Divi Children plugin, Divi Children Engine and child themes: clarifying concepts.

      You need to install Divi Children as a plugin, and then use it to automatically create your child theme. You won´t have to create your style.css, everything will be taken care of by the plugin.

      Instead of putting the unzipped files and folders adjacent to the Divi folder (which is in wp-content/themes/), you need to put them in a new folder adjacent to other plugins. So, if you are not installing the plugin via the WP plugin installer by uploading the zipped plugin file, you should create a new divi-children folder within your plugins folder (wp-content/plugins/divi-children/) and then place the contents of your unzipped files in that new folder. Make sure that immediately under that folder you have the following:

      divi-children.php file
      includes folder
      js folder
      css folder
      images folder

      After that Divi Children will appear as one of your plugins. Activate it and go to Appearance > Divi Children to create your child theme. But first make sure you remove the “child theme” you created before.

      Reply
      • Absolutely right. I’m sorry you had to go through yet another explanation of this plugin/child theme issue.
        It works perfectly, now. I mean, I see the features in the menus. I shall try them tonight.
        Also, as I build muy site, I shall feed you with other needs users may also have, if it helps you to prepare future releases.
        Thank you.

        Reply
        • Great, I´ll be waiting for your suggestions.

          Reply
  19. Thanks heaps for what looks like an awesome plugin!
    I have set up my child theme, but Change Screenshot is not working for me. Any ideas?
    Many thanks 🙂

    Reply
    • Hi Mark,

      Can you provide some more details about your problem?

      Reply
  20. Hi Luis
    Sure…

    I just go to
    > Divi Children
    > Change Screenshot
    > Upload or Choose Image
    > then select my uploaded image from the media library (I have tried both jpeg and png at 600x450px)
    > Use This Screenshot
    > Select Child Theme (there is only the one I have created using Divi Children)
    > Change Screenshot

    Then when I go to Appearance > Themes, it still shows the Divi Child Theme screenshot.

    I am running WordPress 4.0, Divi 2.1.4, and Divi Children 2.0.0

    Many thanks
    Mark

    Reply
    • Hi again Mark,

      That´s actually quite strange. I tried to reproduce your problem since I hadn´t tested the Change Screenshot feature with WordPress 4.0 and Divi Children 2.0.0 yet, but it worked alright in my case. Could it be that you don´t have enough file permissions in your server?

      Do yo get the “The screenshot was successfully changed!” screen at the end of the process, after clicking on the Change Screenshot button?

      Reply
  21. Thanks for your reply Luis
    At the end of the process, after clicking the Change Screenshot button, it just switches to the Create New Divi Child Theme tab. There is no “…successfully changed” screen.
    I don’t understand the file permissions thing sorry.

    Reply
    • Hi again Mark,

      I have to investigate that. Please read my reply to David´s comment below.

      Reply
  22. Luis, this is insanely good. I have been playing with it and love it, Thank you so much for your work. I actually had the same screenshot issue as Mark above, but on creating another child it worked fine.

    I guess my worry for the future of any additions to DiVi is getting more bloat as the requests for more stuff grows.

    I got a neat little bit of code from ET support to stop Opens Sans loading when other fonts were selected and it was not being used which I added to functions. I wish I could do something about the 284Kb style.css.

    Reply
    • Thanks for your nice words about the plugin. I´m very happy you love it.

      Don´t worry about the “bloat”, your child theme will add new code only where you need it. About the Divi stylesheet being that large there isn´t much you can do, other than remove things you´re not using (but then you´d have a problem when updating Divi).

      I have to investigate that Change Screenshot issue. I thought it was something that for some reason happened only to Mark, but I´m worried now if more people are experiencing it. It´s weird though because it is working alright in my sites, and in case anything went wrong you should get an error message instead of directly coming back to the Create New Divi Child Theme tab. The plugin has predefined error messages like “You have not selected any image for your new screenshot!“, “The file URL you provided for your new screenshot is not valid” or “The file you chose for your new screenshot is not an image file” and in case none of this situations happened, the plugin should take you to a success screen displaying the “The screenshot was successfully changed” message as well as the image of the new screenshot.

      Reply
      • Luis, if I remember correctly I got a success message but it still had your screenshot, but I have a few internet problems so thought nothing of it until I followed Mark’s comment. I expect it’s nothing. I’ve done load of messing with it an everything a worked like a dream. Very clever stuff. Plus I like your writing style. You have a fan!

        Reply
  23. Hi Luis,

    Another big thank you from myself to all the hard work you’ve put into Divi Children – and all the ambitions you still have for it in the future.

    I have been sitting on the fence for a few weeks about setting up a Child Theme for the three DIVI sites I have created so far.

    I knew I needed one, mainly I have to admit to save reamending the Footer Credits each time there was a theme update! But there’s so much more here now with the Customisation Engine – the extra possibilities and options are brilliant.

    Can I ask if there are any benefits of transferring my existing Custom CSS from the Theme Options of the Parent Site to my Child Theme style file, or does it not matter where it is added?

    Also, have you any plans to add a Social Media Icons php file to the Child Theme as added icons in the footer is another area affected by updates.

    Thanks again Luis,

    Alan

    Reply
    • You´re welcome Alan, thank you for your feedback.

      Personally, I don´t like to use the Custom CSS filed on the parent theme Theme Options, but that´s maybe because I´m always using child themes. Since every child theme has its own stylesheet, I always add any new CSS there. To me it makes much more sense for a number of reasons. For example, as more custom CSS is added to the style.css file, I usually rearrange it for the sake of clarity. Another example is that you may want to reuse some CSS for another child theme on a different site, and then you can just copy the stylesheet you made for a previous child theme of the same parent and then modify whatever you need.

      With the current version of Divi Children you don´t need to worry about updates regarding anything in the footer, a new footer.php file can be created to update it to the newest version of Divi. Or maybe you´re talking about something I´m not getting right? What do you mean by adding a Social Media Icons php file?

      Reply
  24. Hi Luis,

    Thanks for your swift response, that makes sense about the style CSS so I’ll move my amendments across.

    No problem with the footer.php at all – I was just saying that was a big reason for me creating Child Theme in the first place (and consequently then using your plugin to do so).

    I should have said – social_icons.php – it’s where you have to add code if you want to add additional Social Media icons to the bottom footer. This is the code I had to add in to create a Pinterest icon on one of my sites (there’s also a line of CSS needed as well)

    <a href="http://pinterest.com/*********/" rel="nofollow">
    <span></span>
    </a>

    This disappears too with theme updates.

    Many thanks once again and have a great weekend…

    Reply
    • Hi again, Alan.

      I´m glad to tell you that a new Social Icons section will be added to the Customizer by the Divi Children Engine. You will be able to update the Divi Children Engine of your existing Divi child themes with the next Divi Children plugin 2.1 update.

      The new Customizer Social Icons section will have general options (like opening the links in a new browser tab or adding the “nofollow” attribute to the social links), as well as individual settings for each social icon, with new social icons available like Pinterest, Linkedin, etc.

      Enabling the use of the settings contained in this section will override the Divi epanel options for social icons, although default values will be taken from it to avoid your copying and pasting or typing urls again.

      And the good news for you is that everything will be within your child theme, so you won´t need to worry about Divi updates anymore!

      Reply
      • WOW! That’s amazing, thank you so much Luis – over and above what I was expecting you might be able to do with ‘just’ adding a php file to the main Child Theme 🙂

        Reply
        • Actually the real job will be done by a new function inside the Divi Children Engine. The new child social_icons.php is a very simple file: it will just check the Customizer settings to see if the user wants that function to be used instead of the original Divi social_icons.php (which remains untouched).

          That way it will be easier to update the whole Divi Children Engine for future releases, without having to update also the new child social_icons.php file as new features or new social medial are added.

          For your info: I finished developing this new Divi Children Engine feature last night and it works alright, so it will be included for sure in the next plugin update.

          Reply
  25. I am having an issue with Divi Child loaded where the social media icons don’t display properly. Here is more info about what it looks like. This is VERY sporadic. http://screencast.com/t/H6vT0Ihs

    Reply
    • Hi Denny,

      Does this still happen if you momentarily change your theme to Divi (parent)?

      Reply
  26. Hi Luis,
    Your plugin is ‘ongelofelijk’ as we say it in Dutch. I was struggling with some of the Divi limitations like the full width header font size. I thank you very much for adding all this ‘geweldige’ (dutch again) functionality.

    Reply
    • ‘Dank je!’ (very much)

      I´m glad you liked it. More Divi customizing features coming soon 🙂

      By the way, if you´d like to request any particular feature, I´m open to suggestions.

      Reply
      • Do you know where I modify the padding within columns when they are inside a section?, I know that Divi4u does that but only within sections.
        Also awesome work, I has helped me a lot!

        Reply
        • Hi, Marco.

          Change the amount of pixels value in margin-right for .et_pb_column

          But then you´ll probably have to adjust the width of the columns, which depends on the number of columns you´re using in the section. For example, for 3 columns the class would be et_pb_column_1_3

          Reply
  27. Luis,

    I have a question regarding the Audio Module. Do you know if there is a way to expand the size of the cover art when using the audio module? I have been playing with the Divi theme and the Divi Children 2.0 plugin but haven’t found a way to do this. I would like to add an image of about 300px w X 800px h if possible. Is there possibly a way to do this in a text module instead??? What’s important is the audio player has to be embedded in the graphic (essentially one image with the audio player attached) I can’t just place the audio player below the image. The Audio Module would be ideal for this if I could adjust the size of the cover art.

    Any ideas or thoughts would be appreciated.

    Thank you!
    deano

    Reply
    • Hi deano,

      I haven´t looked into the Audio Module myself, but it looks like all you have to do is to modify the height and width of the et_pb_audio_cover_art class. You may need to play a bit with the class positioning as well.

      Reply
      • Luis,

        Thank you so much, I will try that.

        I have another question for you. I want to put an image in the full width header module. I can size the image to whatever it needs to be, that is not an issue. The problem I have is that when I put the image in the full-width header module it is not responsive. On mobile, it only shows a portion of the image.

        I have been on the Elegant Themes forum and tried some things but they did not work. Is there a way to do this using the custom header on the Children Plugin? Any suggestions?

        Thanks,
        deano

        Reply
        • Try this:

          .et_pb_fullwidth_section {
          -webkit-background-size: 100% auto;
          -moz-background-size: 100% auto;
          -o-background-size: 100% auto;
          background-size: 100% auto;
          }

          Reply
  28. THANK YOU so much for creating this plugin! I just found it via the FB group for Divi users.

    Reply
  29. I need some help.

    I have tried your plugin with the latest divi 2 theme. But when I access customizer, the whole layout will get into a mess (basically the css seems to fail to work). I also noticed updating css into the epanel will work all the time. But when I update a css into the generated style.css, it will takes maybe 20 minutes to update.

    Any help? I have tested on chrome, safari and firefox. Cleared cache, reset browsers, etc. I am using Apple Mac Mavericks.

    Reply
  30. Damm great Job .. I am using this DIVI child theme but after using My site get too slow and showing 403 error and sometimes says Document not on server after refreshing may time it back. But when I use main Divi theme. Problem resolve.
    How to resolve this problem while using Child theme.

    Reply
    • Hi Deepak,

      I´m sorry to know about your problems. I´ve never seen this 403 error, I really can´t think of any reason why you would get a denied access to a page because of the child theme.

      Reply
  31. I totally love what you are offering. It helps big time.
    the thing I run into though (I am a novice to css…..) is that you can only use ONE cssid per section. And because I want to use a single page website, I need cssid’s in sections for my menu… Doing that means I cannot use your beautiful modification tools everywhere I want to..
    Is there a way to do both, work around this?
    Again i dont really understand cssid’s and cssclasses and stuff, so this might be a silly question… but I’m asking it anyways.. 🙂
    thanks,
    Bram

    Reply
    • Hi DutchBram,

      You can use a particular ID for your single page navigation and also style that ID as you like. Also, the custom CSS selectors used by my plugin are classes, not IDs (except for the Custom Sidebars Magic Codes, which are IDs).

      But I´m not too sure I understand what your problem is, maybe I didn´t get it right. Could you provide an example of what you´re trying to do when you say you can not use the modification tools everywhere you want to?

      Reply
  32. Nice 🙂 But it would be even more nice to see support for Yoast’s SEO breadcrumbs!

    Reply
  33. Hi Luis,

    Firstly thank you for providing such an invaluable addition to Divi.

    One feature that would be great in future updates would be to customise the call to action buttons to choose which corners you want curved and to what percentage etc. Maybe the same could be applied to different areas, like text boxes etc?

    Keep up the good work..

    Imran

    Reply
    • Hi, Imran

      Funny you just asked about that feature! I´m getting Divi Children 2.1 almost ready for release, and a couple of days ago I´ve been thinking about buttons. I was working on more customization options for the Custom Call To Actions, but then I thought I might be a good idea to make those options available to all the Divi modules that use buttons like that.

      Divi buttons are still one of the most recognizable things in many customized Divi sites, so maybe it´s about time to provide an easy way to tweak them and make them look different.

      Thanks for your words and inputs.

      Reply
      • Hi Luis,

        Thanks for the prompt reply. I can’t wait for the new release. It seems you’re one step ahead already for the vision you have with your plugin.

        I’ll put my thinking cap on and try and think of something you might not have considered yet.

        Many thanks again!

        Imran

        Reply
        • Hi again, Imran.

          Please do. I love thinking caps! User´s ideas and needs are the best sources for new customizing options.

          Reply
  34. Here´s a sneak peek of the way the new Divi Buttons section will look like (you´ll be able to choose the Divi modules and parts of your site you want your custom buttons to be applied to):
    divi-buttons-customization

    Reply
    • Now that sir looks amazing.. can’t wait for the update!

      Reply
  35. Great Luis,

    You’ve outdone yourself once again with this fantastic plugin! I feel inspired to create more projects based on Divi, because of this your precious work. I admire the way develops and publishes your project! Amazing what has already achieved with this plugin here.

    Reply
  36. Thanks, I have started to use this and it’s great. Having now read your post, I feel confident in trying some things. Thanks again, will be promoting you whenever I can.

    Reply
  37. Thanks for plugin…I have downloaded and installed it but it seems that I am in version 1.00.
    that is what is shown in the child theme page.
    where can I get the version 2.0.0?
    Thank you

    Reply
    • If you´ve downloaded the plugin from this site you´ve got version 2.0.0.

      Maybe your child theme shows version 1.0.0, but that´s something you chose when filling up the child theme creation form. Version 1.0.0 is provided as the default value for your child theme´s version, but you can change it to whatever you want.

      Reply
    • Oh I see,I got it.
      Thanks,I do not know much about css but one thing that I’d like to know is how I can change the body font size?is that possible to do do with divi children plugin?
      if not,then how this would be done ?
      Many thanks!

      Reply
      • Hi again, Makros.

        That setting is not included in Divi Children (yet). If you want to change the font size in general, just add this to your child theme´s style.css:

        body {
        font-size: 16px !important;
        }

        You can of course change the 16 value I´ve used in this example to any number of pixels as you wish.

        Reply
      • Thanks a lot …I am looking forward to see your new updates for the plugin!

        Reply
  38. Hi Luis,

    Thanks for all your work. I just used Divi for the first time, and of course made a child theme using your plugin. Works great!

    Just a quick question, since the Divi theme is quite different from the other ET themes, I can’t figure out how/where to modify certain template files. For example, the Description in the Fullwidth slider uses tags, but I want to use tags.

    But I can’t even figure out where the code is. Normally I’d go to the page.php if it’s on the home page, for example, but that doesn’t seem to apply to Divi. Can you point me in the right direction or know of any reference that I can use to figure it out?

    I’m not a coder, but I can usually sort of figure out enough to do what I need to do 🙂

    Thanks

    Reply
    • Hi Tony,

      I´m afraid I´m not getting what you´re trying to do. What do you exactly mean when you say “the Description in the Fullwidth slider uses tags, but I want to use tags”? And by “Description”, do you mean the slide heading?

      Please tell me what do you exactly want to modify in your fullwidth slider, and I´ll try to help.

      Reply
      • Hi Luis,

        Sorry, I didn’t see your response till now. I meant to say H1 and H2 tags.

        Yes, I was referring to the slide heading, which uses h2 tags. I want to us the h1 tag instead. By the same token, I think it was the blurb module (not sure) which used h1 tags, and I would have to change those to h2 or h3.

        I found where to modify it, looks like it’s in the functions.php file, but there’s no way to override that in the child theme, so I’m stuck changing the main theme file. Not only is this bad practice, but there’s no easy way to modify this only for the main page, it will effect all full page sliders. If there’s a better way to do it, please let me know.

        In other ET themes I use, it’s easy because I can just add that specific page template to my child theme and modify to my liking, but looks like a lot of these things in Divi are done in functions from what I can tell.

        I’m not really a programmer so I imagine they did it this way to handle the page builder, but it makes things very difficult if not impossible, to modify. I’m thinking specifically of the H1 tags for SEO purposes, but there may be other things, too. This is big downside to the awesome ease and flexibility of Divi.
        Any thoughts or help would be greatly appreciated.

        Thanks

        Reply
        • Hi, Tony.

          You don´t need to modify your parent theme, you can have a modify version of any Divi module in your child theme. Divi modules work as shortcodes, so you can remove then from your child theme, adding your own version of them.

          For example, if you want to change the headings of the slider module, copy the et_pb_slide from the parent Divi functions.php in your child functions.php, changing its name (for example to my_custom_pb_slide). Modify the module function as you like and add also to your functions.php an action to remove the original shortcode and to add your own via a new function (name it for example my_custom_divi_modules_setup).

          So you´d need to add to your child theme´s functions.php something like this:

          You can do the same thing with other Divi modules, like the blurbs as you mentioned. For each Divi module you want to modify, just follow these steps:

          1. Copy the original module function in your child theme´s functions.php.
          2. Change the name of that function.
          3. Modify your new function as you like.
          4. Remove the original Divi shortcode and add yours in your my_custom_divi_modules_setup function, as shown above for the slide function.

          You can include conditional statements for your modifications, for example to make then work only for the homepage.

          I hope this helped.

          Reply
          • Awesome Luis, thanks so much for your help, that works perfectly, and hopefully I’ll be able to use it for other similar changes in the future.

  39. Hi Luis,
    Would that possible for you to do an update next for the plugin to make get ride of white space around image when inputting image using image module .
    Currently when using it ,it does not fit the whole image nicely under top header menu with a lot white space…I am not sure if there would be any way to get rid of it with any css code.
    Thanks gain.

    Reply
  40. Hi there, just found your site in my search for how to modify the layout for my shop, currently woocommerce allows you to do up to 4 columns to display products full width. I want to display 3 products on half the page and a picture slider on the other half. Is divi children the tool to achieve this?

    Im new to all this so any direction on where to start looking would be great thanks.

    Reply
    • Divi Children features are not infinite, so it can´t help you customize everything in your site. Only the features I talk about on this post are available.

      Reply
  41. WOW, This is a very great plugin.

    I am so impressed reading its features, I just installed it on two of my website today on going to the admin>appearance>children theme> I am not able to view any of the features. It is showing be blank even when I tried to click on the tabs…Divi new child theme etc are not coming up,

    Please let me know if I am doing something wrong. or is it my version of WP?

    Thanks look forward to your response and Thanks for the good work…it is simply awesome.

    Reply
    • Hi, Swift.

      I guess when you say yo go to “admin>appearance>children theme” you mean “Appearance>Divi Children“. There are some plugins which cause conflicts with Divi Children, and I´m still trying to find why because I haven´t been able to reproduce that issue in my dev sites.

      So please deactivate your plugins one by one until you find which one is causing the compatibility issue (and please let me know about it). Then you can create your child theme with Divi Children and, once you have your child theme, you can deactivate and even delete the Divi Children plugin and activate back the one you had to deactivate for Divi Children to work alright.

      You won´t need the Divi Children plugin once you have your child theme, and your child theme will have all the customizing features I talk about on this post.

      Reply
      • WOW, Thanks

        I deactivated practically all plugins, I guess the issue was ‘Ultimate Social Media Icons and Share Plugin (Facebook, Twitter, Google Plus, Instagram, Pinterest etc.)’

        Thanks for been so awesome

        Reply
  42. Hi Luis,

    Been playing with this awesome plugin and its been interesting so far,

    I will like to know if it is possible to have my custom_fullwidth_header_1 and custom_rows_section_1 as a default header for my child theme such that it displays on all my pages/post created without using page builder.

    Such that if I set a blog in my menu to call some post it will automatically call all the post displaying my header, call to action and as many section I hope to include.

    This will also be default for any page I create.

    Reply
    • Hi, Oriyomi.

      Yes, that could be done, but it´s not that straightforward.

      First of all, you would need to create custom templates for those non-PageBuilder pages where you want your custom modules to be displayed as default.

      Then you would need to add your custom modules to the template (as shortcodes), right after get_header();

      Your Divi module shortcodes should be wrapped in sections by including the appropriate html code before and after the modules.

      For example, to have a custom fullwidth header module included in every page using your custom template, you could proceed like this:

      1. Copy the page-template-blank.php file from the parent Divi folder and paste it in your child theme folder, changing its name to something like page-template-custom.php
      2. Change the name of the new template on the top of the file. You can name it for example “Custom FW Header Page”. That´s the name you´ll see when you´re editing your page under Page Atributes > Template.
      3. Add your fullwidth section and your fullwidth header module below get_header();

      The top part of your new template file would then look something like this:

      I hope this helped.

      Reply
        • Hi again, Oriyomi.

          There´s nothing wrong with the code, except that you pasted it on the very top of the file so you also deleted the php opening tag (< ?php).

          Like I said, you just have to Change the name of the template, and then add the code for your new fullwidth section and fullwidth header module below get_header();

          Sorry if when I said "The top part of your new template file would then look something like this" I might have mislead you so you understood I was meaning the very top from the very first line. I´ve added the php opening tag to the code I gave you on my previous comment, just in case anybody else could be mislead in the same way.

          Please add that php opening tag to the very top of your template file and try it again. You´ll see it working now.

          Cheers!

          Reply
          • Something still missing, Please check the link again and advice,

            where do I place this ‘$is_page_builder_used = et_pb_is_pagebuilder_used( get_the_ID() ); ?>’

          • Sorry for the delay in responding to this, Oriyomi. But I still don´t get by you mean.

          • Thanks,

            I sorted that out but I am still not able to make my new template ‘page-template-custom.php’ the default template for all my pages.

            I am also not able to replace the text with the blog header dynamically. I mean such that on any page the default page will be my page with a default header up in the position I want it.

            Thanks

          • Hi Luis,

            Please view this page for detail of what I mean http://asokorofoursquare.org/my-page/

            I want my header to appear on-top as shown in that page

            2. I want this page to become the default template in page attribute such that any page or post will have this template attribute automatically except I change it.

            Thanks once again

          • Hi again, Oriyomi.

            What you want to achieve can be done, but not in a straight forward way. It needs quite a bit of customization. I may eventually publish a tutorial on the subject (making WordPress templates with Divi modules included), or I may even include some features related to this in future Divi Children releases. But is not something to be easily explained here.

            By the way, sorry about my delay in replying to your latest comments.

  43. Hi Luis,

    I just downloaded your plugin. I had read in the comments here about the magic code fix for the CTA button opening in a new window. I have the plugin installed, but I only see two magic codes available, newest_post_feed and no_newest_post_feed

    Am I missing something?

    Reply
    • You´re not missing anything, Jeanne.

      That Magic Code was developed months ago but hasn´t been released in any Divi Children update yet. It was ready for version 2.1 but I finally dropped that update in favor of the next major release: Divi Children, as I explained on this post.

      Anyway, I´m sending you a couple of files and some directions by email, so you can have that feature working on your site without having to wait for the next plugin update.

      Cheers!

      Reply
      • Hello Luis,

        I just downloaded your (amazing) plugin too, and i was looking for the “new window” option for the CTA. As i can read, you hasn´t been released yes this option. 🙁

        Can you send me too what you send to JW ?

        Reply
        • Sure, Chris. Check your e-mail inbox.

          Cheers!

          Reply
          • Hi Luis,

            Thanks you so much, work perfectly !!

          • Hey Luis, Could you send this plugin to me as well? Thanks so much!

  44. I have your child theme installed. I need to make changes to the social_icons.php file, specifically make the social media icons open in a new page. I have the code from Elegant Themes to do this change. However, the social_icons.php file is not available in the child theme. Please advise as to how to create this file.

    Thank you.

    Reply
    • Hi, and please excuse my delay in answering this.

      It´s easy: just copy the original social_icons.php file from the Divi theme (you´ll find it inside the “/includes/” folder of Divi). You don´t have to paste directly in your child theme´s folder, but you need to create a “/includes/” subfolder in it as well. After you do so open your new new file (“your-child-theme/includes/social_icons.php”) and edit it as you wish.

      By the way: opening the social media icons links in a new tab, along with other features, will be available on the next version of Divi Children. 😉

      Reply
  45. I did install the Divi children plug 2.0.5.1 in on a fresh installed WordPress 4.1.1 and DIVI theme and it messed up my menu structure. I deleted all pages save one, and added them again: nothing worked. I can’t get the sequence right in de menu editor.
    To my luck changing to the original DIVI without the child solved all problems.

    Reply
    • Hi Frans,

      Whenever you switch your theme your previous menu(s) are no longer active, you need to create menus for each theme.

      Reply
  46. Hi, this is a really useful plugin, thank you!!!!
    It works fine on my website, I have only one problem, I added other social icons (placing the code in footer.php) before creating the child theme and now they are to close to each other, almost overlapping. How can I fix that?
    Thank you so much!

    Reply
  47. Hi Luis,
    Thank you so much for this great Divi child theme! I used the original version on a different website and just recently used your new version for a website I’m working on now. In my previous site, I went into the footer CSS and edited it to read how I wanted and without really realizing this was different in the new version of the child theme (and can now be customized via the WP customizer), I went in and changed the footer CSS on my new site.

    Now I’d like to put it back to the original code so I can use the customizer to edit my footer info but I didn’t save the code that was originally there. Can you provide me just the original line of code from the child theme that I could put back in so it will go back to getting the info from the customizer?

    Thanks!

    Reply
    • Hi, Cheryl.

      This is the line you´re looking for:

      Reply
  48. Hey man, this is truly amazing! Big thank you for this plugin!

    Dude, do you know if there’s a way to use the Divi modules on the sidebar?

    I know one can use the Divi Booster plugin to use the Page Builder on Posts… and create a sidebar that way… but then if you change your sidebar, you need to update every single posts which then becomes inefficient.

    I really only need to use the suscription module there =/

    Any thoughts on this?

    Reply
    • Hi, Alex.

      I´m been working on an easy way to include Divi modules anywhere, but I don´t have it ready for release yet. Plus I won´t do it until I see what´s coming with Divi 2.4.

      But if you send me some details about what you want to achieve, I might be able to help you customize it manually. Send me an email through the contact page and I´ll see what I can do.

      Reply
  49. Hi Luis, do you know of a way to insert an image into the footer?

    Thanks for your hard work on the plugins!

    Marcel

    Reply
    • The easiest way would be by using a text widget with the appropriate html code in it, as I did with the Engined logo and link in the Engined demo site (I´ve used a double size widget column in that case).

      Reply
      • Awesome, thanks!!

        Marcel

        Reply
  50. Luis, great work! I just discovered your plugin.

    One issue I have with Divi is the blog index page, when setup using the blog module, doesn’t behave like other themes. A specific example, and one I’m struggling with currently, is that I want to add social share plugins beneath the “read more…” on each blog post on the blog module. I have a plugin that does this in other themes, just not in Divi.

    I have the php code to add it. I know it needs to go into the functions.php file, but that is where my know-how ends. Can you point me to a reference or suggest how to add it?

    Reply
    • Hi, John.

      I´m right now on vacation, but you can send me an email through the Contact page with the details about what you want to achieve and I´ll try to help you as soon as I have some time.

      Reply
      • Hey guys, thanks for the help! Before I posted here, I asked Divi support and they did finally respond. Here are their instructions in case anyone else needs it:

        Here’s how you can make customizations to the Blog Module’s output that will be retained upon updating the theme:

        First, create a new file in the top level of your child theme named my-main-modules.php that contains the following:

        shortcode_atts['module_id'];
        $module_class = $this->shortcode_atts['module_class'];
        $fullwidth = $this->shortcode_atts['fullwidth'];
        $posts_number = $this->shortcode_atts['posts_number'];
        $include_categories = $this->shortcode_atts['include_categories'];
        $meta_date = $this->shortcode_atts['meta_date'];
        $show_thumbnail = $this->shortcode_atts['show_thumbnail'];
        $show_content = $this->shortcode_atts['show_content'];
        $show_author = $this->shortcode_atts['show_author'];
        $show_date = $this->shortcode_atts['show_date'];
        $show_categories = $this->shortcode_atts['show_categories'];
        $show_pagination = $this->shortcode_atts['show_pagination'];
        $background_layout = $this->shortcode_atts['background_layout'];
        $show_more = $this->shortcode_atts['show_more'];
        $offset_number = $this->shortcode_atts['offset_number'];
        $masonry_tile_background_color = $this->shortcode_atts['masonry_tile_background_color'];
        $use_dropshadow = $this->shortcode_atts['use_dropshadow'];
        global $paged;
        $module_class = ET_Builder_Element::add_module_order_class( $module_class, $function_name );
        $container_is_closed = false;
        if ( '' !== $masonry_tile_background_color ) {
        ET_Builder_Element::set_style( $function_name, array(
        'selector' => '%%order_class%%.et_pb_blog_grid .et_pb_post',
        'declaration' => sprintf(
        'background-color: %1$s;',
        esc_html( $masonry_tile_background_color )
        ),
        ) );
        }
        if ( 'on' !== $fullwidth ){
        if ( 'on' === $use_dropshadow ) {
        $module_class .= ' et_pb_blog_grid_dropshadow';
        }
        wp_enqueue_script( 'salvattore' );
        $background_layout = 'light';
        }
        $args = array( 'posts_per_page' => (int) $posts_number );
        $et_paged = is_front_page() ? get_query_var( 'page' ) : get_query_var( 'paged' );
        if ( is_front_page() ) {
        $paged = $et_paged;
        }
        if ( '' !== $include_categories )
        $args['cat'] = $include_categories;
        if ( ! is_search() ) {
        $args['paged'] = $et_paged;
        }
        if ( '' !== $offset_number && ! empty( $offset_number ) ) {
        /**
        * Offset + pagination don't play well. Manual offset calculation required
        * @see: https://codex.wordpress.org/Making_Custom_Queries_using_Offset_and_Pagination
        */
        if ( $paged > 1 ) {
        $args['offset'] = ( ( $et_paged - 1 ) * intval( $posts_number ) ) + intval( $offset_number );
        } else {
        $args['offset'] = intval( $offset_number );
        }
        }
        if ( is_single() && ! isset( $args['post__not_in'] ) ) {
        $args['post__not_in'] = array( get_the_ID() );
        }
        ob_start();
        query_posts( $args );
        if ( have_posts() ) {
        while ( have_posts() ) {
        the_post();
        $post_format = et_pb_post_format();
        $thumb = '';
        $width = 'on' === $fullwidth ? 1080 : 400;
        $width = (int) apply_filters( 'et_pb_blog_image_width', $width );
        $height = 'on' === $fullwidth ? 675 : 250;
        $height = (int) apply_filters( 'et_pb_blog_image_height', $height );
        $classtext = 'on' === $fullwidth ? 'et_pb_post_main_image' : '';
        $titletext = get_the_title();
        $thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' );
        $thumb = $thumbnail["thumb"];
        $no_thumb_class = '' === $thumb || 'off' === $show_thumbnail ? ' et_pb_no_thumb' : '';
        if ( in_array( $post_format, array( 'video', 'gallery' ) ) ) {
        $no_thumb_class = '';
        } ?>

        <article id="post-" >

        <?php
        et_divi_post_format_content();
        if ( ! in_array( $post_format, array( 'link', 'audio', 'quote' ) ) ) {
        if ( 'video' === $post_format && false !== ( $first_video = et_get_first_video() ) ) :
        printf(
        '
        %1$s
        ',
        $first_video
        );
        elseif ( 'gallery' === $post_format ) :
        et_gallery_images();
        elseif ( '' !== $thumb && 'on' === $show_thumbnail ) :
        if ( 'on' !== $fullwidth ) echo ''; ?>
        <a href="">

        <?php
        if ( 'on' !== $fullwidth ) echo ' ';
        endif;
        } ?>

        <a href="">

        <?php
        if ( 'on' === $show_author || 'on' === $show_date || 'on' === $show_categories ) {
        printf( '%1$s %2$s %3$s %4$s %5$s',
        (
        'on' === $show_author
        ? sprintf( __( 'by %s', 'et_builder' ), et_pb_get_the_author_posts_link() )
        : ''
        ),
        (
        ( 'on' === $show_author && 'on' === $show_date )
        ? ' | '
        : ''
        ),
        (
        'on' === $show_date
        ? sprintf( __( '%s', 'et_builder' ), get_the_date( $meta_date ) )
        : ''
        ),
        (
        (( 'on' === $show_author || 'on' === $show_date ) && 'on' === $show_categories)
        ? ' | '
        : ''
        ),
        (
        'on' === $show_categories
        ? get_the_category_list(', ')
        : ''
        )
        );
        }
        $post_content = get_the_content();
        // do not display the content if it contains Blog or Portfolio modules to avoid infinite loops
        if ( ! has_shortcode( $post_content, 'et_pb_blog' ) && ! has_shortcode( $post_content, 'et_pb_portfolio' ) ) {
        if ( 'on' === $show_content ) {
        global $more;
        // page builder doesn't support more tag, so display the_content() in case of post made with page builder
        if ( et_pb_is_pagebuilder_used( get_the_ID() ) ) {
        $more = 1;
        the_content();
        } else {
        $more = null;
        the_content( __( 'read more...', 'et_builder' ) );
        }
        } else {
        if ( has_excerpt() ) {
        the_excerpt();
        } else {
        truncate_post( 270 );
        }
        $more = 'on' == $show_more ? sprintf( ' %2$s' , esc_url( get_permalink() ), __( 'read more', 'et_builder' ) ) : '';
        echo $more;
        }
        } else if ( has_excerpt() ) {
        the_excerpt();
        }
        ?>


        <?php
        } // endwhile
        if ( 'on' === $show_pagination && ! is_search() ) {
        echo ' ';
        $container_is_closed = true;
        if ( function_exists( 'wp_pagenavi' ) )
        wp_pagenavi();
        else
        get_template_part( 'includes/navigation', 'index' );
        }
        wp_reset_query();
        } else {
        get_template_part( 'includes/no-results', 'index' );
        }
        $posts = ob_get_contents();
        ob_end_clean();
        $class = " et_pb_module et_pb_bg_layout_{$background_layout}";
        $output = sprintf(
        '
        %2$s
        %4$s',
        ( 'on' === $fullwidth ? 'et_pb_posts' : 'et_pb_blog_grid clearfix' ),
        $posts,
        esc_attr( $class ),
        ( ! $container_is_closed ? ' ' : '' ),
        ( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ),
        ( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' ),
        ( 'on' !== $fullwidth ? ' data-columns' : '' )
        );
        if ( 'on' !== $fullwidth )
        $output = sprintf( '%1$s', $output );
        return $output;
        }
        }

        Next, make your desired changes to the module’s shortcode output in the code you just copied. Finally, add the following to your child theme’s functions.php:

        function my_et_theme_setup() {
        get_template_part( 'my-main-modules' );
        $et_pb_blog = new My_ET_Builder_Module_Blog();
        remove_shortcode('et_pb_blog');
        add_shortcode('et_pb_blog', array( $et_pb_blog, '_shortcode_callback' ) );
        }
        add_action( 'wp', 'my_et_theme_setup', 99 );

        Reply
    • Hi John,

      I am not coder, but I’ll offer that if you have created a child theme with DiviChildren, then under Appearance>Editor in the Dashboard, on the right, you will find the child’s functions.php file…

      But be sure of what you do in there, because the wrong code or wrong placement will give you a white screen for your whole site… If you try putting code in there be sure you have access to your cPanel so that if something goes wrong you can remove the offending code there…

      In the directory where your WordPress install is go to contents>themes and in there is a folder with the name of your child theme… In there is the functions.php file…

      Either download a copy via FTP before you add anything to it, or be able to directly access that file via being logged into the cPanel… That way you can either replace it with the original or edit it back to original, in case something goes wrong…

      I’ve done a lot of altering via the child functions.php, and occasionally something hasn’t worked… I have quickly been able to remedy the situation by being prepared…

      Here is a link that talks in a nice understandable way about child themes…
      http://www.wpsuperstars.net/wordpress-child-themes/

      Kind regards…

      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