TABLE OF CONTENTS


Before we begin, let’s go over some terminologies to prevent any confusion going forward. Columns, Button, Divider, Header, Text, Image, Menu, and HTML are your tools. Tools are basic content elements that are used to create a design.


When you drag and drop a tool on your editor, a new menu will appear which will replace your tools menu. You will see several property groups and their corresponding properties. A property group is a collapsible panel that is used to organize properties into a group. And properties are variables that the user can modify, such as colors, font sizes, text alignment, images, and more.



Columns

Dragging and dropping the Columns tool on the editor will allow you to add a column to your design. Depending on the position of your cursor in reference to the current block on the editor, you can place the column on top or below the current block.


Once you drop your Columns tool on the editor, the Row menu will appear on the right and replace the tools. In the Row menu, you can further customize the contents of the block. 


There are four distinctive property groups in the Row menu: Columns, Column Properties, Row Properties, and Responsive Design. By default, all property groups are in the expanded state so you will be able to see all the properties.


Columns Property Group

Let’s review the properties in each property group. We’ll start in the Columns property group. Here, you can choose how you want to utilize the space in the block by selecting how the block is divided.


Column Properties Property Group

In the Column Properties property group, you can adjust the number of Columns, Background Color, Padding and Border.


To adjust the number of Columns, click + to add a column. To delete a column, select the column you want to delete and click the trashcan.


The column that is selected will be the column you will be making your edits to, such as changing background color, customizing padding and adding borders.


Here, we will be adjusting the Background Color for Column 1. To change Background Color, select the color picker on the right. Then, a color palette will appear. You can use the color palette or common colors that are provided to adjust the background color of column 1. If you know the HEX or RGB code of the color you would like to use, you can also input the code in their respective fields.


If you would like to see the colors you’re currently using on your template, click on the dropdown arrow next to Common Colors and select Template Colors.


If you want to remove the Background Color, simply click the ‘X’ on the corner of the color tile or click the color tile again to adjust the color.


Next, we have the Padding property. Padding is the space we can add between the content in the column and the border. It is used to create spacing inside the element, ensuring that the content is not too close to the edges. The padding property will appear in several property groups. The main difference between the padding property in each group is where the padding is applied.

To adjust the Padding, you can change the number to the left of ‘px’ or increase/decrease the padding in 1 pixel increments by clicking the +/- button to the right of ‘px’. By default, you can adjust the padding on all sides. If you want more control of the padding on each side, then you can enable the ‘More Options’ toggle to adjust each side individually.

Below is a comparison between an image with padding and an image without. Both columns have the same image, but Column 1 has a 15px padding whereas Column 2 has no padding. To adjust the padding in Column 2, make sure to select ‘Column 2’ at the top.  


Border is exactly as it sounds. You are adding a Border around the column. Just like padding, you can adjust the width of the Border on all sides or on each side individually by enabling the “More Option”.  From the dropdown menu, you can choose between a solid, dotted or dashed border. To change the color of the Border, select the color tile underneath the border increment field. You will see the color palette popup appear. By default, the border color is grey, but this is customizable. If you would like to remove the Border color, just click the ‘X’ on the corner of the color tile.   

Below is an example of what a border looks around an image.


Row Properties Property Group

In the Row Properties property group, you can adjust Background Color, Content Background Color, Upload Image, and modify Padding.


To change the Background Color of the entire row, select the color picker on the right. Then, a color palette will appear. You can use the color palette or Common Colors that are provided to adjust the Background Color. If you know the HEX or RGB code of the color you would like to use, you can also input the code in their respective fields.


If you would like to see the colors you’re currently using on your template, click on the dropdown arrow next to Common Colors and select Template Colors.


The process to adjust the Content Background Color property is the same as Background color. Click on the color picker on the right and a color palette will appear. Instead of affecting the entire row, this property only affects the color of the column(s).


However, if a Background Color is already selected for the column in the Column Properties property group, then the color selected for the Content Background Color will not appear. As you can see, I selected red for my Content Background Color, but the color of the columns is not red. This is because I’ve already selected the background color for the columns in the Column Properties property group.


Next is Upload Image. You can upload an image from your device to set as your row background. To upload an image, you can click the Upload Image button or the dotted box and select an image from your device. You can also drag and drop the image from your files to the dotted box.


After uploading an image, ‘Image Options’ will appear with more properties to further customize your background image. You will see three properties appear: Container Width, Repeat, Position, Left and Top.

The Container Width property allows you to choose between filling the content or the entire row by selecting ‘Content’ or ‘Full Width’. The Repeat property allows you to repeat the image across the entire row. By default, the image will not repeat, but you can choose to repeat the image by clicking the second button in line. The third and fourth buttons will allow the image to be repeated horizontally and vertically, respectively.

The Position property allows the user to select how the image will be positioned on the row. There are nine positions: Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center and Bottom Right. An alternative way to adjust the position of the image is by changing the Left and Top properties. For the values in the input field, the smaller the number the closer you are to the Left or Top. By selecting the dropdown next to the input field, you can change the unit of measurement between percentage and pixels.


The last property in the Row Properties property group is Padding. Padding is the space we can add between the entire content and the border. This means the padding will be applied around all the content or the group of contents in the row. You can adjust the padding by changing the number to the left of ‘px’ or increase/decrease the padding in 1 pixel increments by clicking the +/- button to the right of ‘px’. By default, you can adjust the padding on all sides. If you want more control of the padding on each side, then you can enable the ‘More Options’ toggle to adjust each side individually.

Below is an example of a row with no padding (image1) and a row with 15px padding (image2). The padding may not be obvious on the left and right sides since the original content doesn’t reach the edges. However, if you look at the space between the top and bottom of the content and the edges, the padding will be more noticeable.


Responsive Design Property Group

In the Responsive Design property group, there is only one property. The Hide on Desktop property will hide the entire row of content when the message is open on a desktop. The user can toggle this property on or off, but by default this property is off. And this covers all of the properties under Columns.



Button

Dragging and dropping the Button tool on the editor will allow you to add a button to the content of your block.


Once you drop your Button tool on the editor, a new menu will appear on the right and you can further customize the contents of the button. To edit the text on the button, just click the button and you can edit the text however you like.


There are five property groups: Action, Button Options, Spacing, General, and Responsive Design.


Action Property Group

In the Action property group, you can choose what kind of action the button will perform after clicking it. Clicking the dropdown next to Action Type will display three actions the button can perform: Open Website, Send Email and Call Phone Number.


Action 1: Open Website

This action allows the user to redirect the recipient to another website after clicking the button. For the recipient to be redirected to a website, you must paste the link of the website in the URL field or pick a link from the Special Links dropdown. The Special Links are your Callback Links.

NOTE: Using a Special Link will cause a red ‘Please enter a URL’ warning message to appear, but do not panic, this warning can be ignored and will not affect the performance of the button.

In the Target property, you will see a ‘New Tab’ and ‘Same Tab’ option in the dropdown. The ‘New Tab’ option will open the link in a separate browser tab, allowing you to view the content without leaving your current page. The ‘Same Tab’ option replaces the current page with the linked content in the same browser tab. These two options will decide whether the recipient will remain in the same tab or go to a new tab when clicking the button.


Action 2: Send Email

This action will automatically compose an email for the recipient to send. The ‘Mail To’ field is who the email will be sent to so this should be a valid email address. The ‘Subject’ field is the Subject line of the email, and the ‘Body’ field is the content of the email. Anything you put in these three fields will auto-populate when the recipient clicks the button. You do not have to fill out all three fields, but you must enter data in at least one field for the action to work properly.


Action 3: Call Phone Number

This action allows the recipient to call the number you assigned. Just enter the phone number you would like the recipient to call in the ‘Phone’ field.


Button Options Property Group

The properties under Button Options will change the appearance of the button.

Text Color: changes the color of the text on the button

Background Color: changes the color of the button

Width: changes the width of the button

Font Family: changes the font/typeface of the text on the button

Font Weight: changes the weight/thickness of the text on the button

Font Size: changes the size of the text

Alignment: changes the alignment/position of the button


Just like it sounds the Text Color property changes the color of the text on the button. To adjust the text color, select the color picker on the right and a color palette will appear. You can then use the palette to adjust the color of the text. If you know the HEX or RGB code of the color you would like to use, you can also input the code in their respective fields.


The Background Color property allows the users to apply or edit the color on the button. The process to change the Background Color of a button is identical to the process above.   


The Width property will adjust the width of the button. By default, auto width is on which means the width of the button will adjust automatically to fit the length of the text. If you would like to control the width of the button, you will need to toggle the auto off. Once the auto is off, the slide bar below will appear. Using the slide bar, you can adjust the width of the button.


Next, we have the Font Family property. The Font Family refers to a set of typefaces that share a common design. It also defines the style and appearance of the text. Clicking the dropdown to the right will populate a list of fonts. Look through the list and select the font you’d like to use.


The Font Weight indicates the thickness of the text characters. It affects the font's visual prominence and can be adjusted using predefined keywords like regular, and bold. All fonts will have a Regular and Bold option.


The Font Size determines the height of the text characters, affecting how large or small the text appears on the screen. You can adjust the font size by changing the number to the left of ‘px’ or you can increase/decrease the size in 1 pixel increments by clicking the +/- button to the right of ‘px’.


The last property under Button Options is Alignment. Alignment refers to the positioning of the button within a container. It determines how the button is aligned relative to the container's edges. From left to right, the options are left alignment, center alignment, right alignment and justify alignment.


Spacing Property Group

The properties under Spacing will further enhance the appearance of the button.

Line Height: controls the vertical spacing between lines of text within the button

Padding: changes the space between the button's text and its edges

Border: changes the appearance of the border around the button

Rounded Border: adjusts the corners of the button


The Line Height controls the vertical spacing between lines of text within the button. It affects how text is positioned relative to the button's height. Below are examples of the line height at 100% vs 140%. You can adjust the line height by entering a value in the input field or using the +/- buttons to the right. But note that the +/- buttons can only increase or decrease the line height in 10% increments.


Next on the list of properties is Padding. This Padding adjusts the space between the button's text and its edges. You can modify the padding by changing the number to the left of ‘px’ or you can increase/decrease the padding in 1 pixel increments by clicking the +/- button to the right of ‘px’. If you want more control of the padding on each side, then you can enable the ‘More Options’ toggle to adjust each side individually.

Below is an example of a button with a 10px padding and a button with a 18px padding. Notice that with 18px padding, there is more space around the button text compared to 10px padding.


For the Border property, you are adding a border around the button. Similar to the padding property above, you can adjust the thickness of the border on all sides or on each side individually by enabling the “More Option”. From the dropdown menu, you can choose between a solid, dotted or dashed border. To change the color of the border, select the color tile underneath the border increment field and you will see the color palette popup appear. By default, the border color is grey, but this is customizable.


The last property in the Spacing property group is Rounded Border. Rounded Border adjusts the corners of the button. The greater the value the more curved the corners are on the button. Toggling on ‘More Options’ allows you to adjust the curve of each corner individually.


General Property Group

In the General property group, there is only the Container Padding property. The Container Padding adjusts the space between the button and the container or column. Like any other padding properties we've discussed so far, you can modify the padding by changing the number to the left of 'px' or adjust it in 1-pixel increments using the +/- buttons to the right of 'px'. If you want more control over the padding on each side, you can enable the ‘More Options’ toggle to adjust each side individually.

Below is an example of how Container Padding looks around a button. Notice how this padding adjusts the spacing around the outside of the button, rather than inside.


Responsive Design Property Group

In the Responsive Design property group, there is only one property. The Hide on Desktop property will hide the entire row of content when the message is open on a desktop. The user can toggle this property on or off, but by default this property is off.



Divider

A Divider is a horizontal line used to separate content sections. It enhances visual organization and readability by clearly delineating different areas of the email. Dragging and dropping the Divider tool on the editor will allow the divider content menu to appear.


There are three property groups: Line, General, and Responsive Design.


Line Property Group

The properties under the Line can modify the appearance of the divider.

Width: changes the length of the divider

Line: can modify the thickness and color of the divider

Align: adjusts the position of the divider


To adjust the Width, the user can use the slide bar to modify the length of the divider.


The Line property can adjust the type of line, the thickness and the color of the divider. From the dropdown, you can choose between a solid, dotted or dashed line. By changing the number to the left of ‘px’ or clicking the +/- button to the right of ‘px’, you can adjust the thickness of the divider. Clicking the color tile underneath the border increment field will allow you to change the color of the divider.


The Align property changes the position of the divider. Align refers to positioning an element relative to its container or other elements. Left-align positions the divider flush on the left edge of the container. Center-align centers the divider horizontally within the container. Right-align positions the divider flush with the right edge of the container. And justify-align distributes the divider evenly across the width of the container.


General Property Group

In the General property group, the Container Padding adjusts the space between the divider and the container or column. You can modify the padding by changing the number to the left of 'px' or adjust it in 1-pixel increments using the +/- buttons to the right of 'px'. If you want more control over the padding on each side, you can enable the ‘More Options’ toggle to adjust the padding on each side individually.

Below is an example of how Container Padding looks around a divider.


Responsive Design Property Group

In the Responsive Design property group, the Hide on Desktop property will hide the entire row of content when the message is open on a desktop. The user can toggle this property on or off, but by default this property is off.



Heading

Heading refers to text used to introduce or emphasize sections of content. It is typically styled with larger font sizes and distinct formatting to organize information and provide structure.


Let’s go over the buttons that appear in the editor after adding a heading. From left to right, we have

Bold: Makes text thicker and darker for emphasis.

Italic: Slants text to the right for emphasis or distinction.

Underline: Adds a line beneath the text to highlight or emphasize.

Strike: Adds a line through the text to indicate deletion or correction.

Superscript: Positions text slightly above the baseline, often used for footnotes or exponents.

Subscript: Positions text slightly below the baseline, commonly used for chemical formulas or equations.

Insert/Edit Link: Adds or modifies a hyperlink to direct users to another webpage.

Remove Link: Deletes an existing hyperlink from the text.

Emoticons: Inserts symbols or images that express emotions or reactions.

Custom Values: Inserts a custom value


There are four property groups: Text, Links, General, and Responsive Design.


Text Property Group

In the Text property group, there are seven properties that will help with the customization of the heading.


Heading Type refers to the different levels of headings used to organize and structure content. Each type (H1, H2, H3, H4) defines the importance and hierarchy of sections, with H1 being the highest level and largest, and subsequent headings decreasing in size and importance.


Next, we have the Font Family property. The Font Family refers to a set of typefaces that share a common design. It also defines the style and appearance of the text. Clicking the dropdown to the right will populate a list of fonts. Look through the list and select the font you’d like to use.


The Font Weight indicates the thickness of the text characters. It affects the font's visual prominence and can be adjusted using predefined keywords like Regular, and Bold. All fonts will have a regular and bold option.


The Font Size determines the height of the text characters, affecting how large or small the text appears on the screen. You can adjust the font size by changing the number to the left of ‘px’ or you can increase/decrease the size by 1 pixel increments by clicking the +/- button to the right of ‘px’.


The Color property changes the color of the heading. To adjust the heading color, select the color picker on the right and a color palette will appear. You can then use the palette to adjust the color of the heading. If you know the HEX or RGB code of the color you would like to use, you can also input the code in their respective fields.


The Text Align property changes the position of the heading. Align refers to positioning an element relative to its container or other elements. Left-align positions the heading flush with the left edge of the container. Center-align centers the heading horizontally within the container. Right-align positions the heading flush with the right edge of the container. And justify-align distributes the heading evenly across the width of the container.


The Line Height controls the vertical spacing between lines of text within the header. It affects how text is positioned relative to the header’s height. Below are examples of the line height at 100% vs 140%. You can adjust the line height by entering a value in the input field or using the +/- buttons to the right. But note that the +/- buttons can only increase or decrease the line height in 10% increments.


Links property group helps with the customization of links in the header. When the ‘Inherit Body Styles’ is toggled on, this means that any links in the header will inherit the default link style (underlined link in blue). When the toggle is off, you can adjust the color of the link as well as disable the underline.

Below is an example of a default link and a customized link.


General Property Group

In the General property group, the Container Padding adjusts the space between the heading and the container or column. You can modify the padding by changing the number to the left of 'px' or adjust it in 1-pixel increments using the +/- buttons to the right of 'px'. If you want more control over the padding on each side, you can enable the ‘More Options’ toggle to adjust the padding on each side individually.

Below is an example of how Container Padding looks around a header.


Responsive Design Property Group

In the Responsive Design property group, the Hide on Desktop property will hide the entire row of content when the message is open on a desktop. The user can toggle this property on or off, but by default this property is off.



Text

Just like how it sounds, dropping the Text tool on the editor will allow you to input text/content in the email body.


There are four property groups: Text, Links, General, and Responsive Design. We will go over the functionality of the properties in each property group below.


Before we begin, let go over the two rows of buttons that appear after adding a text block.

Row 1

Bold: Makes text thicker and darker for emphasis.

Italic: Slants text to the right for emphasis or distinction.

Underline: Adds a line beneath the text to highlight or emphasize.

Strike: Adds a line through the text to indicate deletion or correction.

Text color: Defines the color of the text

Background color: Sets the color behind the text

Superscript: Positions text slightly above the baseline, often used for footnotes or exponents.

Subscript: Positions text slightly below the baseline, commonly used for chemical formulas or equations.

Emoticons: Inserts symbols or images that express emotions or reactions.

Collapse toolbar: Minimizes the toolbar to create more space on the screen.

Row 2

Bullet list: Adds bullet points to list items for unordered, itemized content.

Numbered list: Adds sequential numbers to list items for ordered, step-by-step content.

Insert/Edit Link: Adds or modifies a hyperlink to direct users to another webpage.

Remove Link: Deletes an existing hyperlink from the text.

Custom Values: Inserts a custom value.


Text Property Group

The properties under the Text property group will help with the customization of the text.

Font Family: changes the font/typeface of the text

Font Weight: changes the weight/thickness of the text

Font Size: changes the size of the text

Color: changes the color of the text

Text Align: changes the alignment/position of the text

Line Height: controls the vertical spacing between lines of text


The Font Family refers to a set of typefaces that share a common design. It also defines the style and appearance of the text. Clicking the dropdown to the right will populate a list of fonts. Look through the list and select the font you’d like to use.


The Font Weight indicates the thickness of the text characters. It affects the font's visual prominence and can be adjusted using predefined keywords like Regular, and Bold. All fonts will have a regular and bold option.


The Font Size determines the height of the text characters, affecting how large or small the text appears on the screen. You can adjust the font size by changing the number to the left of ‘px’ or you can increase/decrease the size in 1 pixel increments by clicking the +/- button to the right of ‘px’.


The Color property changes the color of the text. To adjust the text color, select the color picker on the right, and a color palette will appear. You can then use the palette to choose your desired color. If you know the HEX or RGB code for the color you want to use, you can also input the code in the respective fields.


The Text Align property changes the position of the text. Align refers to positioning an element relative to its container or other elements. Left-align positions the text flush with the left edge of the container. Center-align centers the text horizontally within the container. Right-align positions the text flush with the right edge of the container. And justify-align distributes the text evenly across the width of the container.


The Line Height controls the vertical spacing between lines of text. It affects how text is positioned relative to the header’s height. Below are examples of the line height at 100% vs 140%. You can adjust the line height by entering a value in the input field or using the +/- buttons to the right. But note that the +/- buttons can only increase or decrease the line height in 10% increments.


The Links property group helps customize links in the text box. When the 'Inherit Body Styles' option is toggled on, links in the text box will follow the default style, which includes being underlined and blue. When the toggle is off, you can change the link color and remove the underline.

The first image shows what the default link looks like in a text box and the second image shows what a customized link could look like.


General Property Group

In the General property group, the Container Padding adjusts the space between the text box and the container or column. You can modify the padding by changing the number to the left of 'px' or adjust it in 1-pixel increments using the +/- buttons to the right of 'px'. If you want more control over the padding on each side, you can enable the ‘More Options’ toggle to adjust the padding on each side individually.

Below is an example of how Container Padding looks around a text box.


Responsive Design Property Group

In the Responsive Design property group, the Hide on Desktop property will hide the entire row of content when the message is open on a desktop. The user can toggle this property on or off, but by default this property is off.



Image

Dragging and dropping the Image tool on the editor will allow you to add an image in the email body.


There are four property groups: Image, Action, General, and Responsive Design. We will go over the functionality of the properties in each property group below.


Image Property Group

The properties under the Image property group will help with image upload and image customization.

Upload Image: transfers an image file from your device to the application

Width: adjust the size of the image

Align: changes the alignment/position of the image

Alternate Text: offers a brief description of the image


The first property in this group is Upload Image. Like how it sounds, you can upload an image from your device here. To upload an image, you can click the ‘Upload Image’ button, or the dotted box in the middle. You can also choose to drag and drop your image from your files to the dotted box. Once you upload an image, the Image URL will populate. To remove the image, just delete the link in the Image URL field.


The Width property will adjust the width of the image. By default, auto width is on which means the width of the image will adjust automatically to fit the width of the container or column. If you would like to control the width of the image, you will need to toggle the auto off. Once the auto is off, the slide bar below will appear. Using the slide bar, you can adjust the width of the image.


The Align property changes the position of the image. Align refers to positioning an element relative to its container. Left align positions the image flush with the left edge of the container. Center align centers the image horizontally within the container. Right align positions the image flush with the right edge of the container. And justify align distributes the image evenly across the width of the container.


Last in this group we have Alternate Text. Alternate Text, or alt text for short, offers a brief description of the image, helping users who cannot view the image to understand its content and context.


Action Property Group

In the Action property group, you can choose what kind of action the image will perform after clicking it. Clicking the dropdown next to Action Type will display three actions the image can perform: Open Website, Send Email and Call Phone Number.


Action 1: Open Website

This action allows the recipient to be redirected to another website after clicking the image. For this action to work properly, you must paste the link of the website in the URL field or pick a link from the Special Links dropdown. The Special Links are your Callback Links.

NOTE: Using a Special Link will cause a red ‘Please enter a URL’ warning message to appear, but do not panic, this warning can be ignored and will not affect the performance of the action.

In the Target property, you will see a ‘New Tab’ and ‘Same Tab’ option in the dropdown. The ‘New Tab’ option will open the link in a separate browser tab, allowing you to view the content without leaving your current page. The ‘Same Tab’ option replaces the current page with the linked content in the same browser tab. These two options will decide whether the recipient will remain in the same tab or go to a new tab when clicking the image. 


Action 2: Send Email

This action will automatically compose an email for the recipient to send. The ‘Mail To’ field is who the email will be sent to so this field should contain a valid email address. The ‘Subject’ field is the Subject line of the email, and the ‘Body’ field is the content of the email. Anything you put in these three fields will auto-populate when the recipient clicks the image. You do not have to fill out all three fields, but you must enter data in at least one field for the action to work properly.


Action 3: Call Phone Number

This action allows the recipient to call the number you assigned. Just enter the phone number you would like the recipient to call in the ‘Phone’ field.


General Property Group

In the General property group, the Container Padding adjusts the space between the image and the container or column. You can modify the padding by changing the number to the left of 'px' or adjust it in 1-pixel increments using the +/- buttons to the right of 'px'. If you want more control over the padding on each side, you can enable the ‘More Options’ toggle to adjust the padding on each side individually.


Responsive Design Property Group

In the Responsive Design property group, the Hide on Desktop property will hide the entire row of content when the message is open on a desktop. The user can toggle this property on or off, but by default this property is off.



Menu

A Menu provides a list of options or navigation links that allow users to access different sections of a website. Dragging and dropping the Menu tool in the editor will display the menu contents and enable users to add menu items.


There are four property groups: Menu Items, Styles, General, and Responsive Design. We will go over the functionality of the properties in each property group below.


To add an item on the menu, click ‘Add New Item’ or anywhere within the dotted box. Then, a menu item box will appear.


In the menu item box, you can customize the action of the menu item. Clicking the dropdown next to Action Type will display three actions the item can perform: Open Website, Send Email and Call Phone Number.


Action 1: Open Website

This action allows the user to redirect the recipient to another website after clicking the item. For the recipient to be redirected to a website, you must paste the link of the website in the URL field or pick a link from the Special Links dropdown. The Special Links are also known as Callback Links.

NOTE: Using a Special Link will cause a red ‘Please enter a URL’ warning message to appear, but do not panic, this warning can be ignored and will not affect the performance of the button.

In the Target property, you will see a ‘New Tab’ and ‘Same Tab’ option in the dropdown. The ‘New Tab’ option will open the link in a separate browser tab, allowing you to view the content without leaving your current page. The ‘Same Tab’ option replaces the current page with the linked content in the same browser tab. These two options will decide whether the recipient will remain in the same tab or go to a new tab when clicking the button.

The Label property, or more commonly known as the display text, refers to the visible, clickable text in a hyperlink that users see and interact with. It is the part of the link that provides context or a description of what the linked content is about. In the Label property, you can change the display text of the item.


Action 2: Send Email

This action will automatically compose an email for the recipient to send. The Label property refers to the visible, clickable text in a hyperlink that users see and interact with. This property allows you to change the display text of the item. The ‘Mail To’ property is who the email will be sent to so this field should contain a valid email address. The ‘Subject’ property is the Subject line of the email, and the ‘Body’ is the content of the email. Anything you put in these three fields will auto-populate when the recipient clicks the button.


Action 3: Call Phone Number

This action allows the recipient to call the number you assigned. Just give the item a label and enter the phone number you would like the recipient to call in the ‘Phone’ field.


Every time you add an item, the ‘Add New Item’ button will be pushed to the bottom. If you would like to add another item, simply click ‘Add New Item’ and select the action you would like the item to perform.


Styles Property Group

Many of these properties should look familiar, but I will briefly go over them again.

Font Family: changes the font/typeface of the text in the menu

Font Weight: changes the weight/thickness of the text in the menu

Font Size: changes the size of the text

Text Color: changes the color of the text of the menu item(s)

Link Color: changes the color of any links in the menu

Align: changes the alignment/position of the menu item(s)

Layout: changes the arrangement between horizontal or vertical

Separator: allows users to add lines or texts between the menu items to separate content and enhances visual organization

Padding: changes the space between the menu items and its border


A more in-depth description of each property will be available below.

First, we have the Font Family property. The Font Family refers to a set of typefaces that share a common design. It also defines the style and appearance of the text. Clicking the dropdown to the right will populate a list of fonts. Look through the list and select the font you’d like to use.


The Font Weight indicates the thickness of the text characters. It affects the font's visual prominence and can be adjusted using predefined keywords like Regular, and Bold. All fonts will have a regular and bold option.


The Font Size determines the height of the text characters, affecting how large or small the text appears on the screen. You can adjust the font size by changing the number to the left of ‘px’ or you can increase/decrease the size in 1 pixel increments by clicking the +/- button to the right of ‘px’.


The Text Color property changes the color of the text. To adjust the text color, select the color picker on the right, and a color palette will appear. You can then use the palette to choose your desired color. If you know the HEX or RGB code for the color you want to use, you can also input the code in the respective fields.


The Link Color property changes the color of the text for links. The process to adjust the link color is the same as text color. Select the color picker on the right, and a color palette will appear. You can then use the palette to choose your desired color. If you know the HEX or RGB code for the color you want to use, you can also input the code in the respective fields.


Align refers to the positioning of the menu items within the container. It determines how the button is aligned relative to the container's edges. From left to right, the options are left align, center align, right align and justify align. Left align positions the heading flush with the left edge of the container. Center align centers the heading horizontally within the container. Right align positions the heading flush with the right edge of the container. And justify align distributes the heading evenly across the width of the container.


The Separator property allows users to add lines or texts between the menu items to separate content and enhance visual organization. Any input value in the Separator field will appear in between the menu items as seen in the image below.


Next on the list of properties is Padding. Padding adjusts the space between the menu items and the container’s edges. This means the padding will be applied around each item. You can modify the padding by changing the number to the left of ‘px’ or you can increase/decrease the padding in 1 pixel increments by clicking the +/- button to the right of ‘px’. If you want more control of the padding on each side, then you can enable the ‘More Options’ toggle to adjust each side individually.

Below is an example of a menu with 10px padding and a menu with a 24px padding. Notice that with 24px padding, there is more space between the menu items compared to 10px padding.


General Property Group

In the General property group, the Container Padding adjusts the space between the menu item(s) and the container or column. You can modify the padding by changing the number to the left of 'px' or adjust it in 1-pixel increments using the +/- buttons to the right of 'px'. If you want more control over the padding on each side, you can enable the ‘More Options’ toggle to adjust the padding on each side individually. 

Below are examples of how different Container Padding size look on menu items. Notice how the menu items are recognized as one content and the padding is being added around the entire menu section.


Responsive Design Property Group

In the Responsive Design property group, the Hide on Desktop property will hide the entire row of content when the message is open on a desktop. The user can toggle this property on or off, but by default this property is off.



HTML

Dragging and dropping the HTML tool on the editor will allow users to directly edit or insert HTML code to customize the structure and design of email templates.


HTML Property Group

The HTML editor allows users to directly write or edit HTML code to customize email templates. This feature enables precise control over the layout, design, and content of the email, including advanced formatting, custom styles, and complex structures that go beyond basic drag-and-drop options. While HTML coding knowledge is required to use this tool, it is not necessary for building your email HTML template, as the builder offers several drag-and-drop tools.


General Property Group

In the General property group, the Container Padding adjusts the space between the content from the HTML code and the container or column. You can modify the padding by changing the number to the left of 'px' or adjust it in 1-pixel increments using the +/- buttons to the right of 'px'. If you want more control over the padding on each side, you can enable the ‘More Options’ toggle to adjust the padding on each side individually.

Below is an example of 10px padding around the HTML (image1) and 20px padding around the HTML (image2).


Responsive Design Property Group

In the Responsive Design property group, the Hide on Desktop property will hide the entire row of content when the message is open on a desktop. The user can toggle this property on or off, but by default this property is off.