Divi's code module

Procédure

Divi builder is included in ourWordpress web hosting packages. If you would like support for DIVI builder, you must subscribe to a licence directly on the Elegent theme Divi website.

Introduction

LWS offers 3 premium plugins from Elegant Themes (Divi, Bloom and Monarch). These are regularly updated. Once you are an LWS customer, you will have free access to these plugins by choosing the 'Divi Builder' distribution when installing the Wordpress CMS with our Auto-Installer.

If you have a cPanel package or have already installed Wordpress with this distribution, but do not have access to all the themes or updates, please let us know by giving us the access details for the administration area of your Wordpress site so that a technician can update the licence.

Please note: you will need to take out an Elegant Themes licence to benefit from support. LWS does not provide support for these products.

What is the Divi Code Module?

The Code module is a blank canvas that allows you to add code to your page, such as plugin shortcodes or static HTML. If you want to use a third-party plugin, for example a third-party slider plugin, you can simply place the plugin's shortcode in a standard or full-width code module to display the element unobstructed.

How to add a code module to your page

Before you can add a code module to your page, you'll first need to switch to the Divi Builder. Once the Divi theme has been installed on your website, you'll notice a Use Divi Builder button above the post editor every time you create a new page. Click this button to activate the Divi Builder, giving you access to all of its modules. Then click on the Use Visual Builder button to launch the builder in visual mode. You can also click the Use Visual Builder button while browsing your website at the front if you are logged into your WordPress dashboard.

Once you have entered Visual Builder, you can click on the grey + button to add a new module to your page. New modules can only be added within rows. If you are starting a new page, don't forget to add a row to your page first.

Locate the code module in the list of modules and click on it to add it to your page. The list of modules is searchable, which means you can also type the word "code" and then click the enter button to find and automatically add the code module! Once the module has been added, you will be greeted with a list of options for the module. These options are separated into three main groups: Content, Style and Advanced.

Example use case: Adding an external style sheet to animate the content of an individual page

In this example, I'm going to add a link script to import Animate.css in order to add animation effects to the page elements. As the Animate.css file has a lot of code, it makes sense to load it only on the page I need.

Simply add a regular section and a full-width row (1 column) and add the Code module.

In the content text box, add the code snippet.

Now all you have to do is add some CSS classes to animate any element of your CSS classes page to your page. In this example, I'm going to make the button bounce when the page loads.

In the button module settings, on the Advanced tab, enter the two classes "animated" and "bounce" in the CSS class text box.

The button will now bounce when the page loads.

Here are a few more examples of how you can use the code module:

1. Add blocks of javascript code or libraries that only apply to your page.
2. Integrate third-party plugins such as the revolution slider.
3. You can use the full-width code module to integrate a standard form for more interactive questionnaires, contact forms, etc.
4. Add a floating action menu
5. Create a sliding top bar ad.
6. Add a floating action button.

Tip: Sometimes adding code with line breaks will cause the code not to work. It's best to create your code in a text editor and concatenate it (all on one line) before pasting it into the Code module.

Video presentation of the Divi code module

Conclusion

Thank you for following this tutorial!

The Code Module is another way to personalise and liven up your website by adding this dynamic touch.

See you soon for another tutorial ;)

To find out more about Elegant Themes Divi and how to use it

Divi's comments module

Managing Divi's contact form module

> Consult our Elegant Themes Divi help section