Navigation Path​

  1. In the main navigation​, click Content​ > ​Landing pages​.
  2. Click Create​.
  3. Follow the wizard to step 2. Build & Design Landing Page​ opens.


2. Build & Design​


In step 2. Build & Design​ you create the HTML code for your website. The HTML code can be created in Mapp Engage using the WYSIWYG editor (What You See Is What You Get) or in the code editor. Previously created HTML code can be imported directly. By using personalization and Mapp Engage Variables, the landing page can be personalized for each individual page visitor. For more information, see ​Personalization​.

In addition to providing information, landing pages can also include web forms to collect data from visitors - for example, encouraging visitors to subscribe to a newsletter or participate in a drawing for a certain prize by providing personal data. For further information, see ​Create Web Forms for Landing Pages​.

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


Buttons

ButtonDescription
PersonalizationThis button slides open a sidebar that is used to add personalized content to the landing page. For more information, see ​Personalization​.
Mapp Engage Variables

This button slides open a sidebar that is used to add Engage Variable content to the landing page. For more information, see ​Engage Variables in Landing Pages​.

When creating a landing page, only the Mapp Engage Variables​ from the category Landing Pages​ are available for use.

Import HTMLThis button opens the window Import HTML​ , in which HTML content (e.g. a website) can be uploaded from the local server or loaded from the content store and added to the landing page. For more information, see ​Landing Page: Import HTML Content.
Preview Landing PageThis button opens a Landing Page Preview​ in a new window. This preview corresponds to the display in the web browser (e.g. Internet Explorer, Firefox) currently is used. Problems that may occur when viewing the landing page in a different browser are not identified.
HTML-Code

The button displays the landing page in the Code​ view. The different HTML codes are marked in different colors. The line numbers of the code are also displayed.

The colors are marked as follows:

  • Orange: Personalization (InsertIf/InsertElse)

  • Purple: Tags

  • Blue: Attributes

    Note that the syntax of a custom attribute in the landing page code should be as follows:

    "namedattr_your_attribute"

    For example: "namedattr_contact_nickname".

    The prefix "namedattr_" is required for the data captured from the landing pages to be stored inside the custom attribute.

  • Grey: Text

  • Red: HTML code errors (e.g. missing closing tags)

HTML-EditorThis button opens the graphical HTML editor. For more information, see ​Graphical HTML Editor​.
HTML Format

The functions listed here are only available for editing the landing page with HTML code. These buttons are not available in the HTML editor.

  • Minimize: This button minimizes the HTML code and removes the structure of the code. The header is displayed within one line. The body is the second line. This function limits the size of the landing page.

  • Auto Indent: This button restructures your HTML code. Each HTML tag is displayed on a new line and indented according to the new structure.

Personalization

These buttons search for any personalizations used in the landing page. Engage variables are also displayed since both personalizations and Engage variables are recognized by their tags (<% %>).

  • ↑: This button displays the previous personalization or Engage variable in the HTML code.

  • ↓: This button displays the next personalization or Engage variable in the HTML code.

Undo/Redo

These buttons allow you to undo or redo the last change.

  • Undo: This button undoes the most recent change.

  • Redo: This button redoes the most recent change.

Advanced OptionsAdvanced Options​ are opened by clicking on +.
Character Set

This drop-down list defines the character set of the landing page. This checkbox ensures that the characters are correctly displayed (see http://en.wikipedia.org/wiki/Character_encoding). The character set can also be set in the HTML code.

The character set defined in the Character set​ drop-down list in the Advanced Options ​overwrites the character set defined in the HTML code!

Actions


ActionDescription
CancelThis button cancels the creation or editing of the landing page after an additional confirmation question. All changes are lost.
BackThis button jumps back to step 1. Basic Settings​ (for further information, see ​1. Basic Settings​).
Save

The following actions are available for the button Save​:

  • Save: This button saves any changes made. The landing page has the status unpublished until it is published. If the editing of the landing page is canceled by the Cancel​ button, any previously saved contents remain stored and are visible in the table of the Landing Pages Overview​.

  • Save & Close: This button saves any changes made. The landing page has the status unpublished until it is published. The window Create Landing Page​ closes. The window Landing Pages Overview​ opens.

NextThis button checks the changes and, if all entries are valid, proceeds to step 3. Publish​. For more information, see ​3. Publish​.