Register

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.EditMobileLPwithlabels.png

Click here to view the image in full size

A. Switch to the Mobile Landing Page view

  1. On the top menu, click Mobile_icon.png. 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 container.
    • Add Background Image- click to browse and select the background image. 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 container, click a container in the editing area to display and edit the Row settings in the designer's right pane. You can edit the row 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 container, hover your mouse over a container 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. If you want to change the slot orientation of a specific container, you can edit the row settings instead.

  1. On the left pane, in Settings, scroll down to the 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 container, you can edit the row 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 revertsettings.png 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 Row Orders -reverts the order of the rows, in case you've changed them.
    • Revert Row Settings - reverts any changes made to the container in Row Settings.
  3. To revert changes made to an item, click the item and then click revertsettings.png in the editing area.
  4. Click Revert Selected Element Settings.