Contents x
      2. Build & Design
      • 3 Minutes to read
      • Print
      • Dark
        Light
      Contents

      2. Build & Design

      • 3 Minutes to read
      • Print
      • Dark
        Light
      Article summary

      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

      Button

      Description

      Personalization

      This 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 HTML

      This 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 Page

      This 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-Editor

      This 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 Options

      Advanced 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!

      Was this article helpful?
      What's Next