Code by Day | Explore By Weekend

How To Add Shortcodes In Divi Tutorial by Pee-Aye Creative

How To Add Shortcodes In Divi

Learn how to add shortcodes from any plugin in the Divi Builder and place the shortcode a Divi module anywhere in your layout.

Add Shortcode In A Text Module

The Best Method For Adding Shortcodes In Divi

The best method we can use to add a shortcode anywhere in our Divi layout is to use the Text module. If this surprises you, just remember that the text module is bascially an HTML module. When you switch from the Visual tab to the Text tab within the Text module, you can seee the HTML markup.

To add your shortocode, just go to whichever WordPress plugin you have installed that generates the shortcode and copy it. Then go to your Divi Visual Builder and add a Text module. Paste the shortcode there, and your shortcode will render the design of the WordPress plugin features.

Styling The Shortcode

Depending on what the shortcode does or how it is made, you may be able to style certain parts of it using the Divi Builder. For example, if there are any headings or paragraph text elements, you  can use the settings in the Design tab to style those. All of these extra feature are why I rececommend using the Text module as apposed to the Code module.

Add Shortcode In Code Module

Alternative method For Adding Shortcodes In Divi

Another very limited method we can use to add a shortcode anywhere in our Divi layout is to use the Code module. I don’t know why you would want ot use this, but I’ve seen people who do, so here it is.

To use this module, just copy the shortcode from the WordPress plugin you are using that generated the shortcode. Then go to your Divi Visual Builder and add a Code module. Paste the shortcode there, and your shortcode will render the design of the WordPress plugin features.

1

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Vyshnav
Vyshnav
3 months ago

When i add a textbox and button using shortcode(written in functions.php) it always shows at the top of website, In divi visual builder it was placed at bottom, but regardless where it placed on visual builder on front-end it display on the top.

Vyshnav
Vyshnav

Thanks for the response, it was mistake in the shortcode i wrote.
I wrote shortcode without using ob_start()/ob_get_clean().
Your methods mentioned above works perfectly 😊😊

Dom
Dom
3 days ago

Hi Nelson,

How do you add a shortcode to a button module URL field? I have been using a work around by using a text module – styling the text to look like a button – but would prefer to use the button module.

Thanks

Last edited 3 days ago by Dom Powell

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Join over 4,200 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart