Introduction to Modern Editor (responsive design)

WordFly’s Modern Editor is a responsive editor that allows you to create fluid, modern 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:

Exploring the interface in Modern Editor

Quick-start tips for getting started in Modern Editor

Building your design in Modern Editor

Additional resources for Modern Editor

 

 

Exploring the interface in Modern Editor

 

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

 

We refer to the right side as the 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: preview panel

We call the right side the preview panel because you will see a very close representation of what your design will look like in the real world. However, keep in mind, there will always be slight differences across browsers and rendering engines once you start testing in the real world. Always plan on adequate testing time.

 

What can you do on the preview panel

 

Use the slider bar to see how your design will look at different widths. Click on the desktop icon to see how 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 on-screen to help with reviewing different screen widths.

 

 

Hovering over an area on the 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 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.

 

Click on any block to start editing the content from the edit content panel (right side) of the editor.

 

Use the image toggle icon in the upper right of the preview panel to toggle your preview to 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).

 

 

Use the Link Map tool to quickly see which areas of your design 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). It also allows users to click on those links to see if they are going to the correct location.

 

Use the Media Queries toggle to preview how your design might look when it loads on a mobile device that does not support media queries.

 

 

 

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 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 preview panel. Click on a block and drag it over to the preview panel. Drop the block where you would like it to display. Blocks build your overall design.

 

Blocks available for dragging include:

  • Video block – Add video to your design.
  • Image block – Add images to your design (gif, png, jpg, jpeg formats accepted).
  • Text block – Add text in your design.
  • Heading bar – Add a main heading with a color behind it.
  • Divider – Add horizontal rule lines between blocks.
  • Buttons – Add buttons in your design.
  • Social links – Add social media links for popular sites such as Twitter, Facebook, YouTube and Instagram.
  • 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 – Quickly add a Heading+Image+Text, Heading+Image+Text+Button, Image+Text, Image+Text+Button, and Text+Button group blocks to your design instead of adding each of these blocks separately. Grouped Blocks can save a bit of time in the design process.
  • (Email Designs) 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 design and change any margin or padding. Every block style can be edited under the STYLESHEET tab.

 
  • Use the circled arrow to open any option.
  • Set your styles as needed and see styles update in real time on the preview panel.
  • Start with the style options under ESSENTIALS to set up the core brand look of your design. Your ESSENTIAL global styles will carry through out the design.
  • 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 preview panel.

 

Go more in-depth on setting up your design styles in this support post: Setting up 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 design.

 

3. Edit.

Content is customized by clicking areas of your design from the preview panel which then brings up editing tools.

 

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 design 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 panel.
  • 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'.

 

Remove a block by clicking it on the preview panel and clicking 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 preview panel and then edit the content on the edit content panel.

 

 

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.

 

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

 

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

 

Add bold using the B icon.

 

Add italics using the slanted I icon.

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

 

Apply headline (H1, H2 etc), 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

 

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!

 

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

 

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

 

Looking for some formatting shortcuts within the text block? Review our in-depth guide to keyboard shortcuts in Modern Editor in this support post: Keyboard shortcuts for working in Modern Editor 

 

Click on the Styles tab in any block 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 preview panel and add content on the 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. 

 

 

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 underneath the image.

 

 

Learn more about adding and adjusting images in Modern Editor by reviewing these support posts:

How do I upload and edit images in my design?

What image size should I use in my design?

 

 

 

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 design. You'll know you are editing the Mobile styles when you see the phone icon display (a globe icon displays for Global).

 

Learn how to fine-tune your mobile styles after building out your global general styles: How to adjust the mobile design

 

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 when building your email? Update your Modern Editor code.

 

 

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. 

 

 

 

Editing the HTML

 

You can edit all the HTML and CSS in your Modern Editor 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. Otherwise, have fun making any code updates!

 

 

Saving and exiting your Modern Editor design

 

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.

 

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

 

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

 

 

 

Additional resources for Modern Editor

 

We've put together many support posts to learn more about Modern Editor.

 

 

 

 

Have more questions? Submit a request
Powered by Zendesk