How to Display and Customize Social Media Icons on Your Website

How to Display and Customize Social Media Icons on Your Website

By Michael Thompson

January 14, 2025 at 08:53 PM

Integrated social media icons enhance your website's header by displaying links to your social media profiles. Here's how to manage them effectively:

Displaying Social Icons

Version 7.1:

  1. Open page menu and click Edit
  2. Hover over header, click Edit Website Header
  3. Click Add Elements
  4. Toggle Social Media Links switch
  5. Add social media links in the Content tab if needed
  6. Click Save

Version 7.0: Icons appear automatically in these template groups:

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

Customizing Icon Design

Size and Border:

  1. Open Header Editor
  2. Click Social Media Links > pencil icon > Design
  3. Adjust size using slider
  4. Select border shape (Outline or Filled)
  5. Set border thickness if using Outline style

Color Settings:

For Solid/Gradient Headers:

  1. Open Header Editor
  2. Click Edit Design > Color
  3. Adjust Navigation Color

For Adaptive Headers:

  1. Open Website Styles > Colors
  2. Edit color scheme
  3. Modify Navigation Links setting

Additional Style Options:

  • Shape options: Round, Square, or Normal (brand default)
  • Custom colors for hover states
  • Size adjustments
  • Border modifications

Hiding Social Icons

Version 7.1:

  1. Edit Website Header
  2. Click Add Elements
  3. Turn off Social Media Links switch
  4. Save changes

Version 7.0:

  1. Open Website Styles
  2. Locate Social adjustment
  3. Set to Hide or Off
  4. Save changes

Remember that social media links apply website-wide, so changes affect all pages consistently.

Related Articles

Previous Articles