Email Builder Layouts, Elements and Settings

This article is a deep dive into all the email builder layouts, elements and settings.

Go to 'Marketing,' then 'Emails', and finally to 'Templates.','

Here, you can create a new template.

Or edit an existing one.

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:

Layouts

Layouts determine the structure of your email content. You have various options, from simple single-column layouts to more complex structures.

Here's a detailed explanation of each layout:

Single-column structure. All content is placed in one straight vertical line. This is the most basic and one of the most common layouts used in emails. It's great for readability, especially on smaller screens such as mobile devices.

Two-column structure. Your email content is divided into two vertical columns. This layout is ideal for displaying two groups of content side by side, like an image and a text block or two articles from an RSS feed.

1/3: 2/3 and 2/3 : These layouts represent a structure where the content is divided into two unequal columns. These are great for highlighting one piece of content more than the other, like an image and an accompanying description where the image is the main focus.
1/4: 3/4 and 3/4 : Similar to the above, but here one column takes up 1/4 of the space, and the other takes up 3/4, and vice versa. This layout is useful when one piece of content is significantly more important than the other, such as a small navigation menu alongside a large content area.

Four-column structure. Your email content is split across four equal vertical columns. This is useful for presenting multiple pieces of content of equal importance side by side, like a grid of images or multiple articles from an RSS feed.

These layouts offer various ways to structure and present your content, depending on your specific needs and the type of email you're sending. By understanding the different options, you can choose the most effective layout for your email.

To add any of these elements to your email, drag and drop them onto your canvas. When you select an element for editing, the Inline Editor will pop up, providing numerous options to modify your chosen element to fit your requirements.

Elements

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.

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.

Code:

Need more advanced features? The Code element allows you to insert custom HTML code directly into your email. This is where you input your custom code. This allows you to create more advanced layouts and components within your email.

The Code block is intended for users who are proficient in HTML. As a precaution, we recommend familiarizing yourself with the essentials of HTML before using this feature. For guidance, you might find these resources helpful:

HTML Email Basics Using Code Blocks

By integrating custom HTML, you can create highly personalized email experiences, allowing you to go beyond the standard design capabilities of email templates. Be aware, however, that email clients can have different levels of support for HTML and CSS, so always test your emails before sending them out.

Video:

Engage your recipients with multimedia content. Insert a Video element and link it to your hosted video content.

Video Type: Select the platform where your video is hosted. This could be YouTube, Vimeo, Wistia, or HTML 5 video.
Video URL: Paste the URL of the video you wish to embed. This should be the direct link to the video on your selected platform.
Video Thumbnail: This is the image that users will see before they play the video. You can upload a custom thumbnail (maximum size: 10MB) or use an image URL. For instance, a placeholder image from your Media Library could be used.
Width and Height: Set the dimensions of the video player within your email. You also have the option to set the height and width to 'auto', which adjusts the size based on the video's aspect ratio and the space available in the email.
Play Button Size: Choose the size of the play button that appears on your video thumbnail. Options typically include Small, Medium, or Large.
Play Button Opacity: Adjust the visibility of the play button. You can make it more or less opaque depending on your design needs.
Padding: This is the space around your video player. You can adjust the top, bottom, left, and right padding to fit the video perfectly within your email layout.

Shopping Cart:

If you're in the e-commerce industry, the Shopping Cart element is a handy tool for including product details, pricing, and direct links to your online store. It's a way to remind them of the products they're interested in and encourage them to finalize their purchases.

Here's how to customize this section:

Padding: Adjust the space around your shopping cart content to separate it from other sections in the email visually. Padding can be adjusted at the cart section's top, bottom, left, and right.
Font: Choose the font for the text in your shopping cart. It could be the system default or another style consistent with your email design.
Text Color: Customize the color of the text in your shopping cart. It could be black (#000), or any other color that matches your email design.
Background Color: Select the color of the shopping cart's background. This could be white (#ffffff) or any other color that makes the text easy to read.
Within the Shopping Cart element, you typically display the following for each product:
Product Name: The name of the product as it appears on your website or online store.
Price: The individual price of the product.
Quantity: The number of that particular product the customer has chosen.
Line Price: The total price for that line item (Price x Quantity).

Repeat these steps for each product in the shopping cart. Displaying this detailed information provides transparency and helps customers review their orders, making them more likely to proceed to checkout.

Customizing your Shopping Cart section in this way ensures a better user experience, aligns with your overall email design, and ultimately drives conversions.

RSS Header:

The RSS Header block in the email builder is a powerful tool that allows you to dynamically populate the <channel> tags from your RSS Feed in your email campaign.

LEARN MORE HERE

Here are the tags and their corresponding custom values you can use:

<title> corresponds to {{rss_feed.title}}

<description> corresponds to {{rss_feed.description}}

<lastBuildDate> corresponds to {{rss_feed.date}}

You can choose between 'Basic' and 'Custom' when using the RSS Header block.

'Basic' will add non-editable text in the Text Editor like this:

<h1 class="h1">{{rss_feed.title}}</h1> {{rss_feed.description}}<br /> <br />

'Custom' will add editable text in the Text Editor like this:

Updates from {{rss_feed.url}} <h1>{{rss_feed.title}}</h1> <strong>{{rss_feed.description}}</strong><br /> <br /> <strong>In the {{rss_feed.date}} edition:</strong><br />

These RSS <channel> variables can also be utilized in the subject field of your email campaign.

FAQ Element

Add FAQs directly into the email body.

Managing Text and Formatting

An inline editor is a powerful tool that lets you easily manage text and its formatting. When you highlight any portion of text, a range of options becomes available in the editor.

You can change the heading type.

Select a different font, adjust font size, and modify the text color.

It doesn't end there - options for bold, italic, underline, and strikethrough are also available.

If you wish to add a hyperlink to your text, the inline editor allows you to do so, giving you control over its display text and target URL.

Add/Edit Link: This option allows you to add a new hyperlink to your email or modify an existing one.

Link URL: This is the web address (URL) you want the hyperlink to direct to when clicked. It could be a webpage, a downloadable file, or other online resource. Always ensure the URL is correct and functional.

Text to Display: This is the visible text that will appear in your email and be clickable. This could be a call-to-action like "Read more, "Download now", or simply the name of the webpage you're linking to. It's best to keep this text concise and descriptive of its linked content.

Title: The title attribute is optional and can provide additional information about the link. It often appears as a tooltip when a user hovers over the hyperlink. It can provide extra context or explain where the link will take the user.

Open Link in New Window: This option, when selected, means that when the recipient clicks the link, it will open in a new browser window or tab instead of the current one. This can be useful when you don't want the user to navigate away from the email or the current webpage.

Link List: This drop-down menu could contain a list of previously used or saved links. It can make adding links you frequently use quicker and easier.

You can also adjust text alignment and line height or introduce bullet points to your text.

Here is a description of each bullet point type:

Disc: A filled circle. This is the default style for unordered lists in HTML.
Circle: An empty circle or a ring. This is typically used for secondary or tertiary points in an unordered list.
Square: A filled square. This can be an alternative to disc or circle bullets for variety or emphasis.
Decimal: Standard numerical (1, 2, 3, etc.) list markers. Typically used for ordered lists where sequence matters.
Lower Alpha: Lowercase alphabetical (a, b, c, etc.) list markers. These are often used for sub-points within an ordered list.
Lower Greek: Lowercase Greek alphabetical (alpha, beta, gamma, etc.) list markers. Not commonly used, but it can be an interesting alternative to standard markers.
Lower Roman: Lowercase Roman numeral (i, ii, iii, etc.) list markers. Often used for formal or traditional documents, such as legal documents.
Upper Alpha: Uppercase alphabetical (A, B, C, etc.) list markers. These are often used for main points in an ordered list.
Upper Roman: Uppercase Roman numeral (I, II, III, etc.) list markers. Like lowercase Roman numerals, these are often used in formal or traditional documents.

Using Advanced Editing Options

The inline editor also comes equipped with advanced editing options. The 'Clear Format' feature lets you strip any existing formatting from a section of the text, a handy tool when pasting text from external sources.

Custom values: They bring a personalized touch to your emails by incorporating specific recipient details such as their name or location. This personalization can improve your email's relevance to each recipient, thereby improving engagement rates.

Trigger links: They allow recipients to perform certain actions directly from the email, such as confirming a subscription, unsubscribing, or accessing a special offer. These interactive elements can drive engagement and boost conversions by simplifying user actions.

Moreover, the 'ContentAI' feature leverages artificial intelligence to help generate text content. The tool can automatically generate relevant text content for you by providing content titles, descriptions, and keywords.

Context: In this field, you can specify the context for the content you want the AI to generate. This helps the AI understand what the general theme or topic should be. This could be anything from "Digital Marketing" to "Healthy Recipes". The more specific your context, the more accurate your generated content will be.

Content Title: Here, you should provide the main theme or idea for the content you want to create. This title will guide the AI in generating the content that you want. It could be a blog title, a subject line for an email, or a product description.

Provide a brief content description: In this field, you need to provide a brief description of the desired content. This could include any specific details or angles you want the AI to consider when generating the content.

Add keywords: Keywords are the specific words or phrases describing your content. These will guide the AI in incorporating these terms naturally into the generated content. This can be especially helpful for SEO purposes.

Writing Tone: This option allows you to define the tone of the writing. It could be professional, friendly, informal, authoritative, etc. The AI will adapt the generated content to match the selected tone.

Number of Variations: Here, you specify how many different versions of the content you want the AI to generate. This allows you to choose from various outputs and select the one that best fits your needs. You can create up to five variations.

Adjusting Appearance and Styling

The 'Appearance' function is your go-to place for tweaking your template's look and feel.

Template

Here you can choose the color scheme for your template, upload a background image, and even define the width of your email's content.

Background Color: This is the color that appears behind all the content in your email. You can select any color that suits the design and mood of your message. Well-chosen background color can significantly enhance your email's readability and visual appeal.
Body Color: This is your email's main content area or body color. It's where your text, images, and other elements are housed. The body color should provide a good contrast with your text and other elements to ensure readability.
Content Width: This is the width of the content area inside your email. By default, it might be set to a standard width of 600 pixels. However, you can adjust this based on your design needs and the kind of content you're including. Note that very wide content might not display well on all screens, especially mobile devices.
Background Image: Here, you can upload an image that will be displayed as the background of your email. This can be a great way to add visual interest and branding to your messages. Remember that not all email clients support background images, so having a fallback color set is a good idea.
Maximum upload size refers to the largest image file you can upload as your background. Larger files can take longer to load and may not be fully supported by all email clients, so it's usually best to use optimized web-friendly images.
Background Image URL: Instead of uploading an image from your computer, you can input a URL of an image hosted online externally or on your CRM's Media Library. The email will load the image from this URL when it's opened. Ensure the image URL is secure (HTTPS) and reliable to load properly for all recipients.

Button:

The "Button" section in the appearance settings allows you to design and stylize action-oriented buttons for interactive and engaging emails.

Corner Radius: Modify the roundness of your button's corners. A value of 9 will give it moderately rounded edges.
Button Color: Here, you can specify the button's color to match your brand or the theme of your email.
Font: Choose the font type and size for the text on your button. In this case, the font 'Arial' with a size of '16' is selected.
Text Styling: You have the ability to set individual colors for the bold, italic, and underlined text within the button. This can help emphasize keywords or phrases and create more visually dynamic buttons.

Divider:

The "Divider" section in the appearance settings lets you incorporate customized lines for structuring and segregating email content.

Height: The height setting defines the thickness of the divider line. By default, it is set to 2 pixels, but you can modify it to suit the aesthetic of your email. A thicker divider might be more noticeable, while a thinner one can subtly separate sections.
Color: This setting allows you to choose the color of the divider line. The color should ideally complement the overall color scheme of the email, ensuring visual cohesion.
Style: Here, you can select the look of the divider line.

Custom CSS

The "Custom CSS" section allows you to add CSS styles to customize your email layout further. However, this requires a good understanding of CSS and its implications in email design. CSS in emails works slightly differently than in web design due to the variety of email clients and their rendering capabilities.