Adjusting Appearance and Styling within the Email Builder

The Email Builder Inline Editor is a powerful tool embedded within our Templates and Campaigns platform. 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.

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

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://litmus.com/blog/catego...

  • 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.c...

  • 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/...

  • 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://emaildesign.beefree.io...

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

Can I email…: Like Can I use… but for email: https://www.caniemail.com/

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

Did this answer your question?
😞
😐
😁