Go to "Marketing" > "Emails" > "Templates"
Here, you can create a new template.
Or edit an existing one.
Navigating the New User Interface
Upon accessing the Email Builder, you will be greeted by a sleek, intuitive user interface. On the top, you will find a toolbar with different functionalities:
The 'Add Elements' button lets you introduce new content into your email, from text and images to more complex structures.
The 'Manage Elements' option gives an overview of all elements in your email, allowing you to select and adjust them easily.
Lastly, the 'Appearance' setting lets you control the global style of your email, including things like background color, Divider, Custom CSS styling, and Mobile Formatting.
These functionalities are designed to give you complete control over your email's design, from the individual components to the overall look and feel.
Adding Elements
Clicking on the 'Add Elements' button creates a comprehensive list of content types you can add to your email. Here's a brief description of each:
Text:
This versatile element can be used for headings, paragraphs, captions, and more. With the inline editor, you can fine-tune every text aspect, from the font style to the color and alignment.
Image:
If you want to include photos, graphics, or any other visual content, the Image element is the tool you need. You can upload images directly from your computer or link them from an external source.
Image Upload: Use the upload feature to add an image directly from your device. The maximum upload size is 10MB, ensuring you have enough capacity for high-resolution photos.
Image URL: Alternatively, you can link an image from an external source or your CRM's Media Library. Paste the image URL into the provided field.
Alt Text: Alt text helps improve email accessibility for recipients who use screen readers or when the image fails to load. Describe the image briefly and clearly in this field.
Link (optional): If you want your image to redirect to a specific URL when clicked, you can input the desired link in the Link field.
Width and Height: Adjust the size of your image using these fields. You can set specific pixel values or tick the box for 'Set height and width to auto' for automatic sizing based on the image's original proportions.
Padding: Control the space around your image by adjusting the padding. Set the padding for the top, bottom, left, and right sides according to your design preferences.
Alignment: Set the alignment of your image. For instance, select 'Center' to center your image in its respective container. Other options include 'Left' and 'Right' alignment.
Button:
Enhance user interaction with the Button element. You can link to a webpage, start a download, or trigger any other click-based action.
Button Text: Enter the text you want to display on your button. For instance, you might use 'Follow Me' to invite readers to follow a link to your social media page. To learn how to use Content AI in Button Text, please visit this article.
Font and Size: Choose the font and size that best fits your email's aesthetic. For example, you could use 'Arial' at a size of '14' for a classic, readable appearance.
Font Color: Select the color of your button text. Colors are specified using hexadecimal codes, e.g., '#ffffff' for white.
Actions:
- URL: This is the most common button action. You can direct the recipient to a specific webpage. Enter the URL of the page you want the button to link to.
- Mail: This action will open the recipient's default email client to compose a new email. You can set a predetermined recipient email address.
- File Download: If you want the button to trigger a file download, choose this action. You'll need to provide the direct download URL of the file.
- Telephone: This action is great for mobile users. When the recipient clicks the button, their device will initiate a phone call to the number you've entered.
- Other: If you have a unique action in mind not covered by the above categories, choose this option.
Alignment: Choose the alignment for your button. Options include 'Left,' 'Center,' or 'Right.''
Total Width: If you want your button to span its entire container width, enable this option.
Background Color: Choose the color for your button's background. Like font color, this is specified using a hexadecimal code. For instance, '#000000' will make the button's background black.
Border Radius: Customize the roundness of your button's corners by adjusting the border-radius. A higher number will result in more rounded corners. For example, setting the radius to '75' will give your button a pill-like shape.
Padding: Set the space between your button text and the button's border by adjusting the padding values for the top, bottom, left, and right sides.
Using these settings, you can design buttons that match your email's overall look and feel and encourage your recipients to take action.
Divider:
The Divider element allows you to introduce clear separations between different sections of your email. Customize the color, width, and style to fit your design.
Height: Set the thickness of your divider line. A more significant number will result in a thicker line. For example, setting the height to '2' creates a moderately thick line.
Width (%): Determine the horizontal span of your divider within its container. This is expressed as a percentage of the container width. For instance, a width of '100' means the divider will span its entire container width.
Line Type: Choose the style of your divider line. Options typically include 'Solid,' 'Dashed', or 'Dotted.','
Alignment: Choose the alignment for your divider. Options include 'Left', 'Center', or 'Right'.
Color: Specify the color of your divider using a hexadecimal code. For instance, '# FED7E2' might be used for a soft pink divider.
Padding: This adjusts the space between your divider and other elements. You can set different padding values for the divider's top, bottom, left, and right sides.
Social:
Want your recipients to visit your social media profiles? The Social element lets you easily include icons linked to various social media platforms.
Social Items: Add your social media platforms. You can typically add icons for Facebook, Instagram, and Twitter. Just click on the platform and enter your handle or profile URL.
Icon Styles: Determine the look of your social media icons. You can choose between styles, shapes, and designs to best fit your email's aesthetic.
Display: Choose the display mode for your icons - it can be 'Icon', 'Text ', or 'Icon and .'
Align: Adjust the alignment of your icons within the email. You can align them to the 'Left,' 'Center,' or 'Right.'
Font: Set the font for the platform's name that appears with the icon. If you're using the 'Icon and Text' display, this will be the font of the text.
Font Color: Specify the color of your social icons using a hexadecimal code. For instance, '#00a4bd' might be used for a teal color.
Size: Adjust the size of your icons to ensure they're easily visible but not overwhelming.
Space: This sets the amount of space between each social media icon.
Padding: Adjust the space between your social media icons and other elements. You can set different padding values for the social media icon section's top, bottom, left, and right sides.
By properly setting these values, you can seamlessly integrate your social media presence into your emails, providing recipients with an easy way to connect with you on these platforms.
Footer:
Use the Footer element to include essential information like contact details, company address, or unsubscribe links.
Text Editing: Click on the footer text to activate the inline editor. You can then alter the text to meet your requirements. You can type directly into the footer whether you want to add your company's address, privacy policy links, or an unsubscribe link.
Font and Style: The inline editor lets you alter your footer text's font, size, and color. Highlight the text you want to change and choose from the options in the editing toolbar. You can make the text bold, italic, underline it, or add a strikethrough.
Links: Using the inline editor, you can easily add hyperlinks in your footer. Highlight the text you want to turn into a link, click the 'link' icon in the toolbar, and enter your desired URL. This is handy for linking to your company's website or directing to a specific page like your terms of service or privacy policy.
Alignment and Spacing: Align your text to the left, right, or center, as per your design needs. Also, control the line spacing to ensure your footer text is readable and neatly presented.