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 10:12 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 Pages panel and click Edit on any page
  2. Click Edit Site Header
  3. Click Add Element and toggle Social Links on
  4. Add social links in the Content tab if not already done
  5. Click Save or Exit to finish

Version 7.0: Social icons appear automatically in templates like Aviator, Bedford, Brine, Farro, Montauk, Pacific, Skye, Tremont, and York.

Styling Options

Size and Borders:

  1. Click Edit Site Header
  2. Select Social Links and click the pencil icon
  3. Click Design
  4. Adjust Social Icon Size slider
  5. Choose border shape (Outline or Solid Line)
  6. 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 icon color
  4. Modify Primary Button Background for hover color

For Adaptive Headers:

  1. Open Site Styles > Color
  2. Edit selected color theme
  3. Adjust Navigation Link options
  4. Modify Primary Button Background for hover effects

Additional Style Options:

  • Icon shapes: Rounded, Square, or Standard (default service branding)
  • Custom colors and sizes through Site Styles panel

Hiding Social Icons

Version 7.1:

  1. Edit any page
  2. Click Edit Site Header
  3. Toggle Social Links off
  4. Save changes

Version 7.0:

  1. Open Site Styles
  2. Locate Social adjustment options
  3. Use Hide Social Icons or similar settings
  4. Save changes

For custom placement of social icons in other areas, use the social links block feature.

Related Articles

Previous Articles