Hey Divi People! This is John from Divi Ready Themes and in today’s tutorial, I will be showing you how to use ThemePunche’s Slider Revolution in your Divi Theme Template.
As of today, Revolution Slider is the #1 selling slider plugin on the market. With almost 300k sales of the plugin. That means a whole lot of websites are using the plugin.
This video will be more a slider revolution tutorial then it is a Divi tutorial – but you will see how well they play together while building a beautiful divi slider.
So, in this video, we will be creating a slider in Slider Revolution and inserting it into our Divi Layout via the Code Module. This will be the finished slider. This is what we are aiming for.
Let’s get started.
Before we do anything, we are going to need 3 images. Let’s go over to Photoshop. As you can see I have 3 images; A Laptop, an iPad and an iPhone. These are all transparent PNG files – we are going to need transparency in our slider.
Let’s head over to Slider Revolution.
This is the Slider Revo main screen. Here we can create a new slider, add a slider from a template or import a slider. I will be adding a link to this Divi Slider Layout that I will be creating. You can use it as a guide or starting point in your own project.
So, let’s start a new Slider.
Once in the slider settings, you have an array of different sliders you can set up. For this Demo, we will be using the default slider.
Next, we will give our slider a name. We’ll call it Home Page Slider. Then we’ll give it an alias, home-page-slider and you’ll see that it automatically generates the shortcode you will put into your code module.
Next is our Slide Layout. This is how it covers the screen. I usually just choose Full Width, because Slider Revolution is good about resizing to different screens. You can choose Auto or even Full-Screen layouts.
In the desktop section, we are going to enter our Layer Grid Size. I’m going to set it at 1440px by 600px. Leave all the other grid sizes on Auto. You can come back to this section once the slider is created and fool around with different sizes, so you can get the slider revolution responsive look you want on different mobile devices.
To the right, we have a whole slew of options – but for now, we will keep it simple. In the General Settings, you can set things like Stop Slide on Hover, shuffle. In the Default tab, you select the Slide duration other options. Navigation lets you choose your icons for navigating the slider. We are going to leave everything as is because these are the default settings. We can change those options within each individual slider.
Let’s go ahead and Save Settings.
Now let’s go to the Slider Editor. We are not going to worry about any of these extra settings. We want to go down and make sure our slider background is set to transparent. Now let’s go down to our slider window. This is where the slide is created. Basically, what you are going to do is create the finished slide first – and then add the animation.
Down below that we have the timeline. For any of you old timers, it’s a little reminiscent of the original Macromedia Flash. Keyframes and tweening and all that. I’ll show you how that works after we add our images.
But let’s do this first. I want to set up the page with the slider code, so I can keep going back to see how it is working. On the page lets start the Divi Visual Builder. Let’s add a full-section, full-screen code, and enter the shortcode for our slider. Now we can jump back every now and then to see how things are going.
Okay, so back in the Slider window. We are going to add a layer, image, and grab our laptop image. We are going to resize this and place it where we want it to end up and the end of our animation. With the image selected, we will set the animation to Long from Right, and set the easing to Sine.easeout. You can see the animation as we are changing the settings.
Now let’s go back and add our iPad. Click Add Layer, image and grab the iPad image. We are going to do the same exact thing. Resize and place it where you want it to end up. Okay now that we have that in place, let’s add the iPhone. Resize it and place it. Add the same animations.
Next, we will add some text. We are going to add a layer, text/HTML and I’m going to put BEAUTIFUL DIVI LAYOUTS. Let’s set the color to a dark gray, let’s set the font size to 70, the line height to 75 and a weight of 300. Let’s add another line of text, I’ll put WordPress, HTML, CSS Divi. Lastly, we are going to add a button. Just like Divi, Slider Revolution lets you style your buttons – although not to the extent that the Divi Button Module has – but good enough.
Now we are going to go back and add animation to the text and button. We are basically going to be using the same exact settings – only we will be coming in from the left. Since we are right on the edge, we will use Short from Left. Save everything and let’s go see what we have.
Lastly, we have to set the timeline. We are going to set the text to come out first. As you can see here, each asset has its own layer in the timeline. If we drag these boxes, we can set when it will start and how long the animation takes. So we’ll set the text to come one after another with a tiny delay. Then, just as the button slides out we start the laptop, then the iPad and lastly the iPhone. Let’s jump back to our Divi layout page and give it a refresh.
That looks pretty good.
Now to give it a little pizazz. I’m going to add a regular section with one regular row. Click the gear icon and change the background color to blue. Now we go into Design, and Spacing and give it a negative margin of around 200 – 225px. This gives the entire slider a very sleek look.
So there you go. A beautiful slider made even better with a little Divi touch.
I guess that’s it for the video. Don’t forget to check out our online shop for the best Premium Divi Child Themes and Divi Layouts at divireadythemes.com. Subscribe and save 25%.
If you liked this video and want to see more Slider Revolution and Divi tutorials, let me know down in the comments – and don’t forget to click the subscribe button.
This has been John, from Divi Ready Themes – and I’ll catch you on the next video.