Styles: font, headline, padding & more!

In WordFly's Modern Editor you have the ability to edit every part of your design's CSS. We call these elements Styles. You have access to every part of the CSS from fonts, line height, headings and more. Review how to get your styles set in your design.

 

Topics covered in this article:

Styles overview in Modern Editor

ESSENTIAL Styles

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

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

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 designs?

 

 

Styles overview in Modern Editor

 

Styles are the brand elements of your 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 design to set the brand consistency.

 

All your Styles can be set easily under the STYLESHEET tab in Modern Editor. You'll see this tab on the edit content panel (left side) of Modern Editor.

 

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.

 

What to expect:

  • Use the STYLESHEET > General Styles to set the majority of your global brand styles.
  • Any global STYLESHEET styles can be overridden in individual blocks by editing STYLES for This Block.
  • A block's container allows you to adjust background color, spacing (margin and padding), widths (max-width and width), background image and gradients, as well as borders.
  • In size fields, enter pixels with px after the size. For example, 5px for 5 pixels of padding or 12px for font size. Note: Other values may be valid in size fields (e.g; %, em); however, pixel is the default because it has the best and most consistent support.
  • In color fields, use the color picker or enter your hex color codes. Set global brand colors under Account > Editor Settings.
  • 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.
  • 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.

 

 

 

ESSENTIAL Styles

 

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

 

To access your ESSENTIAL Styles:

 

1. In your Modern Editor design, click the Stylesheet tab.

 

2. Click on ESSENTIALS.

Styles set up here will cascade down to single blocks.

 

There are 2 sections under ESSENTIALS:

 

Let's review each section in more detail.

 

 

ESSENTIALS > Background

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

 

You can:

  • Select Body, and update the background color of your design.
  • Select Email Container, and update the margin and padding and set a max-width for your design's container.

 

 

 

 

ESSENTIALS > General Styles

Under ESSENTIALS, click General Styles. Styles defined General Styles 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 preview panel (right side of editor).

 

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 design (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.

 

Learn how to setup different fonts for your design by reviewing this support article: How do I upload fonts for my design

 

Define Base in 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.

 

Tip: Learn how to effectively copy content from Word into your design.

 

 

 

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 Modern Editor design, click the Stylesheet tab.

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 preview panel.

 

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

 

It may not be necessary to update all of these block styles since you will set up ESSENTIALS > General Styles first and many updates will carry down to these blocks, and your design may not have all of these blocks. Update ESSENTIALS first and then update only the blocks you need to update. Watch your styles update on the preview panel (right side of editor).

 

The primary updates made in SINGLE BLOCKS are 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 25px margin around the text block area. All text blocks will get this margin applied.

 

 

 

 

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 Modern Editor design, click the Stylesheet tab.

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 Modern Editor design, click the Stylesheet tab.

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 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 preview panel.

 

 

2. Click on Styles from the edit content 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 do I retain my styles in future designs?

 

Review these support posts to learn your options for retaining styles across designs:

 

 

 

 

Have more questions? Submit a request