Before Divi 2.4 if you wanted to add shortcodes to your pages you had to use the text module. The Text Module is a super useful Module but it has much more functionality than you need to just add code. And if you wanted to add shortcodes to a Fullwidth Section… you couldn’t even use the Text Module.
Both of these issues have been solved in 2.4 with the introduction of not one, but two Code Modules: the Standard Code Module and the Fullwidth Code Module. These Modules allow you to integrate shortcodes, for both third party and Elegant Themes plugins, into the Builder.
This is the fifth in a series of posts designed to help you become familiar with the new features of Divi 2.4, to give you ideas on how and where to use them in practical web design situations and to provide you with resources to help build your Divi Library.
Be sure to check out the other posts in this series:
All you need to know about Global Library Items
Advanced Design Settings and a FREE Library Pack
Create gorgeous Blog Posts with the Divi Builder
Get creative with Divi ‘s new Footer Layouts
My Affiliate Links Disclosure
Hi everyone. Just to let you know that many of the links on this site are my affiliate links. What that means is that if you click one of them and buy something… I get a commission. It doesn’t cost you anything extra and I only recommend things that I’ve tried and tested, so please, please, please… use my links.
So what is the Code Module?
In a nutshell, the Code Module allows you to add code to your pages and posts in the form of shortcodes or static HTML.
If you want to use a third party plugin, such as a slider plugin or a grid gallery plugin, you can simply place the plugin’s shortcode into a Standard or Fullwidth Code Module to display the item.
This video by Nick Roach of Elegant Themes runs you through the Code Module and shows you how to add a subscribe form to the bottom of a page using the Elegant Themes Bloom email optiin plugin shortcode.
Now that you know what the Code Module is all about, let’s take a quick look at adding it to a page / post and configuring it and then we’ll look at two real world examples.
The first example uses the Revolution Slider, a third party plugin, and the second one uses the Bloom email optiin plugin by Elegant Themes.
Adding and configuring the Code Module
Whenever you add a new Module to a Column or a Fullwidth Section, the new Code Module (Standard or Fullwidth) will be displayed in the list of available Modules.
The Code Modules provide you with a location to add your shortcodes and/or HTML, and there is only a single text field inside the module settings (plus the Admin Label, CSS ID and CSS Class options that all Modules have).
The Code Module Options
As you can see from the screenshot, the Code Module has four settings:
- Content – this is where you add your shortcode or HTML.
- Admin Label – give the Module a name for easy identification in the Builder.
- CSS ID – a CSS ID entered here can be used to create custom CSS styling, or to create links to particular sections of your page.
- CSS Class – CSS classes entered here can be used to create custom CSS styling. Multiple classes should be separated with a space.
Third party plugin integration – Slider Revolution plugin
Combining Divi with your own favourite plugins is a powerful way to increase the functionality of the Builder and in this example we’ll take a look at using the popular Slider Revolution plugin to create a Fullwidth slider.
When you create a new slider with Slider Revolution it generates a shortcode, which can be used to add your slider to any post or page on your site.
Using the Fullwidth Code Module in combination with Slider Revolution’s shortcode, you can create a custom slider and still maintain all of the features of Divi.
All you have to do is paste the shortcode into the Code Module text field and click save… and you’re all done!
Using a Fullwidth Code Module inside of a Fullwidth Section ensures that the slider extends the full width of the page and fits perfectly into your Divi layout.
Once it’s all set up, it’s hard to tell that the slider has been generated by a third party plugin, since it has been placed within the Divi Builder.
Elegant Themes plugin integration – Bloom email opt-in plugin
Of course the plugin doesn’t have to be a third party one, you can use Elegant Themes’ own plugins such as the Bloom email opt-in plugin.
Bloom has various integration methods one of which is shortcode integration. Using the shortcode in combination with Divi’s Code Module, you can be more strategic about where your opt-in forms appear. You might find you get more conversions when the opt-in form is placed at certain points throughout your page / post.
Once you’ve created your Inline Opt-In form, copy and paste the shortcode into the Divi Code Module.
This example uses a Standard Code Module inside a Specialty Section, instead of the Fullwidth Code Module used for the Slider Revolution integration example.
If you place this new section below the slider on your homepage, users will see the opt-in form straight away. It also allows you to enhance the opt-in form with a few informational blurbs to the left.
Using this technique, you can place individual opt-in forms anywhere on your site and tailor them to the page content and you visitors’ interests.
Start integrating your own favourite plugins into Divi 2.4’s Builder
If you’ve been holding back from using Divi because you thought that you couldn’t use your own favourite plugins with the Divi Builder… then it’s time to think again.
Divi 2.4’s Code Modules now make it easy to seamlessly integrate third party plugins such as Revolution Slider, Essential Grid or any other plugin that generates a shortcode. And once the setup is complete, it’s almost impossible to tell that a third party plugin has been used.
If you’d like to start using Divi, and still use your favourite plugins, then sign up with Elegant Themes, download your copy of Divi and start adding your shortcodes to those awesome Code Modules.
We like to think of Divi as a great all-in-one solution, but that doesn’t mean you can’t use third party plugins every once in a while!
In fact, it’s the WordPress community and the thousands of free and commercial plugins available to it that make WordPress so great.
The examples above are just a few possibilities out of thousands, so feel free to experiment!
Nick Roach – Elegant Themes
I hope that you enjoyed the post and that it’s given you a few ideas for using Divi 2.4’s Code Modules for adding shortcodes, from your favourite plugins, to your pages and posts.
if you have any thoughts about Divi 2.4’s new features in general or the Code Modules in particular, then please leave a comment and if you’d like to spread the word about this fabulous Drag and Drop theme, please use my social sharing icons below.
Credits:
My thanks and gratitude to Elegant Themes for the graphics and details of Divi 2.4’s Code Modules used in this post.
