Creating a border for your design

By Creative Tools

With Mail Designer 365 you can create a custom border for your email design.

To get started, click on the background of your design. This will open the borders tool.

Choose from three border styles. Click on a style from the drop down menu to apply it to your design:

You can increase the thickness of your border by clicking on the upwards arrow. Alternatively, you can manually enter your desired pixel value and hit enter.

Use the color tool to change the color of your border.

Editing border edges separately

For really unique borders, Mail Designer 365 gives you the option to separately edit each edge of your border. Click on the display panel to select which edge you want to edit and your changes will only be applied to this section of the border.

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

Using Alignment & Distribution Tools

By Creative Tools

Mail Designer 365’s Alignment and Distribution Tools

Alignment:

The alignment tool in Mail Designer 365 makes it quick and easy to align design elements accurately and effectively.

Alignment tools in Mail Designer 365

To begin, click on a design element (e.g. text style, shape, image) and you will notice the alignment tools appear in the “Style” menu within the app sidebar:

Mail Designer 365 alignment tools

The control panel has two sets of controls: inner (red) and outer (blue):

Inner and outer alignment tools

The inner set of controls on the panel will centre the design element in the corresponding direction. For example, if you want to align an object top and centre of the layout block, you can do this by clicking the upwards arrow on the inner panel:

Aligning a shape top and centre

The outer set of controls on the panel allow you to shift an element to the top, bottom, right or left of the layout block without affecting the second axis:

Shifting a shape to the top of the layout

Aligning multiple design elements in an image area:

You can use the alignment tools to quickly align multiple design elements. Hold down the cmd key and select the elements you want to align, then you can align them either vertically:

or horizontally:

Distribution

If you have three or more design elements in an image area, you can use distribution tool to equally distribute them. This works well for icons (i.e. when creating social media buttons) or for text styles (i.e. when creating lists.) You can distribute elements vertically:

Or horizontally:

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

Using the Pinning Tool

By Creative Tools

Mail Designer 365 Pinning Tool

The pinning feature in Mail Designer 365 makes it easier for you to pin design elements in place whilst editing your newsletter designs. The pin tool pins a design element inside an image area and fixes it to an area of your choice. The visual interface displays where your design element will be fixed within the image area:

To pin a design element, click on the element and you will notice the pin tool in the “Style” menu in the app sidebar.

Locations

If you pin in the center, your design element will stay in the center of its layout block despite any resizing. Here is an example:

If you pin at the top, your design element will stay fixed at the top of its layout block if you resize – this is particularly good for titles and headings. Here is an example:

Lastly, if you pin at the bottom, the design element will remain at the bottom of its layout block if you resize. Here is an example:

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

Using the Shadow Tool

By Creative Tools

Mail Designer 365’s Shadow Tool

Use the shadow tool in Mail Designer 365 to add depth and definition to text styles, shapes, and images.

To start, insert a shape, text style, or image into an image area in your email design (in this example we have chosen a text style.) Click on the item and you will notice the shadow tool appear in the “Style” menu in the sidebar.

Check the box to apply the shadow effect to the design element.

Customizing Your Shadow

To adjust the offset of the shadow (how far it reaches) drag the slider. Drag the slider towards the right to increase offset.

Similarly, to adjust the blur, drag the slider to the right to make the shadow blurrier.

To change the color of the shadow, use the color picker tool to choose a fitting color for your design.

And finally, to adjust the angle your shadow casts, use the rotator tool, or manually enter a value.

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

Adding borders to design elements

By Creative Tools

Mail Designer 365 Border Tool

Mail Designer 365 allows you to add borders to shapes and images. To start, insert an image or shape (in this example, we are using an image from Unsplash) into an image area.

Click on the image or shape to bring up the border tool in the “Style” menu.

Adjust the width of your border by clicking the arrows to increase or decrease width. You can also manually type in a value and hit enter.

Use the color picker to choose a color for your border.

Finally, choose a border style from the drop down menu to complete the effect.

Here are some examples of different styles:

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

Using Mail Designer 365’s image effects

By Creative Tools

Mail Designer 365 comes with a selection of built-in effects which you can easily apply to your images. Here’s how you can make the most of them…

How to access image effects in Mail Designer 365

Drag an image into an image area:

 

Use the re-size tools to adjust your image to fit the image area:

Click on your image – notice how this will bring up the ‘Style’ tab on the menu to the right of your page. In this tab you will be able to see the full list of image adjustment effects and filters:

 

Applying filters

Click on your image and the ‘Style’ tab will open. Under ‘Effects’ you will find multiple filters:

To apply a filter, simply check the box next to your chosen filter:

You can also apply more than one filter at once. To do this, just check multiple boxes to create mixed filter effects:

 

Using the image adjustment tools

To adjust your image, click on the image and once again you will see the ‘Style’ tab. Under ‘Adjustments’ you can find multiple effects:

To change an element of your image’s appearance, check the box next to the effect and use the toggle bar to increase or decrease the desired effect:

You can edit as many elements of your image as you like:

 

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