Pace Slider

How to use Pace Slider Widget of Sky Addons for Elementor

Sky Addons Pace Slider Widget offers a modern, sophisticated slider solution with synchronized thumbnail navigation. It’s perfect for portfolios, showcases, and product galleries, enabling users to create stunning visual presentations with smooth transitions and interactive elements. The widget combines a full-size slider with a customizable thumbnail strip, giving your website a premium, professional appearance.

Key Features:

1. Synchronized Main Slider with Thumbnail Navigation
2. Fully Responsive and Mobile-Friendly Design
3. Custom Navigation Controls with Icon Selection
4. Multiple Content Positioning and Alignment Options
5. Independent Styling for Main Slides and Thumbnails
6. Customizable Button/Link for Each Slide
7. Autoplay with Speed and Pause Options
8. Various Animation and Transition Effects

Insert Pace Slider Widget

1. Open Elementor Editor. In the Elementor panel, search for “Pace Slider”
2. Drag and Drop the Widget to the desired location on your page / editor.

Sliders Section

Add Slider Items/slides by clicking the “Add Item” button. Each slide can have a title, image, and link. Configure your slider content with these options:

1. Title – Add a title for each slide that appears in the main slider.
2. Alternative Thumb Title – Optional different title for the thumbnail view.
3. Text – Add descriptive content that appears below the title in the main slider.
4. Image – Upload an image for both the main slide and thumbnail.
5. Link – Add a URL to make the slide clickable to any destination.

Slider Layout Section

Customize the structure and appearance of your slider:

1. Height – Set the overall height of your slider.
2. Image Size – Choose the appropriate image size for optimal performance.
3. Title HTML Tag – Select the appropriate heading tag for SEO.
4. Content Position – Position your content within the main slider.
5. Content Alignment – Align text left, right, center or justified.
6. Content Width – Control the maximum width of your content area.
7. Thumbnail Position – Choose where thumbnails appear relative to content.
8. Show Title – Toggle visibility of titles in thumbnails.
9. Show Button/Link – Toggle visibility of action buttons.
10. Show Navigation – Toggle navigation arrows.

Button / Link Section

Customize the call-to-action for each slide:

1. Button Text – Change the text displayed on the button.
2. Icon – Add an icon before or after the button text.
3. Icon Position – Position the icon before or after the text.
4. Icon Spacing – Adjust spacing between icon and text.

Slider Settings Section

Fine-tune the slider behavior:

1. Columns – Set how many thumbnails appear in each row.
2. Autoplay – Enable automatic advancing of slides.
3. Autoplay Speed – Set the time between automatic transitions.
4. Slide Speed – Control the speed of slide transitions.
5. Pause on Hover – Stops autoplay when user hovers over slider.

Navigation Section

Customize the navigation controls:

1. Prev Icon – Select a custom icon for the previous button.
2. Next Icon – Select a custom icon for the next button.

Style Customization

The Pace Slider offers extensive styling options with separate controls for the main slider, thumbnails, buttons, and navigation elements, allowing for complete visual customization to match your site’s design.

Slider Style Section

Customize the appearance of the main slider:

1. Image Overlay – Add a color overlay to slider images.
2. Padding & Margin – Control spacing around content.
3. Background – Add background colors or gradients.
4. Title Typography – Customize font, size, weight and spacing.
5. Title Color – Change the color of slide titles.
6. Text Typography – Customize font settings for descriptive text.
7. Text Color – Change the color of descriptive text.

Slider Thumbs Style Section

Customize the appearance of thumbnail navigation:

1. Image Overlay – Add a color overlay to thumbnail images.
2. Line Style – Customize separator lines between thumbnails.
3. Title Typography – Adjust font settings for thumbnail titles.
4. Title Colors – Set different colors for normal, hover and active states.
5. Background – Add background colors or gradients to thumbnails.

Button / Link Style Section

Style the call-to-action buttons:

1. Padding – Adjust internal spacing of buttons.
2. Typography – Customize font settings.
3. Border – Add and style button borders.
4. Border Radius – Round the corners of buttons.
5. Colors – Set text and background colors for normal and hover states.
6. Shadow – Add text and box shadows.
7. Hover Animation – Add interactive effects on hover.

Navigation Style Section

Customize the navigation arrows:

1. Size – Adjust the size of navigation arrows.
2. Spacing – Control distance between navigation elements.
3. Padding – Add spacing inside navigation buttons.
4. Border – Add and style borders around navigation.
5. Border Radius – Round the corners of navigation buttons.
6. Colors – Set colors for normal and hover states.
7. Background – Add background colors or gradients.
8. Shadow – Add text and box shadows.

Save and Preview

1. Once you’ve customized and styled your slider, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. Images Not Loading Properly: Ensure your images are properly optimized and in the correct format (JPG, PNG). Try selecting a different image size from the Image Size settings.
2. Autoplay Not Working: Check if “Pause on Hover” is enabled and if you’re hovering over the slider. Also verify you’ve set a reasonable autoplay speed.
3. Mobile Display Issues: Adjust the responsive settings for columns and heights to optimize for mobile devices.
4. Navigation Arrows Not Visible: Verify that “Show Navigation” is enabled and that your selected icons are available in your current icon library.
5. Performance Issues: If the slider feels sluggish, try reducing the number of slides or optimizing your images further.

Conclusion

The Pace Slider widget is a versatile and powerful tool for creating engaging, visually appealing content slideshows on your website. With its dual slider-thumbnail approach, it provides a professional navigation experience that keeps visitors engaged with your content. The extensive customization options ensure it can be tailored to match any website design, while the responsive settings guarantee a great experience on all devices.

If you have any questions or encounter any challenges while using, please don’t hesitate to reach out to our dedicated support team at http://wowdevslive.bdkoder/support/ where our expert team is ready to provide prompt and helpful assistance.