Register

What is a Button and how can I use it to design my newsletter?

Buttons are everywhere, on every website, phone application and video game - their usage is commonplace. So why would newsletter campaigns be any different? Effective email marketing is based around buttons as the graphical representation of what you want to be your subscribers ideal first reaction - clicking!

Their usage is far from necessary, but they usually provide an efficient and striking way for your subscribers to interact with your campaigns and engage in the exact way and place that you want them to.

After you start defining your newsletter design's structure you should also begin adding elements to it. One of the available element types that you can use in your campaigns is the Button.


Let's see how you can add one to your structure: 

 

A. Adding a button

1. Click on the Elements button, located on the left side of your Editor page.
Adding a button Step 1 : Click on the Elements button

2. Drag-n'-drop the Button element, from the Elements list to a container inside the Editor page.
Adding a button Step 2 : Drag n drop the button element


3. Click on the Button that you just added inside the container.
Adding a button Step 3 : Click on the button you just added

Its Settings instantly become available on the left side of the Editor page.
 

B. Refurbishing a button

1. Click on the Background Color option, to choose a colour for the area behind your button, out of a palette.
Adding a button Step 1 : Click on the background color

Keep in mind that the background of buttons is usually left transparent, but the option to change this is here in case you ever need it.


2. Click on the Button Color option, to pick the colour for the main body of your button out of a palette.
Adding a button Step 2 : Click on the button color


3. Click on the Label Color option, to pick the colour for the button text out of a palette.
Adding a button Step 3 : Click on the label color

4. Click on the Border Color option, to pick the colour of the button's border out of a palette.
Adding a button Step 4 : Click on the border color


5. Fill-in the online address on the designated Link area, to which this particular button will lead to.Adding a button Step 5 : Fill in the online address

6. Type-in a label for your button, on the designated Label area.
Adding a button Step 6 : Type in the label of the button

Make sure that the result is enticing and click-worthy!


C. Working with button fonts


1. Click on the Font Family drop-down menu to pick a different font for your button label.
Working with the button fonts Step 1 : Click on the font family


2. Click on the up/down arrows on the Font Size option, to change the size of the font on your button label.
Working with the button fonts Step 2 : Click on the arrows to adjust the font size

Alternatively, you can fill-in the font size number directly on the area located next to the arrows.

3. Toggle the different Decorations buttons to change the styling of your button label.
Working with the button fonts Step 3 : Select a decoration style

Your options vary between any combination of Italic, Bold and Underlined text. A blue option indicates a styling already engaged, whereas gray button means the styling is not currently applied to the text.


D. Rearranging a button

1. Click on the Alignment drop-down menu to change the alignment of your button inside the container.
Rearranging a button Step 1 : Click on the Alignment drop down


2. Click on the Button Width drop-down menu to choose the width that the button will take-up inside the container.
Rearranging a button Step 2 : Click on the Button width


3. Click on the up/down arrows on the Padding option to change the height that the button will take-up inside the container.
Rearranging a button Step 3 : Adjust the padding using the arrows

Alternatively, you can fill-in the height size number directly on the area located next to the arrows.

4. Click on the up/down arrows on the Margin option to change the distance between the container and button boarders.
Rearranging a button Step 4 : Adjust the margin using the arrows

You can fill-in the margin number directly on the area located next to the arrows. Keep in mind that the margin is calculated based on the current Alignment of the button.


5. Click on the up/down arrows on the Border Width option to change the width of the button's border.
Rearranging a button Step 5 : Adjust the border width using the arrows

You can fill-in the width number directly on the area located next to the arrows.

6. Click on the up/down arrows on the Corner Radius option to morph the shape of your button between a rectangle and a square.
Rearranging a button Step 6 : Adjust the corner radius using the arrows

You can fill-in the radius number directly on the area located next to the arrows.