Edit the mobile version of a landing page

You can edit the mobile version of your landing page in the Landing Page Designer using the Mobile Landing Page view. Just like when you're editing a desktop version, you can build the mobile version of your landing page by editing the layout and items and adjusting the settings in the designer.

The following image shows the Mobile Landing Page icon, Settings, Display Orientation, and Revert options.

Click here to view the image in full size

A. Switch to the Mobile Landing Page view

1. On the top menu, click . The designer switches to the Mobile Landing Page view.
   
2. Edit the mobile version of your landing page by following the next procedures. Working in this view does not affect the desktop version of your landing page.
   

B. Edit the layout, items, and general settings 

1. To edit the landing page's general settings, on the left pane, in Settings, you can set the following:
   • Content Width- enter the content width for the landing page.
   • Content Alignment- select Top or Middle alignment for the content.
   • Border Width- enter the width or use the up and down arrows to edit the landing page width.
   • Border Color- select the color of the landing page border. The default color is black.
   • Background Color: select the landing page background color. 
   • Background Color: select the landing page background color. 
   • Background repeat: select the option for background image repeat in the horizontal (x), vertical (y), or both horizontal and vertical axes in the layout.
   • Add Background Image- click to browse and use the image picker to upload an image from your computer, or from a variety of applications. The image is added to the design when successfully uploaded. 
   • Change Background Image: select a new background image to replace the current one.
   • Remove Background Image: click to delete the landing page background image.
2. To edit a layout, click a layout in the editing area to display and edit the Layout settings in the designer's right pane. You can edit the layout settings as you would in the desktop view.
3. To edit an item, click an item to display and edit the item settings in the right pane. 
4. To edit a specific item in your design, click the item to display and edit the item settings in the right pane as you would in the desktop view.
5. To hide a layout, hover your mouse over a layout to display the Actions menu. Then click Hide.

C. Select display orientation

The Mobile Landing Page view allows you to display the slots of a row vertically, to ensure that your design is optimized when viewed on the small screen of a mobile device. Selecting either a vertical or a horizontal orientation changes the display of ALL slots on the landing page. I

1. On the left pane, in Settings, scroll down to Display Orientation.
2. Select vertical if you want to enable vertical slot display
3. To switch to a horizontal display orientation, select horizontal.

Note: If you want to change the slot orientation of a specific layout, you can edit the Layout settings instead to cascade the blocks.

D. Revert changes

You can quickly revert any changes made to the mobile version of your landing page.

1. While in general settings, where Settings is displayed on the left pane, click in the editing area. to display the revert options.
2. You can select the following options: 
   • Revert All Changes - reverts all changes made to the mobile version.
   • Revert General Settings - reverts all general settings changes made to the mobile version in Settings.
   • Revert Layout Orders -reverts the order of the layouts, in case you've changed them.
   • Revert Layout Settings - reverts any changes made in Layout Settings.
3. To revert changes made to an item, click the item and then click in the editing area.
4. Click Revert Selected Item Settings.