Skip to content
Sites

Social Media Icons

Learn how to add, edit, and style social media icons in GHL Customer Care’s website builder to drive engagement and link to your social profiles.

2 min read478 words2 explained images
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. Key Benefits of Social Icons
  2. How to Add Social Icons
  3. Customizing Social Icons
  4. Which social media icons are supported?
  5. Frequently Asked Questions
  6. Related Articles

You no longer need to write custom code or spend time creating social bars. This feature offers support for popular social media icons, including Facebook, Instagram, LinkedIn, YouTube, TikTok, and more. You can choose from various themes for their social bar, making it easy to configure responsiveness and design.

TABLE OF CONTENTS

What is the Social Icons Element?

The Social Icons element allows you to embed platform-specific social media icons directly into your website pages. These icons link to your brand’s social accounts, helping increase visibility and engagement with your audience. You can add icons for platforms like Facebook, Instagram, YouTube, X (Twitter), and TikTok.

Key Benefits of Social Icons

  • Increased Engagement: Easily direct users to your social profiles.
  • Professional Branding: Maintain a unified brand presence across platforms.
  • Drag-and-Drop Simplicity: Add icons without any code.
  • Flexible Layouts: Choose icon-only, text-only, or a combo display.

How to Add Social Icons

Learn how to insert the Social Icons widget into your website layout using the builder.

  1. In the Website Builder, click + Add Element.

  2. Locate the Social Icons element (under the “Social” category).

  3. Drag it into the desired section

How to Add Social Icons (image 1 of 2) What this shows In the Website Builder, click + Add Element. What this shows Illustrates the "How to Add Social Icons" section of "Social Media Icons". This screenshot appears in the "How to Add Social Icons" section of "Social Media Icons". The text alongside this image reads: In the Website Builder, click + Add Element. Locate the Social Icons element (under the “Social” category). Drag it into the desired section. Immediately after, the guide continues: You can fully customize how your social media icons appear and behave on your site. Below are the things you can change. Image 1 of 2 What to clickIn the Website Builder, click + Add Element. Locate the Social Icons element (under the “Social” category). Drag it into the desired section
Buttons and menus referenced + Add Element.Social Icons
Next stepYou can fully customize how your social media icons appear and behave on your site. Below are the things you can change:
All 3 steps in this procedure
  1. In the Website Builder, click + Add Element.
  2. Locate the Social Icons element (under the “Social” category).
  3. Drag it into the desired section

Customizing Social Icons

You can fully customize how your social media icons appear and behave on your site. Below are the things you can change:

  • Rearrange Icons: Drag and drop icons using the "3 Lines" icon to adjust their order.

  • Edit Links: Click the "pencil" icon to change the URL for each icon (e.g., link to your Facebook or Instagram profile).

  • Delete Icons: Use the "trash" icon to remove any icon you don’t need.

  • Add More Icons: Click "+ Add Social" to add icons for more platforms or restore ones you’ve deleted.

  • Change Display Type: Choose how each icon is shown (Icon Only, Text Only, or Icon & Text)

  • Adjust Alignment: Align your icons to the left, center or right

  • Set Icon Size: Customize the width and height of the icons in pixels to best fit your layout.

Customizing Social Icons (image 2 of 2) What this shows Rearrange Icons: Drag and drop icons using the "3 Lines" icon to adjust their order. What this shows Illustrates the "Customizing Social Icons" section of "Social Media Icons". This screenshot appears in the "Customizing Social Icons" section of "Social Media Icons". The text alongside this image reads: Rearrange Icons: Drag and drop icons using the "3 Lines" icon to adjust their order. Edit Links: Click the "pencil" icon to change the URL for each icon (e.g., link to your Facebook or Instagram profile). Delete Icons: Use the "trash" icon to remove any icon you don’t need. Add More Icons: Click…. Immediately after, the guide continues: The new social icons elements comes with the following social media icons support. Image 2 of 2 What to fill inRearrange Icons: Drag and drop icons using the "3 Lines" icon to adjust their order. Edit Links: Click the "pencil" icon to change the URL for each icon (e.g., link to your Facebook or Instagram profile). Delete Icons: Use the "trash" icon to remove any icon you don’t need. Add More Icons: Click "+ Add Social" to add icons for more platforms or restore ones you’ve deleted. Change Display Type: Choose how each icon is shown (Icon Only, Text Only, or Icon & Text) Adjust Alignment: Align your icons to the left, center or right Set Icon Size: Customize the width and height of the icons in pixels to best fit your layout. Next stepThe new social icons elements comes with the following social media icons support:
All 7 steps in this procedure
  1. Rearrange Icons: Drag and drop icons using the "3 Lines" icon to adjust their order.
  2. Edit Links: Click the "pencil" icon to change the URL for each icon (e.g., link to your Facebook or Instagram profile).
  3. Delete Icons: Use the "trash" icon to remove any icon you don’t need.
  4. Add More Icons: Click "+ Add Social" to add icons for more platforms or restore ones you’ve deleted.
  5. Change Display Type: Choose how each icon is shown (Icon Only, Text Only, or Icon & Text)
  6. Adjust Alignment: Align your icons to the left, center or right
  7. Set Icon Size: Customize the width and height of the icons in pixels to best fit your layout.

Which social media icons are supported?

The new social icons elements comes with the following social media icons support:

  • Facebook
  • Instagram
  • X
  • LinkedIn
  • Youtube
  • TikTok
  • Google Plus
  • Whatsapp
  • Mail
  • Website
  • Pinterest

Frequently Asked Questions

Q: Do the icons adjust for mobile?
Yes. Icons are responsive and you can use size and alignment settings to optimize display for mobile views.

Q: Are the social media icons automatically linked to my profiles?
No. The icons are not pre-linked to your social media accounts. You need to manually add your profile URLs by clicking the pencil icon next to each icon and entering the correct link.

Frequently asked questions

Which social media icons are supported?
The new social icons elements comes with the following social media icons support: Facebook Instagram X LinkedIn Youtube TikTok Google Plus Whatsapp Mail Website Pinterest

Was this guide helpful?

Related guides

How to Add a Two‑Step Order Form to a Funnel5 min read · 12 imagesTracking Scripts/Pixel Code1 min readSEO Meta Data1 min readClick-To-Call, Click-To-Text, and Click-To-Email Links & Buttons for Websites and Funnels3 min read · 5 images