- 4 Minutes to read
- Print
- DarkLight
Standard Onboarding: Introduction to CMS2 Blocks
- 4 Minutes to read
- Print
- DarkLight
Introduction to CMS
Standard Content Management System (CMS). A content management system is a tool that helps build Email Templates and Email Messages without needing resources such as an Email Developer or any HTML experience. The pre-built Framework and Blocks enable the creation of email templates that can be styled and reused over & over. As well as creating new and ad-hoc email templates and messages as required.
This document contains a list of new and improved blocks. All blocks have the standard editing features, and some interactive blocks that require a little more setup.
Main Elements
Framework
The Framework provides the HTML foundation for your email messages and determines how messages are displayed on the recipient's devices. The Framework caters to all major email clients (with some exceptions where older versions of Outlook are concerned), and we take a responsive design approach. Therefore, all emails will be mobile-friendly as standard. The Framework is flexible and reusable, and every message requires it.
Blocks
A block is a code module containing a specific element of content for an email. An example is the 07 – Hero Image block, where an image can be uploaded, resized, and added to an external link. Each block contains reusable layout, design, and formatting options, which are editable via the Editing Toolbar or in the Details Tab.
All blocks can be dragged from the Components tab and dropped into a Template or Message.
Email Template
Email templates are created using the Framework, and adding blocks in any combination can create layout variations. A good example is a standard weekly Newsletter. A Newsletter layout doesn't generally change from week to week; only the content changes. Creating a Newsletter template saves time, as the layout is already pre-defined. Create a new newsletter message from the newsletter template and add the latest news content in each block. It's quick and easy, flexible, and reusable.
Email Messages
As mentioned above, create a message from a pre-defined template or an ad-hoc email. At this point, adding and removing blocks without affecting the underlying template is still possible. The new message becomes a stand-alone element, not dependent on the template thereafter.
Drag and Drop Editor
The Components and Details Tabs can be found here, where blocks are added to create templates or messages. Both the Template window and Message window utilize the Drag & Drop Editor. Find the required block in the Components Tab list and drag and drop it into the editing window.
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/2e4a6421-dfcf-4206-a463-9392f83b77ab.png)
Generic Settings
Visual Editor
This is where template and message editing occurs via the details tab or editing toolbar. Examples include formatting text, applying brand Colors, and adding images, links, and buttons.
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/64fb55d6-2cd0-4b47-9ca5-40daedf7db64.png)
The Advanced Tab settings can be found by selecting the info icon shown in the screenshot below. While creating a template or message, these settings are available but are Framework-level. These settings update variables only found in the Framework and some mobile settings that cannot be accessed via the Details Tab. Hence, these changes apply to all the relevant elements within the current template or message being created.
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/bed43da9-5a2f-4c4a-a55a-3dfa0d255e79.png)
Template Title
Rename the template with a brand name. This will be displayed on a browser's page tab.
Option | Details | Default |
---|---|---|
Template | Title | Quick Start 2023 |
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/0cac6a9e-d425-4e2d-b528-a3cbbcbf4702.png)
Background Color
Used to change the email background Color.
Option | Details | Default |
---|---|---|
Background Color | Email background Color | #f3f3f3 |
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/b1d87be8-2d40-4784-b1bc-2061708b48c7.png)
Dark Mode Code Hide/Show
This toggle hides or shows the dark mode code in the Framework. Some consideration must be applied when deciding which dark mode options will be in place.
Option | Details | Default |
---|---|---|
Hide/Show | Darkmode Code option | Hide |
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/476ffca9-8084-4d79-b411-58d2f2c20e83.png)
Table Width
Used to select a specific width for a template or message. There are five width options to choose from via a drop-down menu.
Option | Details | Drop-down | Default |
---|---|---|---|
Width | Table Width selection | 600 | 600 |
650 | |||
700 | |||
786 | |||
800 |
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/6cf20713-b8a0-4400-b26f-dcc128b4a25b.png)
Font Family
This option sets the global font stack for the template or message currently being created. Each individual block can still use a different font.
Option | Details | Default |
---|---|---|
Font Family | Font Family | 'Open Sans', Arial, Helvetica, sans-serif |
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/376d2bb1-4bba-4e6e-8c89-900b5733a504.png)
Mobile Title Font Size
Global mobile font size setting for all blocks that use a Title (also known as heading). This is applicable to all blocks that contain a title. Some examples are below.
Option | Details | Default |
---|---|---|
Font Size | Mobile Title Font Size | 18 |
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/f4c92f4a-98d3-4d09-95c5-470b6fe66b7d.png)
Mobile SubTitle Font Size
Global mobile font size setting for all blocks that use a SubTitle (also known as a subheading). This is applicable to all blocks that contain a SubTitle.
Option | Details | Default |
---|---|---|
Font Size | Mobile Subtitle Font Size | 14 |
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/05820940-1694-4096-907f-9cd312393dd0.png)
Mobile Header Font Size
Global mobile font size setting for all blocks that use a Header.
Option | Details | Default |
---|---|---|
Font Size | Mobile Header Font Size | 24 |
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/19aa77cd-025a-44b4-95fa-6da87a901f25.png)
Space between two Images
Use this option to edit the space between the images for the mobile view when images are stacked. Specific to block 12 – 2 images.
Option | Details | Default |
---|---|---|
Space between two Images | Space between two Images when Stacked in Mobile | 10 |
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/d2fdc9c1-6776-4027-a454-2f6035591ba0.png)
Space between two Products
Use this option to edit the space between the images for the mobile view when they are stacked. It is specific to block 13 – 1 or 2 Products.
Option | Details | Default |
---|---|---|
Space between two Products | Space between two Products when Stacked in Mobile | 10 |
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/580d596f-a97a-4c0a-ab7c-7f9542113644.png)
Dark Mode Background Color
It allows you to change the Dark mode body background color. This color will appear when it is viewed in dark mode.
Option | Details | Default |
---|---|---|
Dark Mode Background Color | Dark Mode Body Background Color | #f1f1f1 |
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/7b148f22-a58a-4532-ad72-fb25b77254fa.png)
Editable Favicon
This option is used to change the Favicon.
Option | Details | Default |
---|---|---|
Editable Favicon | Title bar icon in the browser | https://amundsen.shortest-route.com/cts-demo/imgproxy/img/2040334902/mapp_favicon.ico |
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/fa00a1c1-68f4-48de-a32e-0ff95922f7e1.png)
Mobile Header Logo Width
It allows you to update the mobile logo width. This is applicable to block 02 – Logo Header.
Option | Details | Default |
---|---|---|
Logo Width | Mobile Header Logo Width | 80 |
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/3513c984-f514-4276-8df1-7974b45609b4.png)
Desktop Body Background Image Path
Used to add an email background image. All blocks will overlay the background image.
Option | Details | Default |
---|---|---|
Background Image | Desktop Background Image path for Body | Blank |
![](http://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/3e8e39bd-2978-4ea6-89dc-1d723e525fa9.png)
Compatibility
CTAs with curved corners will not display as curved when placed on top of a background image. When images are configured as background images, this limits the type of functionality that can be applied to them and anything they are overlaid with. This is industry-wide.