Blog

How to Create Full Width Custom Post Types Using the Divi Builder

Divi Custom Post Types

This tutorial shows you how to create a basic custom post type that is fully compatible with the Divi Builder by Elegant Themes. If you’re familiar Divi already and custom post types, you probably have experienced the issue where the Divi content editor doesn’t span full width across custom post type pages. This makes it challenging to create custom post type pages that are consistent with the rest of your site since all of Divi’s themes stay contained within the content section of the post.

Keep in mind that this tutorial does not cover the ins and outs of setting up your custom post types. Instead, we’re only covering how to get the Divi Builder by Elegant Themes to fully integrate with all custom post types seamlessly.

What is a Custom Post Type in WordPress?

A custom post type is nothing more than a type of post available in WordPress that you can delineate and organize into it’s own section on the backend of your site. There are many different cases where post types would greatly help keep your website content organized both on the front and back ends. For example, a franchise website might create a custom post type for all of their locations so they can easily add additional locations on the backend without them getting mixed up in the “pages” post type. Additionally, an online magazine might separate various content sections such as “Lifestyle,” “Reviews,” “News,” etc., and then feed those post types to separate website pages, keeping things organized both on the front and backend of the website.

How to Create a Custom Post Type in WordPress

When it comes to creating custom post types beyond the ones that already come with WordPress (pages, posts, projects, etc.), there are many different free plugins available. Personally, I’ve enjoyed and had a lot of luck using Custom Post Types UI. It’s got many features to choose from when creating your post types, it’s simple to set up, and it’s completely free to use for most needs. To download this, navigate to your Plugins section from your WordPress dashboard.

Choose Add New at the top of your screen.

Search for “Custom Post Types UI” and then select Install Now and Activate.

Once installed, you can access the plugin from the navigation menu in your WordPress dashboard. From there, you can set up your post type.

How to Use the Divi Builder on Custom Post Types

Before you can use the Divi Builder on your newly created custom post type,  you’ll need to enable it as an option in Divi.

Go to Divi > Theme Options > Builder

From here, you’ll have the option to toggle your new custom post type to “Enabled.”

Be sure to save your changes.

Make the Divi Editor Work Full Width on Custom Post Types in WordPress

If you don’t complete this next step, you’ll notice that even though the Divi editor is now an option on your new custom post types, it keeps all your content locked within the post content block. This is obviously not ideal if you plan to make your custom post types consistent with the rest of your website’s page design. In order to force the Divi editor to span full width on all your custom post types, all you need to do is enter a custom CSS code snippet.

To get started, navigate to your WordPress dashboard. From there go to Divi > Theme Options > General.

From here, scroll all the way down to the bottom of the page until you see a gray box called Custom CSS. You may already have some custom CSS here, and that’s okay.

If you already have some code here, you can simply create a space and then paste in the following CSS code snippet into this box.

.container {
width: 100%;
max-width: 100%;
}
#left-area .post-meta {
display: none;
}
.entry-title {
display:none;
}
#main-content .container {
padding-top: 0;
}
.container.et_menu_container {
max-width: 1080px;
}

Be sure to hit save after you’ve placed your code snipped in this box. Next, you can return to your custom post type and begin using the Divi editor full width on all post types! Problem solved! One caveat to this resolution is that it will force all post types to go full width. So if you are using the classic editor on some posts such as traditional blogs, you’ll need to create a blog template using Divi, or you can select an already-made post template from Divi’s extensive library of options.

I hope you’ve found this tutorial helpful. Good luck!

Previous Article

How to Overcome Writer’s Block [5 Tips]

Next Article

You Inc: How to Make Money Writing {3 Key Tips}

You might be interested in …