Eyeva Glasses Leaderboard Widget¶

Description¶

The Eyeva Glasses Leaderboard Widget is a special horizontal banner designed for eyewear themes, supporting video background and clickable areas.

Page Builder Name: Glasses Leaderboard | PapaThemes Eyeva

Version: 1.0.3

Features¶

• ✅ Leaderboard banner layout
• ✅ Video background support
• ✅ Clickable hotspots
• ✅ Inline content editing
• ✅ Responsive design
• ✅ SCSS styling

How to Use¶

1. Add Widget¶

1. Open Page Builder
2. Drag Glasses Leaderboard | PapaThemes Eyeva widget to the page
3. Widget displays leaderboard banner

2. Configuration¶

Banner Content¶

Video Support¶

Widget supports video background:

// Init videos
initVideos(widgetElement, '');

Supported Video Formats¶

• MP4 (recommended)
• WebM
• Ogg

Video Behavior¶

• Autoplay (muted)
• Loop
• No controls (background)

Click Areas¶

Clickable elements with data-href:

widgetElement.querySelectorAll('[data-href]').forEach((el) => {
    el.addEventListener('click', () => {
        if (!editMode) {
            window.location = el.dataset.href;
        }
    });
});

Edit Mode¶

• Clicks don't navigate
• Allows content editing

Live Mode¶

• Clicks navigate to href
• Full interactivity

Banner Structure¶

<div class="eyeva-glasses-leaderboard">
    <div class="leaderboard-container">
        <!-- Background -->
        <div class="leaderboard-bg">
            <img src="background.jpg" alt="">
            <video autoplay muted loop>
                <source src="video.mp4" type="video/mp4">
            </video>
        </div>

        <!-- Content -->
        <div class="leaderboard-content" data-href="/link/">
            <h2 class="leaderboard-title">Title</h2>
            <p class="leaderboard-desc">Description</p>
            <a class="leaderboard-cta">Shop Now</a>
        </div>
    </div>
</div>

Styling¶

Widget uses SCSS:

.eyeva-glasses-leaderboard {
    position: relative;
    width: 100%;
    overflow: hidden;

    .leaderboard-bg {
        position: absolute;
        inset: 0;

        video, img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .leaderboard-content {
        position: relative;
        z-index: 1;
        padding: 40px;
    }
}

Usage Examples¶

New Collection Banner¶

Background: Lifestyle image with glasses
Title: New Collection 2026
Description: Discover the latest eyewear trends
CTA: Explore Now
Link: /new-collection/

Sale Banner¶

Background: Video showcasing products
Title: Summer Sale
Description: Up to 50% off selected frames
CTA: Shop Sale
Link: /sale/

Brand Feature¶

Background: Brand campaign image
Title: Designer Frames
Description: Authentic designer eyewear
CTA: View Collection
Link: /designers/

Responsive Design¶

Desktop¶

• Full leaderboard width
• Video background visible
• Rich content layout

Tablet¶

• Scaled down proportionally
• Video still plays

Mobile¶

• Stacked layout
• Optimized content
• Touch-friendly CTA

Inline Editing¶

1. Enable Edit Mode
2. Click on content area
3. Edit:
4. Title
5. Description
6. Button text
7. Save changes

Performance¶

Video Optimization¶

• Compress videos
• Use appropriate resolution
• Consider mobile data

Image Fallback¶

• Always provide fallback image
• For browsers without video support
• For mobile data saver mode

Notes¶

1. Video size: Keep under 5MB
2. Video format: MP4 with H.264
3. Fallback image: Always include
4. Mobile: Test video playback
5. Autoplay policies: Muted required
6. Links: Test in preview mode
7. Content contrast: Ensure text readable over video