Is there a better way to make your website look aesthetically beautiful than by adding a slider? I’ll let you think on that one for a second!
Sliders are inherently attractive, saves a lot of content that you could’ve needed, and it makes your site more engaging, lively and fun.
The thing is that even though sliders are great on their own, they do pretty much nothing if you leave them as they come from, in the default setting. Think of them like Thanksgiving, you wouldn’t do the turkey without the stuffing, right?
Check out these samples that we have for you and later let’s get started on making your own! 🙂
Sample Slider 1
Sample Slider 2
Sample Slider 3
Sample Slider 4
Suggested reading: The Elementor page builder vs the competition
All these sliders – some people also call them carousels – are super pleasant to look and they’re great at making that good first impression you want your visitors to have when they see your website. Obviously, what helps the most is to have good high-quality images that are properly optimized.
But, enough of that. Let’s just get started on how you can make sliders on Elementor
So, here we go! 🙂
Step 1: In your WordPress Admin, on the left menu, go to Pages > All pages. Look for the one you want to add a slider on and click on “Edit with Elementor”.
Step 2: Upon opening Elementor’s UI, either use the search bar and type “slides” or scroll down to the Pro widgets’ section.
Step 3: Go through the quick process of adding a section and then drag and drop the “Slides” widget to the middle of the section.
Step 4: After this, you will get a sample unedited slider with three slides.
Step 5: Right click on anywhere in the slider (could be the blue icon or anywhere else) and click on “Edit slides”. On the panel to the left, see the first tab where it says “Slides”. This is where you can both edit the three slides that come by default or add new ones. For this tutorial, I will stick with those three but you’re free to add how many slides you want. You can also set the height of your slider according to your desired height. I set mine to 500px to make things easier.
Step 6: Moving on, click “Slide 1 Heading” to edit.
Step 7: In here, you will be able to edit the background, content, and style of your slide.
a) Clicking on “Background” will display something not unlike the style tabs for sections and columns specifically on the background part, where you can decide if you want to add a color, colored gradient, image, video or slideshow. The only difference here is that, since we’re on the Slider widget, we can also add in some effects, like the Ken Burns.
b) Under the “Content” settings, you can edit your title, description and button text and link of your slider.
c) On the “Style” tab, you can edit other stuff like the positioning of your content and it’s alignment, the color, etc.
Step 8: Under “slider options” Settings > Navigation > there are choices for what kind of navigation you want. This tutorial will be set to arrows, but feel free to customize the other options according to your desired output.
Step 9: You can also explore the “Style” and “Advanced” settings to make your slider more beautiful and pleasing to look at!
Step 10: Save your work by clicking the button “Update” at the bottom.
You now got your base slider, now is the time for you to make your website shine by using your own style preferences in designing your sliders. Have fun experimenting!
Like I said previously in the post, to make amazing Elementor sliders – and virtually any slider for that matter – you need to have good imagery. These sliders excel at leaving a mark on your visitors when you have high definition images that you can properly optimize for web use without having them lose quality. I’ve seen some sliders done wrong due to having too many heavy images (I’m talking images from like 700kb and up) that impacted very negatively the loading of the website.