Text Elements in Chamaileon
Chamaileon offers four distinct text elements to provide flexibility and structure when creating your email designs. These elements allow you to define and format text for various purposes, ensuring a polished and professional look.
The Four Types of Text Elements
Text
A versatile, all-in-one element that supports a wide range of formatting options. This is ideal for general use when a specific type is not required.Title
Designed specifically for headlines, this element ensures your headings stand out and adhere to a consistent style.Paragraph
Perfect for body content, this element is optimized for paragraphs and larger text blocks, ensuring readability and appropriate spacing.List
This element simplifies the creation of ordered and unordered lists, making structured content easy to implement.
Configurable Properties of Text Elements
Each text element comes with a set of configurable properties to help you achieve the desired look and feel for your emails. Here’s what you can customize:
Font type:
Choose from supported Google Fonts that are web-safe and email-client friendly.Font size:
Adjust the size of the text for emphasis or readability.Line-height:
Control the vertical spacing between lines to improve readability and aesthetics.Text color:
Set a custom color for your text to match your brand or design.Text background color:
Apply a background highlight to your text. Use sparingly, as overly highlighted text can detract from your email’s overall appearance.Link style and color:
Define how links appear, including their color, to ensure they align with your design.Spacing:
Adjust padding (top, bottom, left, right) around your text for precise positioning within your layout.
Adding Text Content to Your Emails
Text content for your emails is often written in tools like Microsoft Word or Google Docs and then copy-pasted into the email builder. While doing so, ensure to:
Check for unwanted code:
Microsoft Word, in particular, can introduce messy or unnecessary HTML code. Always review and clean up the HTML after pasting content.Format appropriately:
Ensure the copied content fits the style and layout of your email. Adjust the text settings in Chamaileon as needed to match your design.
Tips for Effective Text Styling
Use web-safe fonts to ensure compatibility across all email clients.
Avoid excessive use of highlighted text; it can appear unprofessional.
Maintain consistent line spacing and font sizes to improve readability.
Use the Title element for headlines and the Paragraph element for body content to ensure visual hierarchy.
With these tools and best practices, you can create emails that are both visually appealing and easy to read.
Image element
Images should be used to reinforce and strengthen the written message of your email. Proper image usage will help you make more out of your email templates.
You can set the following properties of an image in the email:
Alt text - This is the text that will be displayed in case your image is not shown. For example, Outlook won't show images by default.
Link
Fluid on mobile
Alignment
Size
Element position- Margin, Padding, Border (just like in case of Box)
Element background- you can change the background color of your image here
Image styling is still quite basic in email, although it includes all of the essential properties. But there are a couple of things you cannot reliably do with images in an email:
Wrap text around images - Not supported in Outlook and Windows Mail.
Rounded images - It's better to use an image editor to create a rounded or circular version of your image (for example, for a profile picture).
Button element
Since you can add a link to an image, there are still many companies using images instead of HTML based buttons. Actually, that's completely against the best practices because images won't show up if the recipients' email client blocks images by default.
To learn more about Email Button Design, go to the linked article.
HTML buttons will always show up (even if images are blocked), and they can easily resize to the proper size on mobile screens too.
We generally advise all of our users to use HTML-based buttons in their responsive email designs. They might not look as "fancy" as image based buttons but can certainly meet the material design or flat design requirements.
HTML-based buttons in email can have the following properties:
Link
Font type
Font size
Line-height
Color
Alignment
Size - In the email editor you can decide if you want your button to have a fixed size or fit size to text, and even configure if you want your button to be fluid on mobile. This means that it will scale to full-width of the screen when your email is viewed on a smartphone.
You will most likely use buttons for call-to-actions, but you can also use them for menu elements or for social share buttons. They can be used for any action you want your subscribers to make.