Guide to styles + stylesheets

Article author
Miguel Panayotty
  • Updated

Our editor gives you full control over every part of your design. Use the Stylesheet tab to adjust fonts, colors, spacing, and more.

 

 

01 // Overview

 

 

Styles are set in the Stylesheet tab in the left panel.

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 WordFly 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.

 

 

 

02 // Backgrounds + 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.

 

 

 

03 // 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. 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.

 

 

04 // Structural Block Styles

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

 

To access Structural Block Styles

1. 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.

 

 

05 // 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. 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

 

 

 

06 // Override Stylesheet styles

 

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.

 

 

 

 

07 // Retain styles for future designs

 

 

 

Was this article helpful?

Comments

0 comments

Article is closed for comments.