All Symplify accounts contain a standard boilerplate. A boilerplate is the framework (or the skeleton if you prefer) for your designed communication. The design will be completed when you configure your Skin(s). Boilerplate with a designed Skin becomes your template.
The default boilerplate contains a number of blocks.
header blocks
menu blocks
content blocks
footer block (incl. social media icons)
Let's take a look!
Header block
The header block (header from skins) gets its content from the Skin settings. This allows you to use the same boilerplate for different projects that need e.g. a different logo since you can upload a different logo to each project - or you can overwrite the view in browser text in case you have different projects for different languages.
Header variations
In Skins (under Layout), you can choose between different header blocks:
One Column
Two Columns - Not Responsive (the two columns will be next to each other on mobile devices)
Two Columns
You can choose if the logo should be responsive (choose the header layout with ".... with responsive Logo") or if the logo should be the same size on desktop and mobile. Keep in mind that the logo should not be bigger than 300px when you choose the latter. Otherwise the whole mail will be zoomed in and the layout can look wrong. Choose a header with responsive Logo instead. The logo will be 100% if the screen is smaller than the width you gave the logo in the Logo tab in Skins.
If you want to have a banner in the header, choose the One column with responsive Logo header. Change the Image Dimensions width in the Logo tab to 640 and the banner will have the content width in all screens. (If you have a custom boilerplate, the width might be different)
There are also "static" header blocks in the boilerplate. These blocks have no connection to Skins but can be used in case you need to make another header for a single / special send out. These blocks are:
header one column
header two columns
header two columns - not responisve
header (this block can be changed into logo only, logo/text, logo/social icons)
Below the header blocks, you find 3 different menu blocks.
dynamic menu
In this menu block, you can add as many menu items as you need (but less is more). On mobile devices, the items, that doesn't fit in the first row will jump in a new one.
menu 3 options
This menu block contains 3 items and they will be displayed under each other on mobile devices
menu 4 options
This menu block contains 4 items and they 2 will be displayed in own row mobile devices
| top |
Content blocks
There are several content blocks which include content elements like:
responsive image ( = full width image)
unresponsive image ( = size can be changed, image has the same size on mobile devices)
header *
text *
link *
button *
All these elements can be added / deleted within the block to change the layout.
* These elements can be restyled in Skins or within the editor, e.g. color and font size
You can either restyle each element one by one or change styling on all elements in the same category at once (simply select a class in the inspector).
About the blocks
You can choose between blocks that have up to 4 columns. Blocks that can be found under "2b. Content - reverse stack" will stack the right column above the left on mobile devices.
background image with text
The background image block needs to have a fixed size (640px x 360px)*. You can add content elements on light background color (semi-transparent white)*, dark (semi-transparent black)*, or no background color and vertical align the content.
one column
The block has a width of 640px, that means that the responsive image has also 640px
one column padding
The block has a width of 640px, but there is a 10px border on the left and right side of the content which results in a responsive image width of 620px.
one column bullet list
Each list item is an element and you can add more with the "Add clement" button in the right top corner of the block. There is also the possibility to add list items with circle, square, checkmark, dash or an icon/image that you can change. Disc, circle, square, checkmark, dash is a text element and can be edited and styled like one.
divider
When you click at the divider image, you can change the width to another %-value e.g. 80% if you do not want to have the divider full width. To change the color, click at the divider image and change the background color to the color of your choice.
two columns
The block has a total width of 640px, that means that the responsive images and columns have a width of 320px on desktop. The right column will stack under the left column on mobile devices and the content will be 100% of the screen size.
two columns - 1:2
The block has a total width of 640px. The left column and the left responsive image have a width of 214px and the right a width of 426px. The right column will stack under the left column on mobile devices and the content will be 100% of the screen size.
two columns - 2:1
The block has a total width of 640px. The left column and the left responsive image have a width of 426px and the right a width of 214px. The right column will stack under the left column on mobile devices and the content will be 100% of the screen size.
two columns padding
The block has a total width of 640px, but there is a 10px border on the left and right side of each column which results in a responsive image width of 300px. The right column will stack under the left column on mobile devices and the content will be 100% of the screen size minus 10px padding on each side.
two columns padding - 1:2
The block has a total width of 640px, but there is a 10px border on the left and right side of each column which results in a width of 194px for the left column and a 406px width for the right column. The right column will stack under the left column on mobile devices and the content will be 100% of the screen size minus 10px padding on each side.
two columns padding - 2:1
The block has a total width of 640px, but there is a 10px border on the left and right side of each column which results in a width of 406px for the left column and a 194px width for the right column. The right column will stack under the left column on mobile devices and the content will be 100% of the screen size minus 10px padding on each side.
two column bullet list
This block is like the two column block, but just for bullet lists. Each list item is an element and you can add more with the "Add clement" button in the right top corner of the block. There is also the possibility to add list items with circle, square, checkmark, dash or an icon/image that you can change. Disc, circle, square, checkmark, dash is a text element and can be edited and styled like one.
two columns - not responsive
The block has a total width of 640px, that means that each column has a width of 320px on desktop, and the two columns will be next to each other on mobile.
two columns padding - not responsive
The block has a total width of 640px, but there is a 10px border on the left and right side of each column which results in 300px wide responsive images on desktop. On mobile, the columns will be next to each other with the same padding.
three columns
The block has a total width of 640px, that means that the responsive images and columns have a width of 213.333333333333336px on desktop. The content on the mobile can be wider since the columns will be under each other and 100% of the screen size.
Note that there might be a 1px gap between 2 column on Outlook since they don't like decimal.
three columns padding
The block has a total width of 640px and the columns have 10px padding between each other which results in 200px wide responsive images on desktop, the content on the mobile can be wider since the columns will be under each other and 100% of the screen size minus 10px padding on each side.
four columns
The block has a width of 640px, that means that the responsive images have a width of 160px.
The 3rd and 4th column will stack under the 1st and 2nd column on mobile devices. Both rows will be 100% of the screen size on mobile email clients.
four columns padding
The block has a width of 640px, but there is a 10px border on the left and right side of each column which results in a responsive image width of 140px.
The 3rd and 4th column will stack under the 1st and 2nd column on mobile devices. Both rows will be 100% of the screen size minus the padding on mobile email clients.
two columns - reverse
The block has a total width of 640px, that means that the responsive images and columns have a width of 320px on desktop. The right column will stack above the left column on mobile devices and the content will be 100% of the screen size.
two columns - 1:2 - reverse
The block has a total width of 640px. The left column and the left responsive image have a width of 214px and the right a width of 426px. The right column will stack above the left column on mobile devices and the content will be 100% of the screen size.
two columns - 2:1 - reverse
The block has a total width of 640px. The left column and the left responsive image have a width of 426px and the right a width of 214px. The right column will stack above the left column on mobile devices and the content will be 100% of the screen size.
two columns padding - reverse
The block has a total width of 640px, but there is a 10px border on the left and right side of each column which results in a responsive image width of 300px. The right column will stack above the left column on mobile devices and the content will be 100% of the screen size minus 10px padding on each side.
two columns padding - 1:2 - reverse
The block has a total width of 640px, but there is a 10px border on the left and right side of each column which results in a width of 194px for the left column and a 406px width for the right column. The right column will stack above the left column on mobile devices and the content will be 100% of the screen size minus 10px padding on each side.
two columns padding - 2:1 - reverse
The block has a total width of 640px, but there is a 10px border on the left and right side of each column which results in a width of 406px for the left column and a 194px width for the right column. The right column will stack above the left column on mobile devices and the content will be 100% of the screen size minus 10px padding on each side.
two column bullet list - reverse
This block is like the two column - reverse block, but just for bullet lists. Each list item is an element and you can add more with the "Add clement" button in the right top corner of the block. There is also the possibility to add list items with circle, square, checkmark, dash or an icon/image that you can change. Disc, circle, square, checkmark, dash is a text element and can be edited and styled like one.
three columns - reverse
The block has a total width of 640px, that means that the responsive images and columns have a width of 213.333333333333336px on desktop. The content on the mobile can be wider since the columns will be under each other and 100% of the screen size. The third column will be the first on the stack on mobile devices, the first column last.
Note that there might be a 1px gap between 2 column on Outlook since they don't like decimal.
three columns padding - reverse
The block has a total width of 640px and the columns have 10px padding between each other which results in 200px wide responsive images on desktop, the content on the mobile can be wider since the columns will be under each other and 100% of the screen size minus 10px padding on each side. The third column will be the first on the stack on mobile devices, the first column last.
four columns - reverse
The block has a width of 640px, that means that the responsive images have a width of 160px.
The 3rd and 4th column will stack above the 1st and 2nd column on mobile devices. Both rows will be 100% of the screen size on mobile email clients.
four columns padding - reverse
The block has a width of 640px, but there is a 10px border on the left and right side of each column which results in a responsive image width of 140px.
The 3rd and 4th column will stack above the 1st and 2nd column on mobile devices. Both rows will be 100% of the screen size minus the padding on mobile email clients.
| top |
There are also "static" footer blocks in the boilerplate. These block have no connection to Skins but can be used in case you need to make another footer for a single / special send out. There are one column, two columns, three columns and an icon block.
Footer variations
In Skins (under Layout), you can choose between different footer blocks:
One column
Two columns
Two columns with Links
Three Columns
You can choose if the logo in the footer should be responsive (choose the footer ".... with responsive Logo") or if the logo should have the same size on desktop and mobile.
Note that the logo width should not be wider than the column width which is 220px for the Two Columns Layout and 210px for the Three Columns. When you choose a Two or Three Columns block with responsive logo, the logo will be 100% of the mobile devices width.
You can have a logo up to 640px when you choose One column with responsive Logo. When you use the One column layout, the logo should not be bigger than 300px. Otherwise the whole mail will be zoomed in and the layout can look wrong.
Change block layouts
By removing or adding content elements and margin between blocks you can get different layouts. For example, to the left below is how a two column block looks when you add it. By deleting some of the elements you'll get a whole new appearance (to the right).
And this is two four column blocks with text and padding removed:
Boilerplate width
Note that the boilerplate width is fixed, however, it can be customized. Height for background image block can be customized, but not be changed after we delivered the boilerplate since we have to add the height into the code.