Article du fil d'actualités de CreaWeb2B

N'hésitez pas à commenter et partager

DIVI Module inside module v2

by | DIVI, Plugins, Tutorials, WORDPRESS

In a previous tutorial, i explained how to add a DIVI “section” or “module” inside another module.

Some code had to be added to functions.php file and when you fear/don’t know how to code in php, it can sound hard.

So i made a little plugin to help those who don’t want to touch php code, the plugin is nammed Simple Divi Shortcode and can be found inside the plugins section. This is the paid/premium version, adding a column showing the shortcode and a clic to copy function.

A light version (free) can be found on wordpress repository : Simple Divi Shortcode, this version adds the shortcode system but you have to find and add the id of item you want to insert.

As said in first tutorial, to find the id : While visiting Divi library, you see the whole listing of existing template. If you hover a template name, you’ll see an url displayed at lower left corner of your screen. Inside this url you find post=xxxx where xxx is the id to use with your shortcode. So if you see post=5286 at lower left corner, shortcode to use will be :

[showmodule id="5286"]

Item id also can be found by checking URL when editing it (check for post=xxx, where xxx is the module id to use in shortcode)

The paid version of this tool will display a Shortcode for each existing (or future) item inside the DIVI library, not only on the DIVI library listing page, but also inside a metabox on the building page of the library item :

All you have to do is to copy the shortcode displayed and paste it where you want to use the given element.

Now you can insert any template from DIVI library inside the content field of a DIVI module (like a map or a contact form inside a tab module or an accordion…)

The following tab module was built inside DIVI library, so to call it i just use a showmodule statment with my tab module id

Hi all, here you see that you can insert existing modules inside a tab module. Possibilities are numerous. There are also limitations, accordion in accordion doesn't work, and global modules may not work properly. But it's a great tool to achieve some new kind of designs.

Fabrice ESQUIROL

Freelance, Creaweb2b

The following screen capture shows the content of this post, where the showmodule corresponding to my tab module appears :
Now let’s see how to build such a tab module. Here we have a map in first tab, and a testimonial in second tab.

A map module and a testimonial module have been built inside the DIVI library.

Once you know what you want to add inside each tab, let’s create a tab module :

Add a new tab

Inside the content field, just add the shortcode by using copy/paste (here for the map) :

Next just save and add the testimonial shortcode inside the second tab.

Once our two tabs created, our tab module looks like that :

Remember that i used a DIVI library shortcode for my tab module, so i’ll grab his shortcode to insert it in this post.

I can find the shortcode inside the SHORTCODE metabox shown inside the builder (lower right of the builder screen), or inside the DIVI Library template listing page.

Hope you’ll find this tool useful, i’ll answer any question if i can help.

If you want to support me, you can buy me a coffee 🙂