A Guide to Adding and Customizing Social Icons on Your Website

A Guide to Adding and Customizing Social Icons on Your Website

By Michael Turner

January 14, 2025 at 10:11 PM

Social icons can enhance your site's header by providing easy access to your social media profiles. Here's how to manage them effectively:

Displaying Social Icons

Version 7.1:

  1. Open Page panel and click Edit
  2. Click Edit Site Header
  3. Click Add Element
  4. Toggle Social Links to ON
  5. Add social links through the Content tab if needed
  6. Save changes

Version 7.0: Built-in social icons appear automatically in compatible templates (Aviator, Bedford, Brine, Farro, Montauk, Pacific, Skye, Tremont, York)

Styling Your Social Icons

Size and Border Adjustments:

  1. Edit Site Header
  2. Click social link > pencil icon > Design
  3. Adjust Social Icon Size slider
  4. Choose border shape (Outline or Solid Line)
  5. Set border thickness if using Outline style

Color Customization:

For Solid/Gradient Headers:

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

For Adaptive Headers:

  1. Open site style > Color
  2. Edit selected color theme
  3. Adjust Navigation Link settings
  4. Update Primary Button Background for hover effects

Additional Style Options:

  • Icon shapes: Rounded, Square, or Standard (brand-specific)
  • Size variations
  • Border styles

Hiding Social Icons

Version 7.1:

  1. Edit Site Header
  2. Click Add Element
  3. Toggle Social Links to OFF
  4. Save changes

Version 7.0:

  1. Open Site Style panel
  2. Locate Social fine-tuning option
  3. Select Hide Social Icons or equivalent setting
  4. Save changes

For additional customization, use the social link block to add icons in other areas of your site.

Related Articles

Previous Articles