How to Integrate Master Slider with Divi Builder

Do you want to add a slider to your WordPress site? Typically, you need to install a slider plugin to do so. If your WordPress site is built with Divi Builder, you don’t need to install an additional plugin anymore as it has modules dedicated to creating a slider. But what if you have been using the Master Slider plugin before using Divi Builder?

No worries, you won’t lose the sliders you created with Master Slider. Instead, you can integrate them with pages (and theme builder templates) you create with Divi Builder. The integration is possible thanks to the Code module.

The Code module of Divi Builder allows you to add JavaScript, CSS, and HTML codes to a Divi Builder-powered page. In addition, you can also use the module to integrate any WordPress plugin that uses shortcodes, including the Master Slider plugin. As you know, the Master Slider plugin uses shortcodes to add a slider to a page.

How to integrate Master Slider with Divi Builder

Make sure you have installed and activated both Master Slider and Divi Builder on your WordPress site. Also make sure you already have at least one slider created with Master Slider. Once everything is ready, go to Master Slider -> Master Slider on your WordPress dashboard. Specify the slider you want to integrate with Divi Builder and copy its shortcode.

Create a new page (Pages -> Add New) and edit it with Divi Builder (or you can also edit an existing one). You can add the slider anywhere. Simply add the Code module (by clicking the grey plus icon) and paste the shortcode you have just copied to the Code field.

Creating a Full-Width Slider

If you want to have a full-width slider, you can use the Fullwidth section instead of the regular section (read our previous article to learn more about Divi Builder section). But first, you need to make sure that the slider you created with Divi Builder is fullwidth as well.

Add a new Fullwidth section on Divi Builder. To do so, simply click the blue plus button (or purple/yellow according to the last section type you added). Select the Fullwidth option. Next, add the Fullwidth Code module and paste the shortcode of the slider you want to add.

The Bottom Line

The Code module of Divi is designed to add code snippets to your website. The module supports JavaScript, HTML, and CSS. In addition to adding code snippets, you can also use the module to add shortcode. This means, you can integrate any WordPress plugin that supports shortcode with Divi via the Code module.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to start a profitable blog with WordPress? OF COURSE!

Leave a Comment

Want to outrank big websites on Google?

Without backlinks, without high DR, without digital PR. Just content optimization.

Click to enlarge.

Save your Divi assets to the cloud and access them from anywhere.
Hey 👋🏻
Got WordPress knowledge?
Why not turning it into profit? Click the button below to learn how.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.