The Hero Slider widget is a powerful and versatile Elementor widget that creates stunning, full-screen hero sections with smooth sliding animations. Perfect for showcasing key content, products, services, or promotional messages on your website’s homepage or landing pages.

Hero Slider Demo: https://turbo-addons.com/hero-slider/

How to Use the Hero Slider Widget #

Core Functionality

• Multiple Slides: Create unlimited slides with unique content for each
• Responsive Design: Fully responsive across all devices and screen sizes
• Smooth Animations: Built-in Swiper.js integration with parallax effects
• Auto-play Support: Automatic slide transitions with customizable timing
• Touch/Swipe Support: Mobile-friendly touch navigation

Content Options

• Background Images: Full-screen background images for each slide
• Rich Text Content: Title, subtitle, and description text
• Dual Action Buttons: Two customizable call-to-action buttons per slide
• Media Integration: Optional images or shortcode content
• Flexible Layouts: Multiple content arrangement options

Navigation & Controls

• Navigation Arrows: Customizable previous/next buttons with icon options
• Pagination Bullets: Clickable dot indicators
• Hover Effects: Show navigation on hover option
• Keyboard Support: Arrow key navigation

Getting Started #

Youtube Tutorial:

1. Adding the Widget

1. Edit your page with Elementor
2. Search for “Hero Slider” in the widget panel
3. Drag and drop it onto your page
4. The widget will appear with default sample slides

2. Basic Setup

1. Add Your Slides: Use the repeater control to add/remove slides
2. Upload Background Images: Set a background image for each slide
3. Add Content: Enter your title, subtitle, and description text
4. Configure Buttons: Set button text and URLs

Content Configuration #

Slide Content Settings

Background Image

• Upload high-quality images (recommended: 1920x1080px or larger)
• Supports JPG, PNG, and WebP formats
• Images automatically scale to fit the slider dimensions

Text Content

• Slide Title: Main heading for the slide
• Slide Subtitle: Secondary heading or tagline
• Slide Text: Descriptive paragraph content

Action Buttons

• Button One: Primary call-to-action button
• Button Two: Secondary action button
• Each button includes:
  • Custom text
  • URL/link destination
  • Link options (new tab, nofollow, etc.)

Media Options

• Show Image: Toggle to display additional images
• Slider Image: Upload supplementary images for the slide
• Show Shortcode: Enable shortcode integration
• Shortcode Content: Add any WordPress shortcode

Button Settings

Layout Controls

• Buttons Direction: Arrange buttons horizontally (row) or vertically (column)
• Justify Content: Align buttons left, center, right, or with spacing
• Align Items: Vertical alignment for column layout
• Buttons Gap: Spacing between the two buttons

Navigation Icons

Visibility Control

• Navigation Icons: Show or hide navigation arrows
• Custom Icons: Choose from FontAwesome or upload custom icons
• Previous Icon: Customize the left arrow icon
• Next Icon: Customize the right arrow icon

Styling Options #

Slider Wrapper Styling

Layout & Positioning

• Content Direction: Row, row-reverse, column, or column-reverse
• Content Justify: Horizontal alignment of slide content
• Content Alignment: Vertical alignment of slide content

Dimensions

• Width: Set slider width (px, %, em, vw)
• Height: Set slider height (px, %, em, vh)
• Padding: Internal spacing around content

Visual Design

• Background: Solid colors or gradients
• Border: Border styles, width, and colors
• Border Radius: Rounded corners
• Box Shadow: Drop shadow effects
• Background Overlay: Semi-transparent overlay on background images

Content Section Styling

Content Layout

• Content Gap: Spacing between content elements
• Content Alignment: Text alignment (left, center, right, justify)
• Width/Height: Content container dimensions
• Padding/Margin: Content spacing controls

Background & Borders

• Background: Content area background styling
• Border: Content container borders
• Border Radius: Content area rounded corners
• Box Shadow: Content area shadows

Content Media Styling

Image Controls

• Show Image: Toggle image visibility globally
• Width: Control image dimensions
• Responsive controls for different screen sizes

Typography Styling

Title Styling

• Typography: Font family, size, weight, line height
• Text Color: Title color customization
• Margin: Title spacing controls

Subtitle Styling

• Typography: Independent font controls
• Text Color: Subtitle color options
• Margin: Subtitle spacing

Paragraph Styling

• Typography: Body text font settings
• Text Color: Paragraph color
• Margin: Text spacing controls

Button Styling

Button One Styling

• Width: Button width controls
• Typography: Button text styling
• Padding: Internal button spacing
• Border Radius: Button corner rounding

Normal State

• Background: Button background colors/gradients
• Text Color: Button text color
• Border: Button border styling
• Box Shadow: Button shadow effects

Hover State

• Background: Hover background effects
• Text Color: Hover text color
• Border: Hover border changes
• Box Shadow: Hover shadow effects

Button Two Styling

• Independent styling controls identical to Button One
• Allows for different visual treatments (e.g., outline vs. filled)

Navigation Button Styling

Visibility & Behavior

• Show Navigation on Hover: Hide/show arrows on hover
• Background Color: Navigation button backgrounds
• Width: Navigation button size

Visual Design

• Border: Navigation button borders
• Border Radius: Navigation button corners
• Icon Size: Navigation icon dimensions
• Icon Color: Navigation icon colors

Positioning

• Vertical Position (Y): Top/bottom positioning of navigation
• Previous Button (X): Left positioning of previous button
• Next Button (X): Right positioning of next button

Pagination Bullet Styling

Visibility

• Display Bullets: Show or hide pagination dots

Normal State

• Width/Height: Bullet dimensions
• Background Color: Default bullet color

Hover State

• Background Color: Bullet hover color

Active State

• Background Color: Active bullet color

Best Practices #

🖼️ Image Optimization

• Use high-quality images (1920x1080px minimum)
• Optimize file sizes for web (under 500KB recommended)
• Maintain consistent aspect ratios across slides
• Consider using WebP format for better compression

📝 Content Guidelines

• Keep titles concise and impactful (5-8 words)
• Limit descriptions to 2-3 sentences
• Use clear, action-oriented button text
• Ensure text contrast against background images

🎨 Design Recommendations

• Maintain visual consistency across slides
• Use overlay colors to improve text readability
• Test on mobile devices for optimal experience
• Consider loading times with multiple high-res images

⚡ Performance Tips

• Limit the number of slides (3-5 recommended)
• Compress images before uploading
• Use appropriate image formats (WebP when possible)
• Test autoplay timing for user experience

Common Use Cases #

Business Homepage

• Company introduction slides
• Service highlights
• Team or office showcases
• Contact information with location

E-commerce Sites

• Product launches
• Seasonal promotions
• Brand storytelling
• Featured collections

Portfolio Websites

• Project showcases
• Skill demonstrations
• Client testimonials
• Service offerings

Educational Sites

• Course promotions
• Institution highlights
• Student success stories
• Program information

Troubleshooting #

Common Issues & Solutions

Images Not Displaying

• Check image file formats (JPG, PNG, WebP supported)
• Verify image URLs are accessible
• Ensure images are properly uploaded to media library

Slider Not Working

• Check if Swiper.js is loading properly
• Verify no JavaScript conflicts with other plugins
• Ensure Elementor is up to date

Mobile Responsiveness Issues

• Review responsive settings for each control
• Test on actual devices, not just browser resize
• Adjust font sizes and spacing for mobile

Performance Problems

• Optimize image file sizes
• Reduce number of slides
• Check for plugin conflicts
• Consider lazy loading for images

Technical Requirements #

WordPress Requirements

• WordPress 5.0 or higher
• Elementor Pro (latest version recommended)
• PHP 7.4 or higher
• Modern web browser support

Recommended Server Specs

• Adequate memory for image processing
• Fast SSD storage for quick loading
• CDN integration for global performance

Support & Updates #

The Hero Slider widget is actively maintained and updated regularly. For support, feature requests, or bug reports, please contact our support team through the official Turbo Addons website.

This documentation covers all features available in the Hero Slider widget. For additional customization options or advanced implementations, please refer to our developer documentation or contact our support team.