How to Enable Divi Builder on Posts and Custom Post Types

The Divi Theme by ElegantThemes is probably one of the best themes that has a built-in page builder, it allow you to easily create fantastic content layouts as long as you have good content or copy.

The Divi Page Builder dose exactly what it meant to do, build content of your WordPress pages. Well… It sounds good, but some users will get stuck once they discover it’s not working on posts, it actually can’t be used on posts or other Custom Post Types except “projects” custom post type, which is built-in custom post type in the Divi theme.

Not being able to make Divi Builder work on posts, this can be an issue for some of us, especially that it’s unknown why ElegantThemes developers haven’t considered allowing the Builder to work on posts.

Enable Divi Page Builder on Posts

I found a couple of articles trying to solve this matter:

Also, I found a discussion at RiseForums about extending the use of Page Builder to Posts and Custom Post Types. Someone mentioned that there were an issue in the layout of posts, this because the Page template has a different layout than Posts, so when using the Builder on Posts it will not look as expected.

Is there a better way to enable Divi Page Builder on Posts and Custom Post Types?

I think so, there is a better way to do it, which is via a Child Theme for Divi, so we can override the Post template when the Page Builder is used on Posts, or other custom post types.

Divi Booster Plugin

Update: I just found out about Divi Booster!

Divi Booster plugin enables Divi Builder on posts and other custom post types, plus adding some fixes and cool other features. It’s a paid solution though, but really worth it! I’ve purchased the plugin and tested it out on my dev site, it works just fine and I am sure you will like it. So, go grab it via my aff link.

Get Divi Booster Plugin

Divi Child Theme with Options and Features

To solve this issue, we will need to create a template for posts similar to the template that is used for pages. The best way to do this is via creating a Child Theme and drop in it the template file.

Divi Chid Theme Options

I was able to combine the required functions and wrap it in a form of a Divi Child Theme with a simple settings page.

divi-child-theme-settings

As you can see above, you can enable the Page Builder on any custom post type on your WordPress website.

Footer Attribute Editor

The Child Theme also has some new cool feature in the WordPress theme Customizer. The footer attributes can be edited within the Customizer, you can add HTML tags, for example to add footer links.

divi-footer-attribute-editor

Download Divi Child Theme

This Divi Child Theme is free, and it’s available for download from here:

Download Divi Child Theme

This could be used as a starter child theme for your next project. However, you might be interested in doing it in a totally different way; in a form of a plugin, in this case I would highly recommend the Divi Booster plugin, simply because it works!

Get Divi Booster Plugin

Enjoy!

19 thoughts on “How to Enable Divi Builder on Posts and Custom Post Types

  1. This is exactly what I have been looking for. One problem though, I have the child site installed, I enabled use page builder for posts, and when I click on “Use Page Builder”, nothing happens. The page builder never loads. And I checked, it does still work on Pages and Projects.

    Any help would be greatly appreciated.

  2. Hi Hesham,

    Thanks for the child theme – adding much needed functionality to Divi!

    However when I start Page Builder in a post it “blows” out the comment section to full width of the viewport. It doesn’t seem to matter what elements I use in the page builder the comments section is always full width of the screen.

    Reverting to the default editor returns everything to normal. Any idea on what’s causing this? BTW I am only using a fresh install of Divi and your Child theme. No other customizations.

    Really appreciate your help.

  3. Hello,

    I have a problem when I use PageBuilder with a post.
    The comment area are out of the pagebuilder content frame. It’s fullwidth.
    The same issue with the button of social media network.

    How can I fix it ?

    Pending your help.
    Thanks
    Ludovic

    • Look, the problem here with the comments and the button of the social medi network (Monarch Elegantthemes plugin) :

      Pending you help.
      Regards
      Ludovic

    • Hi Ludovic,

      I will be looking at the issue ad trying to solve it, thanks for the details (I’ve removed the link from your comment for privacy).

      I will get back with a solution soon.

      • Hi,

        Thanks to take in account this issue.
        And thanks for the private link.

        Pending your solution to follow my work.
        Regards
        Ludovic

        • No problem! I’ve checked the theme again and figured out that Divi do not allow comments on pages by default, so practically the builder takes over the whole content area, including sidebar and the comment section!

          Same thing will happen with Posts (as we are using a similar template to the page template), this means the comment section will keep showing below the post in full width, unless there is a way to have a block module called “Comments” or so to display the comments area inside the Divi Builder itself.

          I am afraid this is not possible as the Builder is hard coded and has to filters or hooks that I know of to add such module or actually any custom module!

          I hope this will change in the future, though it’s not something I can handle.

      • Ludovic, I’ve done some more testing, but it will take a big amount of work to solve this issue, so if you are looking for a quick and easy way to use the Divi Builder on posts and other custom post types, I would recommend having a look at the Divi Booster plugin (aff link).

        I’ve purchased the plugin and test it out, it works great and exactly as you want! So, I went ahead and updated my post to mention the plugin.

        • Hi Hesham,
          I added a bit of custom CSS to fix it. Although this is not a permanent fix at least it solves it for now.
          #comment-wrap {
          max-width: 1080px;
          margin: 0 auto;
          padding: 30px 0 0 0;
          }

          And then the appropriate max-width at every screen break. Eg:
          @media only screen and (max-width: 980px)
          #comment-wrap {
          max-width: 690px;
          }
          Cheers
          Blair

  4. Hi Hesham,

    In divi booster though the builder has been enable for custom post types, when I click the üse builder button on the post within a custom post type – nothing happens. Any idea why?
    Thanks for your help.

Leave a Comment