Guide to designing emails + pages

Article author
Kelly Sutter
  • Updated

Use our creative tools to create emails, pages, custom blocks, and images that look great on any screen. In this guide we’ll cover key parts of the tools and tips for getting the most out of them.

 

Take a tour →

 

 

 

01 // Preview Panel

The right panel gives you a very close representation of what your design will look like in the real world. Clicking on the blocks in the panel on the right opens the content editing options in the left.

 

   

Toggle Images
Toggle between Images On and Images Off. This is helpful for seeing how your design will display if images are not automatically downloaded (such as when an email is opened in Outlook).

   

Highlight Links
See which areas are clickable and where alt text has not been entered. See where you’ve added links (or forgotten to add them). Click on the links to see if they are going to the correct location.

   

Toggle Media Query
Preview how your design might look when it loads on a mobile device that does not support media queries.

   

Hidden Blocks
Indicates whether there are hidden blocks in the desktop or mobile view. Use the slider to reveal which version.

Slider Bar
See how your design will look at different widths. Click the desktop icon to see the design at full width. Click on the mobile icon to see the design from a mobile perspective. As you use the slider you will see the current width appear onscreen to help with reviewing different screen widths.

 

Hover over an area to highlight it. The type of block appears in the upper-left. This can be helpful when adjusting or rearranging the blocks.

 

Right-click (or Control-Click) on any block to duplicate it, delete it, or save as a custom block.

 

Rearrange blocks by dragging them to another area of the preview panel.

 

Drag a block from the right side of the editor and hover over the area you would like the block to go on the preview panel. When a space opens on the preview panel, drop the block in the open space. You can use Containers and or Column blocks as placeholders for other blocks to reside but you can also drop the block into the preview panel without a holding spot.

 

 

02 // Editing Panel: Blocks

 

 

The Blocks tab gives you all the building blocks you can drag into the preview panel. Blocks build your overall design. Drag over a block and drop it where you would like it to display.

 

WordFly Blocks

 

Video Add a hosted video to your design
Add an embedded video to your design
Image Add images to your design (gif, png, jpg, jpeg format)
Text Add text to your design
Heading Bar Add a heading with a color behind it
Divider Add horizontal rule lines
Button Add buttons to your design
Social Links Add links for Twitter, YouTube, and more
Columns Add two-column and three-column blocks. Image, video, text, buttons and grouped blocks can be placed inside of Columns. Columns can be adjusted to have variable widths.
Containers Add containers to house columns and blocks or place containers inside columns. Containers add some additional control over background styling and can also help with hierarchy in the design.
Grouped Blocks Add a Heading+Image+Text+Button block to your design instead of adding each of these blocks separately. Grouped Blocks can save a bit of time in the design process.
Preheader, Footer These blocks are automatically added to each email without needing to be dragged and dropped. The Preheader is at the top of the email and the Footer is at the end of the email.

 

 

Custom Blocks

 

 

Custom Blocks are reusable content blocks that have been built in the Blocks Editor (Design Library > Blocks) or saved from within the editor. These blocks are useful for banners, footers, and other elements you want to reuse in your email and page designs.

Using custom blocks

 

Conditions

 

 

Conditions allow you to personalize your email design dynamically with conditional statements. This is a valuable tool if you need to send one version of your email to one group and an alternate version to another group.

Using conditions for personalization

 

 

03 // Editing Panel: Stylesheet

 

 

The Stylesheet tab is where you will set up the brand look (fonts, headline, links, background color, etc) of your entire design and change any margin or padding. Every block style can be edited under the Stylesheet tab. Set your styles as needed and see styles update in real time on the preview panel.

Guide to Styles and Stylesheets

 

Start with the Backgrounds and General Styles to set up the core brand look of your design. These global styles will carry through out the design.

 

 

After setting up Background and General Styles you can set up styles for Single Blocks, Structural Blocks, and Grouped Blocks. These are considered optional.

 

 

 

Fine-tuning mobile designs

 

 

Under the Stylesheet or any block’s Styles tab you can fine tune your mobile styles. Look for the Global | Mobile toggle to fine tune your styles on mobile only. Click Mobile to target the mobile styles of your design. You’ll know you are editing the Mobile styles when you see the phone icon display (a globe icon displays for Global).

Adjusting the mobile design

 

 

This block or All blocks

 

 

Click on the Styles tab in any block to edit the styles for All blocks or This block. You can edit all the styles under the Styles tab. You can also edit margin and padding under Styles by opening the container.

 

 

04 // Editing Panel: Settings

 

 

The Settings tab reveals some optional features for your email and page. You can change the <title> tag of your email HTML (by default it shows the organization name from Account > Organization Info). You can also write custom preview text that will usually display after the From Name and Subject Line in the inbox. If you want to adjust the default 600px width for Outlook PC emails, you can change the width here. There are helpful keyboard shortcuts and links about the editor in here as well.

 

 

05 // Text blocks

Select the text block on the right panel and then edit the content on the left. On the edit content panel you can type in text, insert links, and apply styles. Hover over any element to see a help tip appear.

 

 

Use the Format dropdown to apply headline (H1, H2, etc.), print, caption and other main styles. First highlight the text you want to format and then select the appropriate format from the dropdown.

 

Add hyperlinks with the link icon.

 

Click the icons to add images, social icons, emoji, special characters, and personalization.

 

Click ‘clean’ to remove HTML that has been added to your text area.

 

Click <html> to edit the HTML in a text area.

 

 

06 // Image blocks

Select the image block on the right panel then add content on the left.



 

Images: Upload, edit, and position images

What image size should I use in my design?

 

Select the upload arrow to browse to a file for upload or simply drag and drop your file on top of the upload arrow. There are no fixed sizes. Image blocks in the editor will accept any image uploaded into the space. This makes image areas very flexible.

 

  • You can upload an image of any width
  • You can upload an image of any height
  • Image widths and heights should match if you want to align images side-by-side in columns

 

 

 

Select Edit image to enhance, crop, and make a number of other edits to your image. When you’re done editing your image, select Save in the image editor to keep the changes made. Select the ‘x’ in the upper-right corner to exit the tool without saving changes.

 

Add alt text and a redirect link for your image.

 

Add a caption to display beneath the image.

 

 

07 // Other Options

 

Column options

 

 

Your two- and three-column blocks can be controlled in more detail. Set variable column widths depending on your needs. Scale on mobile will set the columns side-by-side on mobile instead of stacking them by default. Reverse on mobile will reverse the stack of your side-by-side content so that the right block stacks on top of the left block on mobile instead of the default (left block appears above the right block).

Columns: Sizes, padding, alignment, reverse and scale on mobile

 

 

 

Hiding content on mobile or desktop

 

 

You can click on any block in your preview panel and check visibility options to either hide on mobile or hide on desktop. Update Visibility Options by checking boxes for 'Hide on mobile' or 'Hide on desktop'. Checking 'Hide...' will hide the block when the email renders for the particular screen.

Hide content on mobile or desktop

 

 

 

08 // Editing the HTML

 

 

You can edit nearly all the HTML and CSS in your design. Click on the HTML tab or CSS tab that displays in the lower left corner of the Edit Content Panel. The only rule in the HTML code is to not edit any 'wf' elements.

 

 

09 // Saving and exiting

 

 

You must save your work. The editor will not automatically save your work for you. After adding content and updating styles, click Save in the upper right corner. Exit after you have saved your work.

 

 

10 // Tips for designing

We’ve built a lot of emails and pages. Here’s how we do it. As you get to know the editor, you may find better ways to achieve your designs.

 

1. Drag and drop blocks

Start by adding Containers and/or Column blocks. This creates an empty canvas that you can populate with other blocks.

 

2. Set up the General Styles and Backgrounds

Once your shell is built, set up specific brand colors and fonts through the Stylesheet tab. Spend most of your time in the General Styles section. Minor variations in the global styles can be achieved within individual text areas of the design. Fine-tune your mobile styles once you are happy with your desktop version.

 

3. Add content 

Start adding real content by clicking areas of your design from the right panel which then brings up editing tools on the left.

 

Keyboard shortcuts will save you time.

Set up your Editor Settings for easy access to brand colors.

Email design best practices

Designing for accessibility

Designing for dark mode

 

 

 

Was this article helpful?

Comments

0 comments

Article is closed for comments.