The Drag and Drop Editor includes many features common to other email editors of similar type. It is a simple, intuitive interface that non-HTML savvy people can easily use to create visually appealing email content that renders well in desktops, tablets, and mobile devices. The email’s appearance renders equally well in web browsers, and desktop email clients — including all the variations of Microsoft Outlook.
Before proceeding further, it is important to clarify that the UI experience of all drag and drop editors is hard-coded within the HTML code itself. HTML code created in one vendor’s drag and drop editor will not allow the similar type of on-screen behavior within another vendor’s drag and drop editor. The HTML code of the content will still be rendered within the screen, but the drag and drop controls of the editor will be non-functional.
HTML code created by the legacy drag and drop editor will not provide the on-screen experience within the new one — nor vice versa. You must create new content with the new drag and drop editor. If you would like assistance re-creating your content in the new editor, please contact your Customer Success Manager.
HTML code can, however, be created and exported, then imported with the same on-screen behavior provided that it is the same type of drag and drop editor being used to create the HTML code and to import the same code. This clarification is important to understand for clients having multiple Maropost sub-accounts. A “master” email layout can be created in one account and then imported and reused in all the other sub-accounts with full drag and drop capabilities within the editor.
Create Content with the Drag and Drop Editor
Mouse over the Maropost logo in the top left side of the main menu bar and select EMAIL >> Content. Then, mouse over the (+) icon in the top right hand corner of the menu bar to open the Add Item menu, then select “New Content”. You can also click the [New Content] button located at the lower right corner of the screen.
When the New Content modal appears, enter a name for your email content, and select “Drag and Drop Editor” from the selection of different email editors.
The starting point of creating email content is to add a Grid element to the canvas. Click the Blocks icon to open the Blocks menu. Then click on the Grid sub-menu to open it. Drag the desired Grid element from the palette to the canvas.
Grids are HTML tables. While web designers consider table tags outdated and prefer to use DIV tags, unfortunately Microsoft Outlook renders DIV tags inconsistently poorly. Table tags still provide the best and most consistent rendering across all email clients.
The Grids are all mobile-friendly. The 1:2, 1:3, and 3:7 Grids render side-by-side in the desktop and tablet screens. When viewed in a mobile device (less than 600 pixels wide), the Grids render vertically stacked.
You can place a Grid inside of a Grid to give you more precise placement of your content as it renders on the screen.
Elements are the content items that you place inside Grids. Click the Blocks icon to open the Blocks menu. Then click on the Elements sub-menu to open it. Drag the desired element and place inside the Grid where you want it to appear.
- Text — Adds a Paragraph to the Grid. When you click your cursor inside the Text element, the text editor will appear. It allows you to set the font size, decorations, color, as well as set as a hyperlink any words within the Text element.
- Text Section — Adds both a Heading and a Paragraph to the Grid
- Image — Adds an Image to the Grid. You can use an image that you have stored in the Image Library, or you can provide the URL of an image that you are hosting externally to Maropost Marketing Cloud.
- Quote — Adds a Blockquote to the Grid. HTML Blockquotes appear indented on the left and right within the content.
- Link Block — Makes any element a clickable hyperlink. You’ll typically use this to make an image clickable. First, drag the Link Block inside a Grid. Then, drag an Image inside the Link Block.
- Grid Item — Quickly add two side-by-side blocks of image, header, and paragraph. When viewed in a mobile device, the blocks will display vertically stacked, the left grid on top, the right grid on the bottom.
- List Item — Quickly add two rows block elements — each containing an image, header, and paragraph.
Custom and Social
Custom and Social iteams are content items just like Elements. You can insert vertical spacers, horizontal bars, and clickable social media icons in a Grid. You can also insert your own custom HTML code if necessary.