Update: As of Divi 2.4, the Divi Theme now supports the Page Builder on posts. Simply start a post and click "Use Divi Builder" to enable the builder – there is no need to follow the steps in this post.
One of the most impressive features of the Divi Theme is the powerful "Page Builder" feature. It lets you quickly and easily set up complex page layouts without the need to do any coding or HTML. Unfortunately, by default this feature is only available for pages, not posts or custom posts. Here is how to enable the Divi Page Builder for use on posts and custom posts.
Enabling "Page Builder for Posts"
The easiest way to enable "Page Builder for Posts" is to use my Divi Booster plugin, which lets you do so just by checking a box, like so:
Starting a Page Builder Post
Now, if you start a new post as usual ("Posts > Add New"), you'll see the Page Builder button has been added to the edit post screen, along with a Page Layout menu
Before you click the "Use Page Builder" button, decide whether you'd like your post to have a left sidebar, right sidebar, or be full width. Then select it from the Page Layout menu:
Now depending on your choice, one of three default Page Builder Layouts will be loaded, which aim to mimic as closely as possible the look of a standard blog page. These layouts are as follows.
Right Sidebar Layout
By default the (non-PageBuilder) posts use a right sidebar. The Page Builder layout for this looks like:
Don't be put off by the (possibly) unfamiliar red / orange color. That just happens because it is using one of the Page Builder "speciality sections" to make sure the sidebar is positioned correctly. It basically behaves in the same way as the standard page builder layouts you are probably more familiar with.
You'll also note that there are some modules already in the layout. I'll explain those in the next section.
Left Sidebar Layout
Very similar to the right layout is a left sidebar layout, which looks like so:
Full Width Layout
Finally, there is the full width layout, which may look more familiar to you. It is used to create posts without a sidebar.
The Default Page Builder for Post Modules
Look again at the default layouts and you'll see that there are some default modules. These are designed to make your Page Builder post look like a regular post, and they are:
- Post Header – This is a text module which displays the featured image, post title, and meta-data (post date, author, etc). If you look in the module you'll see some shortcodes which generate each of these – you can move these, delete them, etc. to get the look you want.
- Post Content – This is an empty module in which you can add content to the post. If there was any content in the post editor before you switched on Page Builder, it will be included in here. If you need a more complex layout that plain text, you can of course replace this with other modules, etc.
- Post Footer – Finally, this module displays things that come at the end of the post, such as comments. Again, it uses shortcodes which you can move or delete as you please.
These modules can all be moved and deleted as necessary to achieve the effect you are after.
Finally, the first two layouts have a sidebar module which displays the default sidebar. If you want to use a custom sidebar, etc, you can simply replace the module (or edit its settings).
The default layouts created by Divi Booster are just a starting point. I suggest starting with one and then changing it until you have it looking the way you like it. Then save your layout so that you can quickly load it for use in future posts.
Known Issues
The Page Builder is complex and not intended for use on posts. As such there are quite a few things that need to be addressed to ensure that it works smoothly in all cases. I'm aware of some issues and am working on solving them. I believe that for most people the Divi Booster Page Builder for Posts feature should work correctly. If you encounter any issues using the Page Builder for posts, please let me know in the comments and I'll try to address them as soon as possible.
Technical Details: PageBuilder on Posts
My Divi Booster plugin always contains the most recent version of the code and can be easily activated by checking a box. But for the technically inclined among you, here is the do-it-yourself code version, which I try to keep reasonably up-to-date though it may not have all the latest bug-fixes etc. I must warn you that adding PHP to a site if you don't know what you're doing can break things – so make sure you back things up before adding this. The code is also quite a complex beast so I won't try to explain it here. It comes in two parts: PHP code which can be added to a functions.php file, and some CSS.
PHP
1 function myprefix__et_pb_before_main_editor( $post ) { 2 if (in_array( $post->post_type, array('page', 'project'))) return; 3 if (!post_type_supports($post->post_type, 'editor')) { return; } 4 5 $is_builder_used = 'on' === get_post_meta( $post->ID, '_et_pb_use_builder', true ) ? true : false; 6 7 printf( '<a href="#" id="et_pb_toggle_builder" data-builder="%2$s" data-editor="%3$s" class="button button-primary button-large%5$s">%1$s</a><div id="et_pb_main_editor_wrap"%4$s>', 8 ( $is_builder_used ? __( 'Use Default Editor', 'Divi' ) : __( 'Use Page Builder', 'Divi' ) ), 9 __( 'Use Page Builder', 'Divi' ), 10 __( 'Use Default Editor', 'Divi' ), 11 ( $is_builder_used ? ' class="et_pb_hidden"' : '' ), 12 ( $is_builder_used ? ' et_pb_builder_is_used' : '' ) 13 ); 14 } 15 add_action( 'edit_form_after_title', 'myprefix__et_pb_before_main_editor' ); 16 17 function myprefix__et_pb_after_main_editor( $post ) { 18 if (in_array( $post->post_type, array('page', 'project'))) return; 19 if (!post_type_supports($post->post_type, 'editor')) { return; } 20 ?> 21 <p class="et_pb_page_settings" style="display: none;"> 22 <input type="hidden" id="et_pb_use_builder" name="et_pb_use_builder" value="<?php echo esc_attr( get_post_meta( $post->ID, '_et_pb_use_builder', true ) ); ?>" /> 23 <textarea id="et_pb_old_content" name="et_pb_old_content"><?php echo esc_attr( get_post_meta( $post->ID, '_et_pb_old_content', true ) ); ?></textarea> 24 </p> 25 </div> 26 <?php 27 } 28 add_action( 'edit_form_after_editor', 'myprefix__et_pb_after_main_editor' ); 29 30 31 function myprefix__et_pb_builder_post_types($post_types) { 32 foreach(get_post_types() as $pt) { 33 if (!in_array($pt, $post_types) and post_type_supports($pt, 'editor')) { 34 $post_types[] = $pt; 35 } 36 } 37 return $post_types; 38 } 39 add_filter('et_pb_builder_post_types', 'myprefix__et_pb_builder_post_types'); 40 41 // Fix Divi color picker dependency bug 42 function myprefix__enqueue_admin_post_settings() { 43 wp_enqueue_script('myprefix__divi_admin_post_settings', get_template_directory_uri() . '/js/admin_post_settings.js', array('wp-color-picker')); 44 } 45 add_action('admin_enqueue_scripts', 'myprefix__enqueue_admin_post_settings'); 46 47 // Override post truncation function used by excerpt. 48 // Need to remove blog module to avoid infinite loops. But can't just filter the_content as that removes the blog module from top level posts too. 49 if ( ! function_exists( 'truncate_post' ) ){ 50 function truncate_post( $amount, $echo = true, $post = '' ) { 51 global $shortname; 52 53 if ( '' == $post ) global $post; 54 55 $post_excerpt = ''; 56 $post_excerpt = apply_filters( 'the_excerpt', $post->post_excerpt ); 57 58 if ( 'on' == et_get_option( $shortname . '_use_excerpt' ) && '' != $post_excerpt ) { 59 if ( $echo ) echo $post_excerpt; 60 else return $post_excerpt; 61 } else { 62 // get the post content 63 $truncate = $post->post_content; 64 65 // remove caption shortcode from the post content 66 $truncate = preg_replace('@[caption[^]]*?].*?[/caption]@si', '', $truncate); 67 68 // DM - remove non-exerptable modules from excerpts 69 $truncate = preg_replace('@[et_pb_blog[^]]*?]@si', '', $truncate); // blog module 70 $truncate = preg_replace('@[et_pb_signup[^]]*?]@si', '', $truncate); // subscribe module 71 $truncate = preg_replace('@[et_pb_sidebar[^]]*?]@si', '', $truncate); // sidebar module 72 73 // remove post header and footer content from excerpts 74 $truncate = preg_replace('@[(db_post_meta|db_feature_image|db_post_title|db_post_ad|db_comments_form)]@si', '', $truncate); // sidebar module 75 76 // apply content filters 77 $truncate = apply_filters( 'the_content', $truncate ); 78 79 // decide if we need to append dots at the end of the string 80 if ( strlen( $truncate ) <= $amount ) { 81 $echo_out = ''; 82 } else { 83 $echo_out = '...'; 84 // $amount = $amount - 3; 85 } 86 87 // trim text to a certain number of characters, also remove spaces from the end of a string ( space counts as a character ) 88 if ( ! $echo ) { 89 $truncate = rtrim( et_wp_trim_words( $truncate, $amount, '' ) ); 90 } else { 91 $truncate = rtrim( wp_trim_words( $truncate, $amount, '' ) ); 92 } 93 94 // remove the last word to make sure we display all words correctly 95 if ( '' != $echo_out ) { 96 $new_words_array = (array) explode( ' ', $truncate ); 97 array_pop( $new_words_array ); 98 99 $truncate = implode( ' ', $new_words_array ); 100 101 // append dots to the end of the string 102 $truncate .= $echo_out; 103 } 104 105 if ( $echo ) echo $truncate; 106 else return $truncate; 107 }; 108 } 109 } 110 111 112 113 // Keep Page Layout setting available at all times 114 function myprefix__make_page_layout_full_width_by_default() { 115 116 // Set the default pagebuilder layout 117 echo <<<END 118 <script> 119 jQuery(function($){ 120 121 $('.post-new-php.post-type-post #et_pb_toggle_builder').click(function(){ 122 123 var textarea_id = 'content'; 124 125 if ($(this).text() == 'Use Page Builder') { 126 127 old_content = wp_editor_get_content('content'); 128 129 layout = $('#et_pb_page_layout').val(); 130 131 var post_header = '[et_pb_text admin_label="Post Header" background_layout="light" text_orientation="left"]<h1>[db_post_title]</h1>[db_post_meta][db_feature_image][/et_pb_text]'; 132 var post_content = '[et_pb_text admin_label="Post Content" background_layout="light" text_orientation="left"]'+old_content+'[/et_pb_text]'; 133 var post_footer = '[et_pb_text admin_label="Post Footer" background_layout="light" text_orientation="left"][db_post_ad][db_comments_form][/et_pb_text]'; 134 135 if (layout == "et_left_sidebar") { wp_editor_set_content('content', '[et_pb_section fullwidth="off" specialty="on"][et_pb_column type="1_4"][et_pb_sidebar admin_label="Sidebar" orientation="left" area="sidebar-1" background_layout="light" module_id="sidebar"/][/et_pb_column][et_pb_column type="3_4" specialty_columns="3"][et_pb_row_inner][et_pb_column_inner type="4_4"]' + post_header + post_content + post_footer + '[/et_pb_column_inner][/et_pb_row_inner][/et_pb_column][/et_pb_section]'); } 136 137 if (layout == "et_right_sidebar") { wp_editor_set_content('content', '[et_pb_section fullwidth="off" specialty="on"][et_pb_column type="3_4" specialty_columns="3"][et_pb_row_inner][et_pb_column_inner type="4_4"]' + post_header + post_content + post_footer + '[/et_pb_column_inner][/et_pb_row_inner][/et_pb_column][et_pb_column type="1_4"][et_pb_sidebar admin_label="Sidebar" orientation="right" area="sidebar-1" background_layout="light" module_id="sidebar" /][/et_pb_column][/et_pb_section]'); } 138 139 if (layout == "et_full_width_page") { wp_editor_set_content('content', '[et_pb_section fullwidth="off" specialty="off"][et_pb_row][et_pb_column type="4_4"]' + post_header + post_content + post_footer + '[/et_pb_column][/et_pb_row][/et_pb_section]'); } 140 141 $('#et_pb_page_layout').val('et_full_width_page'); 142 143 setTimeout("jQuery('#et_pb_old_content').val(old_content);", 1000); 144 145 } 146 147 }); 148 149 function wp_editor_set_content( textarea_id, content ) { 150 if ( typeof window.tinyMCE !== 'undefined' && window.tinyMCE.get( textarea_id ) && ! window.tinyMCE.get( textarea_id ).isHidden() ) 151 window.tinyMCE.get( textarea_id ).setContent( content, { format : 'html' } ); 152 else 153 $( '#' + textarea_id ).val( content ); 154 } 155 156 function wp_editor_get_content( textarea_id ) { 157 var content = typeof window.tinyMCE !== 'undefined' && window.tinyMCE.get( textarea_id ) && ! window.tinyMCE.get( textarea_id ).isHidden() 158 ? window.tinyMCE.get( textarea_id ).getContent() 159 : $( '#' + textarea_id ).val(); 160 161 return content.trim(); 162 } 163 }); 164 </script> 165 END; 166 } 167 add_action('admin_head', 'myprefix__make_page_layout_full_width_by_default', 1); 168 169 /* Make comments available as a shortcode */ 170 171 function myprefix__comments_form() { 172 ob_start(); 173 if ((comments_open()||get_comments_number()) && 'on' == et_get_option('divi_show_postcomments', 'on')) { 174 comments_template('', true); 175 } 176 return ob_get_clean(); 177 } 178 add_shortcode('db_comments_form', 'myprefix__comments_form'); 179 180 function myprefix__post_title() { 181 return get_the_title(); 182 } 183 add_shortcode('db_post_title', 'myprefix__post_title'); 184 185 function myprefix__post_meta() { 186 ob_start(); 187 if (!post_password_required()) { 188 et_divi_post_meta(); 189 } 190 return ob_get_clean(); 191 } 192 add_shortcode('db_post_meta', 'myprefix__post_meta'); 193 194 function myprefix__post_ad() { 195 ob_start(); 196 if ( et_get_option('divi_468_enable') == 'on' ){ 197 echo '<div class="et-single-post-ad">'; 198 if ( et_get_option('divi_468_adsense') <> '' ) echo( et_get_option('divi_468_adsense') ); 199 else { ?> 200 <a href="<?php echo esc_url(et_get_option('divi_468_url')); ?>"><img src="<?php echo esc_attr(et_get_option('divi_468_image')); ?>" alt="468" class="foursixeight" /></a> 201 <?php } 202 echo '</div> <!-- .et-single-post-ad -->'; 203 } 204 return ob_get_clean(); 205 } 206 add_shortcode('db_post_ad', 'myprefix__post_ad'); 207 208 function myprefix__featured_image() { 209 ob_start(); 210 if (!post_password_required()) { 211 $thumb = ''; 212 $width = (int) apply_filters( 'et_pb_index_blog_image_width', 1080 ); 213 214 $height = (int) apply_filters( 'et_pb_index_blog_image_height', 675 ); 215 $classtext = 'et_featured_image'; 216 $titletext = get_the_title(); 217 $thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' ); 218 $thumb = $thumbnail["thumb"]; 219 220 $post_format = get_post_format(); 221 222 if ( 'video' === $post_format && false !== ( $first_video = et_get_first_video() ) ) { 223 printf( 224 '<div class="et_main_video_container"> 225 %1$s 226 </div>', 227 $first_video 228 ); 229 } else if ( ! in_array( $post_format, array( 'gallery', 'link', 'quote' ) ) && 'on' === et_get_option( 'divi_thumbnails', 'on' ) && '' !== $thumb ) { 230 print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height ); 231 } else if ( 'gallery' === $post_format ) { 232 et_gallery_images(); 233 } 234 } 235 return ob_get_clean(); 236 } 237 add_shortcode('db_feature_image', 'myprefix__featured_image'); 238 239 function myprefix__pagebuilder_for_posts_class($classes) { 240 if (is_single() && et_pb_is_pagebuilder_used(get_the_ID())) { 241 $classes[] = 'db_pagebuilder_for_posts'; 242 } 243 return $classes; 244 } 245 add_filter('body_class', 'myprefix__pagebuilder_for_posts_class');
CSS
1 /* Remove padding between post title and page builder content */ 2 .single .et_pb_section:nth-of-type(1), 3 .single .et_pb_section:nth-of-type(1) .et_pb_row:nth-of-type(1), 4 .single .entry-content { padding-top:0; } 5 6 /* Remove content area top margin which appears when filtering blog modules from excerpts */ 7 #content-area { margin-top:0 !important; } 8 9 /* Fix the unclickable links issue on sidebar with old version of pagebuilder for posts */ 10 .db_pagebuilder_for_posts.et_right_sidebar #sidebar *, 11 .db_pagebuilder_for_posts.et_left_sidebar #sidebar * { 12 position: relative; 13 } 14 15 /* Fix empty specialty section layout issue */ 16 .db_pagebuilder_for_posts.et_full_width_page .et_pb_column { min-height:1px; } 17 18 /* Hide regular post content */ 19 .db_pagebuilder_for_posts.et_full_width_page article > :not(.entry-content) { display: none; } 20 .db_pagebuilder_for_posts.et_full_width_page article.comment-body > * { display: block !important; } 21 22 /* Adjust the padding to match the standard blog post format */ 23 .db_pagebuilder_for_posts.et_full_width_page .entry-content { padding-top: 0px !important; } 24 .db_pagebuilder_for_posts.et_full_width_page .et_pb_widget_area_right { margin-bottom: 30px !important; margin-left:29px !important; } 25 .db_pagebuilder_for_posts.et_full_width_page .et_pb_widget_area_left .et_pb_widget { margin-bottom: 30px !important; margin-left: 0px !important; margin-right: 30px !important; }
Alternatives
Laterna Studios have a plugin to make the page builder available on post types of your choosing. The plugin offers manual selection of the post types on which to use the page builder, which is a different approach to the above code which automatically adds the page builder for all post types which could support it. I haven't really looked into it much so can't advise on how well it works.
I can't seem to find the page builder in divi booster, are there versions without or is it called something else? Where do I find it??….
Many thanks, Heléne
Hi Heléne, the Divi Theme now allows the page builder on posts by default, so I've moved the setting into the "Deprecated" section at the bottom of the Divi Booster settings page. You'll find it at "Deprecated (now available in Divi) > Divi 2.4 > Enable Pagebuilder for posts". You should only need to use it if you are running Divi 2.3 and earlier.
You're a lifesaver! No idea why they don't activate it by default (considering you have the option not to use it if you don't want to).
Hi Dan;
I have this feature activated on http://insideandoutgardens.ca/
I just noticed today that when I start a new post there using the Page Builder, instead of the normal blue and green default sections, I get orange and red ones and these are filled with three text modules and a sidebar module.
See screen shot: http://insideandoutgardens.ca/wp-content/uploads/Default-Divi-Post-Page-Builder.jpg
The text module has admin labels: Post Header, Post Content, Post Footer. The sidebar is labelled Sidebar.
The post header has:
[db_post_title]
[db_post_meta][db_feature_image]
The post Content is empty
The post footer has:
[db_post_ad][db_comments_form]
Is this something you have done on purpose or is it coming from Divi directly?
If I click use Default Editor and then click Use Page Builder, the normal Page builder opens with the normal default sections in Blue and Green.
What am I missing here?
thanks
John
Hey John, I need to update the post with the details, but it's an upgrade I've made to Divi Booster page builder for posts feature.
Previously when you created a post the pagebuilder content would overlap the sidebar, and you had to mess around leaving a blank column to avoid an overlap (and even then there was an invisible overlap which affected the clickability of sidebar links etc).
To fix this, I've created a default pagebuilder layout which includes the sidebar (so now there is no overlap as the sidebar is part of the pagebuilder layout). To correctly position the sidebar this needs to be a "speciality" section – hence the orange color.
To make everything even more flexible, I moved everything that normally appears on a blog post page (post title, featured image, comments, etc) into text modules (with a shortcode for each). If you're just writing a standard post, you can just edit the (currently empty) "post content" text module. But if you want to do fancier stuff (add a slider, or insert a signup form above the post title, say) you can easily do it all within the pagebuilder. It's a bit confusing at the start, I know , but I think once you are used to it, it should be a very flexible, powerful way to create blog posts.
Before you activate page builder on a post you'll see "Page Layout" option in the top right corner of the post editor with options for a right sidebar, left sidebar or full-width page. I've actually created a default layout for each of these which will appear when you activate the pagebuilder. At the moment there is a slight bug that when you deactivate the pagebuilder it resets this option to full-width rather than whatever you had before – you can just change it to get back to the right sidebar layout for now – which I'll fix as soon as I can.
I hope all this makes sense! I'll update the post soon with a proper tutorial.
In the meantime, let me know if you have any questions about it.
Cheers!
Hi Dan;
Sorry, I just realized I hadn't responded to your reply. Yes, that makes perfect sense.
Thanks
John
Hey Dan, I've gone through a couple iterations of info from this post. First I added the code snippet above to my child theme's functions.php and everything seemed to work. I had changed all of my existing posts to using the page builder, but then suddenly those posts stopped working, and anytime I tried to view any of them, I would get a 503 Service Unavailable error.
Took me a while to figure out that was the problem, and it was resolved once I removed that code from functions.php AND deleted any of the shortcodes from the actual posts.
Now I've paid for and installed the Divi Booster Plugin, and when I turn the option on to use page builder on posts, there are a few issues on the post page: http://i.imgur.com/n4GIKlS.jpg If I click the Use Page Builder button, nothing happens. Meanwhile, all text in the regular editor has turned white and I don't see the normal WYSIWYG editor controls.
Any ideas?
Divi Booster v1.1.2
Divi Theme v2.3.1 (with a custom child theme)
Hey Paul, as per our emails the issue was that blog modules were recusively generating excerpts of other posts containing blog modules. I've updated the plugin to fix this by filtering the blog modules out of the excerpts.
Hi guys
The Page Builder on posts was always going to be a popular feature and I know that Dan is working hard to make it pain free for us with his plugin.
In the meantime you may find my post helpful:Hope the link is OK Dan.
http://divitheme.co.uk/divi-booster-plugin-add-page-builder-to-posts/
Hey Keith, I was just thinking that this post needed a link to yours. It's a great write up with some useful info on the use of pagebuilder on posts :)
Thanks Dan but I always feel reluctant to add links in comments.
I can't think of anyone in the Divi community who isn't using your plugin.
Keep up the good work.