The Best Way To Add Shortcodes In your Divi Layout
If you are using any sort of WordPress plugin that generates shortcodes to be placed within your website, but you are using the Divi Theme and don’t know how to do that, then this quick guide is for you. I’ll show you the best way to add shortcodes in Divi using a module!
What Is A Shortcode?
A shortcode is a short piece of code, not the whole code. Usually a plugin that you install such as a slider or Instagram feed will tell you to place a shortcode on your page wher you want that particular feature to appear. The reason we use shortocodes is to make it easy for us. Instead of pasting the entire code of the plugin on the page, the plugin sits in the backend of your website doing the hard work while the shortcode sits on the frontend on the page telling the browser what to display based on that backend code.
Fun Fact: Believe it or not, Divi modules are just shortocodes too!
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.
I hope you have enjoyed learning How To Add Shortcodes In Divi. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂
Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
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.
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 😊😊
Actually the tutorial is not about creating shortcodes, but rather where/how to add them in Divi 🙂
Dom
on November 21, 2020 at 3:07 am
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.
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?
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)
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.
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?
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.
It might depend on what the shortcode is doing. If it is some kind of simple output then sure, but if it is something more then it would make more sense to just use two.
In this tutorial I will show you how to move the Divi Gallery module title and caption text over the image and add a nice hover effect.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
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.
I’m not sure how to help with that, I’d have to assume it was written wrong as normal shortcodes always work fine.
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 😊😊
Great to hear that you got it solved!
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().
Actually the tutorial is not about creating shortcodes, but rather where/how to add them in Divi 🙂
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
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?
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
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
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.
Thanks for the guide! Is it possible to add more than one shortcode to a single module?
It might depend on what the shortcode is doing. If it is some kind of simple output then sure, but if it is something more then it would make more sense to just use two.