How to Display and Customize Social Media Icons on Your Website
Social icons can enhance your site's header by providing easy access to your social media profiles. Here's how to manage them effectively:
Displaying Social Icons
Version 7.1:
- Open Pages panel and click Edit on any page
- Click Edit Site Header
- Click Add Element and toggle Social Links on
- Add social links in the Content tab if not already done
- Click Save or Exit to finish
Version 7.0: Social icons appear automatically in templates like Aviator, Bedford, Brine, Farro, Montauk, Pacific, Skye, Tremont, and York.
Styling Options
Size and Borders:
- Click Edit Site Header
- Select Social Links and click the pencil icon
- Click Design
- Adjust Social Icon Size slider
- Choose border shape (Outline or Solid Line)
- Set border thickness if using Outline style
Color Settings:
For Solid/Gradient Headers:
- Open header editor
- Click Edit Design > Color
- Adjust Navigation Color for icon color
- Modify Primary Button Background for hover color
For Adaptive Headers:
- Open Site Styles > Color
- Edit selected color theme
- Adjust Navigation Link options
- Modify Primary Button Background for hover effects
Additional Style Options:
- Icon shapes: Rounded, Square, or Standard (default service branding)
- Custom colors and sizes through Site Styles panel
Hiding Social Icons
Version 7.1:
- Edit any page
- Click Edit Site Header
- Toggle Social Links off
- Save changes
Version 7.0:
- Open Site Styles
- Locate Social adjustment options
- Use Hide Social Icons or similar settings
- Save changes
For custom placement of social icons in other areas, use the social links block feature.