Skip to content
Marketing

Button Element in Email Builder

The Button Element allows you to add clickable buttons to your email templates, helping you drive engagement through clear and visually appealing calls…

2 min read546 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. What is the Button Element in Email Builder?
  2. Key Benefits of the Button Element
  3. How To Setup the Button Element
  4. Frequently Asked Questions

The Button Element allows you to add clickable buttons to your email templates, helping you drive engagement through clear and visually appealing calls to action (CTAs). You can fully customise the button’s text, colour, size, and link destination to match your email design and brand style.

TABLE OF CONTENTS

What is the Button Element in Email Builder?

The Button Element is a drag-and-drop block that lets you insert a fully customisable CTA button into your email layout. You can adjust its design, alignment, and link destination to fit your goals such as directing recipients to a landing page, product page, or event registration.

Buttons are essential for guiding user actions and improving click-through rates. With this element, you can style them to stand out while maintaining a consistent look across all devices.

Note: Buttons are built using HTML and render reliably in most email clients. Always preview your design on both desktop and mobile to ensure proper display.

Key Benefits of the Button Element

Adding the Button Element to your email design provides several benefits:

  • Create clear and effective calls to action with ease.

  • Customise button text, colour, and size to match your design theme.

  • Add links to direct users to specific pages or actions.

  • Align and space buttons precisely for visual balance.

  • Automatically responsive across mobile and desktop devices.

How To Setup the Button Element

Follow these steps to add and configure the Button 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… What this shows Step 1 of 8: Navigate to Marketing → Emails → Templates from your sub-account dashboard. What this shows Shows where to go for step 1 of 8 in the "How To Setup the Button Element" section of "Button Element in Email Builder". This screenshot accompanies step 1 of 8 in the "How To Setup the Button Element" section of "Button 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 email template or click the + New button to create one. Step 1 of 8Image 1 of 5 Where to goNavigate to Marketing → Emails → Templates from your sub-account dashboard.
    Buttons and menus referenced Marketing → Emails → Templates+ NewEmail BuilderAdd Elements (+)Button ElementElementsEditVisibilityDevice-Based VisibilityConditional Sendingdesktopmobile
    Next stepOpen an existing email template or click the + New button to create one.
    All 8 steps in this procedure
    1. Navigate to Marketing → Emails → Templates from your sub-account dashboard. this image
    2. Open an existing email 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 Button Element under the Elements section.
    5. Drag and drop the Button Element into your desired position in the layout.
    6. Click on the Button Element to open the Edit tab on the left panel. Here you can:
    7. Click the Visibility tab to configure Device-Based Visibility or Conditional Sending options.
    8. Preview your email in both desktop and mobile modes to ensure the button looks and functions correctly.

  2. Open an existing email template or click the + New button to create one.

    Step 2 of 8: Open an existing email template or click the + New button to create one What this shows Step 2 of 8: Open an existing email template or click the + New button to create one. What this shows Shows where to go for step 2 of 8 in the "How To Setup the Button Element" section of "Button Element in Email Builder". This screenshot accompanies step 2 of 8 in the "How To Setup the Button Element" section of "Button Element in Email Builder". At this point in the walkthrough you open an existing email 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. Step 2 of 8Image 2 of 5 Where to goOpen an existing email template or click the + New button to create one.
    Buttons and menus referenced + NewMarketing → Emails → TemplatesEmail BuilderAdd Elements (+)Button ElementElementsEditVisibilityDevice-Based VisibilityConditional Sendingdesktopmobile
    Next stepIn the Email Builder, click the Add Elements (+) icon in the left sidebar.
    All 8 steps in this procedure
    1. Navigate to Marketing → Emails → Templates from your sub-account dashboard.
    2. Open an existing email 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 Button Element under the Elements section.
    5. Drag and drop the Button Element into your desired position in the layout.
    6. Click on the Button Element to open the Edit tab on the left panel. Here you can:
    7. Click the Visibility tab to configure Device-Based Visibility or Conditional Sending options.
    8. Preview your email in both desktop and mobile modes to ensure the button looks and functions correctly.

  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… What this shows Step 3 of 8: In the Email Builder, click the Add Elements (+) icon in the left sidebar. What this shows Shows where to go for step 3 of 8 in the "How To Setup the Button Element" section of "Button Element in Email Builder". This screenshot accompanies step 3 of 8 in the "How To Setup the Button Element" section of "Button 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 Button Element under the Elements section. Step 3 of 8Image 3 of 5 Where to goIn the Email Builder, click the Add Elements (+) icon in the left sidebar.
    Buttons and menus referenced Email BuilderAdd Elements (+)Marketing → Emails → Templates+ NewButton ElementElementsEditVisibilityDevice-Based VisibilityConditional Sendingdesktopmobile
    Next stepLocate the Button Element under the Elements section.
    All 8 steps in this procedure
    1. Navigate to Marketing → Emails → Templates from your sub-account dashboard.
    2. Open an existing email 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 Button Element under the Elements section.
    5. Drag and drop the Button Element into your desired position in the layout.
    6. Click on the Button Element to open the Edit tab on the left panel. Here you can:
    7. Click the Visibility tab to configure Device-Based Visibility or Conditional Sending options.
    8. Preview your email in both desktop and mobile modes to ensure the button looks and functions correctly.

  4. Locate the Button Element under the Elements section.

  5. Drag and drop the Button Element into your desired position in the layout.

  6. Click on the Button Element to open the Edit tab on the left panel. Here you can:

    • Edit Button Text: Change the label to reflect your desired action (e.g., Shop Now, Learn More, Book a Call).

    • Add a Link: Enter the destination URL where the button should redirect users.

    • Customize Styling: Adjust button color, text color, font, border radius, and background.

    • Adjust Size and Alignment: Control width, padding, and alignment (left, center, or right).

    • Add Padding: Add space around the button for layout balance.

      Step 5 of 5: Add Padding: Add space around the button for layout balance What this shows Step 5 of 5: Add Padding: Add space around the button for layout balance. What this shows Shows what this covers for step 5 of 5 in the "How To Setup the Button Element" section of "Button Element in Email Builder". This screenshot accompanies step 5 of 5 in the "How To Setup the Button Element" section of "Button Element in Email Builder". At this point in the walkthrough you add Padding: Add space around the button for layout balance. Step 5 of 5Image 4 of 5 What this coversAdd Padding: Add space around the button for layout balance.
      Buttons and menus referenced Marketing → Emails → Templates+ NewEmail BuilderAdd Elements (+)Button ElementElementsEditVisibilityDevice-Based VisibilityConditional Sendingdesktopmobile
      All 5 steps in this procedure
      1. Edit Button Text: Change the label to reflect your desired action (e.g., Shop Now, Learn More, Book a Call).
      2. Add a Link: Enter the destination URL where the button should redirect users.
      3. Customize Styling: Adjust button color, text color, font, border radius, and background.
      4. Adjust Size and Alignment: Control width, padding, and alignment (left, center, or right).
      5. Add Padding: Add space around the button for layout balance. this image

  7. Click the Visibility tab to configure Device-Based Visibility or Conditional Sending options.

    Step 7 of 8: Click the Visibility tab to configure Device-Based Visibility or… What this shows Step 7 of 8: Click the Visibility tab to configure Device-Based Visibility or Conditional Sending options. What this shows Shows what to click for step 7 of 8 in the "How To Setup the Button Element" section of "Button Element in Email Builder". This screenshot accompanies step 7 of 8 in the "How To Setup the Button Element" section of "Button Element in Email Builder". At this point in the walkthrough you click the Visibility tab to configure Device-Based Visibility or Conditional Sending options. The next step is to preview your email in both desktop and mobile modes to ensure the button looks and functions correctly. Step 7 of 8Image 5 of 5 What to clickClick the Visibility tab to configure Device-Based Visibility or Conditional Sending options.
    Buttons and menus referenced VisibilityDevice-Based VisibilityConditional SendingMarketing → Emails → Templates+ NewEmail BuilderAdd Elements (+)Button ElementElementsEditdesktopmobile
    Next stepPreview your email in both desktop and mobile modes to ensure the button looks and functions correctly.
    All 8 steps in this procedure
    1. Navigate to Marketing → Emails → Templates from your sub-account dashboard.
    2. Open an existing email 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 Button Element under the Elements section.
    5. Drag and drop the Button Element into your desired position in the layout.
    6. Click on the Button Element to open the Edit tab on the left panel. Here you can:
    7. Click the Visibility tab to configure Device-Based Visibility or Conditional Sending options. this image
    8. Preview your email in both desktop and mobile modes to ensure the button looks and functions correctly.

  8. Preview your email in both desktop and mobile modes to ensure the button looks and functions correctly.

Frequently Asked Questions

Q: Can I add multiple buttons in one email?

Yes, you can add as many Button Elements as you need. Each one can have unique styling and links.

Q: How do I make a button full-width?

Use the full width toggle in the edit panel to set the button to 100% or manually adjust it using padding and alignment controls.

Q: Are buttons mobile responsive?

Yes, buttons automatically resize and reposition for optimal display on mobile devices.

Q: How do I remove a button from my layout?

Select the Button Element and click the trash/delete icon to remove it from your email design.

Frequently asked questions

What is the Button Element in Email Builder?
The Button Element is a drag-and-drop block that lets you insert a fully customisable CTA button into your email layout. You can adjust its design, alignment, and link destination to fit your goals such as directing recipients to a landing page, product page, or event registration. Buttons are essential for guiding user actions and improving click-through rates. With this element, you can style them to stand out while maintaining a consistent look across all devices. Note: Buttons are built using HTML and render reliably in most email clients. Always preview your design on both desktop and mobile to ensure proper display.

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