NESTED DIVI BUILDER USING TEXT BLOCK

by | Jun 30, 2016 | technology | 0 comments

When using Divi Theme, have you ever wanted a nested module within another module? Well I have, several times actually, whether that’s a person module, a blurb, and recently the tabs module. Finally I was able to achieve it by using these steps.

What you’ll need:

  1. Reusable Text Block Plugin
  2. Chid Theme, I always use the child theme generator from divi space

Setup

After you have installed the plugin and child theme, it’s time to add the Divi Builder to the Reusable Text Block, this can be achieved by inserting this snippet I found on Elegant Theme to your child theme’s function.php :

function my_et_builder_post_types( $post_types ) {
    $post_types[] = 'text-blocks';
     
    return $post_types;
}
add_filter( 'et_builder_post_types', 'my_et_builder_post_types' );

Save your function.php and later if you add a new text block, you’ll see that the builder is there for you to use, now on to the next step!

Build your nested content

What you can do next is just create a nested content for your widgets/module, for this example I’ll be using the tabs module, and I’ll nest person module inside it. Here’s how I achieve that:

1. Create a new block and use a divi builder. Do your usual routine to add the person module. Publish that, then on to the next step.

Use Divi Builder to add a module

Use Divi Builder to add a module

 

2. Copy the generated shortcode that we’ll use inside the tab later on. in this example, the shortcode is: [text-blocks id=”61″]

textblock-shortcode

copy the shortcode for later use

 

3. Create your page/post and add a tab module, then add a new tab

4. Add the shortcode within the tab text editor and save it

Paste your previously copied shortcode to the text editor

Paste your previously copied shortcode to the text editor

 

5. Add other tabs if needed (well, that’s the point of having your content tabbed anyway 😀 )

6. Publish/preview your post to see the result, that should do it.

Person module nested within tab module

Person module nested within tab module

 

Basically now your “Text Blocks” acts like an additional Divi Library that you can use/edit as you like, give it a try on other modules/sections, this can also work with the widget area too (though you’ll have to consider your container/widget size for that).

Cheers!