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
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
-
Select an existing element within your template, or drag a new block you wish to stylise from the Add blocks panel
-
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)
-
Add and name a new class by selecting the + icon
-
Customise the new class using any of the sections within the Styles panel
In this example,
heading-2
class is stylised to be:Helvetica Light
,22px
,red
. All elements with the same class name will now inherit the same attributes. -
Re-activate all classes again within that element by clicking on the checkbox next to each class name
-
Click on Save
When naming a class, aim to describe the purpose or element.
e.g.heading-2
orpadding-bottom-32px
How to edit a class
-
Select the existing element with the class you wish to make changes to
-
Select Edit, and under the Styles panel, deselect other irrelevant classes by clicking on the checkbox next to each class name
-
Edit the class using any of the sections within the Styles panel
-
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
Font, font size and weight styles are set by this current heading-1
class.
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
-
Select the element with the class you wish to remove.
-
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)
-
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
-
Select the element you wish to add an Id to
-
Select Edit and under the Styles panel, remove any existing classes on this element by clicking on the x next to each class name
-
In the Id field, enter a name or value
-
Customise your Id using the Styles panel
-
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.
How to add a title
-
Select the element you wish to add a title to
-
Select Edit and under the Styles panel, enter your title into the Title field
-
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)
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
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
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).
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.
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
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
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
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.
From left to right: no decoration, underline, strikethough
Font style
Sets text style to whole container.
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
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
Default setting: no background colour
Border collapse
Sets whether table borders should collapse into a single border or be separated.
Border-collapse: Yes
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).
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)
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.
- Add your base layer by clicking on + in the Background panel. Upload your image and adjust its settings as desired
- 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
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:
repeat
Image replicated horizontally and vertically
repeat-y
Image replicated vertically only
no-repeat
Image is not replicated
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 pagefixed
Image will not scroll with pagelocal
Image scrolls with the element's contents
Size
Controls how an image sits within the container
auto
Image displayed at original sizecover
Resize image to cover entire width container, even if it has to stretch or cropcontain
Resizes image to make sure whole image is fully visible