

Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Add Shortcodes In Divi

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

▶️ Please watch the video above to get all the exciting details! 👆

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.

Categories: Divi FAQ Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

24 Comments

Comments By Others

  1. Amelie

    Hi there,

    I created a bunch of shortcodes in my child theme’s function.php and added them into text-modules on my Divi page. The shortcode output shows correctly within the divi visual builder, but on the live website the output doesn’t show at all. Do you have any idea why that might be and how I could fix it?

    Kind regards from Germany
    Amelie

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Amelie,
      I am not sure why it would not be showing on the frontend. I would expect this to be some issue with the code itself, and nothing related to how it is added or to Divi.

      Reply
  2. Zerocool

    Hi,
    You can use shortcode everywhere. I have add plugin to add snippet and create myselft my shortcode and call in divi code section.
    I prefere this solution with snippet , i d’ont touch the file function of the theme.

    Reply
  3. John

    Hi Nelson…. Is it possible to add a shortcode to a section background in Divi? Rather than an image, video, etc.? I have a mapping plugin that uses shortcodes, and I would like to use a map as a background with some text and an image over it.

    Reply
  4. Steve

    I’m using the plugin Ultimate Member which uses shortcodes in order to restrict content to logged in users. In order to restrict content within a page they say to “wrap the content” in the shortcode. For example:

    [um_loggedin show_lock=yes] This text can only be seen by logged in users [/um_loggedin]

    How would I wrap an entire page SECTION in this code?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      It sounds like they are asking about the content within a page or post rather than the entire page. They probably would have some other means of restricting the entire page, but you would need to ask them, this tutorial is more just about showing how to add shortcodes in Divi.

      Reply
  5. Alison

    I used this to add a subscribe via paypal button and it all works fine on the laptop but not on the mobile version – any ideas why?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Alison,
      I don’t think that would be related to adding the shortcode or Divi, it sounds like something to do with the actual functionality of the code behind the shortcode.

      Reply
  6. Steve McDonnell

    I used a Code block instead of a Text block because I am passing several string parameters to the shortcode that made it span multiple lines. Even though it was all one line with no line feeds, Divi was adding some HTML to some of the parameters (e.g., “”). When I used a Code block instead, I didn’t have that problem and it worked perfectly.

    Reply
  7. Aimi

    Thanks for the guide! Is it possible to add more than one shortcode to a single module?

    Reply
  8. Steve

    Thanks for the tutorial.

    I created a template in the theme builder for a product. I do not want to use the standard Woo Tabs as they are inadequate. There’s a tab plugin that generates a shortcode that I’d like to use for each product and it be unique for each product. The goal was to be able to do it dynamically.

    I have tried with ACF creating a custom field in almost every format (ie Text, text area wziswyg etc) for the field and added the shortcode to that field.

    I the theme template page I added a text module and added the dynamic field (shortcode) I created for the product, but no matter what I do, it doesn’t show up. Depending on the format of the field, it will show up as a bunch of commands, but not the Tabs from the shortcode. If I add a code module with the shortcode, the tabs show up.

    Is there a way to have the shortcode showu p dynamically on a Divi theme product page?

    Thanks for you wisdom in advance.

    Steve

    Reply
    • Hemant Gaba

      Hi Steve

      The approach of using a Custom Field to provide information is correct but as you are using a tab plugin to generate a shortcode so I guess it will not take into account the information present in the Custom field and will show the general result. To achieve the results you need to write the Custom PHP code to show the tabs. In that code, you need to manipulate the value of the Custom field in such a way that it should change the content inside the tab with the change in the information of the Custom Field. After that, you need to put that code in the function to create a shortcode and then use this shortcode inside the Code Module to showcase the results on the frontend.

      Let us know if that helps.

      Reply
  9. Dom

    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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Dom,
      I don’t know what you mean about adding a shortcode to a button URL field. That doesn’t really make any sense. Can you explain what you are trying to occomplish?

      Reply
      • Dom

        As an example I recently helped a friend with his site which uses the GloriaFood.com food menu system. They give you the option to use a button they have created to show a pop-up food / takeway menu. As their button was very different from the divi buttons he has on his site, and their styler is very basic, I tried to add the shortcode they provide to a divi button URL field (also removing their class glf-btn-basic)

        [restaurant-menu-and-ordering class=”glf-btn-basic” ruid=”xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”]

        It did not work so I had to create a button using a text module, using the shortcode as the URL, and it worked fine. My question is, is their anyway to add shortcodes like this to the divi button module URL field. It obviously calls up a javascript popup menu and then populates it with the menu items via the ruid number.

        https://www.gloriafood.com/restaurant-ideas/add-online-ordering-button-wordpress

  10. Vyshnav

    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.

    Reply
      • 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 😊😊

      • Stephen

        YES! I was stuck on this problem as well. You might want to update the article to specifically talk about ob_start()/ob_get_clean().

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart