# Image Element in Email Builder > The Image Element in Email Builder allows you to easily add and customise images within your email templates. With support for multiple image sources… - Source: https://docs.ghlcustomercare.com/docs/marketing/email-builder-capabilities/image-element-in-email-builder - Section: Marketing / Email Builder Capabilities - Reading time: 2 min - Images: 5, each explained below --- The Image Element in Email Builder allows you to easily add and customise images within your email templates. With support for multiple image sources, sizing options, and alignment controls, this element helps you create visually engaging and professional-looking emails that capture attention and improve engagement. --- **TABLE OF CONTENTS** - [What is the Image Element in GHL Customer Care Email Builder?](#what-is-the-image-element-in-ghl-customer-care-email-builder) - [Key Benefits of the Image Element](#key-benefits-of-the-image-element) - [How To Setup the Image Element](#how-to-setup-the-image-element) - [Frequently Asked Questions](#frequently-asked-questions) --- ## **What is the Image Element in GHL Customer Care Email Builder?** The Image Element is a drag-and-drop block in Email Builder that lets you insert images directly into your email layout. You can upload new images, use URLs, or pull from your existing file library. It supports customization options such as resizing, alignment, and linking, allowing you to use images for branding, product showcases, or visual storytelling. The element ensures that your images render correctly across all major email clients and devices. > **Note:** To optimise load times and maintain email deliverability, use compressed images (under 1MB) in formats like JPG or PNG. --- ## **Key Benefits of the Image Element** Adding the Image Element to your email design offers several key advantages: - Quickly insert high-quality images using simple drag-and-drop functionality. - Customise width, height, and alignment for balanced layouts. - Ensure consistent image display across both desktop and mobile devices. - Maintain a polished, branded look with logos, banners, and visuals. --- ## **How To Setup the Image Element** Follow these steps to add and configure the Image 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/155057289337/original/XHI8TgNTaj5hIxqBDmQMq6ocYMQepyBdvA.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 Image Element" section of "Image 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 (+), Image 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 Image Element under the Elements section. 5. Drag and drop the Image Element into your desired position within the email layout. 6. Click on the Image Element to open the Edit tab on the left panel. Here you can: 7. (Optional) Click the Visibility tab to manage Device-Based Visibility or Conditional Sending options. 8. Preview your email on both desktop and mobile devices to confirm the image displays as expected. 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/155057289402/original/vXaGlsjMi1ZGKmKSokUfVNQxmj1sYnstTg.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 Image Element" section of "Image 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 (+), Image 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 Image Element under the Elements section. 5. Drag and drop the Image Element into your desired position within the email layout. 6. Click on the Image Element to open the Edit tab on the left panel. Here you can: 7. (Optional) Click the Visibility tab to manage Device-Based Visibility or Conditional Sending options. 8. Preview your email on both desktop and mobile devices to confirm the image displays as expected. 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/155057289494/original/FJOmvw7ZFbokKI4kkmcYP8FYKElC9D1ZMw.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 Image Element" section of "Image 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 Image 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, Image Element, Elements, Edit, Visibility, Device-Based Visibility, Conditional Sending, desktop, mobile - Next: Locate the Image 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 Image Element under the Elements section. 5. Drag and drop the Image Element into your desired position within the email layout. 6. Click on the Image Element to open the Edit tab on the left panel. Here you can: 7. (Optional) Click the Visibility tab to manage Device-Based Visibility or Conditional Sending options. 8. Preview your email on both desktop and mobile devices to confirm the image displays as expected. 4. Locate the **Image Element** under the **Elements** section. 5. Drag and drop the Image Element into your desired position within the email layout. 6. Click on the **Image Element** to open the **Edit** tab on the left panel. Here you can: - **Upload an Image:** Choose an image from your computer. - **Use an Image URL:** Paste a direct link to an externally hosted image. - **Adjust Width & Height:** Define custom dimensions or use automatic scaling. - **Add a Link:** Make your image clickable by adding a destination URL. - **Set Alignment:** Align the image to the left, center, or right. - **Add Padding:** Control spacing around the image for better design balance. ![Step 6 of 6: Add Padding: Control spacing around the image for better design balance](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057289695/original/5ULMgMtX99lLYUsvgAXpihAZikng-Fv51g.png) **Step 6 of 6: Add Padding: Control spacing around the image for better design balance** This screenshot accompanies step 6 of 6 in the "How To Setup the Image Element" section of "Image Element in Email Builder". At this point in the walkthrough you add Padding: Control spacing around the image for better design balance. - What this covers: Add Padding: Control spacing around the image for better design balance. - Controls: Marketing → Emails → Templates, + New, Email Builder, Add Elements (+), Image Element, Elements, Edit, Visibility, Device-Based Visibility, Conditional Sending, desktop, mobile Full procedure: 1. Upload an Image: Choose an image from your computer. 2. Use an Image URL: Paste a direct link to an externally hosted image. 3. Adjust Width & Height: Define custom dimensions or use automatic scaling. 4. Add a Link: Make your image clickable by adding a destination URL. 5. Set Alignment: Align the image to the left, center, or right. 6. Add Padding: Control spacing around the image for better design balance. <- this image 7. (Optional) Click the **Visibility** tab to manage **Device-Based Visibility** or **Conditional Sending** options. ![Step 7 of 8: (Optional) Click the Visibility tab to manage Device-Based Visibility…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057289798/original/ad6WgCPPL4DGdz-JTuhgaSNG-_ao81_g3g.png) **Step 7 of 8: (Optional) Click the Visibility tab to manage Device-Based Visibility…** This screenshot accompanies step 7 of 8 in the "How To Setup the Image Element" section of "Image Element in Email Builder". At this point in the walkthrough you (Optional) Click the Visibility tab to manage Device-Based Visibility or Conditional Sending options. The next step is to preview your email on both desktop and mobile devices to confirm the image displays as expected. - What to click: (Optional) Click the Visibility tab to manage Device-Based Visibility or Conditional Sending options. - Controls: Visibility, Device-Based Visibility, Conditional Sending, Marketing → Emails → Templates, + New, Email Builder, Add Elements (+), Image Element, Elements, Edit, desktop, mobile - Next: Preview your email on both desktop and mobile devices to confirm the image displays as expected. 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. 4. Locate the Image Element under the Elements section. 5. Drag and drop the Image Element into your desired position within the email layout. 6. Click on the Image Element to open the Edit tab on the left panel. Here you can: 7. (Optional) Click the Visibility tab to manage Device-Based Visibility or Conditional Sending options. <- this image 8. Preview your email on both desktop and mobile devices to confirm the image displays as expected. 8. Preview your email on both **desktop** and **mobile** devices to confirm the image displays as expected. --- ## **Frequently Asked Questions** **Q: Which image file types are supported?** You can upload or link common formats such as JPG, PNG, and GIF. **Q: Can I make an image clickable?** Yes, add a hyperlink in the Redirection Link field to make the image interactive. **Q: Can I use an external image URL?** Yes, simply paste a valid image URL into the Image URL field. Make sure the image is publicly accessible. **Q: Do Spacers affect email deliverability or loading speed?** No, Spacers are lightweight and do not impact deliverability or loading times. **Q: How can I delete an image?** Simply click on the Image Element and use the delete/trash icon to remove it from your layout. --- --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com