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