All Collections
Email Editor Documentation
How to use basic content elements - text, image, button
How to use basic content elements - text, image, button

Learn how to use basic content elements - text, image, button

Roland Pokornyik avatar
Written by Roland Pokornyik
Updated over a week ago

Text / Title element

Using Lorem ipsum all over the template is bad practice. You have to compose the text of your email at first, then focus on finding the right layout to represent the chosen message.

Unfortunately, text styling is limited in email design compared to regular web design. Only web-safe fonts are properly supported by all email clients. That's the reason why most email builders — just like Chamaileon — are restricted to web-safe  Google fonts.

Properties that you can configure on a text element:

  • Font type - Google fonts

  • Font size

  • Line-height

  • Text color

  • Text background color - This will make your text look like you used some kind of highlighter pen. Please don't use this option. Even a single highlighted word might ruin your email design. The reason is that it simply is not fashionable and it looks cheap.

  • Link style

  • Link color

  • Spacing - In order to position your text, you are able to decide top, bottom, right, and left padding around your text in most email builders — in Chamaileon too. 

This is where you can adjust your text settings in Chamaileon.

Text content is usually born in a Word or Google Doc file these days and will be copy/pasted either directly to the HTML or to an email builder.

If you copy/paste your text content from Word to your email builder, always double check the HTML code. Unfortunately, MS Word can sometimes add really messy and unnecessary code to your email.

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 email:

Wrap text around images - Not supported in Outlooks and Windows Mail.

Rounded images - It's better to use an image editor to create a rounded or circle 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.

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.

Did this answer your question?