Email Templates

EMAIL BUILDER

An email builder template is a pre-designed framework that simplifies the creation of professional and visually appealing emails. It provides customizable elements such as layouts, fonts, and color schemes, enabling users to craft consistent and branded messages quickly. These templates are essential tools for efficient email marketing campaigns, ensuring engaging communication with audiences while saving time and resources.

I. Permission Scope

Permissions	Admin User	Domain User
CRUD private template	Yes (all domains)	Yes (his domains only)
CRUD public template	Yes	View & Duplicate
RUD template samples	Yes	View & Duplicate
CRUD category	Yes	No
Duplicate template	Yes	Yes
Preview template	Yes	Yes
Copy HTML code	Yes	Yes
Manage source code	Yes	No

II. Common Blocks/Attributes used in Template

A. Page Attributes and Page Layouts

In page attributes, user can modify the default page attributes like Email setting (1), Theme setting (2) and Content background (3).

And to make the page useful, clear and professional, user can split/arrange blocks in different layouts with various style like two, three and four columns. The layout will contain layout attributes and column attributes which are described in the following attributes of text, images, button…. Please refer for more details.

And how to design a template with layouts, simply drag a layout into template, then drop content blocks like card, logo, image…etc. in each column.

B. Basic blocks

a) Text Attributes

Text blocks can be dragged into template. It contains attributes of dimension (1), color(2) and typography(3). User can modify the colour, type and dimensions of text objects and value fields.

Property	Description
Height	Height: Set height of text block
Padding	Padding: Set padding of text block in px.
Color	Color: sets the font color. If you use presentations, the pen sets the colors
Background color:	Background color: sets the background color. If you use presentations, the pen sets the colors
Font family	Set the font family like “Arial, Times New Roman”
Font Size	Sets the height of the font in graphical units.
Line weight	Sets the space between lines
Letter Space	The letter-spacing property increases or decreases the space between characters in a text.
Text decoration	Underline/Overline/Line Through…
Font Weight	Style for fonts (regular, bold, italic, bold italic).
Align	Left/Centre/Right
Font Style	Normal/Italic

b) Image Attributes

Image blocks can be dragged into template. It contains attributes of Setting (1), dimension (2), Link(3) and Border(4). User can modify these attributes.

Property	Description
Add image	User can upload an image from his/her local or can get image into template from an image link
Background colour:	Background colour: set the background colour. If you use presentations, the pen sets the colours
Width	Set image width
Height	Set image height
Padding	Padding: Set padding of text block in px.
Align	Left/Centre/Right
Href/Self	Set image navigation link
Border/Border radius	Set image border/Border radius

c) Button Attributes

It is easier to design a button into template. User can modify the Setting (1), Dimension(2), color(3), typography(4) and border(5).

Property	Description
Content	Set placeholder in the button
Href/Self	Set button navigation link
Width	Set button width
Font weight	Style for fonts (normal, bold. 100, 200…).
Padding	Padding: Set padding of button in px.
Inner Padding	Set inner padding for button text in px.
Background color:	Background color: set the background color. If you use presentations, the pen sets the colors
Text color	Set text color
Button color	Set button color
Font family	Set the font family like “Arial, Times New Roman”
Font Size	Sets the height of the font in graphical units.
Line weight	Sets the space between lines
Letter Space	The letter-spacing property increases or decreases the space between characters in a text.
Text decoration	Underline/Overline/Line Through…
Font Weight	Style for fonts (regular, bold, italic, bold italic).
Align	Left/Centre/Right
Font Style	Normal/Italic
Border/Border radius	Set image border/Border radius

d) Social Attributes

Default three types of social medias (Facebook, Google and Twitter) will be dragged into template as default. Like other blocks, user can modify Social attributes like mode, align, typography, dimension and more items. To add more social items, by pressing ‘+’, then modify its attributes (Upload image/Social link and social name)

e) Divider Attributes

Divider is used to divide blocks in templates. It contains the following attributes which can be modified

Property	Description
Align	Left/Centre/Right
Padding	Padding: Set padding of button in px.
Background color:	Background color: set the background color. If you use presentations, the pen sets the colors
Border	Width: width of Divider Style: Style of Divider Color: Color of Divider

f) Spacer Attributes

Spacer is used to add space between blocks in templates. It contains the following attributes: height, padding and background which are described above.

g) Hero Attributes

Hero is a complexity of Text, image and button blocks. It also contains attributes for text, image and blocks which allows user to modify. Please refer the attributes described above for more details.

h) Wrapper Attributes

Using wrapper in the mail template to personalize email content by dropping more blocks there. Similar as Hero, it also contains attributes for text, image and blocks which allows user to modify. Please refer the attributes described above for more details.

C. Custom blocks

i) Card Attributes

This custom allows users to put all content types into the mail template in a desired layout. User must have “Previewer” permission granted at least to be able to drag contents to the template.

Property	Description
Update content	Allow user to update/change the content to put into the mail template
Body URL	This will be auto generated right after user adding the content to template. User can edit the link to other. '- BodyURL = URL redirects user to the content detail page
Footer URL	This will be auto generated right after user adding the content to template. User can edit the link to other. FooterURL = URL redirect user to follow the main stack of the domain
Theme	Display card in darkmode/lightmode Default= darkmode
Update eye catcher	Allow user to add/update eye catcher shown on the card in template
Background color	Set eyeCatcher background color
Text color	Set text of eyeCatcher color
Text	Set text of eyeCatcher

The steps are quite easy to follow:

1. Drag a card block to the template

2. Click on “Select content” button

3. In the “content” page, search for contents to put to the template

4. Select the content

5. If after putting content to template, you don’t want it at all, you can delete it or edit by selecting other content

6. We can add eye catcher on the selected card and modify it as our expectation

j) Logo Attributes

Logo can be put into the template by default as Plugilo logo, put an image link or got from the selected company:

Property	Description
Href	Allow user to put image link to put into template as logo Default: Plugilo logo link
Load from company	Allow user to be able to get logo from the selected company
Width	Set logo block width
Height	Set logo block height
Padding	Padding: Set padding for the logo
Align	Align position of the logo: left/center/right
Link/Href	Put link to direct user to logo link from mail or preview mode

Here are steps to put logo/modify logo in the template:

1. Drag logo block into the template

2. If user doesn’t want to use the default one, he is able to get from an image link or from the selected company

3. If get from company, click on “Load from company”

4. In “Logo” page, search for a company and select the desired company to get logo from

5. Click on “Apply”

k) Banner Attributes

Banner can be put into the template by default as Plugilo logo, put an image link or got from the selected stack:

Property	Description
Href	Allow user to put image link to put into template as banner Default: Plugilo banner link
Load from stack	Allow user to be able to get logo from the selected company
Width	Set logo block width
Height	Set logo block height
Padding	Padding: Set padding for the logo
Align	Align position of the logo: left/center/right
Link/Href	Put link to direct user to logo link from mail or preview mode
Border	Set border of the banner
Border radius	Border radius in px