Create Elementor Slider with Custom CSS.

Elementor Slider. The default Elementor Pro “Slides” widget doesn’t give you much control over the design of your image slider. Do you want to design a custom Elementor image slider? All you need is a bit of custom CSS code, and some inspiration. Modifying this code you can easily change the color and size of the arrows and move them around. The cool thing about this slider is that it is fully responsive and mobile friendly.

Keep in mind, if you’re adding custom CSS to a slider which is a part of a third-party Elementor Add-on (e.g. JetElements), you might need to go and pick the arrows classes using the Inspect tool.

Whether you are using Elementor PRO or some Elementor add-on, sit back, relax and learn how to create an Elementor slider in 15 minutes with this simple trick.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

We’ll show you how to set up a full-page slider if you want to have it in 2 column layout.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

1. Start out by dropping the slides widget into the section you need. 

How to Create a Basic Contact Form For Free Using WPForms WordPress Plugin

Jump to the preview and press F12 or just right-click and click “Inspect” to see the source code of the page > Hover over this arrow.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

2. Go down to the Styles tab > Copy the code of these arrows.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

3. Jump to the Elementor editor > Paste the copied portion of code. 

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

4. Open the curly brackets to write some styles for our arrows. 

5. We used white background color in this tutorial, but you can use any other color you like.

6. Set  the height and the width properties of the container itself, which wont affect the size of the arrows. 

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

7. You can change the size of the arrows in the Styles tab. 

Note that the size of a slider and its elements depends on the Viewport.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

8. Set the property top: 92.5% to move the arrows down, since our arrows have the position absolute as it is written inside the source code.

Note that you need to fine tune this percentage in order to avoid the overlapping of the arrow background when you move the elements with the absolute position.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

9. Copy the code of the arrows separately one by one and paste it below.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

10. Enter the right property 0% of extra space to stick the first arrow to the right edge.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

11. To stick the second arrow to the first one you need to use the left property 20% and the negative margin -10% . Update the page.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

12. We’ll use the media query to make our design responsive. Set the minimum width 996 pixels, so our code will work on the screen sizes bigger than this breakpoint. 

13. Put the code into the curly brackets > the media query will turn green.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020
Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

14. Now we’ll write the styles for the tablet devices. Copy and paste the arrows code with the property of the background color, as it remains the same.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

15. Set 70 pixels for the height and the width properties.

16. Use the top property of 50% to move the arrows to the middle of the slider.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020
Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

17. Put two slashes to disable the code that is written under the previous media query.

18. Finally we’ll write the styles for the mobile devices.  Copy the code snippets of the arrows one by one and paste them separately.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

19. Set the properties left:0% and right:0% correspondingly in order to move the arrows to the edges of the slider.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

20. Use the media query again and set the maximum width with the breakpoint 480 pixels.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

21. Copy the code snippet of the arrows and paste it in the curly green brackets of the last media query.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

22. Set the width and the height 50 pixels. 

Keep in mind that the touch targets on the mobile device have to be at least 40 pixels. Though, we shouldn’t make it too large so they don’t take up too much space covering other elements.

Create Elementor Slider with Custom CSS Wordpress For Free Guide 2020

23. Remove these two slashes and update the page.

Conclusion

You can easily adjust the slider to your layout design, change its dimensions for tablets and mobile devices or move it over to a two column layout, and that’ll require just some minor changes of the parameters.