---
title: "2. Build & Design"
slug: "2-build-design"
description: "Reference for the Build & Design step of Mapp Engage landing pages, including editors, personalization, and variables."
status: "update"
updated: 2026-10-21T14:24:21Z
published: 2026-10-21T14:24:21Z
canonical: "docs.mapp.com/2-build-design"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 2. Build & Design

In the step **Build & Design Landing Page**, you create the content of the landing page. You write the HTML code, use the graphical HTML editor, or import existing HTML. With personalization and Mapp Engage Variables, you can show contact-specific content. See [Personalize a Landing Page](/v1/docs/engage-variables-in-landing-pages).

To collect data from visitors, for example newsletter subscriptions, add a web form. See [Create Web Forms for Landing Pages](/v1/docs/create-web-forms-for-landing-pages).

> [!NOTE]
> Note
> 
> To store form input in a custom attribute, the name of the form field needs the prefix `namedattr_`, for example `namedattr_contact_nickname`.

---

## Navigation Path

*Content > Landing Pages*, then click **Create** or open a landing page with **Edit**, and click **Next**.

---

## Functions

| Function | Description |
| --- | --- |
| **Personalization** | Opens a sidebar to insert personalization placeholders and rules. |
| **Mapp Engage Variables** | Opens a sidebar to insert variables. In landing pages, only the categories **Landing Pages** and **Content / Attachment** are available. See [Mapp Engage Variables](/v1/docs/mapp-engage-variables). |
| **Import HTML** | Imports HTML content from your computer or from the Content Store. |
| **Preview Landing Page** | Opens a preview in a new window. See [Landing Page Preview](/v1/docs/landing-page-preview-window). |
| **HTML-Code** / **HTML-Editor** | Switches between the code editor and the graphical HTML editor. Both show the same content. |
| **Advanced Options** | Shows the drop-down list **Character Set**. The character set you select here overrides the one in the HTML code. |

---

## HTML Code

The code editor shows line numbers and color coding. HTML errors, such as missing closing tags, are shown in red.

| Button | Description |
| --- | --- |
| **Minimize** | Removes line breaks and indentation to reduce the size of the page. |
| **Auto Indent** | Puts each tag on its own line and indents the code. |
| **↑** / **↓** | Jump to the previous or next personalization placeholder or variable (`<% %>`) in the code. |

---

## HTML Editor

The graphical HTML editor lets you build a landing page without HTML knowledge. The content looks almost as it does for visitors. The toolbar contains the usual functions for text formatting, lists, alignment, links, images, and tables. To see the name of a button, move the mouse over it. Images can come from the Content Store, see [Use a Content Store Element in an Email](/v1/docs/use-a-content-element-in-an-email).

These buttons are less obvious:

| Button | Description |
| --- | --- |
| **Anchor** (bookmark icon) | Inserts an anchor for links within the page. |
| **Word Count** (123 abc) | Shows the number of words and characters. |
| **Show Invisible Characters** (¶) | Shows spaces and line breaks. |
| **Show Blocks** (dotted ¶) | Outlines blocks such as paragraphs. |
| **Insert Date/Time** (clock) | Inserts the current date or time. |
| **Help** (?) | Shows the keyboard shortcuts of the editor. You can also press **Alt+0** (Mac: **Option+0**). |

> [!NOTE]
> Note
> 
> Image maps are no longer available. To make an image clickable, select the image and add a link.

To continue, click **Next**. See [3. Publishing Options](/v1/docs/3-publish).