Smart Slider 3 & Divi
In this article
Use the Smart Slider 3 Divi module
The simplest way to publish your sliders is using Smart Slider Divi module:
as you can see on the video below.
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 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:
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.
- 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
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 + Fon Windows,
CMD + Fon MAC) and type the codepart you found in Step 1.
I'll search for
<headerwithout 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
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.