Smart Slider 3 & Divi

Use the Smart Slider 3 Divi module

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

The simplest way to publish your sliders is using Smart Slider Divi module:

as you can see on the video below.

Known Issues

Smart Slider update made slider disappear

Cause

This problem happens, because of a Divi issue we had to fix. In Divi if you insert a module, that has a default value. In our case that was the last slider. If you haven't selected a different slider and saved on your page, Divi didn't saved that slider, but it actually saved that the default value is being used in that module. Because of this, when you created a new slider, that became the "default slider" and replaced the previously inserted module's slider.

The fix for this issue is, that we enforce everyone to select a different slider from the default. To do this, we modified our default value to "None". This is why the default sliders disappeared.

Solution

Enter your page in Divi builder -> reselect your slider in the Smart Slider module, where it is missing -> save on the page.

If you cannot find your empty Smart Slider element, then on the bottom left, Divi offers a Wireframe view option, which shows all modules of your page.

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 is used by the alias slide switching too. Because of this, the Alias slide switching can't work on Divi sites. But you can overcome this problem by adding et_smooth_scroll_disabled class to the element, which holds the anchor link.

So go to your anchor link holding element's settings -> Advanced -> and write this into the CSS Class:

et_smooth_scroll_disabled

You could also just turn off Divi's smooth scrolling.

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.

Workaround:

• 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

Device specific content

Smart Slider is not compatible to be used with the device specific content Divi offers.

PHP publishing

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.

1

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.

2

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: 

3

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.