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:

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