In this article
What are blocks?
Blocks are the backbone of your HTML emails and they help you to structure your email content. You can take a further look at the anatomy of an HTML email here.
In Shaman, you have a blocks menu as part of the toolkit available to you. You can simply drag and drop blocks on your canvas from the menu, and define the amount of columns (if any) that you wish to use in your block.
How to use blocks in Shaman
Let´s imagine that you have created a new email fragment or template, the email details have been completed and you are now in the HTML editor ready to add elements to your email fragment or template. (If you need to revise any of these steps, you can take a look at this article here).
From the menu on the right-hand side, select the “Blocks” menu.
You can add a block to your email canvas by simply clicking and dragging it. Once you have dropped it on the canvas, you can use the ¨Add content¨ button to add content elements such as images or text to your block. Or, you can drag and drop content elements from the content menu on the left, straight onto your block.
You will be able to see all of the ways you can personalize your block by browsing through the options in the menu on the left-hand side.
Columns - Here you can determine the number of columns in your block. For example, if you wish to have text and image side by side - you could use a two-column block to accommodate the text and image.
You can then determine properties for each column in the block such as:
Background Color - Here you can define the color of the background of the body of your block.
Padding - This setting allows you to define the amount of space between your block and the rest of the email content. You can set this on all sides of your block using the “All Sides¨ option, or you can enable the “More Options” toggle on the right of the menu to view options to configure the padding of each side - “Top”, “Bottom”, “Left” and “Right”. The plus and minus signs can be used to increase or decrease the padding on your block, or alternatively, you can add a value directly to the numerical fields available to maintain consistency across your block padding.
Border - Choosing “Solid”, “Dotted” or “Dashed” from the options in the dropdown menu you can set a border for your block. You can set this on all sides of your block using the “All Sides¨ option, or you can enable the “More Options” toggle on the right of the menu to view options to configure the border of each side - “Top”, “Bottom”, “Left” and “Right”. You can also use the plus and minus signs to define the width of the border, or alternatively add a value directly to the numerical fields available to maintain consistency across your borders.
Row properties - here you can define some settings for a specific row in your email, such as:
Content Background Color - This setting refers to the color filled behind the main content area. The main content area usually has a width of 600-650px, therefore if the screen where the email is being viewed is larger than this dimension, the content background color will be visible.
Good to know!
The main content area will scale for smaller screens such as a phone, in which case you will not see the background color.
Background Image - you can also add a background image to a specific row. This is an image that will be visible behind the content of the row, for example, you might want to add a background image to text.
Good to know!
Background images do not show when viewed in Outlook, so you may want to reconsider using a background image if your clients work predominantly with Outlook.
Padding - This setting allows you to define the amount of space between a specific row and the rest of the rows in the block. You can set this on all sides of the row using the “All Sides¨ option, or you can enable the “More Options” toggle on the right of the menu to view options to configure the padding of each side - “Top”, “Bottom”, “Left” and “Right”. The plus and minus signs can be used to increase or decrease the padding on your block, or alternatively, you can add a value directly to the numerical fields available to maintain consistency across your block padding.
And lastly, you can define the responsiveness settings.
Responsive design (to learn more about making responsive emails, check out this article.)
Handy hints when working with blocks:
You can always change the number of columns a block has at a later time
Per column, you can set the background color, padding (space between the outside area and content area), and border
If you have multiple columns and want the same background color, use the content background color in the Row Properties
You can set a background image (however this HTML code is not compatible with all Outlook clients)
You can also set the width of a column manually by moving the line between columns