Objective:
In this How-To, we will explore how to add and style a button within a Core iQ email template. We will explore the following topics:
- How to create a button in your email body copy
- How to style the button using the Core iQ email builder
- How to link your button to a website URL
Adding a button to your email communications in Core iQ is extremely easy, but if you haven't done so before, it can be confusing to figure out how to start. This tutorial will walk you through every step of creating and linking your button within the email, as well as the different styles that you can apply to that button. If you require further customization of your button after completing this tutorial, you may need to get into the source code for your template to make changes.
How to add a button to your email
Every button in Core iQ is built using a 1x1 table, which means we need to start by locating where we want the button within our body text. Once we have our area picked out for the button, we will add a table using the Table button in our toolbar. We want to use the default settings for this 1x1 table, so we can go ahead and press OK to add it to our email. It may appear that nothing was added into our email, but you should be able to see the faint lines of the template around your cursor.
Adding styling to your button
To begin to style your button, you will want to click on the Styles dropdown within the toolbar's bottom row. This will bring up a menu of 'Object Styles' that we can apply to our button to get the correct look and feel. These styles affect the placement, size, and color of the button, so we may need to use several to get the perfect button for our email. These button styles are as follows:
Button Height & Corner Styling
- Options: Tiny Button, Small Button, Medium Button, Large Button, Tiny Round Button, Small Round Button, Medium Round Button, Large Round Button
- How to Use: These options control the height of your button (Tiny -> Large) and whether your button has normal corners or rounded corners.
Button Width & Positioning
- Options: Bttn Short, Bttn Standard, Bttn Long, Centered Bttn Short, Centered Bttn Standard, Centered Bttn Long
- How to Use: These options control the width of your button (Short -> Long) and whether your button is left or center aligned within the email body.
Color
- Options: Button Grey, Button Yellow, Button Red, Button Green, , Button Blue, Button Black
- How to Use: These options control the basic color of the button. If you need additional customization of this color, you will have to dive into the source code for this email.
Linking your button to your website
The last step in this process is adding in your call to action text, modifying the font and/or font size if you so choose, and linking your button to a website. To create this link, we will want to highlight our CTA text and then click the Link button in our toolbar. This will bring up a modal that allows us to set the link that Core iQ will go to once the button is clicked. It also allows us to choose whether we want that link to open up in a new window. In this case, we will want our link to open in a new window, so after we have filled out our URL, we can click the Target tab to choose the "New Window (_blank)" option from the dropdown. You should now have a fully functional button within your email, which you can test yourself using the Proofs & Review button once you save. When you receive your proof, you should check that the button displays correctly in your email client, as well as links correctly to your website page.