• Overview

    The Mobile Editor shows you a different view of your desktop HTML site. For most elements, you will only be able to make changes to placement and size within the Mobile Editor. For some elements, you will also be able to customize the style.

    You can add elements and update content from the Desktop Editor only. Any changes and updates that you make in the Desktop Editor will be reflected in the Mobile Editor.

    Placement, size and style changes that you make in the Mobile Editor will not affect your desktop site.

     

  • Navigating through Your Mobile Site Pages

    Your mobile site holds the same pages as your desktop site. From Pages in the Mobile Editor, navigate through and arrange your content on your mobile site pages.

    To navigate through your mobile site pages:

    1. From the left side of the Mobile Editor, click the page icon to open Pages.
    2. Click a page title from your list of pages to navigate between pages.

    Your mobile site opens a different page.

    You can also navigate easily by choosing a page from the drop down menu next to Page: at the top left of your Editor.

  • Moving an Element

    You can rearrange your elements within a mobile site page by clicking and dragging an element to another location on the page.

    To see the X and Y coordinates of an element, turn on the ruler guides from the top menu. The X and Y coordinates will appear on the top right of each element when you move your element.

  • Resizing an Element

    You can resize any element on your mobile site except for the mobile menu.

    To resize an element:

    1. Click the element to select it.
    2. Click and hold a resizing handle and drag it into place.

    3. Repeat with the other resize handles.

    Your element’s size changes.

    You can see the width and height of an element by turning on the ruler guides from the top menu. When resizing your element, the width and height of the element will appear on the top right of the element.

  • Hiding an Element

    You can hide any element on your mobile site.

    To hide an element:

    1. Click the element to select it.
    2. Click the hide  icon.

    Your element is hidden.

    You can also hide your items by pressing Delete or Backspace on your keyboard.
    You can find your hidden items by first clicking Add Mobile Elements from the left side of the Mobile Editor, and then click Hidden Items.

  • Moving an Element Forward or Backward

    You can move an element forward and backward so that it appears on top of other elements or behind other elements on your mobile site.

    To move an element forward or backward:

    1. Click the element to select it.
    2. From the pop-up that appears, click the Bring forward or Send backward icons.

    Your element moves forward or backward.

  • Mobile Text Settings

    In addition to rearranging, resizing and hiding text boxes and buttons, you can scale the size of the text up or down, and adjust the text brightness.

    To scale your text:

    1. Click a text box or button to select it.
    2. From the pop-up menu that appears, click the Scale Up (A+) or Scale Down (A-) icons. You can use also use the slider or enter a font size (in pixels) in the field from Text Settings to easily adjust your text size.

     
    Font Size refers to the most commonly used font size in the selected text box. Other font sizes will change in the same ratio
     
    Note that all text in the text box is scaled together.
     
    We recommend to keep your text large to keep it readable.
     

    To adjust text brightness:

    1. Click a text box or button to select it.
    2.  From Text Settings, under Brightness, use the slider to adjust your text brightness. Instead, you can also enter a specific value (as a percentage) in the field.

    The text's default brightness is set to 100%. To darken the text, enter a number below 100. To brighten the text, enter a number higher than 100.

    Make sure there is a sufficient contrast between the text and the background.

     
  • Hiding Specific Pages on Mobile Version

    To hide a page from your mobile menu while showing it on your desktop version:

    1. From the left side of the Mobile Editor, click the page icon to open Pages.
    2. Next to the page you would like to hide, click the wheel icon to open Page Settings.

    3. From Page Settings, check the checkbox next to Hide from mobile menu.

    To show a page only on your mobile menu while hiding it from your desktop version, go to the desktop version of your site and click Hide from menu from the page's settings. Then, go to the mobile version of your site and uncheck the checkbox next to Hide from mobile menu from the page's settings.