Leaderboard Banner Widget¶

Description¶

The Leaderboard Banner Widget displays a large horizontal banner, typically placed at the top of pages or between sections. Ideal for advertising campaigns or important announcements.

Page Builder Name: Leaderboard Banner | PapaThemes Beautify

Version: 1.0.0

Features¶

• ✅ Full-width banner
• ✅ Inline content editing
• ✅ HTML content support
• ✅ Responsive design

How to Use¶

1. Add Widget¶

1. Open Page Builder
2. Drag Leaderboard Banner | PapaThemes Beautify widget to the page
3. Widget displays default banner

2. Configuration¶

Banner Content¶

Style Settings¶

Recommended Sizes¶

Desktop¶

• Width: 970px or 728px
• Height: 90px or 250px

Mobile¶

• Width: 320px
• Height: 50px or 100px

Standard IAB Sizes¶

• Leaderboard: 728x90
• Billboard: 970x250
• Mobile Leaderboard: 320x50

Usage Examples¶

Sale Announcement¶

<div class="leaderboard-banner">
    <img src="sale-banner.jpg" alt="Flash Sale">
    <div class="banner-content">
        <h2>FLASH SALE - 50% OFF</h2>
        <p>24 hours only!</p>
        <a href="/sale/" class="btn">Shop Now</a>
    </div>
</div>

Free Shipping Bar¶

<div class="leaderboard-banner" style="background: #28a745;">
    <p style="color: white; text-align: center;">
        🚚 FREE SHIPPING on orders over $50
    </p>
</div>

Responsive Behavior¶

/* Desktop */
.leaderboard-banner {
    height: 90px;
}

/* Tablet */
@media (max-width: 800px) {
    .leaderboard-banner {
        height: 70px;
    }
}

/* Mobile */
@media (max-width: 550px) {
    .leaderboard-banner {
        height: 50px;
    }
}

Inline Editing¶

1. Enable Edit Mode in Page Builder
2. Click on banner
3. Edit content
4. Save changes

Best Practices¶

Design¶

• Use high-quality images
• Clear, readable text
• Prominent CTA button
• Good color contrast

Performance¶

• Optimize images
• Use WebP if possible
• Lazy load if below the fold

UX¶

• Don't use too much text
• Clear link destination
• Mobile-friendly touch targets

Notes¶

1. Image size: Optimize for web
2. Text on image: Ensure readability
3. CTA: Include clear call-to-action
4. Mobile: Test thoroughly on mobile
5. A/B Testing: Test multiple versions