DIVI code module tutorial

VIDEO TRANSCRIPT

In this tutorial, I’m going to be showing you how to use the Divi Code Module.

Now the code module is basically a blank canvas that allows you to put short codes or static HTML into your post. So instead of using a text module or adding it to some other module, this just gives you a complete blank slate. For example, if you are using a slider plug-in, a third-party slider plug-in and you would like to place their slider inside of Divi, well just input a code module, copy it and paste their short code and you are going to have their slider display beautifully.

You could even put it in a full width code module so there is a full width code module available as well. So if you’re using some other slider plug-in, and you want to have a full width slider that you think works a little better for your website than the Divi slider, just input a full width code module, copy and paste that short code in and it’s going to work great.

So that is what the code module is for.

I’m going to give you an example. So I’m using the bloom plug-in or bloom opt in email plug-in. And bloom lets you generate an email opt in form as a short code and put it anywhere on your website. So here I have a blog post and at the bottom of this blog post, I would like to invite people to sign up to my newsletter using bloom. And I can do that using the short code and the code module. So I’m going to head over to my dashboard and go to the bloom opt in forms.

And you can see that I’ve created an opt in form here. If you are not familiar with bloom, that’s okay, I’m just going here to grab the short code. So here’s the form I would like to add. I’m going to copy and paste this short code. So a lot of plug-ins work this way, they will generate short codes for you and you can place them on your site. So I’ve copy and paste that short code and now I’m going to edit the post and scroll down to the bottom, and I’m going to replace that call to action with a new section.

I’m going to input a single one column row and then I’m going to scroll down to the code module here. And there’s only one field in the code module which is the content. I’m going to copy and paste that short code, you can also adjust your admin label and CSS ID and CSS class if you like, but I’m not going to bother with that right now.

So I’m going to input my short code, update the page, and now when I refresh, you’re going to see that short code has been used to display my opt in form at the bottom of the page. So I am going to scroll down, I’m going to get the post here, and there you see the opt in form.

Yeah, so that’s a basic overview of the Divi Code Module that you can use input short codes and code anywhere that you use the Divi builder.