How to Display and Customize Social Media Icons on Your Website

How to Display and Customize Social Media Icons on Your Website

By Michael Chen

January 14, 2025 at 08:53 PM

Social media icons are customizable elements that can be displayed on your website header. Here's how to manage them effectively:

Displaying Social Media Icons

For Version 7.1:

  1. Open page menu and click Edit
  2. Hover over header and select Edit Website Header
  3. Click Add Elements
  4. Toggle Social Media Links switch
  5. Save changes

For Version 7.0: Icons appear automatically in these template groups:

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

Customizing Icons

Size and Border:

  1. Access Header Editor
  2. Click social media links
  3. Select Design tab
  4. Adjust size using slider
  5. Choose border shape (Outline or Filled)
  6. Set border thickness if using Outline

Color Settings:

For Solid/Gradient Headers:

  1. Open Header Editor
  2. Click Edit Design > Color
  3. Modify Navigation Color
  4. Adjust Primary Button Background for hover effects

For Adaptive Headers:

  1. Access Website Styles > Colors
  2. Edit selected color scheme
  3. Modify Navigation Links
  4. Update Primary Button Background for hover effects

Additional Style Options:

  • Shape options: Round, Square, Normal (brand default)
  • Custom colors
  • Size variations
  • Border styles

Hiding Icons

Version 7.1:

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

Version 7.0:

  1. Open Website Styles
  2. Locate Social adjustment
  3. Select hide option
  4. Save changes

Remember that social media icons appear after adding social media links to your website. Use social link blocks to add icons in other website areas.

Related Articles

Previous Articles