Understanding the template editor
Learn about the different features of Forward's template builder–designing layouts and configuring blocks. Forward has a visual, drag-and-drop email builder that uses MJML to ensure your emails look great on all devices while giving you the flexibility to to create a visually stunning email that's bound to awe your subscribers.
You'll find a bunch of pre-built templates in the Templates section, on top of which you can build your own.
Or, use the Basic templates that have pre-set layouts which you can use to add your own images and content.
Or, you can build one from scratch. Go crazy!
When you open the email template editor, the sidebar will display a selection of block and layout options to choose from.
Layouts make it easy for you to organize your the content of your email into sections. You'll find the following options:
1 column
2 columns
3 columns
4 columns
To select a layout, simply drag and drop the element exactly where you want it.
Blocks, on the other hand, are the types of content (text, images, products, etc.) placed inside layouts. You have 8 blocks to choose from:
Text: Best for titles, headings, and longer paragraphs of text.
Image: Add images directly from your library or an external URL. We support .png, .jpg, and .gif formats.
Button: Create a clickable button with custom text and styling.
Social: Add your social handles.
Divider: Insert a divider line with custom styling to separate two sections.
Spacer: Insert spacing to separate content sections.
Hero: Insert a combination text and image elements to layer text on image
Wrapper:
Static Product Recommendations: Add up to 3 products.
Abandoned Cart: Add Dynamic products for abandoned cart emails with image, title, description, and price.
Drag and drop the blocks into the layout you want.
The Layers tab lets you view how your email content is organized and let's you reorganize sections easily.
The right pane of the template editor lets you change the attributes (like fonts and sizes) of the content blocks. Clicking on each block reveals the attributes associated with that specific block. For example, the image block has attributes like this:
If you wish to see how your email looks on desktop or mobile devices, click on the desktop and mobile icons in the top pane of the template editor.
If you want to undo/redo your recent change, click on the undo/redo buttons.
The Source Code section in the right pane gives you the MJML code of the email you created.
Tip: You can insert additional code here or add the code exported from your previous service providers to make changes to the template.
If you want add personalized content in your emails, like First Names or products purchased, click on the Attributes button in the top right corner. You'll find a bunch of dynamic text options under the Custom User Attributes section. Click on the copy icon and paste it in your email.
Once you're happy with how your email has turned out, hit the Save button. Give your template a name and a subject line.
You'll find a bunch of pre-built templates in the Templates section, on top of which you can build your own.
Or, use the Basic templates that have pre-set layouts which you can use to add your own images and content.
Or, you can build one from scratch. Go crazy!
Layouts, Blocks, and Layers
When you open the email template editor, the sidebar will display a selection of block and layout options to choose from.
Layouts make it easy for you to organize your the content of your email into sections. You'll find the following options:
1 column
2 columns
3 columns
4 columns
To select a layout, simply drag and drop the element exactly where you want it.
Blocks, on the other hand, are the types of content (text, images, products, etc.) placed inside layouts. You have 8 blocks to choose from:
Text: Best for titles, headings, and longer paragraphs of text.
Image: Add images directly from your library or an external URL. We support .png, .jpg, and .gif formats.
Button: Create a clickable button with custom text and styling.
Social: Add your social handles.
Divider: Insert a divider line with custom styling to separate two sections.
Spacer: Insert spacing to separate content sections.
Hero: Insert a combination text and image elements to layer text on image
Wrapper:
Static Product Recommendations: Add up to 3 products.
Abandoned Cart: Add Dynamic products for abandoned cart emails with image, title, description, and price.
Drag and drop the blocks into the layout you want.
The Layers tab lets you view how your email content is organized and let's you reorganize sections easily.
Configurations
The right pane of the template editor lets you change the attributes (like fonts and sizes) of the content blocks. Clicking on each block reveals the attributes associated with that specific block. For example, the image block has attributes like this:
Preview, Undo and View Source Code
If you wish to see how your email looks on desktop or mobile devices, click on the desktop and mobile icons in the top pane of the template editor.
If you want to undo/redo your recent change, click on the undo/redo buttons.
The Source Code section in the right pane gives you the MJML code of the email you created.
Tip: You can insert additional code here or add the code exported from your previous service providers to make changes to the template.
Adding dynamic text your email content
If you want add personalized content in your emails, like First Names or products purchased, click on the Attributes button in the top right corner. You'll find a bunch of dynamic text options under the Custom User Attributes section. Click on the copy icon and paste it in your email.
Saving your template
Once you're happy with how your email has turned out, hit the Save button. Give your template a name and a subject line.
Updated on: 24/02/2023
Thank you!