Thanks for this Fabrice! I have used it many times easily. I just tried to use it again, but for some reason the site doesn’t seem to be reading the code I put into the functions.php file. For the life of me I cannot figure out why. Have you ever had this happen?

Be sure to place the code inside the right file and do a copy paste of code. You need to insert it inside functions.php of your child theme. Still work fine you can trust me, i just tried it out (to be sure) on a staging website.

Nico
on 31 January 2018 at 18 h 29 min

I have also a problem with this trick. In the TAB it shows me in every tab the last saved DIVI Library Layout.
SO if I have 5 Tabs and in every tab i reference another library layout he will show in every tab the last saved Layout no matter which ID number I use.

Hope anybode can help me?

Thank you.

Fabrice
on 1 February 2018 at 15 h 52 min

You can’t put a tab module inside another one. You can’t put an accordion inside another one.

I have the following problem that’s somehow related and I can’t find an answer from long time ago:

I want to insert a set of 20 video modules that I have already created on the page. If I make a new module one by one in the library and then insert it, will take ages, so what I did is to use intense plugin video shortcode – easy copy paste done. The thing is it doesn’t show up. If you place it outside the tabs it works but not inside no matter first or last tab. Is there any workaround globally so it can work for all tabs on all pages.

You can email me if that’s off topic for the current feed. Thanks in advance!

meanwhile I experimented something different: I saved a tabs module with few tabs, each one holding a gallery lets say gal1 gal2 gal3, then using the shortcode I nested it inside the main tabs module into the first tab, basically I nested a tabs module into the first tab of a parent tabs module. 1/ The parent’s first tab takes the name of the last child tab in this case gal3 (so the first parent’s tab is already renamed to gal3) and 2/ when you click gal2 and gal3 the child tabs they open the second and third of the parent tabs … You can make a quick experiment. Is there any workaround to make it work?

Thanks in advance!
Peter

Fabrice
on 13 January 2018 at 22 h 07 min

Hi Peter, no you can’t add a tab module inside another tab module. Only the first tab module will work, so the one you call via shortcode will show up but won’t act as a tab.

Fabrice
on 13 January 2018 at 22 h 09 min

Did you try to insert your shortcode (video intense one) inside a text or code module, save this module to library and call it via shortcode inside a tab ?

Arslan
on 30 December 2017 at 18 h 16 min

Hi Fabrice, I want to change background image of section on click did you help me?

Hi, i sa there are ways to do that but php is made to be on server side, so i won’t recommend that.

Jonathan
on 19 December 2017 at 22 h 30 min

I’m trying to insert a slider of images into a tab module. I’ve added the code to functions.php and I’ve created the slider module in the Divi Library. When I insert the shortcode into the tab module, however, the slider module is not displayed.

After inspecting the code, I believe this has something to do with the fact that the module is being shown as 0x0 pixels. Do you have any thoughts on what I might have done wrong? (the url for this page is: https://hoodsdhc.wpengine.com/farmington-mo/ . The big white space on the “Cabinetry” tab is where the slider should be showing up.)

I think it might have something to do with the fact that my images are having “max-height: 0px;” automatically added to them… Do you know why this might be happening?

Fabrice
on 20 December 2017 at 22 h 30 min

Answered by mail. And now i see it works 🙂

Mike
on 14 December 2017 at 15 h 23 min

Hi fabrice,

This works amazingly, but I’m trying to add a layout to a fullwidth slider but it comes out really small – would you know of any way to make the called module the same size as the fullwidth slider (height and width).

Hi, you need to adjust margin inside the layout built in the library. Let’s try to set all margin to 0.

Severin
on 12 December 2017 at 16 h 31 min

Hi Fabrice, great work! I used this on different toggles with each toggle has a different shortcode ID. But it only shows me the same ID on each toggle at the front-end. although I gave each toggle another shortcode ID at the layout editor.

Hi, if shortcode doesn’t work, there is something wrong with the code. Please check for correct quotes, as sometimes copy/paste can turn it to fancy quotes. If it still doesn’t work, feel free to send me your functions.php by mail : contact@creaweb2b.com so i’ll be able to check the code used.

Alex Grafsky
on 15 November 2017 at 5 h 03 min

Great post! I made it on my website. I have a question off topic: how did you manage to insert an example of your code (containing shortcodes) on the page without executing these shortcodes? I’m trying to insert an example of a shortcode (in the tags in the post), but it’s always executed(.

Wow, i’m sorry about the reply i made, it wasn’t a reply for your question. Using custom fields to display code require to add a function to read the content of custom field. I’ll make a tuto about that but not right now, i’m in a hurry.

Does this work in WordPress Multi-site? I’ve added the code to the functions.php in the child theme. But it doesn’t work. If I put this exact same code in to the parent theme functions.php file, works just fine. Which, as you noted, leaves it open to being deleted upon update.

I have a tab module that has 2 tabs. Inside each tab is the Maps module and content, map is on the left side, content on the right, separated by using the [one_half] column shortcodes. The map on the first tab loads fine, but if you switch to the second tab, the google map shows the grey background and zoom buttons, but the actual map isn’t there until you click the ‘enlarge map []’ icon.
I tried it without them being separated in the [one_half] column shortcodes, and there is still an issue.
There’s no errors in the console, and your script is the only thing in my functions.php file.
What can I do to get both maps to show properly on all tabs?

I don’t think you can do that. But you can save any module you want to reuse elsewhere to DIVI library and then it will get an id and be available to target with shortcode. Saving and reusing things is the purpose of divi library. just use “save to library” at the bottom of module edit box when the module is opened.

Reeeeeallllllyyy great job this tutorial and below comments as well. First I had an issue as the snippet wasn’t accepted within my child theme but after pasting the snippet into the core functions.php everything went well per expectations. Thanks a lot! 🙂

Hi, thanks for your feedback. One thing : i just made some tests and you shouldn’t have to copy the snippet inside core functions.php
The snippet inside child theme functions.php works fine.Make sure to copy paste the code from the tutorial instead of rewriting it, sometimes a mystype or any little mistake in code can bring a non working function.

priya
on 11 July 2017 at 22 h 23 min

i am using the same code and followed the steps. The thing is it is working in my site when i tested, but it is not working in my other site. what should i do now? Help me with this.

be sure to check quotes and also that there is no “pre” tags before the shortcode. What result do you get ? Just see the shortcode instead of content ? Can you share a link ?

priya
on 12 July 2017 at 5 h 55 min

yes..steveomints.com/getsome…it’s the link..i juz see only the short code..

priya
on 12 July 2017 at 7 h 18 min

When i inspect, i see the pre tags…But i am not sure…Could you please help me out with is…

priya
on 12 July 2017 at 7 h 33 min

if PRE TAG is the prob, how should i remove that?

Fabrice
on 12 July 2017 at 8 h 56 min

Yes, it is for sure. Just edit the module where you put the shortcode, sometimes pre tags are added automatically. If you see it in content right before and after your shortcode, delete it and then the code should work.

Some ideas to follow in order to resolve this :
To check if the shortcode work well, just test it inside a code module.
Try to delete the shortcode and paste it in visual mode, then test it and check in text mode to see if you see pre tags or not…

priya
on 14 July 2017 at 19 h 11 min

It doesn’t work in visual mode and also in code module…

Fabrice
on 14 July 2017 at 22 h 03 min

when inspecting code in code module, do you see the ‘pre’ tags too ? Can you send me a screen capture of code you add to function.php (contact@creaweb2b.com)

Falk
on 17 July 2017 at 22 h 02 min

I have the same exact problem. I guess the new Divi Builder update does not support this trick or breaks it in a way. After updating Divi Builder all my [showmodule]-tags broke. Any suggestions? If not I have to somehow downgrade what would be a pitty.

Falk
on 17 July 2017 at 22 h 14 min

Got the solution: After the Divi Builder Update, the Divi theme now has two functions.php. One is the core/functions.php. The other one is a ‘normal’ functions.php. I copied the code into both php-files. After doing so everything worked fine again.

Hope that helps!

Regards,
Falk

Fabrice
on 18 July 2017 at 1 h 34 min

it works fine for me with code inside only one function, and so it does for priya. there was a missing bracket and an additionnal space inside his code. the code is fine with last divi update.

Fabrice
on 18 July 2017 at 1 h 30 min

Solved – There was a mistype in priya code, a space between extract and the following bracket, so function didn’t work.

Many thanks for sharing this, fabulous tutorial! I see you advise people to create a child theme for this. Just wanted to say that it also works if you copy the snippet in a plugin like ‘Code Snippets’ or ‘Shortcodes, Actions and Filters’. Together with ‘Custom Content Shortcodes’ it’s possible to present customized pages for each user, even without child theme. Great stuff!

Hello Fabrice i know this is an old post, but i have a problem with the shortcodes.

I added a shortcode blog module into the Tabs module with this method.
My problem is now that it works like a category filter and the blog modules are essential for the website and on Safari when you click on an other Tab the Blog module wont show up. It will just be Blank.

Hi, i answered by mail. There is an issue on safari, i don’t know why but data-column is set to 1 instead of being 3 like it should be, so the grid is showing posts like if you did choose 1 column (full width of container instead of creating column container). I need to inspect code to try to understand what happens on safari…

Jay
on 26 May 2017 at 14 h 04 min

Hello Fabrice,

Wonderful tutorial. Please help me with creating short code for a page layout. Divi no longer allows for global layout only modules and sections also, so the et_pb_section is not pulling up anything when i enter a layout id. I think i should be using et_pb_layout but it isnt global and I am not sure how to call an id that is not global. I am not sure if my problem even makes sense.

One important thing : if you have a global module/section inside your layout, it won’t work. It will display only the last global element instead of displaying the complete layout.

Jay
on 26 May 2017 at 15 h 04 min

Thanks for answering my question Fabrice. One last thing. If I would like to insert this short code at the beginning of a product archive page so that the top part is customizable with divi before it loads the woocommerce archive template, do you know a function.php code i could use for this since category pages cannot be customized on the front end with divi.

For an archive category page, you need a child theme. Inside your child theme folder, you need a woocommerce folder. Inside this folder, you need to copy archive-product.php from woocommerce plugin folder and then you need to edit the file to insert your call to shortcode.

Hope it’s clear enough. You can see this working live on this website, if you click on plugins. You also can insert shortcodes inside product content to add divi built things to your product page…

Once you’ve add the showmodule function, you also can write echo do_shortcode(‘[showmodule id="xxx"]‘) inside your template instead of the et_pb_section thing

Jay
on 26 May 2017 at 15 h 45 min

Wonderful. You are a lifesaver.. i will try this out and give you feedback. Thanks. NRN

Emma
on 26 May 2017 at 7 h 32 min

This looks like exactly what I need, thanks! However do I have to add the actual content I want into the module saved in the library?
What I’m trying to achieve is tabs, each with an image on the left and text on the right. Can I create a row in the library and then add the content on the tabs? Or do I need a separate library element for each tab, containing its content, in order to use the shortcode?

Also, like another poster, I’ve been finding that the shortcode isn’t actually returning the library element, instead it’s displaying the shortcode text in the page – any clues (I’ll probably try your plugin)

Hi, you need a shortcode for each tab then. When building the content for a given tab, use a section (or a row) with 2 columns and in the first column your image and on second column the text module.

If the shortcode appears in plain, maybe there is something wrong in the code registering it. It should work if you have the exact code i give, inside your functions.php. If code is right and it’s still not working, maybe there is a plugin conflict somewhere ?

Be sure quotes are looking good when you copy/paste the code

Emma
on 3 June 2017 at 18 h 47 min

Hi Fabrice, thanks for that. I’ve managed to stop the shortcode showing as plain, but the layout on the tab is terrible. In the layout I have a row with 2 columns, one image and one text. However the image is centering on the tab, the text also and not wrapping within the confines of the tab (spilling off the edge of the monitor), the line spacing is double and if I put the text module on the right in the layout, it doesn’t pick up the default font for the site (uses something that looks like courier instead). If I try to put a drop shadow effect round the image, I get a shadowed box and the image separately next to it. Any ideas?

Fabrice
on 6 June 2017 at 12 h 16 min

Hi Emma, sorry for the delay. You have to inspect css and adjust padding and margin in divi library for the layout you call with your shortcode. To put a shadow effect, give your image module a class and target the class with custom css. For instance, give image module the class of “cus_img” and then add the following css inside divi options or inside your child theme style.css :

.cus_img img {box-shadow:2px 2px 5px #000;}

Daphne
on 23 May 2017 at 22 h 48 min

Hi, this is super useful – thanks!! I’m using this to add accordions inside tabs, and it’s working, but the height of the accordion rows is much larger when it’s inside the tabs than it is on the actual accordion post. Is there something I can do to maintain the formatting from the original module when I add the module inside another module? If you want screenshots, shoot me an email. Thanks!

Hi, thanks for the feedback. Please check your padding settings inside the section you build in the library. Sometimes you need to adjust settings or css when inserting your shortcode inside another module.

Have you had any issues with this on Safari browser? I’m using this function on a client’s site alongside some custom JS. It’s setup in a way so that there is a blog module inside each tab. The custom JS is to allow the user to click on an anchor link from any page on the website, and it will direct and open the tab that correlates with the anchor link clicked on. However, in Safari, only the first tab is working. Any other tab is missing specific classes on divs, divs are missing, and more. The issues are specific only to Safari it seems. Is this something you can look into to see if its an issue with your shortcode?

Yes it’s something you can do by customizing your tab module using css. I did something similar for test purpose but i didn’t wrote a tutorial. Here is a link to a tutorial to use icons as tabs : styling-the-tabs-module-for-the-divi-theme

This is nice thank you it worked. Is there possibility to add a layout in side the tab? I tried and it did not worked. What i would like to accomplish is that for each tab i have inside a text description, a gallery and a blurb module.

It should work. But when you insert a layout shortcode, if you have a global module inside the layout, sometimes you got only part of the layout. You can insert multiple section, multiple modules or even layout. What i mean is you can do [showmodule id="xx"] and just after [showmodule id="xy"]

Only thing you can’t do is toggle in toggle, accordion inside accordion…

John A
on 10 April 2017 at 11 h 21 min

hello Fabrice,

Thank you for your time with this tutorial.

I have a standard section (row) in the Divi Library and can see that the post id is 4231.

I have added your php to my child theme functions.php making sure this file also contains the enqueue script as per your other tutorial on child themes.

My accordion contains the shortcode: [showmodule id="4231"]

I know it is partially working because the accordion appears to be open with a small section of the map showing from my library section.

In order to see a working google map inside modules like Tabs, accordion or toggle, you need to put the map in first (opened tab, accordion or toggle item), it’s a weel known limitation (if you seek for googlemap in hidden section, you’ll see a lot of non-working tries to make it work…)

I don’t know what you have in your section, maybe it’s just something with padding or margin. If you send me a screen capture of builder view and frontend result by mail, maybe i can help you further 🙂

Yes Pascal, it’s an issue with the way toggle and accordion are built. You can’t add an accordion inside another one or a toggle inside a toggle. Someone already noticed that (and i said i’ll change the tuto to avoid loss of time but i forgotten…)

The fact is that accordion or toggle are targetted by js and when you add one in another one, it can’t find the right element to target (something like that…)

Ciro
on 27 March 2017 at 22 h 58 min

Great! Thanks for it. I need some help here: http://litwak-partners.alternarte.net/noticias/ I create blog post module with ID 782, place it inside a tabs module with the idea of dividing it by categories like the Portfolio module that is shown above. But when I select the tab “Prensa” appears a gray box, I do not know what is happening. Could you help me?. Thanks in advance.

Hi, when i follow your link i don’t see a gray box but when i inspect the css i can see a “pre” tag before the shortcode and a “/pre” tag after. Remove it and it should work like you want.

Alex
on 21 March 2017 at 9 h 14 min

Hi Fabrice, great tutorial, very handy, though I’m wondering if there is a way to refer to a post/project ID instead of module added to Divi library. Ideally I would like to show a post (or project) in a tab. A library module can’t be loaded as a post independently. Does that make sense?

You can’t just grab a post by id. But there are ways to achieve what you want to do. Using my method, you can create a blog module and choose to display only one post from a given category (or even if you have many posts in that cat, you can use post offset to target the post you want to put in your tab. Set the blog module to be full screen (not grid) then you choose what you want to display (full content for instance). For projects, you can do the same, but you’ll need to have a specific cat to target the project you want.

This is fantastic – thanks! But I’ve found that when I try to add add that shortcode more than once on the same page, it only shows the highest id number for every single shortcode. Example: http://twindesigns.flywheelsites.com/media/ (u:flywheel p:twindesigns)

Hi Kelly, just took a look at your (nice) page but as i don’t know what you want to achieve, i can’t see if something is going wrong. Please send me a screen capture of what you have inside builder that isn’t showing on frontend.

Hi, if you just want to add an image, jsut use the button “add media” inside the tab content. If you want to add an image module, then you have to follow the tutorial to add the shortcode to function php. If you find it too hard, the easy way is to use the plugin i made (available in plugin section) that will add the function for you, and give you a shortcode for all existing and future divi library layout, modules section…

Would you happen to know how to link to a specific accordion item from somewhere else on the web site ?
I’m using the accordion module to maintain a FAQ and would like to go directly to an accordion item in order to not duplicate information.

Thanks for the easy to understand and follow tutorial. I placed a three column layout within a slider and followed all the instructions. The problem that I am facing is that after saving I noticed that the images are displayed but they are on the far right, and in Google Chrome the first image appears higher than the rest. Could you please advise what I would need to do in order to rectify this issue. I am relatively new at CSS and am not to sure how I could see what the problem is. The URL is http://www.exclusiveaudio.co.za/audiology1

Hi, when using a shortcode inside a slider, you need to correct margin and padding inside the DIVI library element. If you have a section, set margin and padding to 0 for both top, left, right and bottom and maybe you’ll also need to add max-width:100% and width:100%; for main element inside section custom css (and maybe row custom css too)

Can’t tell you exactly in your case but try to adjust these settings and i’m pretty sure you’ll achieve what you want to do 🙂

Hello I just tried this and it Doesnt seem to work for me.. ¿? 🙁 All I get in my tabbs module is the code [showmodule id=”29477”] .. I followed all the steps and added the function code to muy functions.php file…What could I be doing wrong??
Please help.

Thanks for the tutorial – is it possible to get Divi Testimonials to display within a Divi Slider – I have created three Testimonials in the Divi Library and then added the [showmodule id="###"] code for each of the individual testimonials into their own slider within a Slider Module. But when I view the page only the most recently added Testimonial shortcode is displayed in the Slider module.

Any ideas – is it possible to have multiple testimonials loaded into a Slider module using your method.

Hi, sorry for being so long to answer. Yes i think it should work but all depends on how you try to do it. Can you send me screen captures of builder for each testimonial module and slider. Be sure not to use global sections or modules as it won’t work with the do shortcode method.

Is there any option to make it permanent? each time I update Divi Builder, it overrides the functions.php

Thanks in advance!

Fabrice
on 26 January 2017 at 8 h 07 min

Yes, you need to use a child theme in order to have a separate functions.php that will remain safe during updates. You can follow my tutorial https://www.creaweb2b.com/en/birth-of-a-child-theme/ to know more about creating a child theme, or you can use a child theme plugin or a child theme generator.

Chris
on 5 January 2017 at 22 h 33 min

I have a bluehost subdomain. I add the code to function.php, but it crash the library. Please help.

This is perfect and such a time saver. I want to add multiple testimonials into the Tab Module. Can I do this from one shortcode? The DIVI Builder doesn’t give me the option to select my column size or add more modules.

Oh ok, this is because in the tutorial, i used a module but you can create an entire section if you want to access to section settings, or even a row in order to access to row settings.

When inside the library, choose add new, name it and select Row for model type, you will have ability to select the column model you want and 1/3 1/3 1/3 will be available. hope you’ll success, feel free to ask if you need further help 🙂

Hi, just went to take a look and inspection of code shows a “pre” tag before the shortcode, and a closing “/pre” after. Remove it and all will work like you want.

tasneem
on 9 December 2016 at 14 h 09 min

Hi Fabrice. Thank you so much this tutorial was just what I was looking for. It worked great for me. I wanted to add 4 buttons in a stack inside a text module. Only thing is there is quite a big gap between each button module. Do you perhaps have an idea on how I can make line height between the modules smaller?
Thanks!

Hi Tasneem, can you provide a link or send a screen capture by mail ? Did you inspect the css to see where the gaping come from ? Maybe you can set the padding (internal margin) to 0 for bottom and try different values for top of each button module.

Tasneem
on 9 December 2016 at 19 h 14 min

Hi Fabrice

Thank you for your quick response. I did inspect css and was able to adjust margin there but have no idea where or how to add that css in divi.
I will send you the screenshots and css by mail. Thanks for your help!

Nat
on 2 December 2016 at 8 h 23 min

I’m trying to add an accordion within an accordion, however I’m finding it removes the name of the first accordion and replaces it with the name of the last of my embedded accordion. Also the open/close features don’t seem to be working properly. I’ve also tried adding tabs within the accordion and getting the same problems.

Hello, i haven’t tested all combinations. I don’t have too much time to test but i’m going to try these and let you know if i got a good or bad result.

Fabrice
on 3 December 2016 at 2 h 12 min

Just looked at this and you’re right, it won’t work for accordion inside accordion and same thing for tabs inside accordion. I’ll edit the tutorial to avoid people loss of time.

Zlatko
on 18 March 2017 at 22 h 48 min

Hi Fabrice,
Great tutorial, thanks for it.

Was a solution ever found for the ‘accordion within accordion’ problem?

Fabrice
on 19 March 2017 at 9 h 08 min

No Zlatko, i didn’t found a solution for that.

Zlatko
on 19 March 2017 at 22 h 05 min

I found a solution today. Not a fully Divi solution, though, I had to use a third-party plugin – ‘Accordion Shortcodes’, a very simple accordion plugin. Your shortcode with Divi accordion works great within.
That’s just what I needed. Thanks again for your tutorials.

Fabrice
on 19 March 2017 at 23 h 25 min

Thanks for sharing your solution here 🙂

Amir Medina
on 1 December 2016 at 3 h 26 min

Hi, I tried doing this but this is what appears inside the module that should contain the module I created when I followed your tutorial:

No Results Found
The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.

Hi, can you tell me which module you try to insert and inside which one ? Are you sure you have used the correct post number inside the shortcode ?

Amir Medina
on 3 December 2016 at 1 h 00 min

Hi I was trying to insert a ‘Blog’ module inside a ‘Toggle’ module. I have also tried inserting the blog module into an accordion and a tab module but its the same thing. Thanks for the help! 🙂

Fabrice
on 3 December 2016 at 1 h 53 min

Just tested to insert a section with a blog module inside and works fine. Must be something wrong with the post number or something else. Can you send me a screen capture of the builder view (of the blog module layout you’re building and want to show inside the accordion or tab)
email : contact@www.creaweb2b.com

Hi there. Thank you for the great tutorial. I have one question. The space inside my tab module seems very big.
Please see http://www.preview.upld.co.za to preview. Could you please advise on way this could be.

This is very nice. But do you know how can i load module to insert into PHP file?
What i want to achieve is, i created customized footer using divi layout. Then i want to insert it into footer.php to replace original footer from Divi. Is there any function i can use to load divi module into PHP file? Do you think it’s possible?

No you don’t have to create a page for each element, you can create your elements inside the divi library. You can add a section inside wich you’ll add anything you want to display inside your tab. Be warned, only one section is allowed or it won’t work. so multiple row/modules but inside an unique section.

The function to add a shortcode is php code, so you need to put it inside functions.php

If you alter the DIVI functions.php file, it will work but when updating DIVI, the code added will go away (and you’ll need to add it again.) You can add a child theme to a live DIVI site, there are already numerous tutorials for this (a child theme is just a folder with files you want to override inside, and of course a link to DIVI style.css file) I’ll make a tutorial for this.

Iris
on 15 December 2016 at 13 h 35 min

Hello! I am pretty new at this. I made a website on Divi theme, without Child Theme…and i would like to use slider or gallery inside tabs module. My site is already live but probably, it would be good to create the Child theme…I noticed in the previous comments, that there was a similar experience…and you said you would create a tutorial:) Problem is, all tutorials are for creating blank child theme…but how do I create it to transfer it from Parent theme. Any help would be much appreciated!

Wow.. just killer tips . Thanks for it . Can i suggest for new tutorial ? Would be helpful if someday you`ll dive into Post Meta so we can having more option to styling post meta date – author etc separately . Thanks again