Smart Slider 3 & Divi

In this article

Use the Smart Slider 3 Divi module

Smart Slider is great a great tool to create a full page Divi slider and replace Divi's own slider module. Watch the video to learn how to publish your sliders in Divi.

☝️ Note: The video was recorded using Smart Slider 3.3.x's interface, but the Divi module and publishing is the same in 3.4.x and newer versions.

Known Issues

Latest Divi Builder Experience

Our code was only made to be compatible with The Latest Divi Builder Experience. If you have this option disabled, use a code block with our shortcode in it.

Alias slide switching

Divi completely overrides the anchor behavior, which the alias slide switching uses. Because of this, the Alias slide switching can't work on Divi sites. But with some custom coding you can overcome this problem by adding et_smooth_scroll_disabled class to the element, which holds the anchor link. For example if you have the link inside our slider, you can write this code into the JavaScript callbacks field of the slider:

jQuery(function($) {
    jQuery(".n2-ss-slider *").addClass("et_smooth_scroll_disabled");
Divi Text module width Smart Slider ACF field

If you use ACF fields to display the slider using the Divi Text module the slider will appear wrong. This happens because either Divi or ACF runs some kind of code that filters our some of our essential codes after we added them.


  • Create a simple text field with ACF.
  • Put the slider's shortcode into this text field
  • Display this ACF text field in Divi's Text module

PHP publishing

☝️ Note: You could follow this documentation, too!
⚠️ Warning: We suggest creating a child theme and making the modifications there, to avoid losing the changes during the next theme update.

Divi by Elegantthemes is one of the most popular WordPress themes nowadays. In the following tutorial you can learn how to place Smart Slider 3's PHP code directly to the files of this theme.

What I wish to achieve is to have a Smart Slider 3 right above Divi's menu since my navigation bar is not fixed, which I can't access from the Divi builder (therefore the Smart Slider 3 module won't work), only by PHP code.

Finding code parts where the slider needs to be added - frontend

Each browser you are possibly using has some kind of developer tools that will allow you to inspect the HTML codes that are making the currently viewed page. Since I want the slider to appear below Divi's menu, I'll inspect the code around the menu. To do so, I'll have to right click around the menu (be careful not to choose any link accidentally) and from the menu appearing, I'll choose inspect element.

A new window will be shown containing tons of codes - which are making the page. The line where I hit the "Inspect element" will be higlighted.

When you hover over any codepart, it will be highlighted so you will know for sure what code is responsible for which part of your page.

Using this method, I learned that the menu is made by the <header> tag. I will need this info in the next step.

Finding code parts where the slider needs to be added - in the theme's files

For this step, you will need to connect to your site via FTP. Naturally, you can reach your theme's files from your WordPress dashboard, however, it is highly suggested not to use that when you are doing modifications like this one in your active theme.

Usually the codes that are making the menu can be found in the header.php file, so locate it in the following path: wp-content/themes/[your-theme]. In some rarer cases, the code you are looking for is not in the header.php file of the theme. If you can't find that codepart, look through your theme's files like this. Once you have the php file that has your code, you should open it using some simple text editor. Even your simple NotePad (or a more advanced version, NotePad++) is capable of opening and editing PHP files. Open the file and open a search box (hotkeys: CTRL + F on Windows, CMD + F on MAC) and type the codepart you found in Step 1.

I'll search for <header without the greater than but with the less than sign, as it is very rare that the greater than sign immediately follows the found codes. I'll find this code in line 204 of the header.php file: 

Pasting the PHP code

To be able to add the slider to the PHP file, you'll need to get it's PHP code first. Go to the Slider settings → General tab:

Click on the code within the yellow block and it will be selected immediately, then simply copy it.

Go back to the file where the code will be added, then paste it. Since I want the slider above the menu, I'll paste it above the <header line: 

Save the file and upload it back to your sever. If you would use any cache plugin or server side cache, clear them and refresh the browser in your site. You'll see that the slider appears in the exact position where you placed it.

Based on this tutorial, you will be able to put the slider into any place in your Divi theme.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.