Lean Design Blog

How to: editable content

Video walkthrough of making text and images editable, and how links work.

Transcript of video:

Making content editable in your template is as simple as enabling which text pieces or images you want to be editable for your team when they build emails. We’ll go over the options available for each content type as well as what you can do with links.

Text

Let’s start with text. By default, editable text includes basic formatting options as well as the option to add a link to selected text.

In the template editor, go into edit mode and with the content option chosen on the left, start selecting text pieces within your template. Default formatting options can be disabled, along with the option to add a link. You can additionally enable the option for the text area to be removed. And set a maximum number of characters for it.

There are no options for text alignment or custom colors. This is to err on the side of following a design's guidelines by limiting the ways that someone can potentially deviate from them. You can add these options to your template yourself with the variants feature which allows your team to choose between alternate styles of content areas that you pre-design.

Setting a unique variable name for your piece of content is also required if you want to use the template update feature. This feature allows making updates to your template and then importing those changes to individual emails as well as previously saved pins.

Let’s take look at what the code for a text area looks like. When adding the block-edit tag to your code, make sure to use it on the container directly around your text.

Links

There is of course the option to add links to text which includes its own formatting. By default, text is underlined. To use a specific format for links, you can select alternate link styles. If you have the link tracking parameters feature enabled, you can also set the parameters you added here.

To add a link style, find an example of a formatted link in your template that you want to use. You just need to add a data-style attribute with a unique variable name and it will get added as a link style option.

Images

When an image is made editable in a template, you can choose to upload a new image in its place either from your local computer, or if setup, from a source, like an FTP or CDN.

By default, an image’s size is determined from how its placeholder is setup in the template. Blocks Edit refers to the image’s original size properties. When a new image is uploaded, there is an option to crop it based on the original image’s dimensions and it gets scaled down to the image’s pixel size.

If you have a height: auto style on your image, the cropping and scaling will only constrain to the width while the height will automatically adjust based on how it’s cropped.

And that’s making content editable in your template. It allows for easily and quickly setting up your email designs to be reviewed and edited by your team.

Photo of Ovi Demetrian Jr Ovi Demetrian Jr
Designing and building websites and emails for over 15 years