Hero Slider

The Slider Widget allows you to add, style, and manage a dynamic slider anywhere on your Elementor-powered page. It’s perfect for showcasing images, products, testimonials, or other content in a sliding format, with customizable navigation, animation effects, and responsive settings.

Whether you’re designing a homepage banner, product showcase, or testimonial section, the Slider Widget makes it easy to create an engaging and interactive experience for your visitors.

Key Features:

• Display a slider with images, text, or custom content
• Add navigation arrows, dots, or autoplay functionality
• Customize slide transitions, speed, and animation effects
• Style slider content, navigation, and layout
• Fully responsive and optimized

🚀 How to Enable the Slider Widget

To start using the Slider Widget, follow these steps:

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the Slider Widget from the list.
4. Toggle the switch to “On” to enable it.
5. The widget is now available in the Elementor editor.

🧩 How to Use the Slider Widget in Elementor

Step 1: Add the Widget to Your Page

• Open your desired page in the Elementor Editor.
• Search for “Slider” in the Elementor widget panel.
• Drag and drop the Slider Widget TP widget onto your page canvas.
• 🔄 Tip: It includes the TP badge, indicating it’s from the Topper Pack.

🖼️ Choose Button Style

• Select from multiple ready-made designs with unique button layouts.

Step 2: Configure Slider Settings

• Under the Content → Slider Items section:
  • Add slides by clicking “Add Item” to create multiple slides.
  • For each slide:
    • Upload an Image or add Custom Content (e.g., text, buttons).
    • Set Title and Description for the slide (optional).
    • Add a Button Text (e.g., “Shop Now”) and Button Link (e.g., a URL).
• Under the Content → Slider Options section:
  • Toggle Autoplay to “Yes” to enable automatic sliding and set Autoplay Speed (e.g., 3000ms).
  • Toggle Show Navigation Arrows and Show Dots to enable or disable navigation controls.
  • Set Slide Animation (e.g., fade, slide) for transition effects.

Step 3: Style the Slider Content

• Under the Style → Content section:
  • Adjust Typography for the Title, Description, and Button to set font size, weight, and style.
  • Set Color for the text and button elements.
  • Adjust Margin and Padding to control spacing within each slide (e.g., top, right, bottom, left).

Step 4: Style the Navigation

• Under the Style → Navigation section:
  • Customize Arrow Color, Arrow Size, and Arrow Position for navigation arrows.
  • Set Dots Color, Dots Size, and Dots Position for pagination dots.
  • Adjust Hover Effects for both arrows and dots.

Step 5: Style the Slider Container

• Under the Style → Container section:
  • Set Height and Width to control the overall size of the slider.
  • Set Background Type (e.g., Classic) and customize Background Color.
  • Adjust Border Type, Border Radius, and Box Shadow for the slider container.

✅ Final Preview and Save

Once your Slider Widget settings and style options are applied:

• Click Preview Changes to see how it looks.
• Hit Publish or Update to save your page.