Adjusting Appearance and Styling within the Email Builder

The Email Builder Inline Editor is a powerful tool embedded within our Templates and Campaigns builder. It eliminates the complexity of email design and formatting, offering a user-friendly interface for effortless customization. Here is a guide on how to adjust appearance and styling within the inline editor.

To navigate to the Builder, click on Marketing on the left > Emails on the top and select Campaigns/Templates.

Adjusting Appearance and Styling:

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

Color Swatch Picker and Template Customization

The Text Editor Color Picker allows effortless selection from preset colors. Template customization options include:

Color Scheme: Users can choose a suitable color palette for the template.

Background Image: Templates can be enhanced with background images, adding visual appeal.

Email Width Definition: Defining the width ensures content displays optimally on various devices.

Color Swatch Picker

With the Text Editor Color Picker, you can quickly choose from a selection of preset colors

Background Color for Text Elements

Enhance your email designs with the ability to add background colors to text elements, such as text blocks and footers. This feature allows for greater customization, enabling users to highlight important information and create visually engaging emails.

How to Use:

1. Drag and drop a text element into your email design.

1. Open the color picker from the settings panel.
2. Choose and apply your preferred background color.

Note: Applicable only to text-based elements like text blocks and footers.

Preview Emails in Browser

The "Preview in Browser" feature allows users to include a dedicated link in email campaigns and templates, enabling recipients to view the email design accurately in a web browser.

By default, blank templates include this link, and users can manually add it to existing campaigns or templates by using the Preview URL element.

Ensure proper styling and formatting adjustments for seamless integration.

You can preview the email and click on the preview link to view the browser version of the document

Styling Action-Oriented Elements and Dividers

The appearance settings include specialized sections for interactive elements and content segregation:

• Button Styling: Customizes action-oriented buttons, enhancing interactivity.
• Divider Customization: Allows incorporation of customized lines, structuring email content effectively.
• Custom CSS: Offers advanced users the ability to add custom CSS styles, tailoring the email layout further.

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.

Button:

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

Divider:

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

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.

Here are a few resources that can help you get started with CSS:

CSS Tricks: https://css-tricks.com/

• This website provides a wealth of information about CSS and how to use it effectively, including many articles specifically about using CSS in email.

Litmus: https://www.litmus.com/blog

• Litmus is a well-known email testing tool, and its blog features many in-depth articles about email coding, including CSS.

Smashing Magazine: https://www.smashingmagazine.com/2017/01/introduction-building-sending-html-email-for-web-developers/

• An Introduction To Building And Sending HTML Email For Web Developers: This guide provides a comprehensive overview of HTML and CSS in emails.

MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

• Using CSS: Mozilla's developer network is a trusted resource for web developers. This guide explains how to use CSS custom properties, which can be useful in your custom CSS block.

Email Design Workshop: CSS in Email: https://beefree.io/blog

•  This guide provides a clear overview of the basics of using CSS in email.

Can I email: https://www.caniemail.com/

A great resource for checking which CSS properties and HTML elements are supported by major email clients. 

Mobile Formatting

The Mobile Formatting feature ensures that your emails are optimized for viewing across all devices, particularly on mobile. By adjusting the visibility and layout of elements like headings, paragraphs, and buttons for mobile devices, you can deliver a more cohesive and readable experience

Customize font sizes, text alignment, and line height for different headings and elements.

Best Practices for Configuring Mobile-Friendly Emails

When designing emails for mobile devices, it’s essential to focus on a few key areas to ensure your messages are effective, accessible, and user-friendly. Here are some best practices to follow for optimal mobile email formatting:

1. Opt for a Single-Column Layout:
For mobile emails, a single-column layout is highly recommended. It makes your email easier to scale for smaller screens, while multi-column layouts can create clutter and confuse the reader.

2. Optimize Images for Mobile:
While it’s important to use high-quality images, ensure they are compressed to reduce file size and improve load times. Consider implementing responsive images that automatically adjust to the screen size. Also, remember to include descriptive alt text to improve accessibility for all users.

3. Make Buttons Touch-Friendly:
Since mobile users tap rather than click, make sure your call-to-action (CTA) buttons are large enough to be easily tapped. A good rule of thumb is to set the button size to at least 44px by 44px to avoid frustration with misclicks.

4. Keep Text Short and Scannable:
Mobile screens are small, so it’s important to keep text concise and easy to read. Break your content into digestible chunks with short paragraphs, bullet points, and clear subheadings to enhance readability.

5. Use Responsive Email Design:
Ensure your email adapts automatically to different screen sizes by using a responsive design. This ensures your email looks great on both mobile and desktop devices without the need for manual adjustments.

6. Test and Preview Your Emails:
Always preview and test your emails on different mobile devices and email clients. This helps you spot any formatting issues before sending your email to recipients.

7. Include Adequate White Space:
White space is a valuable design element that improves readability. It prevents your email from looking too crowded and allows users to focus on key information, making your content easier to digest on small screens.

8. Choose Readable Font Sizes and Styles:
For mobile emails, make sure the text is large enough to read without zooming. A font size of around 14px for body text and 22px for headings is ideal. Avoid using overly decorative fonts that may be difficult to read on smaller screens.

9. Clear and Easy-to-Find CTAs:
Your CTA buttons should stand out and be easy to tap. Position them in prominent areas, such as the center or the top of the email, to ensure they are noticeable and actionable.

10. Optimize Subject Lines and Preheader Text:
Craft short, engaging subject lines that capture the reader’s attention. The preheader text should provide a summary of your email content. Testing different subject lines via A/B testing can help you determine which ones resonate best with your audience.

11. Prioritize Text Over Images:
Since some email clients may block images, use text as much as possible to ensure your message is delivered clearly. Images should be used sparingly and only when they enhance your message.

12. Make Unsubscribing Easy:
Providing an easy way for recipients to unsubscribe is not only a legal requirement but also enhances the user experience. The unsubscribe link must be easy to find and accessible.

13. Prioritize Accessibility:
Make sure your emails are accessible to all users. Use larger fonts, high contrast between text and backgrounds, and include alt text for images to ensure everyone can read and understand your emails, regardless of any disabilities.

FAQ

Q: How can I test different email components to determine what performs best?
A: The email builder includes an A/B testing feature that enables you to experiment with various elements like subject lines, content, and CTAs. This helps you identify which combinations resonate most with your audience. For detailed instructions, refer to the article “Split Testing in Email Campaigns”

Q: How do I ensure my email design is optimized for mobile devices?
A: Use the Mobile Formatting feature within the Email Builder Inline Editor. Adjust elements like font sizes, text alignment, and button visibility specifically for mobile devices to enhance readability and usability.

Q: Can I customize email buttons for better mobile interaction?
A: Yes, you can style buttons in the "Button" section of the appearance settings. Ensure they are touch-friendly with a minimum size of 44px by 44px for easy tapping on mobile devices.

Q: How can I make my emails accessible to a wider audience?
A: Prioritize accessibility by using larger fonts, high contrast between text and background, and alt text for images. These adjustments ensure your emails are easy to read and navigate for all users.

Q: Can I create custom styles using CSS in the Email Builder?
A: Yes, advanced users can add custom CSS in the "Custom CSS" section of the appearance settings. Be mindful that email clients may render CSS differently, so test thoroughly across platforms.