Skip to content

Flex Banners Widget

Description

The Flex Banners Widget displays flexible advertising banners with carousel capability. Supports images and videos with customizable slides per device.

Page Builder Name: Flex Banners | PapaThemes Beautify

Version: 1.0.3

Features

  • ✅ Carousel with Slick Slider
  • ✅ Image and video support
  • ✅ Responsive slides count
  • ✅ Autoplay with custom speed
  • ✅ Navigation arrows and dots
  • ✅ Inline content editing

How to Use

1. Add Widget

  1. Open Page Builder
  2. Drag Flex Banners | PapaThemes Beautify widget to the page
  3. Widget displays with default banners
Option Description Default
Visibility Enable/disable carousel show
Arrows Show prev/next buttons true
Dots Show pagination dots true
Slides to Show Desktop slides count 4
Slides to Show (Tablet) Tablet slides count 3
Slides to Show (Mobile) Mobile slides count 1
Autoplay Auto-advance slides true
Autoplay Speed Speed in milliseconds 5000

Configuration Details

Visibility

  • Show: Enable carousel mode
  • Hide: Display as static

Arrows: - Shows arrow buttons on both sides - Click to change slides

Dots: - Shows pagination below - Click to jump to slide

Responsive Slides

Device Breakpoint Default
Desktop > 801px 4 slides
Tablet 551px - 800px 3 slides
Mobile < 551px 1 slide

Autoplay

  • Autoplay: Enable/disable auto-advance
  • Speed: Time per slide (milliseconds)
  • 3000 = 3 seconds
  • 5000 = 5 seconds (default)
  • 10000 = 10 seconds

Adding Banner Items

Each Banner Can Contain

  1. Background image
  2. Video (YouTube, Vimeo, or self-hosted)
  3. Text overlay
  4. CTA button
  5. Link

Item Configuration

- Image URL: Link to image
- Video URL: Video link (optional)
- Title: Banner title
- Description: Description
- Button Text: Button content
- Button Link: Link on click

Video Support

Widget supports video embedding:

YouTube

https://www.youtube.com/watch?v=VIDEO_ID
https://youtu.be/VIDEO_ID

Vimeo

https://vimeo.com/VIDEO_ID

Self-hosted

https://yoursite.com/video.mp4

Usage Examples

Visibility: Show
Arrows: true
Dots: true
Slides Desktop: 1
Slides Tablet: 1
Slides Mobile: 1
Autoplay: true
Speed: 5000

Product Promo Banners

Visibility: Show
Arrows: true
Dots: false
Slides Desktop: 3
Slides Tablet: 2
Slides Mobile: 1
Autoplay: false

Visibility: Show
Arrows: false
Dots: false
Slides Desktop: 6
Slides Tablet: 4
Slides Mobile: 2
Autoplay: true
Speed: 3000

Slick Slider Fix

Widget includes a fix for initADA bug with decimal slides:

  • Automatically patches Slick prototype
  • Fixes accessibility issues
  • Ensures tab navigation works correctly

Responsive Breakpoints

/* Mobile First */
@media (min-width: 551px) {
    /* Tablet settings */
}

@media (min-width: 801px) {
    /* Desktop settings */
}

Inline Editing

  1. Enable Edit Mode in Page Builder
  2. Click on banner item
  3. Edit:
  4. Text content
  5. Button text
  6. Images
  7. Save changes

Static Mode

When carousel is disabled (Visibility: Hide): - Banners display as grid - No navigation - No autoplay - Still responsive

Performance

Lazy Load

  • Images in carousel are lazy loaded
  • Uses Slick's progressive loading

Script Loading

  • Slick slider loads async
  • Doesn't block page render

Accessibility

  • ARIA labels for navigation
  • Tab navigation support
  • Screen reader friendly
  • Pause on focus

Notes

  1. Image size: Ensure all images have same aspect ratio
  2. Video performance: Videos may affect load speed
  3. Mobile: Test thoroughly on mobile devices
  4. Autoplay: Don't set too fast (< 3 seconds)
  5. Slides count: Don't exceed available items