Skip to main content

Email template builder: Styles panel

Simon Walsh
  • Updated

The styles panel allows you to customise a HTML element within your email template.

It is divided into four sections, each which control specific settings.


Quick links:

Settings

Layout

Typography

Styles

 

Settings

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, deselect all active classes by clicking on the checkbox of each class name to deselect it (the class icon will become greyed out)

  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. Re-activate all classes again within that element by clicking on the checkbox next to each class name

  6. Click on Save

When naming a class, aim to describe the purpose or element.
e.g. heading-2 or padding-bottom-32px

How to edit a class

  1. Select the existing element with the class you wish to make changes to

  2. Select Edit, and under the Styles panel, deselect other irrelevant classes by clicking on the checkbox next to each class name

  3. Edit the class using any of the sections within the Styles panel

  4. Click on Save

Any changes made to a class will automatically be implemented across all elements which share the same class name.


Adding multiple classes

You can mix and match up to three classes on an element.

To isolate and view a class' specific settings on an element, you need to firstly deselect any other classes under Settings.

When viewing any typography settings applied to an element or block, the colour code of the field name will help determine if the styling is set by the selected class (or combo classes).

Green: style is set by current class

Orange: style is inherited from another class

Untitled__5_.png

Font, font size and weight styles are set by this current heading-1 class.

Untitled__6_.png

Font style is set by heading-1 & anotherclass class combo. Font size and Weight are inherited from heading-1 class itself.

How to remove a class

  1. Select the element with the class you wish to remove.

  2. Select Edit, and under the Styles panel, click on the x within the class name to remove this class

    Removing a class from one element does not affect other elements with the same class(es)

  3. Click on Save

Id

An Id lets you name and stylise one unique HTML element within a page.

Styles (such as font, colour, size, margins, padding, etc) specified to an Id will only affect this element.

An Id can not be used across more than one element within a template. Additionally, a class and an Id cannot co-exist on the same element.

How to create an Id

  1. Select the element you wish to add an Id to

  2. Select Edit and under the Styles panel, remove any existing classes on this element by clicking on the x next to each class name

  3. In the Id field, enter a name or value

  4. Customise your Id using the Styles panel

  5. Click on Save

Titles

A title provides you with an optional way to show extra information about an element such as a brief description or tooltip upon hovering over this element with the mouse.


Kapture_2020-09-18_at_11.33.06__1_.gif

How to add a title

  1. Select the element you wish to add a title to

  2. Select Edit and under the Styles panel, enter your title into the Title field

  3. Click on Save

Layout (Width/height, Margin, Padding)

Width

Affects the horizontal length of the selected element.

Units used: px, %, vw

Height

Affects the vertical length of the selected element.

Units used: px, %, vh

Max-width

Defines the maximum width of the selected element.

Units used: px, %, vw

Examples

In these examples, the image sits within the container.

Notice what happens when the max-width is changed.

Default state

Setting: Image max-width: auto (default), Container width:600px

Implication: Image width automatically fits into the container with no size restriction.

Result: Image takes on the full width of the container it is sitting in (600px)


Screen_Shot_2020-08-31_at_4.56.52_pm.png

Default state (Max-width: auto)

Image max-width less than container width

Setting: Image max-width: 200px, Container width:600px

Implication: Image will appear 200px wide at most, but may appear smaller in screen resolutions less than 200px wide.

Result: Images appears 200px or less depending on screen size

 

Screen_Shot_2020-08-31_at_4.57.07_pm.png

Max-width of image: 200px

Image max-width greater than container width

Setting: Image max-width:1000px , Container 600px

Implications: Image will be 1000px wide at most

Result: Image is constricted to a 600px container width, as the image sits within the container

 

Screen_Shot_2020-08-31_at_4.56.37_pm.png

 

Max-width of image: 1000px is larger than container width (600px). Image will readjust to the container's width (i.e. image will be forced to take on 600px).

Min-height

Defines the minimum height of the selected element.

Units used: px, %, vh

Examples

In these examples, the image (height 300px) sits within the container.

Notice what happens when min-height is changed.

Default state

Setting: Image min-height:auto (default)

Implication: Image height automatically fits into the container with no size restriction.

Result: The image takes on the full height of the container it is sitting in (300px).

 

Screen_Shot_2020-09-17_at_2.38.48_pm.png

Default state (Min-height: auto)

Min-height greater than original height

Setting: Image min-height: 500px

Implication: Image size must appear 300px height at the bare minimum.

Result: The image height will be stretched from its original height (300px) to the min-height: 500px setting.

 

Screen_Shot_2020-09-17_at_2.39.59_pm.png

Min-height of image 500px, but original image height is 300px. Min-height is overrides original image height.

Min-height less than original image height

Setting: Image min-height:40px

Implication: Image size will appear 40px height at the bare minimum

Result: No effect

 

Screen_Shot_2020-09-17_at_2.39.43_pm.png

Min-height of image (set to 40px) is less than than original image height (300px), this property has no effect.

Margin

Margin settings determine an element's personal space — that is, how much distance the elements wants to keep with other elements around it.

An element's margin on all four sides (top, right, bottom and left) are adjustable.

Units used: px, %, vh, vw

Example

Screen_Shot_2020-09-17_at_3.21.00_pm.png

Specified margins respected: 50px top-margin (green arrow), 20px left-margin (red arrow)

When to use margins

  • You want to have some space around an element, or you don't want the element to touch other elements around it

  • You want to centre an element: input auto on margin top, right, bottom and left

  • You want to vertically middle-align an element: input auto on margin top and bottom only

  • You want to horizontally middle-align an element: input auto on margin left and right only

Padding

Padding settings determine an element's space from its own border — that is, how much distance an element wants to keep with the elements inside it.

An element's padding on all four sides (top, right, bottom and left) are adjustable.

Units used: px, %, vh, vw

Example

Screen_Shot_2020-09-17_at_3.30.37_pm.png

Specified padding respected: 120px top-padding (purple arrow), 30px left-margin (purple arrow)

When to use padding

  • You want content to not touch the edges of the container (text won't ever touch the border because of the padding)

  • You want background of an element to be shown in the padding gap (even though containers touch each other, text won't ever touch each other because of the padding)

Typography (Fonts + fonts styling)

Adjust how text within a selected element specifically looks.

Font

Sets the typeface for the textbox.

The top 10 Google Fonts are now available!

Font size

Sets the size of the text.

Units used: px, em, rem, %

Weight

Sets the boldness of your text.

Options include: Light, Light Italics, Regular, Italics, Bold

Letter spacing

Sets space between each letter.

Units used: px, em, rem, %

Font colour

Sets colour of text.

Units used: HEX, RGB or select from pop-up colour panel

Line height

Sets space between each line within text box.

Units used: px, em, rem, %

Rule of thumb: Set line height 150% of font size. For example 12px font size = 18 line height

Vertical align

Sets vertical alignment of text relative to its container.

Options: Baseline, top, middle, bottom

Text decoration

Sets decoration to highlighted text or selected container.

Screen_Shot_2020-09-17_at_4.46.28_pm.png
From left to right: no decoration, underline, strikethough

Font style

Sets text style to whole container.

Screen_Shot_2020-09-17_at_4.49.49_pm.png

From left to right: Regular, Italics

Text shadow

Sets shadow to whole container.

Shadow customisation includes:

  • X position (horizontal position)
  • Y position (vertical position)
  • Blur
  • Colour

Screen_Shot_2020-09-17_at_4.52.09_pm.png

Styles (Background colours/image, Borders)

Allows detailed customisation as to how a selected element looks.

Background

Sets colour of the selected container.

Units used: HEX, RGB or select from pop-up colour panel

Screen_Shot_2020-09-18_at_12.55.38_pm.png

Default setting: no background colour

Border collapse

Sets whether table borders should collapse into a single border or be separated.

Screen_Shot_2020-09-17_at_4.58.04_pm.png
Border-collapse: Yes

Screen_Shot_2020-09-17_at_4.58.01_pm.png

Border-collapse: No

Border-radius

Sets radius of an element's corners.

An element's border-radius on all four corners (top, right, left, bottom) are adjustable.

Units used: px, %

The higher the number, the more rounded the corner will be (and vice versa).



Screen_Shot_2020-09-18_at_12.56.19_pm.png

In this example, the top-left corner has the border radius of 50px.

Border

Sets a border to an element.

Settings:

  • Width of border (px, em)
  • Style of border (none, solid, dotted, dashed, double, groove, ridge, inset, outset)
  • Colour (Units used: HEX, RGB or select from pop-up colour panel)

Screen_Shot_2020-09-18_at_12.57.53_pm.png

Example: Border with 5px width, dashed line style and a colour set onto it.

Background

Sets the background image for the container.

Layering

It is possible to layer several images as a background for the selected container.

  1. Add your base layer by clicking on + in the Background panel. Upload your image and adjust its settings as desired
  2. To add more images, repeat the step above

Layering order:

Top layer = Forefront of the background-image stack
Bottom = Back of the background image stack

Screen_Shot_2020-09-18_at_12.45.53_pm.png

In this example, the sky and the Pendula logo are two separate layers. The sky layer is placed below the Pendula logo layer.

Settings

Repeat

Customise if/how an image is repeated:

Screen_Shot_2020-09-18_at_1.09.30_pm.png

repeat Image replicated horizontally and vertically

 

repeat-y Image replicated vertically only

Screen_Shot_2020-09-18_at_1.09.48_pm.png

 

no-repeat Image is not replicated
Screen_Shot_2020-09-18_at_1.09.54_pm.png

Position

Controls where a background image is aligned to.

Options include:

  • left top, left centre, left bottom, right top, right centre, right bottom, centre top, centre centre, centre bottom

Attachment

Adjusts how an image responds to scrolling.

  • scroll Image scrolls with page
  • fixed Image will not scroll with page
  • local Image scrolls with the element's contents

Size

Controls how an image sits within the container

  • auto Image displayed at original size
  • cover Resize image to cover entire width container, even if it has to stretch or crop
  • contain Resizes image to make sure whole image is fully visible

Related articles