Horizon makes it quick and easy to build stylish, mobile-responsive emails. This article will guide you through styling buttons and choosing themes.
Adding styling to blocks
If you're using the new editor (you'll see the custom blocks to the left), you can easily style custom blocks. If you don't see the styling options, you'll need to update the layout.
It’s possible to style the custom block by clicking into the block, then clicking the icon, from the the toolbar on the right-hand toolbar:
- Change the background colour of the whole block, or a specific part of it.
- Change the background colour of each call-to-action button.
- Change the height of a specific text area.
- Change the line-height of the text within a specific text area.
- Change the border width and colour.
Several of the standard email custom blocks contain buttons, and these can be styled in several ways. Buttons can also be added by clicking the button in the editor toolbar.
Buttons can be aligned to the left, right or centre by right-clicking the button and selecting “Table properties” (this is because buttons in Horizon are actually created as HTML tables):
Horizon provides two styles of button as standard:
- “Call to action” buttons
- Regular buttons
The styling of these buttons is controlled through the CSS (cascading style sheet) code in the selected email “theme”. To switch a button from one type to the other, change the CSS class name for the button:
- For “call to action” buttons, set the class name to “htk_button_cta”.
- For other buttons, set it to “htk_button”.
The background colour of each button can be changed by right-clicking the button and selecting “Cell properties” (this is because the button colours are defined behind-the-scenes on an HTML table cell):
The colour of the button wording can be changed by using the text colour tool in the editor toolbar.
The overall styling of emails in Horizon controlled through “Themes”. Each Theme contains CSS (cascading style sheet) code that controls things like the background colour, foreground colour, default button colours, font colours, styles and sizes.
10 Themes are provided as standard, and custom Themes can be added to reflect your own brand guidelines, ensuring that your emails are always on-brand.