Skip to main content
Gainsight Inc.

Email Template Layouts

Gainsight NXT

 

This article explains the different types of email template layouts available in the Email Builder for creating personalized and marketing emails. 

Overview

Admins can now select either Fluid or Fixed type layouts, while creating a new template from the Email Builder, to design email templates. 

ET2.png

Note: The layout type cannot be modified once the email template is saved. Apart from layout type, other settings can be modified by the Admin.

Screenshot 2023-03-06 at 12.51.06 PM.png

Fixed Type Layout

Fixed type layout is intended for marketing emails. It is also designed to provide the best possible email template that will work in all email clients.

The fixed type layout template code is given below:

Layouts2.png

Structure of Fixed Layout

There are four main sections in the fixed layout that can be used to match any specific requirements of the user.

Main Email Body

The main email body contains a special attribute ‘gs-editable’ to allow the Email Builder control to detect this tag as editable. This allows the user to type-in or insert content elements such as tokens, buttons, images, etc.

HTML Tags to Support Fixed Layout in all Email Clients

The main content element is wrapped with the following three HTML elements to position the email content body correctly in all email clients:

  • center tag: For Gmail, Inbox mobile apps, and web versions of Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, Freenet, Mail.ru, Orange.fr.
  • mso conditional: For Windows 10 Mail.
  • Div tag with id #email-container-main: To occupy full available width in an email client.
Meta Tags

The HTML Meta tags section contains all meta tags that require to render email content accurately in various desktop and mobile email clients. User can modify or add new meta tags in this section according to their requirements.

Outlook Client-Specific Comments

Outlook clients require special comments in the HTML template to support fonts and background images. Use this section to add any conditional comments according to your requirements.

Layouts3.png

Modifying Background Color of Fixed Type Layout Email Template

The email background color (#F9F8F7) is defined in three places in the Fixed type email layout. To modify this color to any other color, make sure to change in the following three sections:

  1. body tag: For most of the email clients.
  2. center tag: For Gmail, Inbox mobile apps, and web versions of the Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, Freenet, Mail.ru, Orange.fr.
  3. mso conditional: For windows 10 mail.

Modifying Width of Fixed Type Layout Email Template

The Fixed type layout email template width has a maximum of 600 px. Width for the email template is defined in the following two places:

  1. max-width: For all the clients except Desktop Windows Outlook. Users can reduce the width of the email but cannot increase it beyond 600px.
  2. mso tags: For Desktop Windows Outlook enforce a 600px width.

Fluid Type Layout

Fluid type layout is recommended for more personalized emails. It is also designed to provide the best possible email template that can work in all email clients.

The fluid type layout template code is given below:

Layouts4.png

Structure of Fluid Layout

There are four main sections in the fluid layout that can be used to match any specific requirements of the user.

Main Email Body

The main email body contains a special attribute ‘gs-editable’ to allow the Email Builder control to detect this tag as editable. This allows the user to type-in or insert content elements such as tokens, buttons, images, etc.

HTML Tags to Support Fluid Layout in all Email Clients

The main content element is wrapped with the following three HTML elements to position the email content body correctly in all email clients:

  • center tag: For Gmail, Inbox mobile apps, and web versions of Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, Freenet, Mail.ru, Orange.fr.
  • mso conditional: For Windows 10 Mail.
  • Div tag with id #email-container-main: To occupy full available width in an email client.
Meta Tags

The HTML Meta tags section contains all meta tags that require to render email content accurately in various desktop and mobile email clients. User can modify or add new meta tags in this section according to their requirements.

Outlook Client-Specific Comments

Outlook clients require special comments in the HTML template to support fonts and background images. Use this section to add any conditional comments.

Layouts5.png

Modifying Background Color of Fluid Type Layout Email Template

The email background color (#ffffff) is defined in three places in the Fluid type email layout. To modify this color to any other color make sure to change in the following three sections:

  1. body tag: For most of the email clients.
  2. center tag: For Gmail, Inbox mobile apps, and web versions of the Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, Freenet, Mail.ru, Orange.fr.
  3. mso conditional: For windows 10 mail.
  • Was this article helpful?