A Complete Guide on Divi Shortcodes (Beginner’s Guide)

The purpose of Divi shortcodes is to make it easy to add or reuse pre-designed layouts into your Divi and non-Divi pages. 

However, Divi does not have a built-in option to generate shortcodes for saved layouts.

To overcome this, you can use a plugin to generate and utilize the shortcodes for your design needs. We will show you the complete process by using a reputable plugin.

What is Divi Shortcode?

Divi shortcodes are unique snippets of code enclosed in square brackets, such as [dgat_layout_shortcode id=”279744″]. They act as placeholders for pre-designed elements, including layouts, sections, rows, and modules saved in the Divi Library.

When you install a shortcode generator plugin, it will create a shortcode column in your Divi Library. Inside the column, you will see shortcodes for all your saved elements.

Later, you can reuse these layouts throughout your site by simply inserting the corresponding shortcode. Once added, the shortcode automatically renders and displays the designated pre-designed layout from the Divi Library.

How to Add Shortcodes in Divi Builder?

To use shortcodes in the Divi Builder, you need to generate them with a plugin and then use them in the Visual Builder. Let’s take a look at the step-by-step process:

Step 1: Install and Activate the Plugin

To generate a shortcode for your saved Divi Library items, you need a plugin like DiviGear’s Advanced Tabs plugin. This one comes with a free shortcode extension for shortcode generation.

Follow these steps to install and activate the plugin:

• Go to Plugins > Add New > Upload Plugin.
• Select the “Advanced Tabs” ZIP file and click “Install Now.”
• After installation, click “Activate” to activate the plugin.

Note: The Advanced Tabs plugin is a premium product available for purchase from DiviGear or Elegant Themes.

Step 2: Generate Divi Shortcodes for Library Items

Navigate to the WordPress dashboard > Divi > Divi Library. You will notice a new column labeled “Shortcode” has been added.

If you have layouts saved in the Divi Library, you will see shortcodes for all of them in the “Shortcode” column. 

Alternatively, you can easily create a new layout and save it in the Divi Library to generate a shortcode for that layout as well.

As an example of adding shortcodes, we created a team carousel layout and saved it in the Divi Library. Here is how our pre-designed layout looks:

Step 3: Copy the Shortcode from Divi Library

To use your saved Divi Library layout in the Divi Builder, simply copy the corresponding shortcode from the “Shortcode” column.

Since we added a team carousel layout, a shortcode was generated automatically. Now we will copy it.

Step 4: Paste Your Shortcode to Divi Builder

You can paste your copied shortcode into a Divi page or post using any default or third-party module that has a text editor area.

To show you the process, we are going to add our pre-designed layout inside Divi’s Slider module. By default, there’s no option to insert a layout into sliders, but with shortcodes, it’s possible.

Here is the step by step instructions:

• Open the page/post in the Visual Builder where you want to add the shortcode.
• Add or edit an existing section and row, then insert the Slider module.
• Click on the settings icon for existing slides or select “Add New Slide.”

• Scroll down to find the text editor area within the “Content” tab and paste your shortcode there.

Once these steps are completed, the shortcode should render your pre-designed layout within the slider tab.

We have inserted our shortcode, and here is how it looks inside the slider tab.

By following this process, you can easily display your saved layouts in Divi using any module that has a text editor area. 

How to Style the Divi Shortcode

You can style certain areas of your pre-designed Divi Library layout by using Divi’s default design settings in the Design tab. For more custom control, you can also add custom CSS as well.

Here are the instructions for styling Divi shortcodes:

Basic Styling Options

When you add a shortcode with the slider module, you will have access to various styling options for body text. These options allow you to:

• Change text alignment
• Add text shadow
• Choose font type and style
• Select font color
• Adjust letter spacing and more.

You can also be able to use the spacing option to adjust margins and padding.

Additionally, if you go for other Divi modules, such as the text module, you will find additional options for headings, body text, spacing, and more. 

All modules that include a text editor provide similar styling capabilities through the module’s “Design” tab.

Custom CSS

You can achieve more styling freedom by adding custom CSS to a module’s “Advanced” tab. 

Here is how to do that:

What are the Divi Shortcode Use Cases?

Here are some common ways to use Divi shortcodes that make your website building and design more flexible:

Adding Divi Layouts on Non-Divi Pages

Remember we mentioned you can also be able to use Divi shortcode in non-Divi pages to show pre-designed layouts?

Now we will show you how to do that by adding a Divi shortcode in a WordPress post or page.

To add a shortcode on non-Divi pages, follow these steps. We will utilize the same shortcode that we previously used in the Divi Builder (

• Navigate to the page or post where you want to insert the shortcode.
• Select “Use Default Editor” and insert “Shortcode” using the block inserter.

• Paste the Divi shortcode that you have copied from the Divi Library.

• Next, click “Publish” or “Update” to save your changes.

Now simply preview or visit the page or post to ensure the Divi shortcode renders the premade layout.

Note: To add Divi shortcodes to any part of your site, including WordPress widgets, paste the shortcode into the text editor of the specific element.

Inserting Divi Layouts Inside Divi Pages and Posts

Divi shortcodes allow you to easily reuse pre-designed elements (layouts, sections, rows, and modules) saved in your Divi Library across your website.

Here are some common places where you can insert Divi shortcodes:

• Embed Contact Form: If you have a contact form layout saved in your Divi Library, you can use Divi shortcode to add it anywhere you want. For instance, you can add the contact form inside a tab module or an accordion module.
• Display image galleries: 
• Place custom menus 
• Add styled buttons 
• Integrate WooCommerce products, categories, or cart functionalities 
• Insert testimonials or reviews 
• Showcase pricing tables or service 

divi column shortcodes

divi contact form shortcode

divi gallery shortcode

divi icons shortcode

divi menu shortcode

divi section shortcode

divi shortcode button

divi slider shortcode

divi theme button shortcode

divi tooltip shortcode

divi woocommerce shortcodes

How to View and Remove Divi Shortcodes?

If you want to view and remove Divi shortcodes, you will need to return to the exact place where you added them. That means you have to navigate to the section, row, column, or module where you originally inserted the shortcode.

After going there, you can view and even if necessary delete them. But if you want to remove shortcodes in bulk, then you can use PHP script to remove shortcodes from your content.

Simply copy the script below and paste it at the end of your functions.php file. This script uses a regular expression to find and remove Divi shortcodes from your pages and posts:

function cl_save_clean_content( $content ) {

    return preg_replace( ‘/\[\/?et_pb.*?\]/’, ”, $content );

}

add_filter( ‘content_save_pre’, ‘cl_save_clean_content’, 10, 1 );

Note: Remember, editing the functions.php file is not recommended if you are not familiar with coding or comfortable with it. Otherwise, you risk breaking your site.

Why are Divi Shortcodes Not Working?

If you see plain shortcode text instead of the rendered content, it means there is a problem with one of the following:

• Syntax Errors: A small mistake like a typo or a missing bracket [ ] can prevent your shortcode from rendering its predefined content correctly. Therefore, always double check your shortcode before placing it.
• Incorrect Module: In Divi, paste the shortcode into the text editor area within the module. This text editor is basically a HTML editor that allows text input and includes various text-related settings options.

• Incorrect Block: While using Divi shortcodes on non-Divi pages (WordPress editor), you must use the “Shortcode” block. Using the “Code” block will not render the shortcode data correctly and will display it as plain text instead.
• Compatibility Issues: Always keep your Divi theme, builder, and third-party plugins up-to-date. That’s because outdated versions can lead to compatibility issues and prevent shortcodes from functioning properly.

Alternative Divi Shortcode Plugins

While we used DiviGear’s Advanced Tabs to show you how to add Divi shortcodes in a Divi website, there are other plugins you can try, such as:

• DiviFlash: It comes with a built-in shortcode extension that will create shortcodes for your library items. Besides that, DiviFlash has 60+ modules and 500+  free pre-built layouts to extend your Divi website’s functionality.
• Shortcodes for Divi and Simple Divi Shortcode: These free plugins are specifically designed to only generate shortcodes for layouts saved in the Divi Library.

Conclusion

Now you should have a decent idea about Divi shortcodes, how they work, and their different use cases.

Throughout this article, we have provided in-depth details so that even a beginner can confidently implement shortcodes. 

Simply get the DiviGear’s Advanced Tabs, which will automatically generate shortcodes that you can use anywhere you want (Divi and non-Divi pages). 

Note: If you find anything difficult while using Divi shortcode, let us know in the comments. We will be more than happy to assist you further.