Layout Blocks

May 22 2017

Duplicating layout blocks

By Layout Blocks

If you are setting up multiple similar layout blocks, it may be easier to duplicate an existing layout block instead of choosing your font and color options again. There are 2 ways you can duplicate layout blocks.

Option 1: Edit > Duplicate

‣ Click the selection tab handle at the side of a layout block or click on the layout block itself. Next, choose "Edit" > "Duplicate" from the menu bar.

Note: This is what the "selection tab handle" or the "layout block handle" looks like once it has been selected:

Option 2: Using the layout handle

‣ Click on the layout handle on the left side of the layout block.

‣ Hold down the option key or the alt⌥ key on your keyboard and drag the layout block that you want to duplicate.

‣ Drop it into position to create a copy. Then edit your text and other options accordingly.

Option 3: Command⌘ D

‣ Select the layout block handle or the entire layout block (both method works).

‣ Once selected, press Command⌘ D on your keyboard. This will duplicate the selected layout block.

How Can We Help?

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Background

Blend Modes

Campaigns

Configuring Text Styles

Creative Tools

Editing Text

Graphics and Other Objects

HTML Export

Image Areas

Images

Layout Blocks

Links and Buttons

Optimizing your Template for Mobile

Other Sharing Options

Plain Text

Preparing your Design for Sending

Preview your Design

Tables

TextScout

Using Retina Images with your Design

Appendix: Keyboard shortcuts

Basic compatibility tips

Changing the language settings of Mail Designer 365

Creating a new design

Early access to Beta versions of Mail Designer 365

How to use the search and sort features in Mail Designer 365

Keyboard shortcuts for alignment tools

Mail Designer 365 Best Practice Guide

The Style section

3 Incredible Eye-Catchers to Use in Your Designs

3 Ways to Use Blend Modes

Aligning different objects

Combining design elements

Creating a Sketched Headline Effect

Creating Call to Action Buttons

Creating polygons and polygrams

Editing images using third party applications

Grouping design elements

Moving objects to the front or back

Using hex color values

Adding Patterns and Textures

Applying a background to a text area

Choosing a background

Edit the inner background of your design

3 Ways to Use Blend Modes

Using Blend Modes

Using Blend Modes on Text

Adding a From Address for Sending

Adding Email Contacts

Assigning attributes to your contacts in Mail Designer Campaigns

Case Study: Delivery Hub Audience Tools for Segmentation

Creating Audiences

Creating Signup Forms

Import Contacts from Mailchimp into Mail Designer Campaigns

Importing contacts from Apple Contacts to Mail Designer Campaigns

Importing Contacts from Campaign Monitor to use with Mail Designer 365 Campaigns

Inviting Team Members to Give Feedback on Designs

Saving your design

Sending a Campaign

Sending to Individual Recipients

Set up a Team

Upload a Design to Crew Chat

Using the Testmail Feature

Adjust letter spacing for text styles

Apply Emphasis to a Text Section

Creating "mobile only" text styles

Paste text and keep style

Setting up a fallback font

Using Text Styles

Adding borders to design elements

Creating a border for your design

Using Alignment & Distribution Tools

Using Mail Designer 365's image effects

Using the Pinning Tool

Using the Shadow Tool

Adding different types of text links

All Caps tool

Automatic hyphenation

Creating Nested Lists

Editing a text area

Editing text in an image area

Special characters

Using web fonts in Mail Designer 365

Working with font sets

Adding and duplicating graphics, shapes, And objects

Adding animated graphics

Adding video placeholders

Pixel precise element editing

Resizing objects

Rotating objects

Rounded corners

Using objects with text

Exporting to other email marketing tools

Exporting your design as a website

Hosting images for HTML email designs

Editing image areas

Optimizing your image area

Using Alt Text

Adding image masks

Adding photos

Adding your own logos and signatures

Filling a mask with your image

How to crop images

Using Retina images for the desktop version

Using the image optimisation tool

Using Unsplash Image Integration

Adding and removing layout blocks

Adding space in between layout blocks

Adjusting the size of areas within a layout block

Deleting saved custom layout blocks

Duplicating layout blocks

Saving custom made layout blocks

Text and image areas

Using Ready-Made Layout Blocks

Adding buttons

Adding different buttons with different links

Adding multiple links with a single image background

Creating a text link

Creating an image link

Format link styles

Formatting styles for text links

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

Adding layout blocks for the mobile version

Creating "mobile only" text styles

Hiding layout blocks in the smartphone view

Modifying a layout block for the mobile version

Working with text and links

Configuring SMTP email accounts

Converting email templates to JPG or PNG file

Exporting a design to Campaign Monitor

Exporting a design to Mailchimp

Formatting when uploaded to Mailchimp

Print your document

Using placeholders with Campaign Monitor

Using placeholders with Mailchimp

Creating a plain text version of your design

Inbox Optimisation - Optimise the email preview text

Checking your design for issues

Using the spell check and grammar check

Changing the size of the preview window

Inbox Optimisation - Optimise the email preview text

Open the preview window

Refreshing the preview window

Setting up a custom preview device

Accessing the tables feature

Adding borders to your table

Adding content to your tables

Building your table layout

Changing the color of your table

Using TextScout AI for Email Subject Lines

Deactivating Retina images for your template

Using Retina images with your design

Popular Articles

Adding multiple links with a single image background

Converting email templates to JPG or PNG file

Using placeholders with Mailchimp

Creating an image link

Hosting images for HTML email designs

Newest Articles

Importing contacts from Apple Contacts to Mail Designer Campaigns

Importing Contacts from Campaign Monitor to use with Mail Designer 365 Campaigns

Sending to Individual Recipients

Case Study: Delivery Hub Audience Tools for Segmentation

Assigning attributes to your contacts in Mail Designer Campaigns

Recently Updated Articles

Importing contacts from Apple Contacts to Mail Designer Campaigns

Importing Contacts from Campaign Monitor to use with Mail Designer 365 Campaigns

Import Contacts from Mailchimp into Mail Designer Campaigns

Sending to Individual Recipients

Case Study: Delivery Hub Audience Tools for Segmentation

Space it out

You'll notice that your new layout block is very close to the top of the next layout block. This makes the design look a bit cramped. To add a bit of space in between the two blocks, we'll use dividers:

Go back to the Contents panel and drag the spacing layout block in between the two content layout blocks.

We need to add space in between these two layout blocks.

You can then fine-tune the size of the divider by dragging the line above or between it. It should look right with about 30 pixels between the two layout blocks.

"Spacing before" or "Spacing After"

You can use "Spacing before" or "Spacing After" to add space before or after layout blocks with text areas. You will find this by first selecting a text area. Then, on the right hand side of the window within the "Style" tab section, you will find "Spacing before" and "Spacing After" after where it says "Line Height." Increase or decrease the pt to adjust the spacing before or after the selected layout block.

Adding layout blocks

Click the “Contents” button to open the Contents panel. This contains all the design elements you can add to your Mail Design. Go to “Layout Blocks”, choose one and drag it to your design. The other layout sections will slide out of the way so you can drop in the new layout block.

Drag a layout block into your design.

The other layout blocks will slide out of the way and you can drop the new layout block into place.

Removing layout blocks

Click the “x” icon on the layout block “handle” to delete a layout block.

Using Ready-Made Layout Blocks

Adding Ready-Made Layout Blocks

How Can We Help?

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Background

Blend Modes

Campaigns

Configuring Text Styles

Creative Tools

Editing Text

Graphics and Other Objects

HTML Export

Image Areas

Images

Links and Buttons

Optimizing your Template for Mobile

Other Sharing Options

Plain Text

Preparing your Design for Sending

Preview your Design

Tables

TextScout

Using Retina Images with your Design

Deleting saved custom layout blocks

How to delete a saved custom layout block

How Can We Help?

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Background

Blend Modes

Campaigns

Configuring Text Styles

Creative Tools

Editing Text

Graphics and Other Objects

HTML Export

Image Areas

Images

Layout Blocks

Links and Buttons

Optimizing your Template for Mobile

Other Sharing Options

Plain Text

Preparing your Design for Sending

Preview your Design

Tables

TextScout

Using Retina Images with your Design

Saving custom made layout blocks

Save your own custom layout blocks

How Can We Help?

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Background

Blend Modes

Campaigns

Configuring Text Styles

Creative Tools

Editing Text

Graphics and Other Objects

HTML Export

Image Areas

Images

Layout Blocks

Links and Buttons

Optimizing your Template for Mobile

Other Sharing Options

Plain Text

Preparing your Design for Sending

Preview your Design

Tables

TextScout

Using Retina Images with your Design

Adjusting the size of areas within a layout block

Height and width

How Can We Help?

A Quick Tour of Mail Designer 365

Advanced Design Techniques