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.
01 // Previewing
The preview panel gives you a very close representation of what your design will look like in the real world. Clicking blocks on the right opens the content editing options in the left.
 |
Toggle Images |
 |
Highlight Links |
 |
Toggle Media Query |
 |
Hidden Blocks |
 |
Slider Bar |
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. Drag the block 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.
For long emails, use the arrows for moving blocks up or down within a design. Hover on a block or container for a brief moment and the arrows will appear in the upper-right.
02 // Editing: 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
| Button | Add buttons to your design → |
| Divider | Add horizontal rule lines → |
| Heading Bar | Add a heading with a color behind it |
| Image | Add images to your design (gif, png, jpg, jpeg format) → |
| Social Links | Add links for Instagram, YouTube, and more → |
| Spacer |
Add space between blocks |
| Text | Add text to your design |
| Video | Add a hosted video to your design → Add an embedded video to your design → |
| Columns | Add two-, three-, and four+ 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 hold 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.
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 →
Import content from another email
View two emails side-by-side and pull in content from the left to the right. Click the Import icon, then select the email you want to import from. The selected email will open on the left side of the editor. Drag blocks from the left to add them to the right. The editor will copy over as many styles as it can. You can even use the resize tool to import content from the mobile view of your email.
03 // Editing: 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).
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: 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 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... →
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