How to Use the Header Social Media Widget
The Header Social Media widget is a header-specific version of the Social Media widget. It provides the same core functionality – sharing pages or linking to social profiles – but is optimized for global visibility and compact placement inside the header.
Because headers are global, this widget is best used for consistent, always-visible social actions rather than page-specific sharing.
What the Header Social Media Widget Is Used For
Use the Header Social Media widget to:
- Provide quick access to your social profiles
- Add recognizable social icons to global navigation
- Support brand visibility across all pages
- Complement menus, CTAs, and login actions
Common use cases:
- Linking to primary social channels
- Adding social presence to the top of the site
- Supporting community or brand-driven websites
- Minimal icon-only social navigation
- Often used in the top row above the main header row
Social Media Modes
Share This Page (Header)
This mode allows visitors to share the current page, even though the widget sits in the header.
How it works:
- The share URL updates automatically per page
- The same social networks are available as in the regular widget
- Clicking an icon opens the share dialog
When to use in headers:
- Content-heavy sites
- Blogs or knowledge bases
- Editorial or community-driven platforms
Typical links:
- X (Twitter)
- YouTube
- Discord or community platforms
💡 UX Tip
Header-based sharing works best when kept minimal – use only 1–3 key networks.
Go to Page (Header)
This is the most common and recommended mode for header usage.
How it works:
- Each icon links to a fixed destination
- Icons remain consistent across all pages
- Ideal for brand and community presence
Typical links:
- X (Twitter)
- YouTube
- Discord or community platforms
💡 Best practice
Use this mode when you want predictable behavior and a clean header experience.
Managing Social Icons in the Header
All icon management works the same as the regular widget:
- Add icons using the + button
- Choose icons from the picker
- Assign URLs or share behavior
- Reorder icons via drag & drop
- Remove icons as needed
Because headers are global:
- Changes affect all pages
- Keep icon sets intentional and limited
Styling Options
The Styling panel allows you to control the visual appearance of the social media icons so they match your brand, layout, and overall design language. These settings apply to both sharing buttons and profile-link icons.
Button Size
Controls the overall size of each social media button.
- Smaller values create a compact, minimal look
- Larger values increase visibility and tap/click area
💡 Best practice:
Use slightly larger sizes in headers or mobile views to ensure icons remain easy to tap.
Padding Size
Adjusts the internal spacing inside each button, around the icon.
- Lower padding = tighter, more compact buttons
- Higher padding = more breathable, touch-friendly buttons
💡 Tip:
Increasing padding without increasing icon size is a great way to improve usability without making the icons feel visually heavy.
Button Border Radius
Controls how rounded the button corners are.
0px→ sharp, square buttons- Higher values → rounded or pill-shaped buttons
Design guidance:
- Sharp corners work well for minimal or corporate designs
- Rounded buttons feel softer and more friendly
Button Background Color
Sets the default background color of the social media buttons.
Use this to:
- Match your brand colors
- Blend buttons into the header or page background
- Create contrast against surrounding elements
Button Hover Background Color
Defines the background color when a user hovers over (or taps) a button.
This provides:
- Visual feedback
- Improved interactivity
- Clear indication that the icon is clickable
💡 Best practice:
Use a subtle color change rather than a drastic one to keep the interaction polished and professional.
Icons Color
Controls the color of the social media icons themselves.
- Ensure strong contrast against the button background
- Use neutral colors (white, dark gray) for consistency
- Or use brand colors for expressive designs
💡 Accessibility tip
Always check contrast to ensure icons remain clearly visible for all users.
Styling Tips & Recommendations
- Keep icon size and padding balanced for clarity
- Use consistent border radius across buttons, icons, and CTAs
- Subtle hover effects feel more refined than dramatic color shifts
- In headers, prioritize clarity and simplicity over decoration
- Test styling on both desktop and mobile to ensure usability
This styling system gives you full control over size, spacing, shape, and color, making it easy to adapt social media icons to both minimal headers and expressive page sections while maintaining consistency and usability.
Design & UX Tips (Header-Specific)
- Prefer Go to Page over sharing for headers
- Use icons only (no text) to save space
- Match icon color to header text/icons
- Ensure sufficient contrast for readability
- Avoid overcrowding the header
- Align social icons with other utility elements (login, cart, search)
💡 Design Tip
Header social icons work best as secondary actions—not primary CTAs.
When Not to Use Social Icons in the Header
Avoid adding social icons to the header if:
- The site has a single conversion goal
- You want to minimize distractions (sales pages, funnels)
- Social presence is not a priority
- The header is already dense with actions
In those cases, consider placing social links in the footer instead.
Summary
The Header Social Media widget allows you to:
- Add global social sharing or profile links
- Use the same icon and network system as the regular widget
- Provide consistent social access across the site
- Support brand visibility without cluttering content
Used thoughtfully, it enhances credibility and connection—without disrupting navigation or focus.