How to Enable and Style Built-in Social Icons: A Step-by-Step Guide

How to Enable and Style Built-in Social Icons: A Step-by-Step Guide

By Michael Chen

January 14, 2025 at 08:53 PM

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)

  1. Open Pages panel and click Edit on any page
  2. Hover over header and click Edit site header
  3. Click Add elements
  4. Switch Social links toggle on
  5. 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:

  1. Open Pages panel
  2. Edit site header
  3. Click Add elements
  4. Switch Social links toggle off
  5. Save changes

Version 7.0:

  1. Open Site styles panel
  2. Locate Social tweaks
  3. Use Hide social icons or Show social icons toggle
  4. Save changes

Remember: Social icons are site-wide, meaning changes apply across all pages. For additional icon placement options, consider using Social Links blocks.

Related Articles

Previous Articles