The Landing Page Designer allows you to easily add or edit the layout and items of your landing pages. The designer consists of four main sections: the top menu, the left pane, the editing area, and the right pane.Click here to view the image in full size
1. Top menu
When building your landing pages, you can switch between the different modes in the top menu and use the available options. The top menu is always visible whichever mode you are in.
The following table lists the modes and other available buttons in the top menu:
| Name | Description |
| Edit | Default mode when you open the designer. This mode allows you to edit and customize the layouts and items on your landing page. |
| Comments | Comments mode allows you to add comments to a landing page design and collaborate with team members. |
| Preview | Preview mode enables you to see what your landing page looks like on mobile devices, tablets, or desktops. |
| Code | Code mode gives a read-only view of the HTML code of your landing page. You can also copy the HTML code or download and upload JSON files. |
| History | History mode opens a pane with a list of saved drafts of your landing pages. You can select a draft and load it to revert your landing page to that version. |
| Script | Script mode allows you to create your own script for your landing pages or customize the script using existing layouts and items. |
 |
Autosaves the current landing page design and exits the designer. |
| Template Library | Opens the landing page Template Library from the designer. |
| Proceed to Next Step | Allows you to save the design and continue with the landing page creation process. You can also save a landing page as a template or save a landing page as a draft. |
 |
Allows you to get help and access related Moosend articles from the knowledge base. |
| Draft save status | Indicates when your design was last saved either automatically or manually. The designer autosaves drafts every 30 seconds. |
 |
Hides or unhides the left pane at any time. Useful when you need to increase your workspace to edit your landing page. |
 |
Allows you to undo changes you've made to your landing page design. |
 |
Allows you to redo undone changes to your landing page design. |
| Clear design | Clears the design of your landing page and reverts to an empty template so you can start from scratch. |
 |
Desktop landing page view. This default view of the designer allows you to edit the desktop version of your landing page. |
 |
Mobile landing page view. Allows you to edit the mobile version of your landing page, without affecting the desktop version. |
| Helper grid | When the Helper grid is switched on, the workspace shows what layout and items you can add to your design. |
2. Left pane
By default, the left pane is displayed in the Landing Page Designer. It consists of three separate tabs for Layouts, Items, and Settings. You can use the left pane to switch between the tabs to create a layout, add items, or customize the general settings of your landing pages.
3. Editing area
The editing area is the main workspace in the Landing Page Designer where you can edit and customize the containers and items on your landing pages, preview your landing pages on different devices. You can click 
or 
to zoom in or out and control how you see your design.
When you hover your mouse over an item or a layout in the editing area, a horizontal or a vertical Actions menu appears for additional options.
4. Right pane
The right pane is displayed in the Landing Page Designer when you click an item or a layout in the editing area. This pane contains the settings you can use to customize an item or a layout.
You can close the right pane at any time by clicking 
. You can also hover your mouse to the left edge of the pane and set the desired width by clicking and dragging the double arrow. These can be useful when you need to increase your workspace to edit your landing page.
