Design editor basics

  • Updated

User interface overview

lpe 2c.png

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.

Basic actions in the editor

Previewing a design

Prerequisites: You see the design editor.

  1. In the top right of the editor, click on Preview.
    → The design is displayed in preview mode.
  2. 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.
  3. To exit preview mode, click on Preview again.

Saving a design

Prerequisites: You see the design editor.

  1. In the top right of the editor, click Apply or Save.

Closing the editor

  1. In the top right of the editor, click on the arrow next to the Apply or Save button.
    → A drop-down menu appears.
  2. 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.

  1. In the side panel, left-click on an element and hold down the mouse button.
  2. Drag the element to a suitable location in the design area.
    → A blue marker indicates possible positions for the element.
  3. Release the mouse button.
    → The new element is added to your design.

Selecting a row

Prerequisites: You see a design in the editor.

  1. 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.

  1. 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.

  1. Select the object.
  2. On the border of the object, click designarea_button_move.png (Move) and hold the mouse button down.
  3. Drag the object to a new location and release the mouse button.

Deleting an object

Prerequisites: You see a design in the editor.

  1. Select the object.
  2. In the side panel, click on sidepanel_button_delete.png (Delete).
    → The selected object is deleted.

Duplicating an object

Prerequisites: You see a design in the editor.

  1. Select the object.
  2. In the side panel, click on sidepanel_button_duplicate.png (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:

  • designarea_history_undo.png (Undo): Takes you back one step in your edit history.
  • designarea_history_redo.png (Redo): Reapplies an undone action, moving you forward in the edit history.
  • designarea_history_list.png (History timeline): Opens a list that shows your most recent changes.

Undoing and redoing actions

Prerequisites: You see the design editor. You made a change in the current session.

  1. In the history widget, click designarea_history_undo.png (Undo) ordesignarea_history_redo.png (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.

  1. In the history widget, click designarea_history_list.png (History timeline).
    → A timeline displays your recent actions. The newest action is on top.
  2. 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.
  3. Click designarea_history_list.png (History timeline) again to close the timeline.