Adding buttons to emails in the Design Editor

Note: All emails and landing pages created in the Classic Design Editor are now legacy assets. They are now view-only and not editable. Users can create emails and landing pages with the Design Editor and Source Editor. Learn more in our product notice. Learn more about the differences between the different editors for emails and for landing pages.

Buttons are an effective way to create calls-to-action in your email messages. You can add a button to a layout section of your email using the Design Editor. Button content is text only and cannot use images.

Learn more by watching this video!

To add buttons to your email:

  1. With your email open, drag the button content to the layout.

    An image showing a button being added to the email canvas

  2. Click the button content and use the Button panel to style your button and configure the button's link.
  3. Click the button text to change it. Use the text toolbar to format the button text.

Alignment

Use the alignment options in the Button panel to align the button to the left, to the right, centered, or the full width of the content block.

Text

Set the button text by clicking the button on the email canvas. You can use the text toolbar to change the font, size, style, and color of the button text. If you create emails using a RTL (right-to-left) writing system, the Design Editor gives you the option to write from right to left to insert your button text. Learn more about writing right-to-left.

An image of the text toolbar available for buttons

Color

Using the Button panel, you can set the button color and the background color of the content block. To change the color of the button text, click the button on the email canvas and use the text toolbar to make the change.

Linking

To set the link for the button, use the Button panel. You can link to:

  • A landing page
  • A file in file storage
  • An external webpage
  • A system action like subscribing to an email group or opening the subscription management page
  • A new email message

Learn more about the link types.

Warning: To avoid issues with buttons rendering in your emails, do not copy and paste text which contains hyperlinks into your buttons.

Sizing

Using the Button panel, you can adjust the size of the button within the content block using the Width setting. The following options are available:

  • Fit to text: Size the button based on the button text. As the button text changes, the size adjusts accordingly.
  • Fit to width: Size the button to width of the entire content block.

Rounded edges

You can create buttons with rounded edges using the radius settings in the Button panel. By default a button has square edges (0 radius). To make rounded edges, increase the radius setting. The radius can be 0 - 30.

An image showing different button radious options

Padding and borders

Adjust the padding and borders around the button or the content block using the options available from the Button panel.

An image showing how border and padding settings apply to the button and content block

Number 1Button Padding: The space around the text of the button.

Number 2Button Border: The border around the button.

Number 3Outer Padding: The space around the content block.

Number 4Outer Border: The border surrounding the content block.

Related

Working with email contents and layouts in the Design Editor

Creating emails in the Design Editor