Callout Icons Widget¶

Description¶

The Callout Icons Widget displays icons with descriptive text, commonly used to highlight features, services, or USPs (Unique Selling Points).

Page Builder Name: Callout Icons | PapaThemes Beautify

Version: 1.0.0

Features¶

• ✅ SVG icons with sprite
• ✅ Link support
• ✅ Inline editing
• ✅ Customizable colors
• ✅ Responsive layout

How to Use¶

1. Add Widget¶

1. Open Page Builder
2. Drag Callout Icons | PapaThemes Beautify widget to the page
3. Widget displays with default icons

2. Configuration¶

Icon Settings¶

SVG Sprite¶

Widget uses SVG sprite injection:

SVGSpriteInject(iconUrl, {
    onInjected: (el) => {
        el.setAttribute('style', 'display:none');
    }
});

Benefits¶

• Load once, use multiple times
• Optimized performance
• Can style with CSS

Link Behavior¶

When a link is configured:

// Click handler
el.addEventListener('click', () => {
    if (!editMode) {
        window.location = el.dataset.link;
    }
});

• Does not navigate in Edit Mode
• Navigates normally in preview/live

Usage Examples¶

USP Bar¶

Icon 1: Free Shipping - Free shipping on orders over $50
Icon 2: 24/7 Support - Support available 24/7
Icon 3: Secure Payment - Safe and secure checkout
Icon 4: Easy Returns - 30-day return policy

Service Features¶

Icon 1: Fast Delivery - 2-hour delivery available
Icon 2: Quality Products - Premium quality guaranteed
Icon 3: Best Price - Price match guarantee

Styling¶

CSS Classes¶

.callout-icons {
    display: flex;
    justify-content: center;
}

.callout-icon-item {
    text-align: center;
    padding: 20px;
}

.callout-icon-item svg {
    width: 48px;
    height: 48px;
}

Inline Editing¶

1. Enable Edit Mode
2. Click on callout item
3. Edit:
4. Title
5. Description
6. Link
7. Save changes

Notes¶

1. Icons: Use icons from available sprite
2. Responsive: Check layout on mobile
3. Links: Ensure URLs are valid
4. Edit mode: Links don't work while editing
5. Accessibility: Add appropriate alt text