# Social Element in Email Builder > The Social Element allows you to easily add social media icons with clickable links to your email templates. It helps your audience connect with your… - Source: https://docs.ghlcustomercare.com/docs/marketing/email-builder-capabilities/social-element-in-email-builder - Section: Marketing / Email Builder Capabilities - Reading time: 2 min - Images: 4, each explained below --- The Social Element allows you to easily add social media icons with clickable links to your email templates. It helps your audience connect with your brand on various platforms, improving engagement and visibility across channels while keeping your email design visually balanced and professional. --- **TABLE OF CONTENTS** - [What is the Social Element in Email Builder?](#what-is-the-social-element-in-email-builder) - [Key Benefits of the Social Element](#key-benefits-of-the-social-element) - [How To Setup the Social Element](#how-to-setup-the-social-element) - [Frequently Asked Questions](#frequently-asked-questions) --- ## **What is the Social Element in Email Builder?** The Social Element is a drag-and-drop block that lets you include recognisable social media icons such as Facebook, Instagram, LinkedIn, X (Twitter), YouTube, and more. Each icon can be linked to your respective profile, encouraging subscribers to follow, like, or interact with your brand on social platforms. You can customise icon style, colour, size, and alignment to ensure the social section matches your email’s overall design and brand identity. > **Note:** The Social Element uses icons optimised for email, ensuring they display clearly and consistently across all major email clients. --- ## **Key Benefits of the Social Element** Including the Social Element in your email design offers several key advantages: - Increases audience engagement by linking directly to your social platforms. - Strengthens brand credibility through consistent cross-channel presence. - Fully customisable adjust icon colour, size, and alignment to fit your email’s style. - Quick and easy to update or reorder social icons. - Automatically optimized for both desktop and mobile views. --- ## **How To Setup the Social Element** Follow these steps to add and configure the Social Element in your email template: 1. Navigate to **Marketing → Emails → Templates** from your sub-account dashboard. ![Step 1 of 8: Navigate to Marketing → Emails → Templates from your sub-account…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057302127/original/_gQ6TIvSvc62MIdJIIUsFaaGJQuVt9gblg.png) **Step 1 of 8: Navigate to Marketing → Emails → Templates from your sub-account…** This screenshot accompanies step 1 of 8 in the "How To Setup the Social Element" section of "Social Element in Email Builder". At this point in the walkthrough you navigate to Marketing → Emails → Templates from your sub-account dashboard. The next step is to open an existing template or click the + New button to create one. - Where to go: Navigate to Marketing → Emails → Templates from your sub-account dashboard. - Controls: Marketing → Emails → Templates, + New, Email Builder, Add Elements (+), Social Element, Elements, Edit, Visibility, Device-Based Visibility, Conditional Sending, desktop, mobile - Next: Open an existing template or click the + New button to create one. Full procedure: 1. Navigate to Marketing → Emails → Templates from your sub-account dashboard. <- this image 2. Open an existing template or click the + New button to create one. 3. In the Email Builder, click the Add Elements (+) icon in the left sidebar. 4. Locate the Social Element under the Elements section. 5. Drag and drop the Social Element into your preferred location, typically in the header or footer of your email layout. 6. Click on the Social Element to open the Edit tab on the left panel. Here you can: 7. (Optional) Use the Visibility tab to adjust Device-Based Visibility or Conditional Sending rules. 8. Preview your email on both desktop and mobile to ensure the icons display clearly and are properly linked. 2. Open an existing template or click the **\+ New** button to create one. ![Step 2 of 8: Open an existing template or click the + New button to create one](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057302164/original/xQT7mCb31B_gjmVSm_j1MYVyHj39fEjjZw.jpeg) **Step 2 of 8: Open an existing template or click the + New button to create one** This screenshot accompanies step 2 of 8 in the "How To Setup the Social Element" section of "Social Element in Email Builder". At this point in the walkthrough you open an existing template or click the + New button to create one. The next step is to in the Email Builder, click the Add Elements (+) icon in the left sidebar. - Where to go: Open an existing template or click the + New button to create one. - Controls: + New, Marketing → Emails → Templates, Email Builder, Add Elements (+), Social Element, Elements, Edit, Visibility, Device-Based Visibility, Conditional Sending, desktop, mobile - Next: In the Email Builder, click the Add Elements (+) icon in the left sidebar. Full procedure: 1. Navigate to Marketing → Emails → Templates from your sub-account dashboard. 2. Open an existing template or click the + New button to create one. <- this image 3. In the Email Builder, click the Add Elements (+) icon in the left sidebar. 4. Locate the Social Element under the Elements section. 5. Drag and drop the Social Element into your preferred location, typically in the header or footer of your email layout. 6. Click on the Social Element to open the Edit tab on the left panel. Here you can: 7. (Optional) Use the Visibility tab to adjust Device-Based Visibility or Conditional Sending rules. 8. Preview your email on both desktop and mobile to ensure the icons display clearly and are properly linked. 3. In the **Email Builder**, click the **Add Elements (+)** icon in the left sidebar. ![Step 3 of 8: In the Email Builder, click the Add Elements (+) icon in the left…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057302380/original/x1Qm1zfQrOYv1hI1sW0IcyUu5BfbTbaHDQ.png) **Step 3 of 8: In the Email Builder, click the Add Elements (+) icon in the left…** This screenshot accompanies step 3 of 8 in the "How To Setup the Social Element" section of "Social Element in Email Builder". At this point in the walkthrough you in the Email Builder, click the Add Elements (+) icon in the left sidebar. The next step is to locate the Social Element under the Elements section. - Where to go: In the Email Builder, click the Add Elements (+) icon in the left sidebar. - Controls: Email Builder, Add Elements (+), Marketing → Emails → Templates, + New, Social Element, Elements, Edit, Visibility, Device-Based Visibility, Conditional Sending, desktop, mobile - Next: Locate the Social Element under the Elements section. Full procedure: 1. Navigate to Marketing → Emails → Templates from your sub-account dashboard. 2. Open an existing template or click the + New button to create one. 3. In the Email Builder, click the Add Elements (+) icon in the left sidebar. <- this image 4. Locate the Social Element under the Elements section. 5. Drag and drop the Social Element into your preferred location, typically in the header or footer of your email layout. 6. Click on the Social Element to open the Edit tab on the left panel. Here you can: 7. (Optional) Use the Visibility tab to adjust Device-Based Visibility or Conditional Sending rules. 8. Preview your email on both desktop and mobile to ensure the icons display clearly and are properly linked. 4. Locate the **Social Element** under the **Elements** section. 5. Drag and drop the Social Element into your preferred location, typically in the header or footer of your email layout. 6. Click on the **Social Element** to open the **Edit** tab on the left panel. Here you can: - **Add or Remove Icons:** Select which social platforms you want to display. - **Insert Links:** Paste the URL for each social media profile. - **Customize Appearance:** Adjust icon size, shape, spacing, and color (full color or monochrome). - **Align Icons:** Choose left, center, or right alignment. - **Add Padding:** Control spacing above or below the social icons for layout balance. ![Step 5 of 5: Add Padding: Control spacing above or below the social icons for…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057302614/original/tUGsDM2xSYy-aE1MHb3VfceSp5I5v_fcmw.png) **Step 5 of 5: Add Padding: Control spacing above or below the social icons for…** This screenshot accompanies step 5 of 5 in the "How To Setup the Social Element" section of "Social Element in Email Builder". At this point in the walkthrough you add Padding: Control spacing above or below the social icons for layout balance. - What this covers: Add Padding: Control spacing above or below the social icons for layout balance. - Controls: Marketing → Emails → Templates, + New, Email Builder, Add Elements (+), Social Element, Elements, Edit, Visibility, Device-Based Visibility, Conditional Sending, desktop, mobile Full procedure: 1. Add or Remove Icons: Select which social platforms you want to display. 2. Insert Links: Paste the URL for each social media profile. 3. Customize Appearance: Adjust icon size, shape, spacing, and color (full color or monochrome). 4. Align Icons: Choose left, center, or right alignment. 5. Add Padding: Control spacing above or below the social icons for layout balance. <- this image 7. (Optional) Use the **Visibility** tab to adjust **Device-Based Visibility** or **Conditional Sending** rules. 8. Preview your email on both **desktop** and **mobile** to ensure the icons display clearly and are properly linked. --- ## **Frequently Asked Questions** **Q: Which social media platforms are supported?** You can add icons for major platforms including Facebook, Instagram, LinkedIn, X (Twitter), YouTube, TikTok, and Pinterest. **Q: How do I add a new social icon that isn’t listed?** You can duplicate an existing icon and replace its image and URL with your custom platform’s logo and link. **Q: Are the social icons mobile responsive?** Yes, they automatically resize and adjust spacing for smaller screens to ensure a clean, user-friendly layout. --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com