Skip to main content

Selecting a pre-built email layout

Angel Cheung
  • Updated

Once you've selected an email template layout, you can start customising the styles pre-defined in the email template.

After customising styles, you can start building and editing your email template.

Quick links

Pre-built email layouts

Default styles

Using classes

Send a test email

Pre-built email layouts

Pendula provides you with 4 pre-built email layouts with editable placeholder blocks (paragraph, title, image).

Screen_Shot_2022-11-29_at_10.16.35_am.png

Welcome

A clean and simple layout for easy step-by-step customer onboarding.

Newsletter

A multi-tiled layout to feature latest news from your business

Notification

A simple layout for emails with one main message eg. purchase confirmations

E-commerce

A multi-column layout to feature and promote products

Once selected, you can add to and further customise these layouts within the drag-and-drop builder.

See Building and editing an email template for more information


Default styles

By default, some styles are pre-defined within these layouts and the drag-and-drop builder but these can be easily overridden using classes.

Below is a list of styles which can be over overridden if required.

/* Typography */
​
.heading-1 {
font-family: Helvetica, sans-serif;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 16px;
margin-left: 0px;
font-size: 36px;
line-height: 40px;
color: rgb(54, 75, 100);
font-weight: bold;
}
​
.heading-2 {
font-family: Helvetica, sans-serif;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 16px;
margin-left: 0px;
font-size: 22px;
line-height: 26px;
color: rgb(54, 75, 100);
font-weight: bold;
}
​
.header-text {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: normal;
color: #7984a0;
text-align: center;
}
.header-text > a {
color: #7984a0;
cursor: pointer;
text-decoration: underline;
}
​
.paragraph {
margin: 0 0 16px 0;
font-family: Helvetica, sans-serif;
font-size: 16px;
line-height: 22px;
color: rgb(54, 75, 100);
text-align: left;
font-weight: normal;
padding: 0;
}
​
.paragraph-center {
margin: 0 0 16px 0;
font-family: Helvetica, sans-serif;
font-size: 16px;
line-height: 22px;
color: #364b64;
text-align: center;
font-weight: normal;
padding: 0px;
}
​
.center-on-narrow {
font-family: Helvetica, sans-serif;
font-size: 16px;
line-height: 22px;
color: #364b64;
padding: 0 16px 16px;
text-align: left;
font-weight: normal;
}
​
.paragraph-footer {
padding: 32px 32px 64px;
font-family: Helvetica, sans-serif;
font-size: 12px;
text-align: center;
color: #0a2342;
}
​
a.link {
margin: 0 0 16px 0;
color: #008fef;
font-weight: bold;
}
​
a[class^='link'] {
font-family: Helvetica, sans-serif;
font-size: 16px;
}
​
a.reverse {
color: #0a2342;
font-weight: bold;
}
​
.top-banner {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
text-align: center;
font-size: 12px;
line-height: 16px;
color: rgb(121, 132, 160);
}
​
webversion {
color: rgb(121, 132, 160);
text-decoration-line: underline;
text-decoration-style: initial;
text-decoration-color: initial;
font-weight: normal;
}
​
unsubscribe {
color: rgb(10, 35, 66);
text-decoration-line: underline;
text-decoration-style: initial;
text-decoration-color: initial;
}
​
.footer-text {
font-family: Helvetica, sans-serif;
font-size: 12px;
color: rgb(0, 0, 0);
line-height: normal;
text-align: center;
max-width: 600px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 32px;
margin-left: auto;
}
​
.list-item-first {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 16px;
margin-left: 20px;
font-family: Helvetica, sans-serif;
color: rgb(54, 75, 100);
font-size: 16px;
}
​
.list-item-last {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
font-family: Helvetica, sans-serif;
color: rgb(54, 75, 100);
font-size: 16px;
}
​
/* Buttons */
​
.button-a {
transition-duration: 100ms;
transition-timing-function: ease-in;
transition-delay: 0s;
transition-property: all;
}
​
.button-a-primary {
font-family: Helvetica, sans-serif;
font-size: 16px;
line-height: 16px;
text-decoration-line: none;
text-decoration-style: initial;
text-decoration-color: initial;
font-weight: bold;
padding-top: 22px 26px 22px 26px;
display: block;
text-align: center;
min-width: 80px;
color: rgb(255, 255, 255);
border-radius: 40px;
border-width: 2px;
border-style: solid;
border-top-color: rgb(0, 143, 239);
border-right-color: rgb(0, 143, 239);
border-bottom-color: rgb(0, 143, 239);
border-left-color: rgb(0, 143, 239);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: rgb(0, 143, 239);
}
​
.button-bg-a {
border-radius: 40px;
background-color: #008fef;
}
​
.button-a-secondary {
font-family: Helvetica, sans-serif;
font-size: 16px;
line-height: 16px;
text-decoration-line: none;
text-decoration-style: initial;
text-decoration-color: initial;
font-weight: bold;
padding-top: 22px;
padding-right: 26px;
padding-bottom: 22px;
padding-left: 26px;
display: block;
text-align: center;
min-width: 80px;
color: rgb(0, 143, 239);
border-top-left-radius: 40px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: rgb(0, 143, 239);
border-right-color: rgb(0, 143, 239);
border-bottom-color: rgb(0, 143, 239);
border-left-color: rgb(0, 143, 239);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
}
​
/* Layout */
​
/*
The email background color (#222222) is defined in three places:
1. body tag: for most email clients
2. center tag: for Gmail and Inbox mobile apps and web versions of Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, freenet, Mail.ru, Orange.fr
3. mso conditional: For Windows 10 Mail
*/
​
body {
width: 100%;
margin: 0;
padding: 0 !important;
background-color: rgb(255, 255, 255);
mso-line-height-rule: exactly;
}
​
center {
width: 100%;
background-color: #ffffff;
}
​
.email-container {
max-width: 600px;
margin: auto;
}
​
.logo-container {
padding: 16px 0;
text-align: center;
}
​
.light-grey-bg {
background-color: #f3f7fb;
}
​
.main-img {
width: 100%;
max-width: 600px;
height: auto;
font-size: 14px;
line-height: 15px;
color: #364b64;
margin: auto;
display: block;
}
​
.sml-img {
width: 90%;
height: auto;
font-size: 14px;
line-height: 15px;
color: #364b64;
margin: auto;
display: block;
padding: 16px;
}
​
.footer {
margin: auto;
background-color: #e4e8f1;
}
​
.grid-item {
padding-top: 0px;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 8px;
display: inline-grid !important;
display: -moz-inline-grid;
}
​
.grid-item-image img {
width: 100%;
height: auto;
}
​
.list-item-image img {
width: 100%;
min-width: 80px;
max-width: 200px;
height: auto;
}

Using classes

A class is a generic way to name and stylise a HTML element.

Any styles (such as font, colour, size, margins, padding, etc) specified to a class name will automatically be applied to all elements with the same class name.

This enables you to efficiently add specific styling on elements that appear multiple times within a template.

For example, a padding-16px class created can be applied to a paragraph block, image block and/or a container.

How to create a class

  1. Select an existing element within your template, or drag a new block you wish to stylise from the Add blocks panel

  2. Select Edit, and under the Styles panel, delete all existing classes.

  3. Add and name a new class by selecting the + icon

  4. Customise the new class using any of the sections within the Styles panel

    Screen_Shot_2020-08-25_at_9.54.24_am__2_.png

    In this example, heading-2class is stylised to be: Helvetica Light, 22px, red. All elements with the same class name will now inherit the same attributes.

  5. Click Save

How to edit a class

  1. Select the existing element with the desired class

  2. Select Edit, and under the Styles panel, edit styling as necessary

  3. Click Save

Any changes made to a class will automatically be implemented across all elements which share the same class name.
See Styles panel (advanced) for more information on classes.

Send a test email

After your HTML has been imported, we recommend sending yourself a test email via a flow to validate links, merge fields and styling are rendering correctly.

Related articles