Introduction to Modern Editor (responsive email design)

WordFly’s Modern Editor is a responsive email editor that allows you to create fluid, modern email designs that look great on any screen. In this article we will explain key parts of the editor and tips for getting the most out of it .

 


Topics covered in this article:

Getting into Modern Editor within WordFly

Starter emails (WordFly and Your Own)

Exploring the interface in Modern Editor

Quick-start tips for getting started in Modern Editor

Building your Email in Modern Editor

Additional resources for Modern Editor

 

 

 

Getting into Modern Editor within WordFly

 

Building your email template in Modern Editor can be done in two places within WordFly.

 

You can build email templates under the Email Templates section or your can build them inside an Email Campaign under the Template tab. Either way your email template will always be available under the Email > Email Templates section.

 

To build a new email template under the Email Templates section

1. Go to Emails > Email Templates

2. Click Create an email template

 

3. Click Use Modern Editor

4. Name your email template and click a starter design

 

 

To access an in progress email template under the Email Templates section:

1. Go to Emails > Email Templates

2. Click on the name of your in progress email template

3. Click View/Edit

 

 

To build your email inside an Email Campaign:

1. Go to Emails > Email Campaigns

2. Click on the name of your in progress Email Campaign

3. Click on the Template tab

4. Click Use Modern Editor

 

 

To access an in progress email template inside an Email Campaign:

1. Go to Emails > Email Campaigns

2. Click on the name of your in progress Email Campaign

3. Click on the Template tab

4. Click Select an existing one

 

 

Once you have accessed your email template in any of the above methods click Edit in WordFly.

 

This will open the email template in Modern Editor and you can begin editing your email design within our tool.

 

 

 

Starter emails (WordFly Starter emails and Your Own)

 

A Starter email in WordFly is a pre-made email design that will help you adjust and craft your own unique design.

 

When you first start creating your email template in Modern Editor you will be asked to name your template and select a Starter email to begin working. Select the Starter email that most resonates with the design you want to achieve. The preview image of the starter email is a quick-look at the existing design.

 

You’ll be able to edit every element of the starter email as you work. None of the starter emails are locked. Each starter email has a solid structure and is supported by the top email clients in use.

 

When you create a new Modern Editor email template select a starter email, name your email template, and apply a label. Select Continue to then begin working on your design.

ME_createnewemail_selectstarterandname.PNG

 

Learn more about creating your own Starter emails in this support post.

 

 

 

Exploring the interface in Modern Editor

 

When you first open your email template in Modern Editor you will notice there are two sides to the editor.

 

We refer to the right side as the Email Preview Panel and the left side as the Edit Content Panel. Keeping these titles in mind as you work will help you navigate the interface.

 

The right side: Email Preview Panel

We call the right side the Email Preview Panel because you will see a very close representation of what your email will look like from this panel's preview. This is not exactly what the email will look like when sent because each email client will render your email slightly differently. You should always plan on time for testing your email to make sure it looks great across email clients and devices.

 

What can you do on the Email Preview Panel

 

Use the slider bar to see how your email will look at different widths. Click on the desktop icon to see how the email will look at full width. Click on the mobile icon to see how the email will look on a mobile device. As you use the slider you will see the current width of the email appear on-screen to help with reviewing different screen widths.

 

ME_sliderbar.PNG

 

Hovering over an area on the email preview panel will highlight that area and display the block name of the area in the upper left corner of the block. This can be helpful when adjusting or rearranging the blocks.

 

Duplicate and Delete blocks and containers quickly by right-clicking in the preview panel on any block and then selecting the appropriate action (as an alternate you can Control-Click).

 

Rearrange any of the blocks by dragging it to another area of the email 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 email preview panel. When a space opens on the email preview panel, drop the block to the open space. You can use Containers and or Column blocks as a placeholder for other blocks to reside but you can also drop the block into the email without a holding spot.

 

Click on any block to start editing the content within that block on the Edit Content Panel side of the editor.

 

To work in Full-Screen mode, click the arrow icon in the upper right corner.

ME_fullscreenmodeoption.PNG

 

Use the image toggle icon in the upper right of the email preview panel to toggle your preview to images on and images off. This is helpful for seeing how your email will display in email clients that do not download images automatically (such as Outlook).

ME_emailpreview_imagestoggle.PNG

 

 

Use the Link Map tool quickly see which areas of your email are clickable and where alt text has not been entered for images. This tool allows users to easily see where they've added links (or forgotten to add them) while they're focused on building their email. It also allows users to click on those links to see if they are going to the correct location.

 

 

 

The left side: Edit Content Panel

We call the left side the Edit Content Panel because this side gives you the opportunity to edit the content within any block on the Email Preview Panel.

 

You'll notice there are two tabs on this side, the BLOCKS tab and STYLESHEET tab:

 

The BLOCKS tab gives you all the building blocks you can drag and drop over to the Email Preview Panel. Click on a block and drag it over to the right side of the email, then drop the block into the preview panel. Blocks help you build the overall design of your email template.

 

Blocks available for dragging include:

  • Video block – Add video to your email with this block. Video will play in email clients that support it.
  • Image block – Add images with this block (gif, png, jpg, jpeg formats accepted).
  • Text block – Add and style text with this block.
  • Heading bar – Add a main heading with a color behind it.
  • Divider – Add horizontal rule lines between blocks and set colors for dividers.
  • Buttons – Add buttons with rounded corners.
  • Social links – Add social media links for Twitter, Facebook, YouTube and Instagram (all links go to default homepages for each site).
  • 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 email.
  • Grouped blocks – Quickly add a Heading+Image+Text, Heading+Image+Text+Button, Image+Text, Image+Text+Button, and Text+Button group blocks to your email instead of adding each of these blocks separately. Grouped Blocks can save a bit of time in the design process.
  • Preheader and Footer block – 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.

 

The STYLESHEET tab is where you will set up the brand look (fonts, headline, links, background color, etc) of your entire email design and change any margin or padding. Every block style can be edited under the STYLESHEET tab.

ME_stylestab_withblocktab.PNG
 
  • Use the circled arrow to open any option.
  • Set your styles as needed and see styles update in real time on the email preview panel.
  • Start with the style options under ESSENTIALS to set up the core brand look of your email. Your ESSENTIAL global styles will carry through out the email.
  • After setting up ESSENTIALS you can set up styles for SINGLE BLOCK, STRUCTURAL BLOCKS and GROUPED BLOCKS. Consider the single, structural and grouped block styles as optional though or use for alternate styles from the global.

 

Example, opening the General Styles option reveals further style customizations. Use the circled plus icon to open an area to apply edits. Watch your edits update in real time on the email preview panel.

 

Go more in-depth on setting up your email styles in this support post: How should I set up my email styles (font, headline, padding & more!)?

 

 

Quick-start tips for getting started in Modern Editor

 

If you want to dive in right away, check out these 3 quick-start tips for working in Modern Editor.

 

1. Drag and Drop.

Start by adding Containers and/or Column blocks first. This creates an empty canvas that you can populate with other blocks. When you’re done with blocks you can start adding content to these areas.

 

2. Style.

Set up specific brand colors and fonts through the STYLESHEET tab, spending the most time under ESSENTIALS. Minor variations in the global styles can be achieved on a macro level within individual text areas of the email.

 

3. Edit.

Content in your email is customized by clicking areas of your email from the preview pane which then brings up editing tools.

 

We think following these 3 steps when working in Modern Editor makes for a great user experience. First create the design you like, then set up the STYLESHEET > ESSENTIALS section, then begin adding content to all your text and image blocks. As you get to know the editor you may find better ways to achieve your designs - these tips illustrate our recommended workflow. 

 

 

 

Building your Email in Modern Editor

 

Now let's review specific blocks in Modern Editor. We'll review text blocks, image blocks, and even more options for building the design you are hoping to achieve.

 

General notes:

  • Depending on the block, you can easily type in text, add images, modify buttons, and change styles all from the Edit Content window.
  • Adjust General Styles for a block by clicking the Styles tab within the block which defaults to editing styles for 'This block'. Adjust Styles for all blocks like this by toggling the Styles to "All blocks".

  • Delete a block by clicking it on the email preview panel and clicking the Delete Block option from the right panel.

  • Close the area by clicking ‘x’ in the upper right area of the right panel.

 

 

 

 

Text blocks: Formatting text, editing html within text blocks, cleaning text

 

Select the text block on the Email Preview Panel and then edit the content on the left side panel (Edit Content Panel).

 

 

 

Text area example…
ME_textareaexample_details.PNG

 

On the Edit Content Panel you can type in text, insert links, and apply styles. Hover over any nav item to see a help tip appear.

  • Undo added content or style setting by using the back arrow option. Redo content changes by using the forward arrow option.

ME_text_undo.png

  • Add hyperlinks with the link icon. Break hyperlinks with breaking link icon.

ME_text_link.png

  • Add bold using the B icon.

ME_text_bold.png

  • Add italics using the slanted I icon.

ME_text_italics.png

  • Align text left, right or center with the Align dropdown.

ME_text_align.png

  • Apply headline, print, caption and other main styles using the Format dropdown. First highlight the text you want to format and then select the appropriate format to apply from the Format dropdown.

ME_text_format.png

  • Use the Add dropdown to set paragraph tags, ordered and unordered lists, add images and add data fields. Yes, you can add images into text areas!

 ME_text_add.png

  • Use the ‘clean’ button to remove HTML that has been added to your text area.

ME_text_clean.png

  • Use the <html/> to quickly edit the HTML in a text area.

 ME_text_html.png

 

Looking for some formatting shortcuts within the text block? Review our in-depth guide to keyboard shortcuts in Modern Editor in this support post: Keystroke (keyboard) shortcuts in email template  

 

Click on the Styles tab to edit the styles for all text blocks or just this one. You can edit all the styles under the Styles tab. You can also edit margin and padding under Styles by opening the container.

 

 

 

Image blocks: Uploading images, editing images, image sizes

Select the image block on the Email Preview Panel and then edit the content on the left side panel (Edit Content Panel). 

Image area example…

 

 

Select the upload arrow to browse to a file for upload or simply drag and drop your file on top of the upload arrow. 

ME_email_imageupload.png

 

 

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.

ME_email_imageditor.png

 

Add alt text and a redirect link for your image.

ME_email_image_altredirect.png

 

Add a caption to display underneath the image.

 ME_imagearea_captionfield.PNG

 

Dive deeper with images in your Modern Editor email template by reviewing these support posts:

How do I upload and edit images in my email?

What image size should I use in my email?

 

 

 

Other Options: Mobile edits, column scale and reverse order, show or hide

 

Modern Editor can be very flexible with your design needs. Let's review some more advanced options.

 

Fine tuning mobile edits

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 on the MOBILE side of the toggle to target the mobile styles of your email design. You'll know you are editing the Mobile styles when you see the phone icon display (a globe icon displays for Global).

ME_stylesheettab_generalstyles_mobileglobaltoggle.PNG

 

Learn how to fine-tune your mobile styles after building out your global general styles: How do I control the mobile version of my email in more detail?

 

Column options

Your two and three column blocks can be controlled in more detail as well. You can adjust the width of the columns and adjust styles for columns (like padding and width).

 

  • Adjust General Styles for column blocks by clicking Styles which defaults to editing styles for 'This block'. (Adjust Styles for all blocks like this by toggling the Styles to "All blocks")
  • Set variable column widths depending on your needs. Learn more here.
  • Update COLUMN OPTIONS by checking boxes for 'Scale on mobile' or 'Reverse on mobile'. This will scale the column on mobile instead of the default behavior which is to stack the column blocks on mobile. Or, reverse the stack of your side-by-side content so that right blocks stack on top of left blocks on mobile instead of the default behavior which is to stack left blocks on top of right.
  • 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.
  • Delete a block by clicking it on the email preview panel and clicking the Delete Block option from the right panel.
  • Close the area by clicking ‘x’ in the upper right area of the right panel.

 

***Not seeing some options? Column width options, or COLUMNS OPTIONS and VISIBILITY OPTIONS are NEW for "WordFly 3.0.0.538" emails or later (Version can be found on Line 3 in the HTML Editor).  You can update your code to use these options:

 

 

Hiding content on mobile or desktop

 

You can click on any block in your Email Preview Panel and check visibility options to either hide on mobile or hide on desktop. 

 

 

 

Editing the HTML

 

You can edit all the HTML in your Modern Editor email template. Click on the HTML tab that displays in the lower left corner of the Edit Content Panel.

 

The only rule in the code is to not edit any 'wf' elements. Otherwise, have fun making any code updates!

 

 

Saving and exiting your Modern Editor email template

 

You must save your work! Modern Editor will not automatically save your work for you.

 

After adding content and updating styles, click Save in the upper right corner.

ME_save.PNG

 

When you are ready to leave your Modern Editor email template you can exit after you have saved your work.

 

Select Exit in the upper right corner to leave Modern Editor.

 ME_exit.PNG

 

 

 

Additional resources for Modern Editor

 

We've put together many support posts to learn more about Modern Editor. Find all of those in our Modern Editor support site section.

 

You can also watch our webinar tutorial on Modern Editor for new users.

 

 

 

 

 

 

 

 

Have more questions? Submit a request
Powered by Zendesk