Skip to main content

Creating Text Buttons

By Gabrielle Links and Buttons

As well as dozens of font options and text styles, Mail Designer 365 also enables you to create stylish text buttons and badges in your newsletters. This step-by-step guide shows you how to get started and add a splash of color into your email designs.

Why are text buttons better?

You may already be familiar with the shapes and image elements within Mail Designer 365. While image-based elements can be a great addition to your email design, it is not recommended to create emails that consist entirely of images. In particular, important information such as links and call-to-actions within your email should be text-based where possible.

Here are just a few reasons why text buttons are better...

  • Compatibility: Text will show up in all email clients, even when images are turned off (i.e. for mobile users with data saving activated)
  • Spam compliance: Emails that are image-heavy are much more likely to land in spam. In general, a 60:40 text to image ratio is recommended
  • Accessibility: Screen readers can’t decipher images without an alt text so using text guarantees your message can be understood by everyone in your audience
  • Email size: Including more text in your emails reduces overall email size in comparison to images

Use cases for badges and buttons

A lot of the time when writing copy for an email, you will need to emphasise certain words and phrases. This ensures important information immediately stands out to the recipient, which is especially useful for readers quickly skimming your email for the essentials.

Badges and buttons within text can be used hand in hand with classic marketing techniques such as creating a sense of urgency – i.e. through time-sensitive language ("Hurry, ends midnight!") – or to highlight buzzwords like "new" or "sale" which instantly grab the reader's attention.

A text button effectively does the same job as a badge, whilst also allowing you to insert a link. In comparison to boring text links, text buttons jump out at the recipient and entice them to click – making them a great choice for your email's most important call-to-action:

Inserting a badge

Found an area of text you wish to emphasise? Highlight the text, then go to Insert > Badge in the Mail Designer 365 menu:

A default style will then be applied to your text. Use the control panel to update the style and match it perfectly to your email design. First up, try using the color picker to update the background color of your text badge:

Then, play around with the padding and rounding controls to give the badge the shape you want. Rounded corners create the perfect "pill button" shape, or opt for harder edges for a classic highlight effect.

Finally, use the text style editor to update the font, size, alignment and boldness of your text:

Inserting a button

Adding a text button follows a really similar workflow to adding a text badge. Start by selecting the text you will be using for your button, then go to Insert > Text Button in the Mail Designer 365 menu.

The first option you will see in the control panel is the link field. Enter the URL for your button here:

You can now proceed to adjust the style of your button, as described in the previous section:

Saving styles

If you are regularly sending emails for your business, it's best practice to keep designs consistent, as this helps to create a strong identity for your brand which customers will recognise and relate to. With this in mind, saving style options across your team is a great way to ensure buttons, badges and text stay the same across all your email communication.

Once you're happy with how a badge or button looks, switch to the "Own" tab and click "Save badge/button style":

You can then give the style a name, e.g. "important text" and save it for the rest of your team to reuse again and again:

In future, saved badge and button styles can be found under the "Own" tab.

Using predefined styles

In a hurry or need some inspiration for your badge or button styles? Mail Designer 365 also offers a range of predefined options that you can quickly apply to text for an instant style upgrade.

Once you've selected your chosen text and opened the editor, switch to the panel "Ready Made" to explore all options:

Click on a preview to apply the style to your text. Here we've opted for a bold highlighter effect – great for outlining key information, for example in office newsletters:

Get started with Mail Designer 365 today

Start your 7 day free trial to try out Text Badges and Buttons and create stylish email newsletters for your business on your Mac.
No credit card required
Compatible from macOS 10.13 onwards

Format link styles

By Links and Buttons

Mail Designer 365 allows you to format link styles to make your links stand out in your email design.

Adding link styles

To get started, highlight the text which you want to link and add the link address under "Add link" in the "Style" menu.

You will now see a standard, blue link. To format this link, scroll to "Link style" in the "Style" menu. Here you can format the color and the style (e.g. bold, italic, all caps) of your link.

To just change the style of one particular link, highlight the link and go to "Emphasis" in the "Style" menu, where you can then change the stye and color.

A Quick Tour of Mail Designer 365

Background

Layout Blocks

TextScout

Editing Text

Links and Buttons

Configuring Text Styles

Tables

Image Areas

Images

Using Retina Images with your Design

Graphics and Other Objects

Creative Tools

Advanced Design Techniques

Blend Modes

Optimizing your Template for Mobile

Plain Text

Preview your Design

Preparing your Design for Sending

Email Delivery

HTML Export

Other Sharing Options

Formatting styles for text links

By Links and Buttons

You can create consistent and visually impressive link styles in Mail Designer 365, so that your links will also stand out in your design. Let's get started!

Formatting link styles

To get started, highlight a section of text you want to link to and add your link address under "Add Link" in the "Style" menu.

Now you will have a standard, blue, underlined link. To format your link, head to "Link Style", which you will also find in the "Style" menu. Here you can format the color and style of your link. You can choose from bold, italic, underlined, strikethrough, and all caps.

To edit a specific link and diverge from the style of your other links, you can configure this under "Emphasis" in the "Style" menu.

A Quick Tour of Mail Designer 365

Background

Layout Blocks

TextScout

Editing Text

Links and Buttons

Configuring Text Styles

Tables

Image Areas

Images

Using Retina Images with your Design

Graphics and Other Objects

Creative Tools

Advanced Design Techniques

Blend Modes

Optimizing your Template for Mobile

Plain Text

Preview your Design

Preparing your Design for Sending

Email Delivery

HTML Export

Other Sharing Options

Adding multiple links with a single image background

By equinux Team Links and Buttons

In a HTML email, you can only add one link per one image area. However, if you want to add multiple links and have one single image background, this guide shows you how to easily do this with Mail Designer 365.

Get started with Mail Designer 365 today

Start your 7 day free trial and use your Mac to create stylish email newsletters for your business.
No credit card required
Compatible from macOS 10.13 onwards

Add multiple links with a single image background: Method

To get started, drag your image into the image area:

Adding a button

Now, we can create a “Shop Now” button by adding a shape and a text box into an image area. Or you can try dragging one of our pre-made buttons into an image area and customizing it.

 

With this button, we want to add a link to our store. Click "Edit Link & Background:"

Click "Add Link." We are going to type: example.com/subscribe

 

When recipients receive an email and clicks anywhere within the image area, it will take them to the landing page of the link.

Creating a second button within the image background

 

Because the second button we added is still in the same image area, the link will still be example.com/mystore. We want to have the second button go to a different link.

Why is only allow one link per image area allowed?

Email clients do not support multiple links on a single image. Your entire image area becomes one single image, so one link.

Text areas are different: You can have multiple links within one text area. If you want, every word in a text area can have a different link.

How does Mail Designer 365 deal with this problem?

If you still want one background image with multiple buttons, the solution is simply to break the image up into multiple image areas.

Go to the “Contents” section. Find a layout block with multiple image areas.

In this example, we want to use two buttons with two different links. So we will use a layout block with two image areas. Then we are going to drop the layout block above the original layout block that we want to replace.

Remember, do not drag the new layout block above or below the original layout block. You want this layout block with two image areas to replace the layout block with a single image area. It is important to make sure that you drag and drop the replacement above the old one.

 

Once you drag and drop the layout block, Mail Designer 365 is not sure what size the images have to be.

You can adjust the height of an image area to your desired height by dragging down the image area's outline and if you resize the width, you can see that the second button and text are still there.

 

Select the two elements and cut them. To cut, choose "Edit" > "Cut." Or you can press Command-X on your keyboard.

Readjust the width of the first image area and adjust the height of the second image area to match the height of the first image area..

Once you adjust the height, paste the cut image onto the second image area. You can do this by choosing "Edit" > "Paste" or by pressing Command-V on your keyboard. Then, copy and paste the background image from the first image area into the second image area.

Fixing the pasted image

The image is now duplicated onto the second image area. Notice that the background image in the image area is in the front.

Click on the image in the second image area. Once the image is selected, click "Back" to re-order the image to the back:

 

Drag the image of the second image area to the position that lines up with the image in the first image area. This will create an illusion of a single image.

 

Once you have finished adjusting the position of the image, you will be able to see that the two images look like a single image. However, we actually have 2 image areas, which means that each image area can have their own, unique link.

If you turn off the layout mode, you can take a look at what the 2 image areas will look like.

How to add links to images:

Click on an image area or the elements within the image area. Then, click "Edit Link & Background." Then, click "Add Link." and type in your desired link. In this example, we are going to use example.com/subscribe for our subscribe button:

Click on the other image area and add another link. Type in your desired link. For this example, to go with our shop now button, we are going to use the link: example.com/store.

There you go! That's how you can add multiple links with a single image background.

A Quick Tour of Mail Designer 365

Background

Layout Blocks

TextScout

Editing Text

Links and Buttons

Configuring Text Styles

Tables

Image Areas

Images

Using Retina Images with your Design

Graphics and Other Objects

Creative Tools

Advanced Design Techniques

Blend Modes

Optimizing your Template for Mobile

Plain Text

Preview your Design

Preparing your Design for Sending

Email Delivery

HTML Export

Other Sharing Options

Adding different buttons with different links

By Links and Buttons

One image area only allows you to add one link.

Remember, one image area only allows you to add one link. Even though you can have different graphic elements within one image area, the entire image area will only link to a single destination. When you send your email templates, an image area with different elements will be rendered as a single image. This is why  you can only add one link within one image area.

Multiple image areas

In order to add different buttons with different links, you need to use a layout blocks with multiple image areas. Within Mail Designer 365, you have multiple choices of different layout blocks with multiple image areas.

You can choose which layout you want. Within each image area, you can add a single link. Therefore, you have the freedom to add a button with a unique link within each image area. The different image areas will be rendered as their own individual images.

Adding buttons with different links

In this example, we are using a layout block with 4 image areas:



Then, we are adding a unique icon as buttons within each image area:

Afterwards, we are adding a different link within each image area. For the Facebook icon, we will add a link to the Facebook page:

On the second image area, we will add a Pinterest icon. Then, we will add a link to the Pinterest page:

For the third image area, we will place a Twitter icon. Then, we will add a link to the Twitter page:

On the fourth image area, we will add the Instagram icon. Afterwards, we will add a link to the Instagram, page:

 

When the email template is rendered, the four different image areas will become four different images with their individual links.

Correct vs. Incorrect:

Correct because: 4 different icons in 4 different image areas. You can add 1 link per 1 image area. Therefore, you can add 4 different links total.

 

 

Incorrect because: 4 different icons in 1 image area. You can only add 1 link per 1 image area. Therefore, 4 icons will only lead to 1 landing page.

 

 

A Quick Tour of Mail Designer 365

Background

Layout Blocks

TextScout

Editing Text

Links and Buttons

Configuring Text Styles

Tables

Image Areas

Images

Using Retina Images with your Design

Graphics and Other Objects

Creative Tools

Advanced Design Techniques

Blend Modes

Optimizing your Template for Mobile

Plain Text

Preview your Design

Preparing your Design for Sending

Email Delivery

HTML Export

Other Sharing Options

Why is my link being applied to the entire image area instead of my button or shape?

By Links and Buttons

What can I do within an image area?

With Mail Designer 365, you can add a background image or texture. You can also add multiple different graphic elements together within one image area. You can combine multiple shapes and texts and scatter them around within an image area.

However, you can only add one link per image area. You can add a link by double-clicking a graphic element or the background of the image area. Then, go to the style section and click "Edit Link & Background." You can add the link to your landing page.

 

Why is my link being applied to the entire image area instead of my button or shape?

When your email templates are rendered, an entire image area will become one image. This means that when you send your email designs, all of the graphic elements that you add within one image area will be combined and turned into one image. As a result, the link that you add will apply to the entire image area instead of a single element.

 

 

If you want to add multiple links or multiple buttons that lead to different landing pages, then use layout blocks with multiple image areas. This way, you can a different link within each image area.

 

A Quick Tour of Mail Designer 365

Background

Layout Blocks

TextScout

Editing Text

Links and Buttons

Configuring Text Styles

Tables

Image Areas

Images

Using Retina Images with your Design

Graphics and Other Objects

Creative Tools

Advanced Design Techniques

Blend Modes

Optimizing your Template for Mobile

Plain Text

Preview your Design

Preparing your Design for Sending

Email Delivery

HTML Export

Other Sharing Options

 

Adding buttons

By Links and Buttons

Call-to-Action Buttons

All effective email campaigns include call-to-action (CTA) buttons. In Mail Designer 365, you can choose from a number of buttons. On the right side, you will see the Contents section. Choose the triangle button. Then, scroll down to the buttons section:

Drag a button to an image area. To change the text of the buttons, double click the text and type your message:

When you double-click your button, look on the right side of the screen. You will find the Style section. Here you can edit your button's text by changing the font, font size, font style, and font color:

Click "Edit Link & Background" to add your desired landing page:

Click "Add Link"

 

Then type in your desired landing page:

 

 

A Quick Tour of Mail Designer 365

Background

Layout Blocks

TextScout

Editing Text

Links and Buttons

Configuring Text Styles

Tables

Image Areas

Images

Using Retina Images with your Design

Graphics and Other Objects

Creative Tools

Advanced Design Techniques

Blend Modes

Optimizing your Template for Mobile

Plain Text

Preview your Design

Preparing your Design for Sending

Email Delivery

HTML Export

Other Sharing Options

 

Creating an image link

By Links and Buttons

Image link

You can create a link for an image area, so the image area will be clickable in your email. Remember that entire image areas will be displayed as a single image in your email. Also, you can only assign one link per image area.

To create an image area link, choose an image area in your design. Then click the "Add Link" button from the Style section of the sidebar. Afterwards, enter your desired URL. The entire image area will be “hot.” Readers will be able to click it in your final message.

A little link icon will show you for which image areas links has been embedded:

You can only link to one landing page per one image area. These layout blocks have a single image area:

With these layout blocks, you can only link to one landing page. It does not matter whether you add multiple graphics within the same image area. The entire image area will be rendered as a single image.

 

Multiple links

We’ve included several layout blocks that contain several image areas. Each image area can have its own links. If you want to link to 2 social media platforms, then use a layout block with 2 image areas. If you want to link to 3 different landing pages, then use a layout block with 3 image areas and so on...

You can use these blocks to create multiple image area links, e.g. in order to use multiple buttons with links to social media sites. With this layout block, you can potentially link up to 4 different landing pages/social media platforms:

This is what it will look like after you drag this layout block onto your template:

You can adjust the size of each individual image areas:

Here is an example of what it will look like when you add 4 different icons:

 

Remember, placing 4 icons within 1 image area will NOT allow you to link to 4 different landing pages/social media networks. This is an example of the INCORRECT way to do it:

Recap:

 

 

A Quick Tour of Mail Designer 365

Background

Layout Blocks

TextScout

Editing Text

Links and Buttons

Configuring Text Styles

Tables

Image Areas

Images

Using Retina Images with your Design

Graphics and Other Objects

Creative Tools

Advanced Design Techniques

Blend Modes

Optimizing your Template for Mobile

Plain Text

Preview your Design

Preparing your Design for Sending

Email Delivery

HTML Export

Other Sharing Options

Creating a text link

By Links and Buttons

Working with links

You can include links to your website, file downloads or other resources on the web in your design. Mail Designer 365 support links for image areas as well as text links.

 

Creating a text link

Mark the text that you would like to turn into a link and click "Add Link" from the left sidebar.

You can now choose what type of link you want to add:

 

A Quick Tour of Mail Designer 365

Background

Layout Blocks

TextScout

Editing Text

Links and Buttons

Configuring Text Styles

Tables

Image Areas

Images

Using Retina Images with your Design

Graphics and Other Objects

Creative Tools

Advanced Design Techniques

Blend Modes

Optimizing your Template for Mobile

Plain Text

Preview your Design

Preparing your Design for Sending

Email Delivery

HTML Export

Other Sharing Options

Privacy Settings / Datenschutz-Einstellungen