Register

What is a Button and how you can use it to design your newsletter

Their usage is far from necessary, but they usually provide an efficient and striking way for your subscribers to interact with your campaigns 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.button_editor_1.png

 

2. Drag and drop the Button element, from the Elements list to a container inside the Editor page.button_editor_2.png

 

3. Click on the Button element that you just added inside the container.

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

B. Adding detail to a button

1. Click on the Background Color option, to choose a color for the area behind your button, out of a palette.button_editor_3.png

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 color for the main body of your button out of a palette.

 

3. Click on the Label Color option, to pick the color for the button text out of a palette.

 

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

 

5. Fill in the online address on the designated Button Link area, to which this particular button will lead to.button_editor_4.png

 

6. Type in a label for your button, on the designated Label area.

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.button_editor_5.png

 

2. Click on the up/down arrows on the Font Size option, to change the size of the font on your button label.

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.

Your options vary between any combination of ItalicBold, and Underlined text. A blue option indicates a styling already engaged, whereas a 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.button_editor_6.png

 

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

 

3. Click on the up/down arrows on the Padding option to change the height that the button will take up inside the container.

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 borders.

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.button_editor_7.png

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.

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