Complete Divi Shortcode Guide: Add, Style, and Troubleshoot

Shortcodes are a simple yet powerful way to add dynamic content to your Divi layouts. Whether you want to show Divi Layouts on non-Divi pages or any other custom content, shortcodes make it easy to do so without having to write any code. 

In this article, we will give you everything you need to know about Divi shortcodes and guide you through the process of how to add shortcodes in Divi and use them. 

Let’s get started!

What is Divi Shortcode?

Divi Shortcodes is a generated code in the divi library for a specific row, section, module, and layout you saved or uploaded. These shortcodes are typically enclosed in square brackets and serve as placeholders for more extensive code.

Take this code as an example,

• [: This indicates the start of the shortcode. 
• df_layout_shortcode: The “df” stands for DiviFlash, and “layout_shortcode” suggests that it’s used to insert a specific layout into a page or post.
• id=”277762″: This attribute specifies the unique identifier (ID) of the layout you want to insert. The number 277762 corresponds to a particular layout saved in the Divi library.
• ]: This marks the end of the shortcode.

The best part is, that you can display these divi library templates inside any module or non-Divi Builder page like WordPress pages, posts, and widget areas which eventually saves time.

How to Add Shortcodes in Divi?

Divi doesn’t display shortcode by default. You need to use specific plugins to render shortcodes in the Divi library. Here’s how to generate and then add shortcodes in your Divi layout,

Step 1: Generate Shortcodes Using the DiviFlash Plugin

To render a shortcode in Divi here, we are using DiviFlash; a premium plugin that comes with shortcode enable options. 

Let’s discover how to find the Divi library layout shortcodes using the DiviFlash.

• First, purchase the DiviFlash plugin from their websites.
• Then Install and activate the plugins just like any other WordPress plugin from the WordPress dashboard.
• Now, go to the DiviFlash Dashboard > Settings and find the “Divi Library shortcode” option. 

• Simply enable the option and we are done.

Now the shortcodes will be generated automatically in the Divi library.

Step 2: Copy the Shortcode from the Divi Library

DiviFlash allows you to use shortcodes within any of its modules, but you first need to add your layout to the library. Let’s say we want to display a List (Shortcode) inside the Advanced Divi Blurb Module of Diviflash To do so, 

• First, import the layout to the Divi library. 

• Now, to access the shortcode simply, navigate to the WordPress dashboard > Divi > Divi Library. There you will see a Shortcodes column with shortcodes for each saved template on the right side of the library items. All of them are auto-generated by DiviFlash.

• Finally, copy the shortcode by clicking on it.

Step 3: Paste the Shortcodes in Divi Builder

In the following section, we will paste the shortcode inside the Advanced Divi Blurb Module.

• Open a page or post with the Visual Builder where you want to paste the code.
• Next, insert a row and select the Advanced Blurb Module.

• Next, open the Blurb Module setting option and paste your copied shortcode
  into the content field. 

• It will now embed the template right away.

Note: If the layout doesn’t display correctly, adjust the width in the module settings.

How to Style the Divi Shortcode?

You can style parts of a shortcode in Divi, like headings or paragraphs, using the Design tab of the module. Also, you can apply custom CSS to design certain parts of the template.

Basic Styling Options

After adding your shortcode with the DiviFlash module, you can style any headings, paragraphs, and text elements using the specific Design tab options. This lets you adjust font size, color, spacing, and alignment.

Custom CSS

For more advanced styling, you can apply custom CSS. Here’s how to do it:

• Inspect the output of your shortcode (using browser developer tools) to determine the classes or IDs applied to the elements you want to style.
• Navigate to Divi > Theme Options > Custom CSS or use the Divi Builder’s built-in CSS options. Here’s an example of CSS you might add:

Example

If you’re using a Divi button shortcode within a module, you can style it as follows:

• Use the button shortcode in the module, such as
  .
• Navigate to Advanced > Custom CSS and add the following CSS code to style the button:

css

.et_pb_button {

    background-color: #0073e6;

    color: white;

    padding: 12px 20px;

    border-radius: 5px;

}

.et_pb_button:hover {

    background-color: #005bb5;

}

Divi Shortcode Use Cases

Divi shortcodes offer a versatile way to enhance your website by embedding complex elements and functionalities. Here are some common use cases for Divi shortcodes:

Divi Layouts on Non-Divi Pages

While Divi Builder is the most convenient way to add and use Divi shortcodes you can still use Divi shortcodes in non-Divi pages as well. Using the WordPress editor you can show any Divi layouts to a WordPress page or post.

Simply follow the steps to add a shortcode on non-Divi pages,

• Navigate to the post or page where you want to add the shortcode and open it with the Gutenberg editor.
• Click on the ‘+’ button and add the Shortcode Block.

• In the input field paste the shortcode, including the brackets.

• Preview and publish/update your changes.

Divi Layouts inside Divi Pages

There are lots of options if you want to show a Divi layout inside Divi page. You can, 

• Embed a contact form within any module or page layout. This is useful for placing forms in areas where a full module might not fit, such as within a tab or accordion module.
• Display image galleries anywhere on your site. This is ideal for showcasing portfolios or collections of images in a flexible manner.
• Place custom menus within content areas, such as sidebars or footer sections, without using the default menu locations.
• Add styled buttons within text areas or other modules to encourage user actions, such as downloads or sign-ups.
• Integrate WooCommerce products, categories, or cart functionalities into any part of your website.
• And many more.

How to View and Remove Divi Shortcodes?

To view and remove Divi shortcodes, you need to go back to the exact spot in the Divi Builder where you added them, whether it’s a section, row, column, or module. Once you find the shortcode in the content editor, you can delete it by removing the text inside the brackets [ ].

If you have multiple pages or posts with shortcodes, you will need to manually edit each one to remove the shortcodes. For bulk removal, you can use a PHP script to strip Divi shortcodes from your content. Here is an example,

function cl_save_clean_content( $content ) {

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

}

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

Note: Add this code to the end of your active theme’s functions.php file. This script uses a regular expression to find and remove Divi shortcodes when a post or page is saved.

While there are plugins available to help remove shortcodes, they can lead to unintended consequences. Additionally, editing the functions.php file for shortcode removal requires a higher level of technical knowledge. So we discourage to use these options.

Troubleshooting: Divi Shortcodes Not Working

If you’re experiencing issues with Divi shortcodes not working, here are some troubleshooting steps you can take to resolve the problem:

• Verify Shortcode Syntax: Double-check the syntax of your shortcode. It should be enclosed in brackets, for example, [your_shortcode]. Ensure there are no typos or missing brackets.
• Use Correct Modules: Ensure you are placing the shortcode in a module that has an HTML editor, such as the Text or Code module in Divi.
• Check Plugin Compatibility: If you’re using third-party plugins to generate or manage shortcodes, such as “Shortcodes for Divi” or “Simple Divi Shortcode,” ensure they are updated to the latest version.
• Inspect the Code: Use browser tools to inspect the HTML output of the page. Look for the shortcode’s output to see if it’s being rendered correctly or if there are any errors in the markup.

Best Divi Shortcode Plugins

If you’re looking to enhance your use of Divi shortcodes, DiviFlash is undoubtedly the best shortcode plugin for Divi. Also, there are several other plugins that can help you manage and utilize them more effectively. 

Here are some notable Divi shortcode plugins:

• DiviFlash: This is the best option for using Divi library shortcodes. All you need to enable the Divi library shortcode option from the setting. The plugin will handle the rest with its built-in shortcode extension. 
• Shortcodes for Divi: Shortcodes for Divi by WP Zone is a free shortcode plugin used to generate shortcodes for templates saved in the Divi library. 
• Simple Divi Shortcode: Simple Divi Shortcode Plugin is another free plugin that allows you to reuse Divi layouts, sections, and modules across different pages on your website.

Conclusion

In conclusion, adding shortcodes to your Divi Builder layouts is a simple and effective way to enhance your website’s functionality and create a more engaging user experience. 

By following the method above, you can easily add your Divi layout from the Divi library to any page, whether it’s a Divi or WordPress page. 

If you still face any issues please do let us know. Our dedicated team is always here to assist you.