Create Stunning Sliders in Elementor

Create Stunning Sliders in Elementor

Table of Contents

1. Introduction
2. Designing the Capsule Card
3. Turning the Card into a Carousel
4. Adjusting the Carousel Settings
5. Customizing the Carousel Navigation
6. Editing the Content of the Carousel
7. Checking Responsiveness
8. Conclusion

Introduction

In this tutorial, we will learn how to Create a slider or carousel using Elementor page builder. We will design a capsule card and then turn it into a slider without using any extra plugins or custom code. The carousel will have swipe functionality, navigation arrows, and bottom dots as a navigator. The tutorial is divided into several steps, starting with the design of the capsule card and then progressing to creating the slider. Let's get started!

Designing the Capsule Card

To start, we will create a section and a column using Elementor page builder. We will add padding, set the background color, and Apply border radius to make the column look like a capsule. Inside the column, we will add an inner section and add content such as a heading, Paragraph, and button widget. We will style the content and adjust the margins and padding. Once the design is complete, we will save the template for later use.

Turning the Card into a Carousel

Next, we will create a new section and column in Elementor page builder. We will set the minimum Height and apply a gradient color to the section. Then, we will add the testimonial carousel widget to the column. We will adjust the number of slides per view and remove unnecessary items. Instead, we will use the shortcodes of the saved templates to insert the designed capsule cards into the carousel. We can add as many cards as we want by copying and pasting the shortcode.

Adjusting the Carousel Settings

After inserting the capsule cards, we will make some adjustments to the carousel settings. We will remove the default padding and gaps between the slides to create a seamless look. We can also enable or disable the navigation arrows and pagination dots Based on our preference. The size and color of the arrows and dots can be customized to match the design. Once the settings are adjusted, we will save our work.

Customizing the Carousel Navigation

In this step, we will Show how to customize the navigation arrows and pagination dots of the carousel. We can change the size and color of the arrows and dots to fit the design. By adjusting the settings under the content and style tabs of the testimonial carousel widget, we can easily control the appearance of the navigation elements. Once the customization is complete, we will update and save our work.

Editing the Content of the Carousel

If we want to change the images, titles, or any content within the carousel, we can do so by editing the saved templates. We will go back to our saved templates in Elementor and make the necessary changes to the content of each card. This can include modifying the text, replacing the images, or updating the styling. Once the changes are made, we will save the templates again and see the updated content in the live preview.

Checking Responsiveness

To ensure that our carousel looks good on different devices, we will check its responsiveness. We can do this by previewing the page and shrinking the browser width to simulate different screen sizes. We will make adjustments to the number of slides per view for tablet and mobile devices to ensure optimal display. By testing the carousel on different screen sizes, we can ensure that it looks and functions properly on all devices.

Conclusion

In this tutorial, we learned how to create a slider or carousel using Elementor page builder. We designed a capsule card and turned it into a slider by inserting the card templates into a testimonial carousel widget. We customized the carousel settings, navigation elements, and content as per our requirements. We also checked the responsiveness of the carousel to ensure it looks good on different devices. By following these steps, You can easily create a stunning and responsive carousel for your Website using Elementor.