Creating custom content blocks for your email sendouts is a complex task that requires advanced HTML and CSS knowledge. The Mapp Technical Services team can make these blocks for you. On this page, you'll find all the information you need to provide to the Mapp services team so that we can create the blocks for your marketing communication.

Requirements

Please provide Mapp with a complete list of all the blocks required for the build. Ideally, these details should be delivered as a Photoshop Document (PSD) file, but there is also an option to do this without this file. Both options are described below.

With PSD file

Providing your specification in a PSD file is preferred.

Deliverables:

  1. A PSD file (Sketch or Figma with access to the document is also accepted)

  2. All the required functionality of the blocks, for example:

    1. Background and text colors (Hex), and whether they should be editable, etc.

    2. Editable links, CTA, etc.

    3. Drop-downs, hide/show toggles, etc.

    4. tracking options

      Note that additional functionality that requires extra effort will result in added costs.

  3. A desktop and mobile version of the blocks. 
  4. Custom font files and backup fonts, as not all email clients accept custom fonts. Provide a range of formats for the custom fonts, including .eot, .woff, .woff2, .svg, and .ttf. If you cannot deliver all formats, then .woff is preferable as it provides the best support for email.

Without PSD file

If no PSD file is available, you can provide detailed slides for each block.

  1. Exact dimensions and font sizes within each of the block slides.

    The space between elements (“padding”) will be taken from the provided files. Occasionally, the dimensions may need to be reduced to work with the CMS. 
     Block parameters

    Pre-Header

    • View online link: Mapp Engage standard link
    • Background color:
      • Should it be editable?
      • Specify Hex colors
      • How can the color be selected: in a drop-down, entered manually, or both?
    • Text. Should there be multiple languages selectable in a drop-down? 
    • Font and font size

    Header

    • Background color:
      • Should it be editable?
      • Specify Hex colors
      • How can the color be selected: in a drop-down, entered manually, or both?
    • Text. Should there be multiple languages selectable in a drop-down? 
    • Font and font size
    • Logo image (including color versions) and how it should be added (via URL or in the menu bar?)
    • Logo link (should be editable) and how it should be added (via details or menu bar?) 
    • Any extra functions for the details tab, such as toggles, drop-downs, editable textboxes, colors, etc.

    Title &  Text

    • Background color:
      • Should it be editable?
      • Specify Hex colors
      • How can the color be selected: in a drop-down, entered manually, or both?
    • Text. Should there be multiple languages selectable in a drop-down? 
    • Font and font size
    • Text dimension, alignment, and color

    CTA (Call-to-Action)

    • Background color:
      • Should it be editable?
      • Specify Hex colors
      • How can the color be selected: in a drop-down, entered manually, or both?
    • CTA text (editable via the details tab?)
    • CTA link (editable via the details tab?)
    • Font and font size
    • Text dimension, alignment, and color
    • CTA alignment
    • CTA border-radius
    • CTA width and default size

    Image

    • Image for desktop and mobile if they are different
    • Image link
    • Background color:
      • Should it be editable?
      • Specify Hex colors
      • How can the color be selected: in a drop-down, entered manually, or both?
    • Specify how the image(s) should be editable via the details tab (e.g., image URL, image link URL, hide/show toggle, desktop/mobile differences, etc.)

    Image & Text

    • Background color:
      • Should it be editable?
      • Specify Hex colors
      • How can the color be selected: in a drop-down, entered manually, or both?
    • Text. Should there be multiple languages selectable in a drop-down? 
    • Font and font size
    • Text dimension, alignment, and color
    • Images and image URLs
    • Specify what should be editable via the details tab

    Line Separator

    • Background color:
      • Should it be editable?
      • Specify Hex colors
      • How can the color be selected: in a drop-down, entered manually, or both?
    • Specify what should be editable via the details tab

    Image Separator / Bullet

    • Background color:
      • Should it be editable?
      • Specify Hex colors
      • How can the color be selected: in a drop-down, entered manually, or both?
    • Text. Should there be multiple languages selectable in a drop-down? 
    • Font and font size
    • Text dimension, alignment, and color
    • Provide images and image URLs
    • Specify what should be editable via the details tab, e.g., how many options to hide/show

    Footer

    • Background color:
      • Should it be editable?
      • Specify Hex colors
      • How can the color be selected: in a drop-down, entered manually, or both?
    • Text. Should there be multiple languages selectable in a drop-down? 
    • Font and font size
    • Text dimension, alignment, and color
    • Provide images and image URLs
    • Specify what should be editable via the details tab
    • Provide URLs for Privacy Policy URL, T&C, Social Media, etc.
  2. Content placeholders:
    1. Text 
    2. Images (format: JPG, PNG, or GIF, maximum size: 1MB).
    3. URLs
  3. (optional) Example HTML files

Content Block Examples

 Email and Mobile examples