How to Make Beautiful Sliders in Elementor - WpBuilt 1350476922971705623
How to Make Beautiful Sliders in Elementor

How to Make Beautiful Sliders in Elementor

  • Sophia Achamoth
  • April 24, 2019

What’s a better way to boost the design of your website than by adding a slider?

Sliders are inherently attractive, saves a lot of content that you could’ve needed, and it makes your site more engaging, lively and fun.

However, as much as a slider is great on its own, leaving it in default style is like eating food without condiments. It tastes good but you know it could taste better!

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

Isn’t these sliders pleasant to look at? If you don’t know, they’re really good in giving a powerful first impression and they could really contribute to the overall performance of a website.

Enough of that and…

Let’s get started! 🙂

Step 1. Got to Dashboard > Pages, select and edit the page that you want to add a slider.

Step 2. Upon opening the visual editor of Elementor, search “Slides” on the search bar.

Step 3. You can then drag and drop the “Slides” module to the middle section of the editor that says “Drag widget here”.

Step 4. Completing this will generate a sample unedited slider.

Step 5. Under “Edit slides” settings > Content > Slides is where you can add slides. Just click the “Add item” button. I only set mine to three slides for this tutorial but you’re free how many slides that 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: This is where you can edit the background, content, and style of your slider.

a) Under the “Background” settings, you can decide if you want to insert an image or just add a background color. You can also add effects to your background if that’s what you want.

b) Under the “Content” settings, you can edit your title, description and button text and link of your slider.

c) Under the “Style” settings is where you edit the style of your slider and just click the “yes” to custom. Now, you can set the position, alignment, and color of your content.

Step 8: Under “slider options” Settings > Navigation > there are choices for what kind of navigation you want. I set mine 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: To Save your work just click the button “Update” at the bottom. Never forget to save your work after finishing everything!

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!

How can we improve this guide? Please let us know in the comments section! 🙂

Leave a Reply


Get your FREE Web
Design Brief Template

Get your FREE Web
Design Brief Template