Introduction to Stylesheets and Styles

In this article

Overview

Backgrounds and General Styles

Single block styles

Structural block styles (columns and containers)

Grouped block styles

Override your Stylesheet styles within individual blocks

How to retain styles in future designs

 

 

Overview

In WordFly’s Modern Editor, you have the ability to edit every part of your design by setting styles. You have access to every part of the CSS—fonts, line height, headings, and more. Styles are set in the Stylesheet tab in the left panel of Modern Editor.

 

 

QUICK TIPS

  • START HERE
    Set the majority of your styles in Background and General Styles. Any global styles can be overridden in individual blocks by editing styles for This Block.
  • COLORS
    Use the color picker or enter your hex color codes to set colors. Set up frequently used colors under Account > Editor Settings.
  • SIZES
    In size fields, enter pixels with px after the size. For example, 5px for 5 pixels of padding or 12px for font size. Other values may be valid in size fields (e.g; %, em), however, px has the best and most consistent support.
  • FONTS
    In Font Family fields, type in the font you would like to use or click inside the field to select one of the available web-safe fonts. Learn more about fonts before setting your desired font-stack. Set a global font family under Account > Editor Settings.
  • BORDERS
    In Border fields, type in specific styles for your border or click inside the Border style field to select one of the available options: solid, dotted, or dashed.
  • MOBILE STYLES
    Designs built in Modern Editor will naturally look good on mobile devices, but there might be some parts of the design you want to fine-tune for better legibility. Use the Global | Mobile toggle in any Styles section to refine your mobile styles.

 

 

Background and General Styles

We recommend updating Background and General Styles before adding any text or image content to your design. You can set styles for background colors, typography, buttons and even some padding and margin in the design. Minor variations in the general styles can be achieved within individual text areas of the design.

 

Stylesheet > Backgrounds

Under Backgrounds, you can access the styles for your design’s Body and Email Container.

  • BODY
    Update the background color of your design or add a background image.
  • EMAIL CONTAINER
    Update the spacing, add a border, or set a color or max-width for your design’s container.

 

 

 

 

Stylesheet > General Styles

Click General Styles. Styles defined here will be used across all individual blocks like text blocks, button blocks, heading bar blocks, and image blocks.

  • TYPOGRAPHY
    Set global styles for paragraph, fine print, caption, links, headings, as well as bold (strong) and italics (emphasis). Globally set your font family in the Base. Learn how to set up different fonts for your design

  • IMAGES

    Set global 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.
  • BUTTONS
    Set global button styles. Set how you want your buttons aligned throughout the design (right, left or centered), set button background color, padding around your button text and your button font.

 

 

 

 

Set up your Base styles

Under General Styles you will see Base. Set up your font style here 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.

 

 

 

 

Single Block Styles

Once you finish setting up Background and General Styles, you can move onto the styles for Single Blocks. Single Blocks refers to all the blocks in your email that you can drag into the right panel. You may not need to update any of these styles. Your General Styles will carry through to all these other sections.

 

To access Single Block Styles

1. In Modern Editor, click the Stylesheet tab

 

2. Click on Single Blocks

 

The primary updates made in Single Blocks are margin, padding, and background color since these details would not be updated through the General styles. Single block styles you can edit here:

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

 

Example of opening the Text styles and adding 25px margin around the text block area. All text blocks will get this margin applied.

 

 

Structural Block Styles

Depending on your design, you may not need to set any styles here.

 

To access Structural Block Styles

1. In Modern Editor, click the Stylesheet tab

 

2. Click on Structural Blocks

 

The main updates made to Structural Blocks are to margin, padding, and background color. Structural block styles you can edit here:

  • Two Column block styles
  • Three Column block styles
  • Container block styles

 

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

If you set up Background, General Styles, and Single Block Styles, you may not need to make any updates here.

 

To access Grouped Block Styles

1. In Modern Editor, click the Stylesheet tab

 

2. Click on Grouped Blocks

 

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 a block in the right panel

 

2. Click Styles in the left panel

 

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.

 

To edit styles globally, toggle over to All blocks to edit the styles at Stylesheet level.

 

 

 

 

How to retain styles in future designs