Rounded corners

By Graphics and Other Objects

Did you ever want to create text boxes with rounded corners? 

Text boxes with round corners are often used to create customized buttons. Some also use to add some dimension and style into their newsletter.

Open Mail Designer 365 on your computer. If there isn't one already, drag an image area into your design. You will find image areas under "Contents." Then, click the layout blocks button (the first button under "Contents") and scroll down to the image areas.

 

Once you have added an image area, go ahead and grab a square shape into your email design.

Adjust the size of your shape by dragging the size controls of the shape.

On the right side, you can round the corners of your shape by adjusting the corner radius.

After you have decided how round you want the corners to be, feel free to adjust the shape once again if need.

When you get the look that you want, click on the "Contents" on the right side.

Then, click on the text object button.

Choose your text object and drag it into the same image area as where your shape is located.

If you decide that you do not like the look of your text object, you can customize the font, font color, font style, font size, and the font color. You can do this by double-clicking on the text. Mail Designer 365 will automatically open the style tab on the right, where you can make all of your adjustments.

To edit your text, double-click the text and type your message.

If you want multiple text boxes with rounded corners, we recommend choosing a layout block with multiple image areas...

Choosing layout blocks with multiple image areas will make it easier for you to edit individual boxes. In this example, we are going to use two image areas. Drag a layout block with two image areas into your email template.

Then, adjust the size of the image areas. Just drag the outline of the image area.

Afterwards, add a shape into an image area.

 

Feel free to adjust the size of the shape.

Adjust the corner radius of the shape by double-clicking on the shape and moving the corner radius slider on the right.

Change the color of the shape under the "Fill" section.

 

Repeat the same process for the second image area.

 

 

Click the "Contents" section and then choose the text object (T) icon.

Drag a text object into each image area.

Here is what it looks like after dragging a text object into each image area:

Feel free to adjust the font style, font size, font color, font weight, etc. to fit your needs. Each text area can be customized.

To edit your message, double-click on the text object and type your message.

You can tailor your design to fit your needs.

Here is an example where we added several examples of creating the effect of text boxes with rounded corners within one email template:

 

 

 

How Can We Help?

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Appendix: Compatibility

Appendix: Keyboard Shortcuts

Approval

Background

Blend Modes

Creative Tools

Exporting a Design to Campaign Monitor

Exporting a Design to Mailchimp

Graphics and Other Objects

HTML Export

Image Areas

Images

Layout Blocks

Optimizing your Template for Mobile

Plain Text

Preparing your Design for Sending

Preview your Design

Send via Mail Designer 365

Sharing your Designs

Tables

Teamwork

Text Styles

The Inbox View

Using Retina Images with your Design

Working with Links and Buttons

Working with Text

Account

  • Articles coming soon

 

 

 

 

 

Using objects with text

By Graphics and Other Objects

Objects and Text

Some of the objects may contain text. You can double-click the text to replace it with your own.

Choose “Graphics” in the Contents section, choose for example the red “Sign Up” image and drag it into an image area:

Double-click the “Sign Up” text and we can type in a custom name. You can also choose a font and make it bigger or smaller to fit the available space:

 

How Can We Help?

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Appendix: Compatibility

Appendix: Keyboard Shortcuts

Approval

Background

Blend Modes

Creative Tools

Exporting a Design to Campaign Monitor

Exporting a Design to Mailchimp

Graphics and Other Objects

HTML Export

Image Areas

Images

Layout Blocks

Optimizing your Template for Mobile

Plain Text

Preparing your Design for Sending

Preview your Design

Send via Mail Designer 365

Sharing your Designs

Tables

Teamwork

Text Styles

The Inbox View

Using Retina Images with your Design

Working with Links and Buttons

Working with Text

Account

  • Articles coming soon

Pixel precise element editing

By Graphics and Other Objects

Edit your elements precisely

Changing the position and size of elements by dragging the element's resize controls is perfect for many situations. However, sometimes, you want to be as precise as possible. With Mail Designer 365, you can change size, position or rotation by entering a precise value.

When you select a shape, image or button, you will find all options for this element on the left sidebar. You can now enter a precise value for each field.

 

How Can We Help?

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Appendix: Compatibility

Appendix: Keyboard Shortcuts

Approval

Background

Blend Modes

Creative Tools

Exporting a Design to Campaign Monitor

Exporting a Design to Mailchimp

Graphics and Other Objects

HTML Export

Image Areas

Images

Layout Blocks

Optimizing your Template for Mobile

Plain Text

Preparing your Design for Sending

Preview your Design

Send via Mail Designer 365

Sharing your Designs

Tables

Teamwork

Text Styles

The Inbox View

Using Retina Images with your Design

Working with Links and Buttons

Working with Text

Account

  • Articles coming soon

Rotating objects

By Graphics and Other Objects

Object Rotation

Sometimes, you may want to rotate an object to add some style in your design. First, click on the object that you want to rotate.

When you click on the corners of the object, you can see the cursor change. This will allow you to shrink or expand the size of your object:

In order to rotate the object, hold down the Command ⌘ key and then click one of the graphics resize controls.  You will see that the cursor will turn into a rotate icon. This will allow you to rotate the object freely. You can rotate shapes, graphic elements, and image masks.

 

Mail Designer 365 allows you to rotate an object to varying degrees. You will be able to tell how many degrees you have rotated the object by the label that pops up during rotation:

 

Similarly, you can choose to rotate only the text area if you want. Just select the text, and hold the command key. Once you see the rotation cursor, feel free to rotate the text area.

 

 

If you want to rotate both the text and the object, hold the command button and click on both the shape and the text. You will see that the two things are now selected:

Click "Group" on the right side:

Once you have group the two things together, hold the command key and click on the resize controls. Again, you will see that the cursor will turn into a rotate icon.

When you rotate it, both the text area and the shape are rotated together.

 

 

 

How Can We Help?

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Appendix: Compatibility

Appendix: Keyboard Shortcuts

Approval

Background

Blend Modes

Creative Tools

Exporting a Design to Campaign Monitor

Exporting a Design to Mailchimp

Graphics and Other Objects

HTML Export

Image Areas

Images

Layout Blocks

Optimizing your Template for Mobile

Plain Text

Preparing your Design for Sending

Preview your Design

Send via Mail Designer 365

Sharing your Designs

Tables

Teamwork

Text Styles

The Inbox View

Using Retina Images with your Design

Working with Links and Buttons

Working with Text

Account

  • Articles coming soon

Resizing objects

By Graphics and Other Objects

Editing objects

Mail Designer 365 allows you to manipulate your graphics and shapes in multiple ways.

Resizing an object

You can resize and adjust graphics using the resize controls. Click a graphic to see the resize controls.

Then drag the graphic to the size you would like it to be.

Resizing from the center

If you hold down the option key while resizing a graphic, it will be re- sized evenly from the center (i.e. it will be resized in from the edge you’re dragging as well as from the opposite edge).

Resizing without constraining proportions

Ordinarily, Mail Designer 365 preserves the proportions of a graphic when you resize it. However, you can also optionally choose to disregard the proportions while resizing.

Click and hold the resize controls of a graphic or image and press now the Command key to resize the graphic without preserving its proportions.

 

 

How Can We Help?

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Appendix: Compatibility

Appendix: Keyboard Shortcuts

Approval

Background

Blend Modes

Creative Tools

Exporting a Design to Campaign Monitor

Exporting a Design to Mailchimp

Graphics and Other Objects

HTML Export

Image Areas

Images

Layout Blocks

Optimizing your Template for Mobile

Plain Text

Preparing your Design for Sending

Preview your Design

Send via Mail Designer 365

Sharing your Designs

Tables

Teamwork

Text Styles

The Inbox View

Using Retina Images with your Design

Working with Links and Buttons

Working with Text

Account

  • Articles coming soon

Adding video placeholders

By Graphics and Other Objects

Video Placeholders

With Mail Designer 365, you can add a Video Placeholder to your email design. You will find all available video placeholders in the video placeholder portion of the Contents section.

If you drag the placeholder into an image area, then you can enter the public link to the video. Click on "Edit Link & Background."

Then, click on "Add link."

Type in your video link:

What kinds of videos can I link to?

With Mail Designer 365, you can choose from a variety of different video placeholders. This allows you to link to a video clip directly in your template.  After you have added a video placeholder from the Contents tab of Mail Designer 365, copy the link to the video into the link field.

Mail Designer 3 allows you to use links from Youtube and Vimeo, which will play directly on the recipient's device. For mobile users, Mail Designer 365 allows recipients to play Youtube and Vimeo videos if he/she has the app installed on their device. If not, then the recipients will be directly forwarded to the corresponding YouTube or Vimeo apps for the iOS or the Android.

You can also link to other video websites, but these are not directly supported by Mail Designer 365. This means that Mail Designer 365 will not be able to generate a video preview thumbnail as well as play the video directly within the email. However, recipients will still be able to view the video as it will open the video on the web browser.

 

 

How Can We Help?

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Appendix: Compatibility

Appendix: Keyboard Shortcuts

Approval

Background

Blend Modes

Creative Tools

Exporting a Design to Campaign Monitor

Exporting a Design to Mailchimp

Graphics and Other Objects

HTML Export

Image Areas

Images

Layout Blocks

Optimizing your Template for Mobile

Plain Text

Preparing your Design for Sending

Preview your Design

Send via Mail Designer 365

Sharing your Designs

Tables

Teamwork

Text Styles

The Inbox View

Using Retina Images with your Design

Working with Links and Buttons

Working with Text

Account

  • Articles coming soon

Adding animated graphics

By Graphics and Other Objects

Animated Graphics

Mail Designer 365 comes with a variety of animated graphics. Drag the animated graphic you want to use onto your email design. Make your choice from the Animated Graphic subsections:

If you want to preview what kind of animation the graphic has prior to adding it to your design, then just hover your mouse over the graphic of interest on the "Contents" section. As long as the cursor is over the graphic, you will be able to see the animation.

If you have already dragged your animated graphic to your email template, then you will be able to see the animation as long as the animated graphic is selected. To select the graphic, just simply click on it.

Adding custom GIFs

You can also add custom GIF files to your design. Drag and drop your GIF in the "Custom" folder:

You can then treat it like other animated graphics. Simply drag the file into an image area.

 

 

How Can We Help?

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Appendix: Compatibility

Appendix: Keyboard Shortcuts

Approval

Background

Blend Modes

Creative Tools

Exporting a Design to Campaign Monitor

Exporting a Design to Mailchimp

Graphics and Other Objects

HTML Export

Image Areas

Images

Layout Blocks

Optimizing your Template for Mobile

Plain Text

Preparing your Design for Sending

Preview your Design

Send via Mail Designer 365

Sharing your Designs

Tables

Teamwork

Text Styles

The Inbox View

Using Retina Images with your Design

Working with Links and Buttons

Working with Text

Account

  • Articles coming soon

Adding and duplicating graphics, shapes, And objects

By Graphics and Other Objects

Graphics and other objects

Mail Designer 365 includes graphics that you can use to spruce up your email design. These include sales promotion artwork as well as border designs.

Adding graphics and shapes

To add graphics or shapes, simply choose one from the Contents panel and drag it into an image area in your mail design.

Duplicating objects

Select the element. Next, you can duplicate objects by choosing "Edit" > "Duplicate" from the menu bar.

Alternatively, you can select the object and then hold down the alt ⌥ key (or option key) and drag the object to place a duplicate in your design.

 

How Can We Help?

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Appendix: Compatibility

Appendix: Keyboard Shortcuts

Approval

Background

Blend Modes

Creative Tools

Exporting a Design to Campaign Monitor

Exporting a Design to Mailchimp

Graphics and Other Objects

HTML Export

Image Areas

Images

Layout Blocks

Optimizing your Template for Mobile

Plain Text

Preparing your Design for Sending

Preview your Design

Send via Mail Designer 365

Sharing your Designs