The advanced slider widget of ElementsKit empowers you to create advanced-level sliders. BY advanced level, we mean you can create any design you want to using the Elementor page builder.
Basically, with this slider, you can have the flexibility you get while creating a page in Elementor except now you can use that flexibility to create amazing sliders.
How to add Advanced Slider in Elementor in 6 steps #
Learn how to add advanced Slider in Elementor using ElementsKit Advanced slider in just 6 steps.
Step 1: Enable the Advanced slider widget of ElementsKit #
Navigate to ElementsKit ⇒ Widgets, turn on the Advanced slider widget and click on Save changes.
Step 2: Drag and drop the Advanced slider widget #
Go to the page where you want to add an Advanced slider and click on edit with Elementor to edit the page with Elementor page builder. Then search for “Advanced slider”, and drag and drop the widget with the Ekit Icon.
Step 3: Add slider #
By default you will get two sliders, you can always add new sliders. To add a new slider, just click on the +ADD NEW icon. Once the slider is added you can rename it.
Step 4: Add Contents to Sliders #
Now it’s time to add content to your slider. For that hover over the widget, here you will find the button navigator which you can choose to select a specific slider. Then click on the first edit icon to edit the slider. In case you want to edit the widget settings then click on the second edit icon.
Once you click on the edit icon to add content, you should see a new window with the same Elementor page builder interface. Here you can select any layout and add content just like you do while building a page. Once you create and customize your slider, click on update to save then click on the X icon on the top right corner to close the window.
Now add contents to all the sliders using the same process. Choose the slider from the navigator, then add contents.
You can also add the ready section by ElementsKit. For that, once the widget window opens, click on the Ekit icon. You will find a new window with all the premade pages, templates, and sections of ElementsKit.
Go to the Section tab, hover on the section you like and to add it to your slider click on insert. Once the section is inserted you can customize it and then click on update to save.
Follow the above-mentioned steps to add content to all your slides.
Step 5: Customize the style settings #
To customize the slider pagination style click on the Edit icon to edit the entire widget, then move to the Style Tab. Here you can customize the following options:
- Make Pagination Vertical: Select yes from the dropdown to make the pagination vertical.
- Pagination Background Color: Choose a custom color for the pagination background.
- Size of Bullet Point (px): Choose the size of the pagination bullet.
- Pagination Alignment: You can place the pagination on the left, right, or center.
- Bottom To Top (px): Choose the position of the pagination. This value will be based on the distance from the bottom.
- Border Radius: Customize the border-radius.
- Pagination Gap (px): Select how much gap you want around each bullet of the pagination.
Step 6: Update and See the preview #
Finally, click on Update to save the page and click on the preview button to use an advanced slider in Elementor like the one shown below:
