Graphical HTML Editor (Landing Pages)

Navigation Path

In the main mavigation, click Content Management > Landing Page.
⇒ The Landing Pages window opens.
Click Create.
-or-
Click Edit to edit an existing landing page.
⇒The window opens to step 1. Basic Settings.
Define the basic settings for the new landing page (see Create Landing Page (window)).
-or-
If necessary, edit the basic settings (see Create Landing Page (window)).
Click Next.
⇒ The window opens to step 2. Build & Design Landing Page.
Click the HTML-Editor button.

Graphical HTML Editor

The graphical HTML editor allows you to create a landing page without advanced HTML knowledge. Following the WYSIWYG (What You See Is What You Get) principle, the content display here is largely identical to what the landing page viewer sees. The content is displayed without any markup language. Moving your mouse over the symbols in the menu bar provides information about the function of each button.

Complex Personalisations are highlighted within the code with an If. All other Engage Variables and Personalisations are highlighted with a P.

When creating forms, input fields for storing personalizations are represented in the graphical HTML editor with the <ecpers be id=0></ ecpers> placeholder.

The graphical editor interface is designed for ease of use. Move the mouse over each icon in the toolbar for additional information about each.

The structure of the email is displayed at the bottom of the editor.

Complex Personalisations are highlighted within the email code with . All other Engage Variables and Personalisations are highlighted with .

Action	Description
Undo	Removes the last change.
Redo	Restores the last change.
Find	Opens the Find and Replace window. Search for text with this input field.
Replace	Opens the Find and Replace window. Search for and replace text with these input fields.
Select All	Selects all the available HTML code.
Link	Select text or an image in your email. Click the Link button to open a window in which the link can be defined.
Unlink	Removes the link without removing the text or picture.
Anchor	Inserts an anchor in your email.
Image	Opens the Image Properties Window. You can select an image to insert into your code in this window. For information about loading an image from the Content Store, see Use a Content Store Element in an Email. In the Advanced Settings, images are hosted in Engage (see Select Message Channel Type).
Image Map	Select an image. Clicking the Image Map button opens the Insert/Edit Image Map window. There you can assign links to the desired areas of the image (see Insert or Edit Image Map (window)).
Table	Opens the Table Properties window. This window defines the table structure.
Insert Horizontal Line	Inserts an hr tag which creates a horizontal line in the email.
Insert Special Character	Opens the Select Special Character window. It is possible to insert special characters into your text in this window (characters such as ü, é, ß are automatically replaced and do not need to be selected in the window).
Maximize	Opens the WYSIWYG editor without displaying the Engage navigation area.
Font Name	This drop-down list defines which font is used to display the text.
Font Size	This drop-down list defines the size of the font that is used to display the text.
Text Colour	Inserts a span tag which defines the colour of the text.
Background Colour	Inserts a span tag which defines the background colour of the text.
Bold	Inserts a strong tag which formats the font weight of the text as bold.
Italic	Inserts an em tag which formats the font style of the text as italic.
Underline	Inserts a u tag which places a line underneath the text.
Strike Through	Inserts a strike tag which places a line through the text.
Subscript	Inserts a sub tag which places the text slightly lower than the surrounding text.
Superscript	Inserts a sup tag which places the text half a character above the baseline.
Numbered List	Inserts or removes a li tag which creates a numbered list.
Bulleted List	Inserts or removes an ul tag which creates a bulleted list.
Decrease Indent	Inserts a style attribute which defines the left margin.
Increase Indent	Inserts a style attribute which defines the right margin.
Align Left	Inserts a style attribute which aligns text to the left.
Center	Inserts a style attribute which aligns text to the center.
Align Right	Inserts a style attribute which aligns text to the right.
Justify	Inserts a style attribute which justifies both sides of the text.

Keyboard Shortcuts

Action	Description
Ctrl+Z	Undo.
Ctrl+Y or Ctrl+Shift+Z	Redo.
Ctrl+L	Opens the hyperlink window.
Ctrl+B	Bold. Inserts strong tags around the selected text to make it bold.
Ctrl+I	Italic. Inserts em tags around the selected text to make it italic.
Ctrl+U	Underline. Inserts u tags around the selected text to create a line under the text.
Ctrl+C or Ctrl+Insert	Copy. Copies the selected area of the email.
Ctrl+V or Shift+Insert	Paste. Pastes the selected area into the email.
Ctrl+X or Shift+Delete	Cut. Removes the selected area of the email.
Ctrl+left arrow or Ctrl+right arrow	Jumps to the previous or next word.
Ctrl+Backspace	Deletes the previous word.
Ctrl+Delete	Deletes the currently selected word.
Shift+Enter	Inserts a new line in the currently selected paragraph or list item. The new line is created by a br tag.
Alt+F10	Moves the window focus area from the email editing area to the toolbar.

Navigation Path​