Divi builder blocks within blocks

One shortcoming of Divi is that “out of the box” you can’t place a builder item inside another builder item. For instance you might want an accordion inside a toggle item, a map inside an accordion or a contact form inside a tab.

There’s no good reason not to do these things, but they just can’t be in Divi without some extra work.

One relatively simple way to achieve these effects is to use the free “Text Blocks” plugin.  Once you have installed the Text blocks plugin do the following

Add Divi Builder to the Text Blocks plugin

In functions.php

// Add Divi Builder to the Text Blocks plugin
function my_et_builder_post_types( $post_types ) {
  $post_types[] = 'text-blocks';
  $post_types[] = 'course';
  return $post_types;
}
add_filter( 'et_builder_post_types', 'my_et_builder_post_types' );

In your child theme styles.css, add correct width styling for Divi builder “blocks-within-blocks”

/* Add widerow class to any divi row you want to be 100% width */
.et_pb_row.widerow {
width: 100%;
}

Once you have done this you can create your “inner” content within a text block. Then call the text block from inside the Divi Builder item.

Here’s an example of this in action.