🎯 Purpose
The Social Icons widget provides a simple way to add clickable social media icons to your site, helping visitors connect with your profiles, pages, or content on platforms like Facebook, Twitter, LinkedIn, Instagram, and more.
⚙️ Main Features
Icon Set-Up
Add multiple social icons via a list, select a platform, and paste in the corresponding URL.Icon Styles & Shapes
Choose from shaped icons—circle, square, or custom radius—for consistent visual appearance.Icon Alignment & Layout
Align icons horizontally or vertically and control spacing between them to fit your design layout.
🎨 Visual Design Options
Icon Styling
Adjust size, color, and opacity for normal and hover states.
Customize background color and hover effects to match brand colors.
Set padding and border radius to shape icons.
Hover Effects
Add subtle hover interactions like color changes, background transitions, or slight scaling to engage users.
Alignment
Align the entire icon set—left, center, right, or justified—for perfect placement.
🛠️ Advanced Configuration
Responsive Controls
Style icons differently for desktop, tablet, and mobile views, including size and spacing adjustments.Accessibility Options
Use aria labels or custom titles to improve screen-reader usage and accessibility.Advanced Layout Settings
Control spacing, margins, motion effects, entrance animations, custom CSS classes, and HTML attributes for more nuanced design control.
âś… Best Practices
Include icons only for your active social channels to avoid clutter.
Use consistent icon shapes and colors to maintain visual harmony.
Employ brand-specific icon colors or adjust hover states to signal interactivity.
Ensure icons are properly labeled for accessibility (e.g., “Follow on Instagram”).
Test responsive settings to ensure icons remain accessible and maintain good spacing across devices.
The Social Icons widget offers a clean, flexible way to showcase your social profiles, supporting cohesive styling and smooth integration within your page design.
