Amazing Elementor Sliders: How to make them

Elementor sliders - and virtually any slider for that matter - work best when you have good imagery and they sometimes excel when you have high definition images that you can properly optimize for web use without having them lose quality.
Share on facebook
Share on linkedin
Share on pinterest
Share on reddit

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

sliders on elementor

Sample Slider 2

elementor carousel

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.

amazing elementor sliders

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!

Final Words

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.

Do you want powerful hosting?

Kinsta’s hosting solution will give you an incredible loading time, bar none. With their amazing server infrastructure, attentive customer support and just great user experience all-around, hosting your website with Kinsta will be a delight.

Leave a Reply

Your email address will not be published. Required fields are marked *

  • home
  • Contact
  • Agency Plans

Want to learn about Elementor, web hosting, page speed optimization or web design? Click the button below to view all the articles!

Are you looking to redesign your website? build one from scratch? Or you just simply want to optimize it? Whatever your answer is to any of those questions, I can help you! Click the button below and fill up the form to contact me

Are you an agency owner overworked with web design clients? No need to worry about that anymore! Take a look at my agency plans for website design & development.
backgroundLayer 1

Home

The right clients, at the right price, anytime you want.

About

It takes 3 things for a program to create life-changing results.

Team

We have the skills you need to build a multi-million dollar business.

Contact

Helping coaches & thought-leaders all over the world.

You could use this for a mission statement or something else about your business that could really help people know more.

Navigation Menu

Newsletter (this is pretty important here!!)

Sign up to our newsletter

This guide is included in all template purchases, but you can get it here if that's what you only want