Managing Social Icon Integration in Website Headers: A Guide

Managing Social Icon Integration in Website Headers: A Guide

By Michael Chen

January 14, 2025 at 10:12 PM

Here's the rewritten article:

View your site's integrated social icons in the header after adding social links. Learn how to customize and manage these icons effectively.

Viewing Social Icons

For 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. Activate Social link option
  5. Save changes

For Version 7.0, icons appear automatically in these templates:

  • Aviator
  • Bedford
  • Brine
  • Farro
  • Montauk
  • Pacific
  • Skye
  • Tremont
  • York

Customizing Icon Style

Size and Border Adjustments:

  1. Click Edit on any page
  2. Select Edit site header
  3. Click social links and the pencil icon
  4. Choose Design
  5. Adjust Social icon size slider
  6. Select border shape (Outline or Solid color)
  7. Modify border thickness if using Outline

Color Customization:

For Solid/Gradient Headers:

  1. Open header editor
  2. Click Edit design > Color
  3. Modify Navigation color

For Adaptive Headers:

  1. Open Site styles > Colors
  2. Click pencil icon on header color combination
  3. Adjust Navigation link settings

Hiding Social Icons

Version 7.1:

  1. Edit any page
  2. Click Edit site header
  3. Select Add elements
  4. Disable Social link option
  5. Save changes

Version 7.0:

  1. Open Site styles panel
  2. Locate Social tweaks
  3. Select hide option
  4. Save changes

Additional styling options vary by template, including icon shapes (Round, Square, or Normal branding shape) and positioning preferences.

Note: Icon hover colors can be modified through the Main button background settings in your site's color theme.

Related Articles

Previous Articles