Developer

Editable email template example

Modular email template example of the IDEO weekly newsletter Modular email template mobile example of the IDEO weekly newsletter

IDEO weekly newsletter

What makes this a good email:

A digestible newsletter format that breaks up content well using line-breaks and spacing.

Design highlights:

View Blocks Edit editable preview →
Download template with editable tags →

How it was made editable for Blocks Edit


Intro area

  • On the containing table, a 'block-region' class was added to indicate to the user that the text area was editable
  • 'block-edit' was added to the text's container to make it editable
  • The 'This Week' title text is left uneditable since it does not need to be changed
  • Default bold and italic formatting options as well as linking are left enabled

Feature image

  • On the containing table, a 'block-section' class was added which makes it a stackable section that appears on the left sidebar and can be dragged in
  • The section can also be reordered among other stacked sections
  • 'block-edit' was added to the img element which allows a new image to be uploaded in its place, or its URL can be changed
  • The image alt text can also be edited, and a link can be added or removed

Feature article

  • On the containing table, a 'block-section' class was added to make it a stackable section
  • 'block edit' was added to the title, date, author byline, and description text
  • For the title text, bold and italic formatting options were removed using 'block-no-bold' and 'block-no-italic', leaving only the text and its link to be edited

Testing your template

Sign up for free to import your template and test out editable tags. Need some help implementing the tags? Here are some options: