Design editor basics
User interface overview
On the left-hand side is the side panel where you add elements and edit their settings. On the right-hand side is the design area where you arrange elements and add content. The object that the mouse pointer hovers over (here, a row with an image) is highlighted with a light blue frame. The selected object (here, a text element) is highlighted with a dark blue frame.
The options displayed in the side panel change when you click on the tabs on top of the side panel. They also change to show appropriate options when you select an object in the design area. Following rules apply:
- To see the standard options in the side panel (not related to specific content in the design area), click on one of the tab titles above the side panel.
- To see row-specific options, select the row by clicking the blank space in the design area on the right or left of the row.
- To see options for a content element, select the element by clicking on it in the design area.
You can hide the side panel, by moving your mouse pointer over the side panel and clicking the arrow in the blue circle next to the tab titles. Click it again to show the side panel again.
The template catalog
About the template catalog
If you do not like starting from scratch or want to get a quick idea of the Design Editor's capabilities, the template catalog is for you: You can browse and choose from a curated library of pre-built designs to quickly start with an attractive layout and example content. The catalog reduces manual work and offers inspiration. It is available for emails but not for landing pages.
Important
When you load a template, the existing content in the Design Editor is overwritten! To prevent losing any work, save your message draft before using the template catalog or explore templates starting from an empty message draft.
Selecting and loading a template
Prerequisites: You see the Design Editor for emails. The editor does not contain any unsaved work that you still need.
- Above the design area, click on Template Catalog. → The template catalog displays preview images for templates.
- Scroll to see more templates.
- Optional: Enter a search term to narrow down the displayed templates.
- Click on a template. → The template is highlighted.
- Click Replace current design. → The template is loaded into the Design Editor and you can edit it.
Basic actions in the editor
Previewing a design
Prerequisites: You see the Design Editor.
- In the top right of the editor, click on Preview. → The design is displayed in preview mode.
- To estimate the look of the design on different devices or in dark mode, change the settings in the area Preview Mode above the preview.
- To exit preview mode, click on Preview again.
Saving a design
Prerequisites: You see the design editor.
- In the top right of the editor, click Apply or Save.
Closing the editor
- In the top right of the editor, click on the arrow next to the Apply or Save button. → A drop-down menu appears.
- Click either Save and close or Close without saving. → You see the list of pages on the page Landing Pages.
Use of rows and content elements
Basics
Designs in the editor consist of two types of objects:
- Rows are horizontal bars which may be split into multiple columns. They define the layout of a design. Each row or column can contain content elements.
- Content elements are objects which form the content of a design. They usually contain text, images or other types of content. Dividers and spacers are content elements that serve only layout purposes.
All Objects have properties which define their style and some other settings (e.g. comments). These properties are visible in the side panel when an object is selected.
Adding an object
Prerequisites: You see the design editor.
- In the side panel, left-click on an element and hold down the mouse button.
- Drag the element to a suitable location in the design area. → A blue marker indicates possible positions for the element.
- Release the mouse button. → The new element is added to your design.
Selecting a row
Prerequisites: You see a design in the editor.
- In the design area, click on the empty space on the right-hand or left-hand side of the row. → The selected row is marked with a border and its properties are displayed in the side panel.
Selecting a content element
Prerequisites: You see a design in the editor.
- In the design area, click on the element. → The selected element is marked with a border and its properties are displayed in the side panel.
Moving an object
Prerequisites: You see a design in the editor.
- Select the object.
- On the border of the object, click (Move) and hold the mouse button down.
- Drag the object to a new location and release the mouse button.
Deleting an object
Prerequisites: You see a design in the editor.
- Select the object.
- In the side panel, click on (Delete). → The selected object is deleted.
Duplicating an object
Prerequisites: You see a design in the editor.
- Select the object.
- In the side panel, click on (Duplicate). → A duplicate of the selected object is added to the design.
Undo, redo and history
Overview
The Undo, Redo, and History functions provide you with a safety net for changes, allowing you to navigate back and forth in your edit history.
User Interface
When you make a change in your design, a history widget appears in the bottom right corner of the design area. This widget has three buttons:
Undoing and redoing actions
Prerequisites: You see the design editor. You made a change in the current session.
- In the history widget, click (Undo) or
(Redo). → The design changes.
Using the history timeline
Context: The undo widget remembers up to 15 of the most recent changes during the current browser session.
Prerequisites: You see a design in the editor. You made a change in the current session.
- In the history widget, click (History timeline). → A timeline displays your recent actions. The newest action is on top.
- Click on any action in the list. → The design is reset to that point of its history. The object that was changed in the selected step is automatically selected to indicate the last change at that point.
- Click (History timeline) again to close the timeline.