How to Enable and Style Built-in Social Icons: A Step-by-Step Guide
Built-in social icons appear in your site's header and can be customized to match your site's design. Here's how to manage them effectively:
Displaying Social Icons (Version 7.1)
- Open Pages panel and click Edit on any page
- Hover over header and click Edit site header
- Click Add elements
- Switch Social links toggle on
- Click Save when finished
Styling Social Icons
Size and Border:
- Access Edit Site Header
- Click social links and select Design
- Adjust Social Icon Size slider
- Choose Border shape (Outline or Solid)
- Set border Thickness if using Outline style
Color Customization:
For Solid/Gradient Headers:
- Open header editor
- Click Edit Design > Color
- Adjust Navigation color for icons and links
- Change hover color via Primary Button Background
For Adaptive Headers:
- Access site styles > Colors
- Edit color theme for site header
- Modify Navigation links
- Save changes
Where Icons Display (Version 7.0):
- Aviator
- Bedford
- Brine
- Farro
- Montauk
- Pacific
- Skye
- Tremont
- York
Hiding Social Icons:
Version 7.1:
- Open Pages panel
- Edit site header
- Click Add elements
- Switch Social links toggle off
- Save changes
Version 7.0:
- Open Site styles panel
- Locate Social tweaks
- Use Hide social icons or Show social icons toggle
- Save changes
Remember: Social icons are site-wide, meaning changes apply across all pages. For additional icon placement options, consider using Social Links blocks.