How To Find Divi Shortcodes

Learn where you can find the Divi shortcodes to apply it anywhere you want outside Divi Builder

Karen avatar
Written by Karen
Updated over a week ago


If you need to use Divi modules anywhere else outside the main content in your pages, you can copy the shortcodes that Divi generates and add them to the theme files or anywhere you need. 

A shortcode pair generate each Divi element. For example, a Section element is created by the following pair:  [et_pb_section] [/et_pb_section] .

Generally, sections contain some other parameters, so a real shortcode looks like this:

[et_pb_section background_color="#7cda24" border_width_all="3px" width="57%"] [/et_pb_section]

A Section contains one or multiple Rows.

A Row contains one or multiple Modules. Here are some examples of how other shortcodes look:

Row Shortcode:    
 [et_pb_row _builder_version="4.21.1"] [/et_pb_row]  

Module (Text module in this case) Shortcode:
 [et_pb_text _builder_version="4.21.1"]Your content goes here. [/et_pb_text]  

By default, the shortcodes are not visible. To get the shortcodes, you can follow these steps:

Step 1: Create the layout using Divi Builder by adding the module you want to get the shortcodes for;

Step 2: Save the changes and activate the default WordPress theme or any 3rd party theme in Dashboard > Appearance > Themes. If you are using Divi Builder Plugin, make sure it's disabled at this point.

Step 3: Load the page created in Step 1 on the front end.

Here is a screencast:

Once you get the shortcodes, you can add them to the any php files using the standard WordPress function called do_shortcode.

An example is:

<?php echo do_shortcode('[ADD DIVI SHORTCODES HERE]');?>

Did this answer your question?