Skip to content
Marketing

Spacer Element in Email Builder

Learn how to use the Spacer Element in GHL Customer Care’s Email Builder to add clean, responsive spacing in your email layouts for better design & mobile optimization.

2 min read525 words5 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 the Spacer Element
  2. How To Setup the Spacer Element
  3. Frequently Asked Questions
  4. Related Articles

Video 1 Open in a new tab

This article introduces the new Spacer Element in GHL Customer Care’s Email Builder, designed to make email layout customization easier and more precise for both desktop and mobile users.

TABLE OF CONTENTS

What is the Spacer Element in GHL Customer Care Email Builder?

The Spacer Element is a drag-and-drop tool in GHL Customer Care’s Email Builder that allows users to add adjustable vertical or horizontal space between content blocks within their email templates. The Spacer Element provides a simple, intuitive way to control spacing without relying on dividers or manual padding adjustments. This feature ensures that your email layouts look clean, professional, and are responsive across all devices.

Key Benefits of the Spacer Element

Adding the Spacer Element to your email design process offers several user-focused advantages:

  • Effortless customization of email layouts without complex workarounds.
  • Cleaner, more professional-looking email designs.
  • Eliminates the need for using dividers as spacers or adjusting manual padding.
  • Responsive spacing automatically adapts for mobile and desktop devices.
  • Enhances the visual appeal and readability of your emails.

How To Setup the Spacer Element

Proper setup of the Spacer Element ensures your emails have the exact spacing you want, improving both aesthetics and readability. Follow these steps to add and customize the Spacer Element in your email templates:

  1. Navigate to Marketing → Emails → Templates from your GHL Customer Care sub-account dashboard.
    Step 1 of 6: Navigate to Marketing → Emails → Templates from your GHL Customer Care… What this shows Step 1 of 6: Navigate to Marketing → Emails → Templates from your GHL Customer Care sub-account dashboard. What this shows Shows where to go for step 1 of 6 in the "How To Setup the Spacer Element" section of "Spacer Element in Email Builder". This screenshot accompanies step 1 of 6 in the "How To Setup the Spacer Element" section of "Spacer Element in Email Builder". At this point in the walkthrough you navigate to Marketing → Emails → Templates from your GHL Customer Care sub-account dashboard. The next step is to open an existing email template by clicking on the template or create a new one by clicking the + New button in upper right corner. Step 1 of 6Image 1 of 5 Where to goNavigate to Marketing → Emails → Templates from your GHL Customer Care sub-account dashboard.
    Buttons and menus referenced Marketing → Emails → Templates+ NewAdd Elements (+)SpacerEditVisibility
    Next stepOpen an existing email template by clicking on the template or create a new one by clicking the + New button in upper right corner.
    All 6 steps in this procedure
    1. Navigate to Marketing → Emails → Templates from your GHL Customer Care sub-account dashboard. this image
    2. Open an existing email template by clicking on the template or create a new one by clicking the + New button in upper right corner.
    3. Click the Add Elements (+) icon in the upper left corner of the email builder. Locate the Spacer element in the sidebar.
    4. Drag and drop the Spacer Element into your desired position within the email layout.
    5. Click on the Spacer Element then select the Edit tab on the left bar to adjust the height, width or color. Click on the Visibility tab to adjust Device-Based Visibility and Conditional Sending.
    6. Preview your email to ensure the spacing looks correct on both desktop and mobile devices.
  2. Open an existing email template by clicking on the template or create a new one by clicking the + New button in upper right corner.
    Step 2 of 6: Open an existing email template by clicking on the template or create… What this shows Step 2 of 6: Open an existing email template by clicking on the template or create a new one by clicking the + New button in upper right corner. What this shows Shows where to go for step 2 of 6 in the "How To Setup the Spacer Element" section of "Spacer Element in Email Builder". This screenshot accompanies step 2 of 6 in the "How To Setup the Spacer Element" section of "Spacer Element in Email Builder". At this point in the walkthrough you open an existing email template by clicking on the template or create a new one by clicking the + New button in upper right corner. The next step is to click the Add Elements (+) icon in the upper left corner of the email builder. Locate the Spacer element in the sidebar. Step 2 of 6Image 2 of 5 Where to goOpen an existing email template by clicking on the template or create a new one by clicking the + New button in upper right corner.
    Buttons and menus referenced + NewMarketing → Emails → TemplatesAdd Elements (+)SpacerEditVisibility
    Next stepClick the Add Elements (+) icon in the upper left corner of the email builder. Locate the Spacer element in the sidebar.
    All 6 steps in this procedure
    1. Navigate to Marketing → Emails → Templates from your GHL Customer Care sub-account dashboard.
    2. Open an existing email template by clicking on the template or create a new one by clicking the + New button in upper right corner. this image
    3. Click the Add Elements (+) icon in the upper left corner of the email builder. Locate the Spacer element in the sidebar.
    4. Drag and drop the Spacer Element into your desired position within the email layout.
    5. Click on the Spacer Element then select the Edit tab on the left bar to adjust the height, width or color. Click on the Visibility tab to adjust Device-Based Visibility and Conditional Sending.
    6. Preview your email to ensure the spacing looks correct on both desktop and mobile devices.
  3. Click the Add Elements (+) icon in the upper left corner of the email builder. Locate the Spacer element in the sidebar.
    Step 3 of 6: Click the Add Elements (+) icon in the upper left corner of the email… What this shows Step 3 of 6: Click the Add Elements (+) icon in the upper left corner of the email builder. What this shows Shows where to go for step 3 of 6 in the "How To Setup the Spacer Element" section of "Spacer Element in Email Builder". This screenshot accompanies step 3 of 6 in the "How To Setup the Spacer Element" section of "Spacer Element in Email Builder". At this point in the walkthrough you click the Add Elements (+) icon in the upper left corner of the email builder. Locate the Spacer element in the sidebar. The next step is to drag and drop the Spacer Element into your desired position within the email layout. Step 3 of 6Image 3 of 5 Where to goClick the Add Elements (+) icon in the upper left corner of the email builder. Locate the Spacer element in the sidebar.
    Buttons and menus referenced Add Elements (+)SpacerMarketing → Emails → Templates+ NewEditVisibility
    Next stepDrag and drop the Spacer Element into your desired position within the email layout.
    All 6 steps in this procedure
    1. Navigate to Marketing → Emails → Templates from your GHL Customer Care sub-account dashboard.
    2. Open an existing email template by clicking on the template or create a new one by clicking the + New button in upper right corner.
    3. Click the Add Elements (+) icon in the upper left corner of the email builder. Locate the Spacer element in the sidebar. this image
    4. Drag and drop the Spacer Element into your desired position within the email layout.
    5. Click on the Spacer Element then select the Edit tab on the left bar to adjust the height, width or color. Click on the Visibility tab to adjust Device-Based Visibility and Conditional Sending.
    6. Preview your email to ensure the spacing looks correct on both desktop and mobile devices.
  4. Drag and drop the Spacer Element into your desired position within the email layout.
  5. Click on the Spacer Element then select the Edit tab on the left bar to adjust the height, width or color. Click on the Visibility tab to adjust Device-Based Visibility and Conditional Sending.
    Step 5 of 6: Click on the Spacer Element then select the Edit tab on the left bar… What this shows Step 5 of 6: Click on the Spacer Element then select the Edit tab on the left bar to adjust the height, width or color. What this shows Shows what to choose for step 5 of 6 in the "How To Setup the Spacer Element" section of "Spacer Element in Email Builder". This screenshot accompanies step 5 of 6 in the "How To Setup the Spacer Element" section of "Spacer Element in Email Builder". At this point in the walkthrough you click on the Spacer Element then select the Edit tab on the left bar to adjust the height, width or color. Click on the Visibility tab to adjust Device-Based Visibility and Conditional Sending. The next step is to preview your email to ensure the spacing looks correct on both desktop and mobile devices. Step 5 of 6Image 4 of 5 What to chooseClick on the Spacer Element then select the Edit tab on the left bar to adjust the height, width or color. Click on the Visibility tab to adjust Device-Based Visibility and Conditional Sending.
    Buttons and menus referenced EditVisibilityMarketing → Emails → Templates+ NewAdd Elements (+)Spacer
    Next stepPreview your email to ensure the spacing looks correct on both desktop and mobile devices.
    All 6 steps in this procedure
    1. Navigate to Marketing → Emails → Templates from your GHL Customer Care sub-account dashboard.
    2. Open an existing email template by clicking on the template or create a new one by clicking the + New button in upper right corner.
    3. Click the Add Elements (+) icon in the upper left corner of the email builder. Locate the Spacer element in the sidebar.
    4. Drag and drop the Spacer Element into your desired position within the email layout.
    5. Click on the Spacer Element then select the Edit tab on the left bar to adjust the height, width or color. Click on the Visibility tab to adjust Device-Based Visibility and Conditional Sending. this image
    6. Preview your email to ensure the spacing looks correct on both desktop and mobile devices.
    Step 5 of 6: Click on the Spacer Element then select the Edit tab on the left bar… What this shows Step 5 of 6: Click on the Spacer Element then select the Edit tab on the left bar to adjust the height, width or color. What this shows Shows what to choose for step 5 of 6 in the "How To Setup the Spacer Element" section of "Spacer Element in Email Builder". This screenshot accompanies step 5 of 6 in the "How To Setup the Spacer Element" section of "Spacer Element in Email Builder". At this point in the walkthrough you click on the Spacer Element then select the Edit tab on the left bar to adjust the height, width or color. Click on the Visibility tab to adjust Device-Based Visibility and Conditional Sending. The next step is to preview your email to ensure the spacing looks correct on both desktop and mobile devices. Step 5 of 6Image 5 of 5 What to chooseClick on the Spacer Element then select the Edit tab on the left bar to adjust the height, width or color. Click on the Visibility tab to adjust Device-Based Visibility and Conditional Sending.
    Buttons and menus referenced EditVisibilityMarketing → Emails → Templates+ NewAdd Elements (+)Spacer
    Next stepPreview your email to ensure the spacing looks correct on both desktop and mobile devices.
    All 6 steps in this procedure
    1. Navigate to Marketing → Emails → Templates from your GHL Customer Care sub-account dashboard.
    2. Open an existing email template by clicking on the template or create a new one by clicking the + New button in upper right corner.
    3. Click the Add Elements (+) icon in the upper left corner of the email builder. Locate the Spacer element in the sidebar.
    4. Drag and drop the Spacer Element into your desired position within the email layout.
    5. Click on the Spacer Element then select the Edit tab on the left bar to adjust the height, width or color. Click on the Visibility tab to adjust Device-Based Visibility and Conditional Sending. this image
    6. Preview your email to ensure the spacing looks correct on both desktop and mobile devices.
  6. Preview your email to ensure the spacing looks correct on both desktop and mobile devices.

Frequently Asked Questions

Q: Is the Spacer Element responsive for mobile devices?

The Spacer Element automatically adjusts for mobile responsiveness, ensuring consistent spacing across devices. Be sure to test your emails in both desktop and mobile previews to confirm optimal appearance.

Q: Does the Spacer Element add any visible content to my emails?

No, the Spacer only creates empty space and does not display any visible content.

Q: Can I set both vertical and horizontal spacing with the Spacer?

You can adjust the height for vertical space and width for horizontal space, depending on your layout needs.

Q: Do Spacers affect email deliverability or loading speed?

No, Spacers are lightweight and do not impact deliverability or loading times.

Q: How do I remove a Spacer if I no longer need it?

Simply click on the Spacer Element and use the delete/trash icon to remove it from your layout.

Was this guide helpful?

Related guides

@Mention or Tag Profile in Posts from Social Planner2 min read · 4 imagesAdd Location Tagging to Social Post1 min read · 9 imagesAdd Pinterest Pins in Social Planner4 min read · 8 imagesSocial Planner - How to Add Multiple Watermarks4 min read · 8 images