This article covers how to design an email campaign with the navigational and image elements. These elements can be used in conjunction with other elements in the Email Visual Template Editor (VTE).
Access the Email VTE by following the below steps.
Navigate to the flag icon on the left-hand navigation.
Go to Communicate.
Then Automated or One-Time Campaigns.
Click New in the upper right-hand corner.
Then, click Create New Campaign.
Go to the Message tab.
Click Copy Existing Template or Create New Template.
MOBILE NAVIGATION
Create a navigation specific for mobile devices, that’s automatically hidden on a desktop design by default. The mobile navigation is indicated in the canvas surrounded by two mobile phones.
TIP: Be sure to create a navigation design for desktop by using the desktop navigation widget.
CONFIGURATIONS
Deep link: By selecting this checkbox, the mobile app will open. Deep linking is available by special request for customers leveraging Branch.io for mobile links.
Ignore campaign level tracking: By selecting this checkbox, the tracking parameters set on the campaign message tab will not be applied here.
Padding: Left and right padding (pixels).
Font Size: Enter a number (pixels) to adjust the font size.
Line Height: Enter a number (pixels) to adjust the line height (i.e., leading).
Letter Spacing: Enter a number (ems) to adjust the spacing between letters (i.e., kerning).
Horizontal Alignment: Left, Center, or Right align the text horizontally.
Vertical Alignment: Top, Middle, or Bottom align the text vertically.
Show Divider Between Navigation Links: Select the checkbox to add a vertical divider between navigation links. Select a Divider Color and Divider Width.
Layout: Select to display the navigation links side by side or stacked.
Widget Padding: Add padding to the navigation widget as a whole (top and bottom in pixels).
Container Background Color: Click the field to use the color picker or enter a hex color code.
NAVIGATION LINKS
Configure up to eight navigational components for the navigation bar. Select the checkbox on each to include or exclude an element.
Select text or image: Select to create the elements by text or with an image.
Text Configurations
Text: Enter the specific text to display on the navigation bar (sale, men, women, kids, etc.)
Link URL: Enter a specific URL to link shoppers to. For example, if this is a sale link, enter a link directly to your sales page.
Deep Link: By selecting this checkbox, the mobile app will open. Deep linking is available by special request for customers leveraging Branch.io for mobile links.
Editing Options: Color, font, emphasis, decoration, text transform, and background color.
Link Container Width: Configure a number of pixels to evenly distribute the navigational elements across the top of the email.
DESKTOP NAVIGATION
Use the navigation element to add a navigation bar to the email template, giving a direct action to your customers to shop specific categories on your website.
TIP: The navigation bar is automatically hidden on mobile devices, allowing for more real estate of the email design, while still displaying the logo image. Be sure to create a mobile navigation using our mobile navigation widget detailed above!
CONFIGURATIONS
Navigation logo position: If including a logo in the navigation bar, select to display it left, top center, or right. By default, none is selected.
Deep link: By selecting this checkbox, the mobile app will open. Deep linking is available by special request for customers leveraging Branch.io for mobile links.
Ignore campaign level tracking: By selecting this checkbox, the tracking parameters set on the campaign message tab will not be applied here.
Padding: Left and right padding (pixels).
Font Size: Enter a number (pixels) to adjust the font size.
Line Height: Enter a number (pixels) to adjust the line height (i.e., leading).
Letter Spacing: Enter a number (ems) to adjust the spacing between letters (i.e., kerning).
Horizontal Alignment: Left, Center, or Right align the text horizontally.
Vertical Alignment: Top, Middle, or Bottom align the text vertically.
Show Divider Between Navigation Links: Select the checkbox to add a vertical divider between navigation links. Select a Divider Color and Divider Width.
Widget Padding: Add padding to the navigation widget as a whole (top and bottom in pixels).
NAVIGATION LINKS
Configure up to eight navigational components for the navigation bar. Select the checkbox on each to include or exclude an element.
Select text or image: Select to create the elements by text or with an image.
Text Configurations
Text: Enter the specific text to display on the navigation bar (sale, men, women, kids, etc.)
Link URL: Enter a specific URL to link shoppers to. For example, if this is a sale link, enter a link directly to your sales page.
Deep Link: By selecting this checkbox, the mobile app will open. Deep linking is available by special request for customers leveraging Branch.io for mobile links.
Editing Options: Color, font, emphasis, decoration, text transform, and background color.
Link Container Width: Configure a number of pixels to evenly distribute the navigational elements across the top of the email.
Apply the above configurations for each of the navigational links that are being added.
IMAGE
Add an image directly into your email campaign by using the image element. You can configure an image source here or use the asset manager to configure images.
Hide this widget on mobile or desktop: By selecting this checkbox, the image element will not show on a mobile or desktop device.
Show different states: Turn on this functionality to show a different image for desktop and mobile devices.
Image Source: Enter a path to the image or click Image Library to either select an image or to upload a new image.
Link To: The URL the customer is directed to when clicked.
Deep Link: By selecting this checkbox, the mobile app will open. Deep linking is available by special request for customers leveraging Branch.io for mobile links.
Ignore Campaign Level Tracking: By selecting this checkbox, the tracking parameters previously configured will not be applied here.
Alt Text: Alternative text to display if the image does not display or if the customer is using a screen reader.
Image Width: Use the slider or enter a number (pixels) to adjust the image width. Select the Fit image to screen width in mobile view to make the image responsive.
Mobile Image Width: Use the slider or enter a number (pixels) to adjust the image width to a set value in mobile view. If the Fit image to screen width in mobile view checkbox is selected, this option will be disabled.
Alignment: Left, Center, or Right align the image.
Widget Padding: Use the slider or enter a number (pixels) to adjust the spacing along the top and bottom of the image widget.
Widget Side Padding: Enter a number (pixels) to adjust the spacing along the sides of the image widget. Set a value for Desktop and Mobile for the image to be responsive.
Container Background Color: Click the field to use the color picker or enter a hex color code.
