Add Divi Modules ANYWHERE Using Shortcodes

by | Dec 21, 2017 | Divi tutorials | 19 comments

In this tutorial we will be showing you how to place Divi modules anywhere that you like on your website. If you are unfamiliar with the Divi theme and visual builder that comes with it we highly recommend that you have a look by visiting the Elegant Themes website.

Using Divi to build your websites can be quick and easy and we also love the Divi framework for how customisable it can be when you know a little CSS and HTML. This said, there are times when you are unable to use the visual builder to edit certain pages on your WordPress website and these are generally pages that WordPress generates for you such as your blog page, 404 page and product category pages if you are using Woocommerce. This can be extremely frustrating if you have spent a while designing your or a client’s website to the last detail but your 404 or blog page looks out of place. Of course you could use a redirection plugin to redirect all of these pages to ones that you have designed with Divi however this is not a very elegant solution.



This solution can also be used to place modules where you otherwise would not be able to. Imagine you have an FAQ page with tabs – what if you wanted a contact form or a map within one of those tabs? Out of the box this is not possible, however using shortcodes you can overcome these design obstacles!


Getting started


To utilise this tip you will be required to add a small bit of code to your website as well as use the Divi library to create the modules that you’d like to use. If you’re not comfortable adding code to your backend WordPress files you’ll be happy to know that a plugin can do it for you too! Or if you prefer, we’ve created a Divi Child Theme that has this functionality integrated for you.

Before we continue please take notice of this: If you do not have a child theme we highly recommend that you use our guide to create one before editing any of your website’s files. Using this you can create your own or download our child theme. Any update for the Divi theme will remove all of your custom code if you do not use a child theme!

Firstly, we need to add some code to your child theme’s functions.php file. This code will enable you to use a shortcode by adding the Divi module id as a parameter (we’ll show you what this means further down). Open it up and before the final “?>”, copy and paste:


//Shortcode to show the module
function showmodule_shortcode($moduleid) {
extract(shortcode_atts(array('id' =>'*'),$moduleid)); 
return do_shortcode('[et_pb_section global_module="'.$id.'"][/et_pb_section]');
add_shortcode('showmodule', 'showmodule_shortcode');


Creating your content


Now that we have everything in place we need to create the modules that we will place using a shortcode into areas that you otherwise would not be able to. We’ll be doing using using the Divi library found in the Divi menu on the left handside of your WordPress dashboard.



For this example we’ll be creating a contact form inside a tabs module, something that you otherwise would be unable to do. This guide would work perfectly fine for adding a specialty section to your footer or a blurb module within a newsletter sign up form. The limit is really your imagination.

We assume in this tutorial that you already know how to use the Divi builder and have some familiarity with the visual builder so that you understand how to create modules. If you have reached this point and are uncertain how to use either of these, visit the Elegant Themes website for some really handy guides.


Adding your content using a shortcode


Once we’ve created the module (in this case a tabs module) and have styled it as required, we now need to find the id that relates to your saved content. The best way to do this is to open the Divi library and hover over the name of the module that you just created without clicking on it. You’ll see in the link (the URL appears in the bottom left hand corner when using Chrome) that after “post=” a number will follow. In our example it is 82. This number is what identifies the module when you add it into a shortcode.



Once you’ve found the id of your module, it is a very simple process to add it to your pages. Simply add the below shortcode anywhere (e.g. in a text module, code module or within another module such as an accordion):


[showmodule id="378"]

and replace the 378 with the ID of your Divi Library.



Now that you know how to put Divi modules as shortcodes anywhere, we can use them to customise the normally “uneditable” WordPress pages like the 404 not found and blog pages. See our guide by clicking here.

As always, if you have any issues, get in touch with us!


Add Divi Modules ANYWHERE Using Shortcodes ultima modifica: 2017-12-21T15:44:19+00:00 da Liam Pedley


  1. Kev

    Hi, great article. Do you know how to get this to work to add the short code to a ‘Tabs Title’

    • Liam Pedley

      Hi Kevin, glad you found it useful. Please see this latest post about customising Tabs titles

  2. Sueli


  3. lucas klaas

    Hi does this method apply if I want to add divi form on layerslider?

    • Liam Pedley

      Hi Lucas,

      This should work any where that you are able to add html or PHP code.


  4. wassilis

    Hi thank you for this share, this is working good but is not correctly rendered in the visual builder, if I add in a code module this [showmodule id="378"] then is like not loading some classes, in frontend is perfect as expected. Do you know about this?
    many thanks

    • Liam Pedley

      Hey. Yes unfortunately the visual builder doesn’t much like adding certain layouts using shortcodes. For ease you should load the page you are editing in one tab and then load the visual builder in the other. Then you’ll just need to save and reload the page in the other tab. Good luck!

  5. Elias

    Great article. Thank you

  6. Sarah

    Thanks for the post. Curious to know if this is working with the latest version of Divi? I have created/added a child theme and followed all the recommended steps, but am still ending up with only [showmodule id="XXX"] showing when I view the page outside of the editor.

    • Liam Pedley

      Hello! Yes this still works with latest Divi. If you see the actual shortcode it normally means you’re entering it into an area of the site that doesnt accept html or code input

  7. Krista L.

    Still excellent article! No plugins and simple code – perfect.
    Works like a charm in clients Contact Form 7 plugin.

  8. Krista L.

    ps. you need also a bit of a code to handle shortcode in cf7 (in child-themes functions.php)

    “// Allow custom shortcodes in CF7 HTML form
    add_filter( ‘wpcf7_form_elements’, ‘dacrosby_do_shortcodes_wpcf7_form’ );
    function dacrosby_do_shortcodes_wpcf7_form( $form ) {
    $form = do_shortcode( $form );
    return $form;

  9. Chris

    Hi, great little trick here.
    I was loving using it but came into a problem.

    My site is now showing a 502 timeout error with that snippet in the functions.php file.

    If I remove it, the site loads again… but the modules obviously don’t show in the page anymore, just see the shortcode.

    Any idea what could be causing this?

    Again, I was just utilizing the shortcode earlier today. Totally stumped as to why it started to fail.

    • Liam Pedley

      Hey Chris, 500 errors are annoying to resolve as they are normally very vague but it does seem like there’s a connection between this snippet and your issue. I am running this on all websites that I build and don’t have any issues. Have you tried the usual debugging steps of deactivating plugins, removing other third party code etc and seeing if there is a conflict there?

  10. navdeep

    how to add divi builder in product category descripton, where showing the text editor and visual editor showon

    • Liam Pedley

      Hi Navdeep, you should be able to follow these instructions to add divi content to anywhere that you can add text. Otherwise I’d recommend using the Theme Builder

  11. M

    This is fantastic, thanks Liam

  12. Will

    Thank you for this! It works great for me to create a filterable image gallery by throwing gallery modules into tabs using the shortcode. I do have one question though. When displaying a gallery module inside a tab, if I navigate to page 2 of the gallery, it scrolls me up to the top of the page. Is there a way to adjust that so it just takes me to the top of the gallery?

    • Liam Pedley

      Glad its worked well for you. You’d probably need to delve into a jquery solution for the scroll issue, there will definitely be something on Google!



  1. Customise The Tab Titles Within The Divi Tab Module | Liam Pedley Design - […] had quite a few enquiries off the back of our Divi short code post requesting help around customising the…
  2. 7 Things You Might Not Know About The Divi Theme | Liam Pedley Design - […] it’s really easy to add layouts as shortcodes with just a little customisation. Read our blog here that describes…
  3. Ajoutez des modules Divi PARTOUT avec des shortcodes | Formation DIVI - […] Comme toujours, si vous avez des problèmes N’hésitez pas à nous contacter! […]
  4. Divi Tabs Standing Still Scroll effect - Divi Engine - […] Follow this tutorial on how to do this […]
  5. "PHP dosyasında Divi Layout enjektör kısa kod modülü" kodu Cevap - Kod Yanıtları - […] Kaynak php php […]
  6. "Module de code d'injecteur de la configuration de divi dans la fonction PHP Fichier" Code Réponse - Coder les réponses - […] La Source Étiquettesphp […]

Submit a Comment

Your email address will not be published. Required fields are marked *

Latest from the blog

Website Migration: How to Create a Plan

Website Migration: How to Create a Plan

Website migration is sometimes necessary; if the migration is done correctly, then everything’s great! However, a poorly implemented website migration can wreak havoc with site traffic and more. Site migration is a serious process that requires plenty of planning,...

Strategies to Use Google Trends for Powerful SEO

Are you looking for a way to optimise your site for SEO? Would you love a free tool to help you spot current trends in your niche? Then why not consider using Google Trends to help your site rank higher and bring in more traffic? Just in case you’re not familiar with...