How to add shortcodes in Divi

Divi is well known for using shortcodes and the mess they can cause, but that’s a discussion for another day.

As a Divi website owner, there are a couple of ways you may want to make good use of shortcodes in your website.

The 2 main ways you would want to use shortcodes in Divi would be to;

• Use 3rd party plugin shortcodes to embed their content and functionality
• Use Divi shortcodes to embed one Divi element within another.

What is a Divi shortcode?

A shortcode is a shortened piece of code that can be used easily anywhere on your website where you can add text. The shortcode acts as a reference to its full code that is hidden in the backend of your website.

It is easy for you to add a shortcode such as [add_my_shortcode] rather than lines and lines of code you don’t understand.

Where to add shortcodes in Divi?

The most common method used to add a shortcode in Divi is using either a Divi Text module or any module with a text area included.

To add your shortcode, just copy and paste the shortcode into any module in the Divi builder where you can add text. 

How to add shortcodes for your Divi layouts

When you save a section, row, or module to your Divi library it can be assigned a shortcode using a free 3rd party Divi plugin that generates a shortcode for each element in the layouts library.

There are a few paid and free Divi shortcode plugins available but seeing as they all perform very similar tasks we will use the Simple Divi Shortcode plugin that is available in the official WordPress plugin repository. The plugin currently has 10,000+ active installs and has a 5-star user rating.

Add a Divi contact form module into a Divi tabs module

To show you how to use the Divi shortcodes plugin to generate and display your library element shortcodes we are going to add a contact form module inside a tab of a tabs module.

This tutorial will show you how to add the contact form (B) into the 1st tab of the Tab module (A).

Step 1 – On your Divi page or post, add a new section with a single row that includes a Divi Tabs module with a Divi Contact Form module below.

Step 2 – In the contact form module settings bar click on the 3 dots to reveal the options list. Click on the Save To Library link to save the module to your Divi library.

Step 3 – In your WordPress dashboard go to Plugins > Add New and use the search box to search for Divi shortcodes. You will see the Simple Divi Shortcodes plugin as one of the results. Click on the Install Now button and let the plugin install to your website. Once installed click on the Activate button.

Step 4 – Instaling and activating the Simple Divi Shortcodes plugin on your website will add a shortcode for each library element. You can then use this shortcode anywhere on your website.

But 1st you need to find your shortcode ID for the layout you want to use.

To locate your element shortcode ID you need to go to the Divi > Divi Library area of your dashboard and hover over the Edit link of the layout you would like to use.

You will then see the URL at the bottom of your screen as shown in the screenshot below.

In this case, the URL displayed as we hover over the edit link is;

https://www.diviexamples.com/wp-admin/post.php?post=237689&action=edit

and the specific information we need to construct the full Divi shortcode is 237689.

To create the full shortcode you need to take the number you copied above and use it in the following way as your new shortcode. It will look like this;

[showmodule id=”237689“]

This Divi shortcode can then be added anywhere on your Divi website.

Step 5 – Going back to your page or post you can delete the original contact form module we created in step 1.

Open the Tab module settings. Add your Divi shortcode from the step above into the text area of our 1st tab in the tab module.

Once you save and preview your page you will now see that the contact form has been added inside your Tab modules 1st tab using the Divi shortcode generated by the Simple Divi Shortcodes plugin.

Wrapping up

If you need to add a Divi module inside another Divi module then using a shortcode is the easiest way to do so. There are several plugins available that a designed to do this, and also several of the multi-function Divi plugins that offer it as a feature too. There are a couple on the official Elegant Themes marketplace and on the official WordPress repository too. The Divi Space alternative would be a good option as it lists the shortcode in your Divi library so you don’t have to copy yourself via the layout URL as shown above, but either method is very simple.