Visual Designer: Emails & Landing Pages
The visual designer gives you the ability to craft emails and mobile landing pages that you can send to customers to via campaigns. Let's dive into the different sections below.
We recommend starting here as you build your emails and landing pages.
In the designer, click on the Body button from the right-side menu. This section gives you the power to change the overall settings.
In this section, any changes to these settings will apply to every piece of content.
You can change the default settings:
- Text color, Background Colors, Fonts, Link Color + Link styling (underline vs not)
- Content alignment & Content Width (We recommend 600px for best results)
- For Email design:
- Preheader text: This is the short summary text that follows the subject line when viewing an email from the inbox.
Making changes to specific content
You can change the settings of the specific content block as well if you want the text color, content background color, etc to be different than the default. This can be accomplished in the specific content block settings. Please see below for more information.
Use content blocks to add different types of content to your pages.
The available content blocks are: Columns, Button, Divider, Heading, HTML, Image, Menu, Social, Text, Video
To add a new content block, click on the content block you would like to use and drag it to the desired section in the builder.
After a block has been placed, use the content menu to customize the block to fit your design. You can also click an existing block to access its editing capabilities.
Use a Columns content block to add a new column layout.
Example: you can create a section with an image with a caption and button. After you add or click a Columns block, you edit and change to column content properties.
To use a Columns content block, follow these steps:
- Drag the Columns content block onto the designer in the desired position.
- Select your desired layout of the column from the content editor.
3. Click the Add Content Button in the designer.
4. Select the desired content from the content blocks.
5. Drag and drop into the designer.
6. To change the size of the column layout, select the bar in the middle and drag it to the desired width.
7. Content padding, background color, and border color can be changed in Column Properties.
Buttons give you the poewr to include a prominent call to action (CTA) such as a “Buy now” or "Learn More" link. To use a Button content block, follow these steps:
1) Drag the Button content block onto the designer in the desired area.
2) Add or edit your button text and use the editing toolbar to format as needed.
3) Determine the Button's action in the content block settings. Under Action Type, select the desired action to occur when a customer clicks the Button.
- Action Types:
- Open Website: When a user clicks on this button, it will bring them to a specific website.
- When the action type is Open Website, you must input the URL where users will be directed to. You must also indicate if the URL will show up in a new tab or redirect witin the current tab. ** We recommend selecting "New Tab" for a better user experience.
- Send Email: When a user clicks on the button, pre-populated email that your user can send out will appear.
- When the action type is Send Email, you will need to input the Mail to, Subject, and Body fields.
- Mail to - This is the email address your user will use to initiate contact.
- Subject - This is the Subject line of the email.
- Body - This is the body of the text inside the email.
- Call Phone Number: When a user clicks on the button, a phone number that the user can call will automatically appear.
- When the action type is Call Phone Number, you must input the phone number you want to populate when the user clicks on the button.
- I.E. Your Button is "Contact Us" - You can use the Call Phone Number Action Type. The button will populate your stores main phone number when clicked.
- Send SMS: Similar to the Call Phone Number action type, when a user clicks on the button, it will auto-populate a text message with a prefilled phone number.
- When the action type is Send SMS, you will need to input the phone number you want to populate when the user clicks on the button.
4) To change the background and text colors of the button, alignment of the text and auto width, go to the button options inside the button content block.
Dividers create distinct sections in your content. To use a Divider content block, follow these steps.
1) Drag the Divider content block into the desired position.
2) In the Divider content block settings, choose your divider’s Width, Thickness, Style Type, Color, and Alignment.
- Width: This changes the width of the divider.
- Line: This section changes the appearance of the divider
- Line Type: Choose between a Solid, Dashed, or Dotted Line type
- Line Thickness: Adjust the numbers to get a thicker divider line
- Line Color: Change the color of the divider line
- Align: changes the alignment of the divider
Creating a Spacer
If you do not want a visible line, but need spacing between content blocks, set the line thickness to 0, then adjust the top and bottom padding until you get the desired spacing.
Use a Heading content block to add header text to your content. After you add or click a Heading block, enter your text directly in the designer.
To use a Heading content block, follow these steps:
1) Drag the Heading content block onto the designer to the desired position.
2) Add or edit your text and use the editing toolbar to format it as needed. Within the editing toolbar, you can also hyperlink your heading and add emojis.
3) In the Heading content block settings, you can continue to format your Heading block.
- Heading Type: These are your header tags. Think of them as a hierarchy based on importance; the above being more important than the below. H1 defines the most important heading, and H4 defines the least.
We recommend using one H1 tag per page/email. This should represent the main heading/subject.
- Font Family: Select the font you would like the heading to reflect.
- Font Size: Change the font size of the heading
- Color: Change the color of the heading text
- Text Align: Change the alignment of the heading
- Line Height: If your heading takes up two lines, this adjusts the spacing in between the lines.
- Links - Inherit Body Styles: If this setting is turned on, any heading that is hyperlinked will take the same format as what is set up as the overall body style. If this setting is turned off, you can change the color of the hyperlink, as well as turn on underlined text vs not.
Use a HTML content block for customization. To use an HTML content block, follow these steps:
1) Drag the HTML content block onto the designer where you would like the block to go.
2) In the HTML content box settings, input the HTML code.
To use an image content block, follow these steps: 1) Drag the Image content block onto the email where you would like the block to go.
2) Upload or enter a new image, use a pre-existing image from your media library, or use our stock photo library to bring your messaging to life.
- Using URL:
- Copy and paste the URL into the URL box.
- Uploading an Image:
- Click the blue "Upload Image" button image button from the image content settings.
- When the media library pops appears, click on the Green "Upload" button.
- Drag or click to upload the desired images.
- Optional: Add Image tags to find uploaded images easier.
- Click the Upload button.
- Use a pre-existing image:
- Click the blue "Upload Image" button image button from the image content settings.
- When the media library appears, find the file name and click the green Select button.
- Using our stock photography library:
- Go to the Image section.
- Search for the image you would like to find.
- Drag and drop the image into the image content block.
3) Edit an image by clicking the "Apply Effects & More" button. You also have the power to make changes to auto width, alignment, and add alternative text inside the image content block settings.
4) To create clickable images that redirect customers to a destination when clicked, select the desired action type and enter in the needed information that follows:
To use a Menu content block, follow these steps:
1) Drag the Menu content block onto the designer where you would like the block to go.
2) Click the Add New Item section inside the menu settings content block.
3) Enter the Text that will appear in your menu bar, along with the Action type, Destination, and Target. To add more sections, click the Add New Item button at the bottom.
4) After menu items have been entered, format the menu by utilizing the style settings in the menu content block.
- Layout: Change the Menu format from Horizontal to Vertical.
- Separator: Adjust how the menu is separated.
For example: | or -
Example of a menu:
Formatting Hack - Adding emojis as menu separators
If you want to use an emoji as a separator, create a text box to find and add the emoji you would like the use as the separator. Copy the emoji, then paste it into the separator settings box. Then delete the text box.
Use a Social content block to add social icons that link to your social media accounts; give recipients the power to quickly find and follow you on different platforms.
To use a Social content block, follow these steps:
1) Drag the Social content block onto the designer where you would like the block to go.
2) Select the Icon style type.
3) Click on the icons to include. Once clicked, enter the the appropriate social URL.
4) The Social content settings also gives you the power to adjust the Alignment and Icon Spacing. Icon spacing is the width of the space between each icon.
Use a Text content block to add paragraph text. After you add or click a Text block, enter your text directly in the designer.
To use a Text content block, follow these steps:
1) Drag the Text content block onto the designer where you would like the block to go.
2) Add or edit your text and use the editing toolbar to format as needed.
3) Edit the overall text color, alignment, and line height in the text box settings.
Use a Video content block to add a video link. We’ll automatically provide a thubmnail or preview image when you add the link to the video's URL. To use a video content block, follow these steps:
1) Drag the Video content block onto the designer where you would like the block to go.
2) Input a Vimeo or Youtube URL into the URL field and the video will populate.
3) Edit the play icon type, play icon color, and play icon size.
Note: Email service providers ultimately decide whether or not a linked video can play in email. 99% of the time, videos will not be able to be played inside the email body. It's common to manage this by using a gif that links out to the video URL.
The blocks section is another version of the columns and menu content blocks.
The Images section gives you the power to access a rich stock photography library.
To use the stock photography library:
- Go to the Image section.
- Search for the image you would like to find.
- Drag and drop into image content block.
To use the personalization macros:
1) Click the Personalization button.
2) A popup modal will appear with tool tips and descriptions of each available macro.
3) Click the copy icon next to the desired macro.
4) Click the OK button.
5) Paste the macro into the email/page.
Emails: Unsubscribe Macro Mandatory
Please keep in mind that the email unsubscribe link macro MUST appear in the footer of EVERY email template for compliance. Your email will not be sent if it is not present.
To use the Discount macros:
1) Click the Discount button.
2) A popup modal will appear with every Discount you have entered for your company in the Discounts section of the software.
3) Click the copy icon next to the discount you would like to use.
4) Click the OK button.
5) Paste the discount in.
Copy & Delete
Copy and/or delete content blocks in two different ways:
1) Click into the content block. The copy, delete, and selection tool will appear in the bottom right corner of the content block.
2) Click into the content block and view the content settings menu. A trash can and copy button is available in the top-right corner.
Move Content Block:
To move a content block, click on the Selection tool and drag the content to the desired location within the email/page.
