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:
- Button block styles
- Divider block styles
- Footer block styles
- Image block styles
- Preheader block styles
- Social link block styles
- Text block styles
- Video 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 Columns block styles
- Three Columns block styles
- Four+ Columns 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