How To Use & Customize Hero Slider Widget

With the Home Slider Widget, you can add stunning, animated sliders to your website, complete with text, images, and more without coding.

Follow the step-by-step instructions:

1. Go to Menu RTMKit.

2. And you will be able to see the Hero Slider Widget.

3. Click Add New Container.

4. Select your layout : Flexbox or Grid.

5. On the canvas select your structure.

6. Drag the widget from the Elementor.

7. Drop it on the selected area.

8. Content Hero Slider :

• Click Content → Content.
• Select Slide Style and Image Resolution
• Add your slider in repeater list, click Add Item to add more.

9. Setting Navigation :

• Click Content → Navigation.
• Click Yes to add icon navigation.
• Click Icon Library → Choose Icon → Click Insert.

10. Setting Button :

• Click Content → Button.
• Enable Button to show the button.
• Type the button text.
• Click Yes to add icon button.
• Click Icon Library → Choose Icon → Click Insert.

11. Setting Hero Slider :

• Click Content → Hero Slider.
• Setting your slider here.

12. Container Style (used to customize the container style) :

• Click Style → Container.
• Customize the padding and background color.

13. Image Style (used to customize the image style) :

• Click Style → Image.
• Customize the border, width, height, and radius.

14. Content Style (used to customize the content style) :

• Click Style → Content Style.
• Customize the horizontal, vertical alignment, spacing, padding, background color and opacity.

15. Sub Title Style (used to customize the sub title style) :

• Click Style → Sub Title.
• Customize the animation, typography, color, padding, radius, border, background color, icon position, spacing and icon color.

16. Title Style (used to customize the title style) :

• Click Style → Title.
• Customize the animation, typography, color, padding, and max width.

17. Description Style (used to customize the description style) :

• Click Style → Description.
• Customize the animation, typography, color, width, and padding.

18. Button Style (used to customize the button style) :

• Click Style → Button.
• Customize the typography, radius, padding, spacing, icon spacing, border, text, icon and background color.

19. Navigation Style (used to customize the navigation style) :

• Click Style → Navigation.
• Customize the alignment, spacing, icon size, radius, padding, icon and background color.

20. Don’t forget to click Publish to save the changes.