How to Display and Customize Social Media Icons on Your Website: Complete Guide
Integrated social media icons are customizable elements that display your social media links on your website. Here's how to manage them effectively:
Displaying Icons
For Version 7.1:
- Open Pages panel and click Edit on any page
- Hover over header and click Edit site header
- Click Add elements and enable Links to social media
- Save changes
For Version 7.0: Icons automatically display in these template families:
- Aviator
- Bedford
- Brine
- Farro
- Montauk
- Pacific
- Skye
- Tremont
- York
Customizing Icon Style
Size and Border:
- Open header editor
- Click social media links and select Design
- Adjust icon size using slider
- Choose border shape (Outlined or Solid)
- Adjust border thickness if outlined
Color Settings:
-
For Solid/Gradient headers:
- Edit Navigation color in header design
- Hover color follows Main button background settings
-
For Adaptive headers:
- Access site styles > Colors
- Edit Navigation links in selected color palette
- Hover color follows upper section's color scheme
Hiding Icons
Version 7.1:
- Edit site header
- Click Add elements
- Disable Links to social media
- Save changes
Version 7.0:
- Open Site Styles panel
- Locate social media settings
- Toggle visibility options
- Save changes
Additional styling options vary by template and may include icon shape customization (Round, Square, or Normal branding shape).
Note: To add icons to other areas of your site, use social media blocks. For icon arrangement and service management, refer to social media icon settings.