Skip to main content

Styles panel (advanced)

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

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.

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

Min-height

Defines the minimum height of the selected element.

Units used: px, %, vh

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)

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.

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