- 3 Minutes to read
- Print
- DarkLight
Requirements for Building Custom CMS Blocks in Mapp Engage
- 3 Minutes to read
- Print
- DarkLight
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:
A PSD file (Sketch or Figma with access to the document is also accepted)
All the required functionality of the blocks, for example:
Background and text colors (Hex), and whether they should be editable, etc.
Editable links, CTA, etc.
Drop-downs, hide/show toggles, etc.
tracking options
Note that additional functionality that requires extra effort will result in added costs.
A desktop and mobile version of the blocks.
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.
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.
Content placeholders:
Text
Images (format: JPG, PNG, or GIF, maximum size: 1MB).
URLs
(optional) Example HTML files
Content Block Examples
Email and Mobile examples