Setting up email styles: font, headline, padding & more! (Modern Editor)

Modern Editor: Styles

In WordFly's Modern Editor you have the ability to edit every part of the CSS that comprises your email design and we call these elements 'styles'. We give you the interface to access all levels of the CSS styles from the fonts, line height, headings and everything else. We'll review how to update some of the basics and then how to go further with your styles.

 

Topics covered in this article:

Styles overview in Modern Editor

Set up ESSENTIAL Styles

Set up SINGLE BLOCK Styles (text block, image block, divider block, social block)

Set up STRUCTURAL BLOCK Styles (two-column, three-column, containers)

Set up GROUPED BLOCK Styles (text+button, image+text, image+text+button ...)

Override your Stylesheet Styles within individual blocks

How do I retain my styles in future emails?

 

 

Styles overview in Modern Editor

 

In WordFly we refer to 'styles' as the elements of your email that add your brand design: from paragraph (text size, font choice, line height) and headings, to background colors and margin or padding. Use styles across all parts of your email to set the brand consistency across your email design.

 

All your email styles can be set easily under the STYLESHEET tab within your Modern Editor email template. You'll see this tab on the left side of Modern Editor, the side we call the Edit Content Panel.

 

When you first open the STYLESHEET you will see 4 areas you can open: ESSENTIALS, SINGLE BLOCKS, STRUCTURAL BLOCKS, and GROUPED BLOCKS. The section titled ESSENTIALS will be opened initially if this is the first time you are accessing the STYLESHEET tab in this email.

 

 

We'll review our recommendations for what parts to pay attention to updating in the STYLESHEET and also how to update styles in individual blocks rather than globally throughout the email design.

 

 

 

Set up ESSENTIAL Styles

 

We recommend setting up ESSENTIAL Styles before adding any text or image content to your email. Under the ESSENTIALS section you can set styles for background colors, typography, buttons and even some padding and margin in the email. Minor variations in the ESSENTIAL styles can be achieved on a macro level within individual text areas of the email.

 

To access your ESSENTIAL Styles:

1. In your email, click the Stylesheet tab.

ME_stylestab_withblocktab.PNG

2. Click on ESSENTIALS

 

We call this ESSENTIALS because you could just set up these styles and your email would look great. Styles set up here will cascade down to single blocks.

 

There are 4 sections under ESSENTIALS:

 

Let's review each section in more detail.

 

 

Email Background

Under ESSENTIALS, click Email Backgrounds. Here you can access the styles for your email's Body and Container.

 

You can:

  • Select Body, and update the background color of your email body.
  • Select Container, and update the margin and padding for your email's container as well as set a max width for your email's container.

 

Here's an example of updating the email container background color...

WF_ME_stylesheet_emailbackground_containercolor2.PNG


Additional notes about setting up your Body and Container under Email Background:

  • Enter pixels for any size fields and include the 'px' after the size. (Example, "5px" for 5 pixels of padding or "12px" for font size)
  • Enter your color codes for background color or font color. Or, use the color picker to select the correct color.
  • Type in specific styles for your border or click inside the Border style field to select one of the available options. (Example, "solid")
  • Any of these Background styles can be overridden in individual blocks by editing the block's container.

 

 

General Styles

Under ESSENTIALS, click General Styles. We call this section General Styles because style updates here will be used across all individual blocks like text blocks, button blocks, heading bar blocks and image blocks.

 

Under General Styles you can globally set styles for 'paragraph', ‘fine print, ‘caption’, ‘links’, 'headings', as well as ‘bold’ (strong) and ‘italics’ (emphasis). Watch your styles update on the right side of the email (the Email Preview Panel).

 

You can:

  • Set image styles. Click IMAGE STYLES. Set padding and margin for image left and image right classes. These styles will be used in text blocks when you upload an image to a text block.
  • Set button styles. Click BUTTONS. Set how you want your buttons aligned throughout the email (right, left or centered), set button background color, padding around your button text and your button font.
  • Set your font styles. Click TYPOGRAPHY. You have full access to setting the styles for your paragraph (font family, color, line height), your links, your image captions, heading bars, bold, italics, and all your heading styles.

 

Take a deep dive into setting up different fonts for your email by reviewing this support article: How do I upload fonts for my email Template?

 

Here's an example of updating the 'paragraph' styles under General Styles...

WF_ME_stylesheet_generalstyles_paragraph.PNG




What is 'Base' under General Styles?

 

Under ESSENTIALS > General Styles you will see 'Base'.

 

This sub-section of General Styles is where you can set up your font style and have it apply to ALL other sections that use fonts. For example, when you set 'Base' your paragraph, link, caption, fine print, and headings will all use the same font styles.

 

Do you plan to copy+paste text content from a Word document? Then 'Base' will be a life-saver. Learn how to effectively do this and retain all your styles from Word when pasted into Modern Editor in this support article 'Best practices for copying from Word'.

 

Notes about setting up your brand styles under General Styles:

  • Enter pixels for any size fields and include the 'px' after the size. (Example, "5px" for 5 pixels of padding or "12px" for font size)
  • Enter your color codes for font color. Or, use the color picker to select the correct color.
  • Type in the font you would like to use or click inside the Font Family field to select one of the available fonts. Learn more about fonts in emails in this support post.
  • Any of these global styles can be overridden in individual text blocks.

 

 

Footer and Preheader

Under ESSENTIALS, click either the Footer or Preheader sections. Here you can globally set the styles for the top and bottom of your email.

 

The Preheader sits at the top of your email and is important in giving your subscribers a first glimpse at the content of your email.

 

Tips for your preheader styles:

  • Generally the text is a bit smaller in the preheader of an email. If your main email font is 16px, try adjusting the preheader font size to 12px.
  • Links in the preheader should be easy to see and click. If you have a dark email background consider changing the preheader link color to white or another light color.

 

The Footer sits at the bottom of your email and usually holds your unsubscribe link as well as your organization name and postal address.

 

Tips for your footer styles:

  • Generally the text is a bit smaller in the footer of an email. If your main email font is 16px, try adjusting the footer font size to 12px.
  • Links in the footer should always be easy to see and click, especially the unsubscribe link.

 

 

 

Set up SINGLE BLOCK Styles (text block, image block, divider block, social block)

 

Once you finish setting up ESSENTIAL Styles you can move onto the styles for SINGLE BLOCKS. However, you only have to update additional sections if you really need to. Your ESSENTIALS > General Styles will carry through to all these other sections.

 

To access your SINGLE BLOCK Styles:

1. In your email, click the Stylesheet tab.

ME_stylestab_withblocktab.PNG

2. Click on SINGLE BLOCKS

 

 

We call this SINGLE BLOCKS because it refers to all the blocks in your template that you can pull over one by one into your Email Preview Panel.

 

Single block styles you can edit here:

  • Text block styles
  • Image block styles
  • Button block styles
  • Divider block styles
  • Video block styles
  • Social link block styles

 

It may not be necessary to update all of these block styles since (1) you will set up ESSENTIALS > General Styles first and many updates will carry down to these blocks, and (2) your email may not have all of these blocks. We recommend updating the ESSENTIALS first and then update only the blocks you need to update. Watch your styles update on the email preview panel to the right of the styles tab.

 

The main updates made to SINGLE BLOCKS are to margin, padding, and background color since these details would not be updated through the General styles.

 

Here's an example of opening the Text styles and adding some margin around the text block area. All text blocks will get this margin applied.




 

Additional notes about setting up other blocks under the Stylesheet:

  • Adjust a block's margin and padding under the 'container' for that block.
  • Enter pixels for any size fields and include the 'px' after the size. (Example, "5px" for 5 pixels of padding or "12px" for font size)
  • Enter your color codes for font color. Or, use the color picker to select the correct color.
  • Any of these global styles can be overridden in individual text blocks.

 

 

 

Set up STRUCTURAL BLOCK Styles (two-column, three-column, containers)

 

Once you finish setting up ESSENTIAL Styles you can move onto the styles for STRUCTURAL BLOCKS. However, you only have to update additional sections if you really need to. Your ESSENTIALS > General Styles will carry through to all these other sections.

 

To access your STRUCTURAL BLOCK Styles:

1. In your email, click the Stylesheet tab.

ME_stylestab_withblocktab.PNG

2. Click on STRUCTURAL BLOCKS

 

Structural block styles you can edit here:

  • Two column block styles
  • Three column block styles
  • Container block styles

 

The main updates made to STRUCTURAL BLOCKS are to margin, padding, and background color.

 

Here's an example of opening the Two Column styles and adding a background color to the container. All two column blocks will get this background color applied.

 

 

 

Set up GROUPED BLOCK Styles (text+button, image+text, image+text+button ...)

 

Once you finish setting up ESSENTIAL Styles you can move onto the styles for GROUPED BLOCKS. However, you only have to update additional sections if you really need to. Your ESSENTIALS > General Styles will carry through to all these other sections.

 

To access your GROUPED BLOCK Styles:

1. In your email, click the Stylesheet tab.

ME_stylestab_withblocktab.PNG

2. Click on GROUPED BLOCKS

 

We call these GROUPED BLOCKS because 2 or more single blocks are being grouped together. These are quick ways of adding more than 1 single block to your email design with a single drag and drop.

 

Grouped block styles you can edit here:

  • Text+Button block styles
  • Image+Text block styles
  • Image+Text+Button block styles
  • Heading+Image+Text block styles
  • Heading+Image+Text+Button block styles

 

 

 

Override your STYLESHEET styles within individual blocks

 

Set up your STYLESHEET Styles first but keep things flexible by overriding those styles on an as needed basis within individual blocks.

 

1. Click on a block from your email preview panel.

 

ME_textblock_withpreview2.PNG

 

2. Click on Styles from the Edit Content panel.

ME_textblock_edit.PNG

 

 

3. The default is to edit styles for 'This block'.

When you edit styles under 'This block' you are only modifying the styles for this block. You will not see these styles update across all blocks. This gives you the flexibility to deviate from the main STYLESHEET styles.

ME_textblock_styles_thisblock.PNG

 

 

*If you prefer to edit styles globally, toggle over to 'All blocks' to edit the styles at STYLESHEET level.

 

ME_textblock_styles_allblocks.PNG

 

 

 

How do I retain my styles in future emails?

 

The easiest way to retain your styles in future email templates is to duplicate your email template. Everything in your original template will be duplicated in the copy that gets created.

 

Steps to create a duplicate of your email template:

1. Go to Emails > Email Templates.

2. Click on the name of your existing Email Template that you want to duplicate.

3. Click Duplicate from the dropdown of options for the template you clicked.

4. Your can give your duplicate email template a new name.

5. Once the duplicate is created you can click the template name and select View/Edit to continue editing the copy.

 

 

 

 

Have more questions? Submit a request
Powered by Zendesk