Creating a Mobile Experience

By Default, Your website will appear as a scaled version of your desktop site on mobile devices. Use the Mobile Layout Builder to build an optimized mobile mode.

Mobile Editor

Access your Mobile Layout Builder

To begin editing your mobile layout:

1. Activate the Mobile Layout Builder. 
2. Click the top center of the page where it says "Mobile Phone Layout"
3. You are now in the Mobile Layout Builder. 
4. Click "Save" to save changes made to your mobile mode.

Changes made here will effect the look of your page on mobile devices.

Deleting objects in mobile mode will also delete them in desktop mode.

Turn on your Optimized Mobile Layout

With your mobile mode set up, You will need to set your page to display the mobile layout on mobile devices. 

1. Click Settings in the left Side Bar.
2. Click the "Mobile" tab.
3. Toggle on "Use Mobile Layout" to turn on your optimized mobile layout. 
4. Click "Save" to save the changes.
5. Head to your site on a mobile device to see your optimized mobile layout appear. 

Resetting Mobile Layout  - Whole Page

To reset your mobile layout to appear as desktop mode. 

1. Click Settings in the left Side Bar.
2. Click the "Mobile" tab.
3. Click "Yes, Reset This's Pages Mobile Layout" 
4. Click "Save" to save the changes.
5. Your mobile mode will now appear with the same layout as desktop mode. 

Resetting Mobile Styles  - Single Object

To reset the mobile style of a single object.

1. In Mobile Layout Builder, Select the object to be reset.
2. Click the "Advanced" tab in the Editing Menu.
3. Click "Reset Mobile". 
4. Select "I Want To Reset Mobile Styles". 
5. Click "Reset" To reset the mobile styles of the selected object.
6. Click "Save" to save the changes.
7. The object will now appear in the exact way as it does on desktop mode. 

Hide a Section in Mobile Layout

1. In Mobile Layout Builder, Select the Sections tab in the Sidebar on the left of the page.
2. In the bottom left of each Section thumbnail, click the dropdown icon.
3. Select Hide. 
4. Click Save to save changes to the page.

Reorder a Section in Mobile Layout

Sections can be reordered in Desktop Layout only. The Mobile Layout will have the same Section order as Desktop Layout. 

Mobile Layout with Auto Column Layouts

Auto Column Layouts simplify the process of editing an optimized mobile experience by dynamically adjusting the mobile view based on the settings in desktop. You can then fine tune settings such as Padding, Space below, and Column height to get an even better mobile experience. 

Apply Section Padding in Mobile Layout

Section Padding can be used to provide space around the Columns within a Section.

1. Select a Section in Mobile Layout.

2. Click "Section" in the top left corner of the Section to open up the Editing Menu.

3. Within the Section tab, move the Padding slider to increase or decrease the Sections's padding. 

4. Click "Save"  to save changes to your page.

Apply Padding to Columns in Mobile Layout

Padding can be used to provide space around objects within Columns. Padding adjustments in Mobile Layout will not sync to Desktop Layout.  

1. Ensure the Column is set to Auto Layout. 
2. Click "Column" in the top left corner of the Section's column to open up the Editing Menu.
3. Within the Column tab, move the Padding slider to increase or decrease the Column's padding. 
4. Click "Save" to save changes to your page.

Add space below objects in Mobile Layout

Objects in an Auto Column Layouts have a Space Below tool at the bottom left of the object’s wireframe.

1. Select an object in an Auto Column Layout while in the Mobile Layout editor.
2. Click on the Space Below icon on the bottom left of the object's wireframe.
3. Drag up or down to add or reduce the vertical space below the object.

Sorting objects in Mobile Layout - Auto Column

You can sort objects vertically within Auto Columns using drag and drop or the Move controls in the Size and Position tab of the Editing Menu.

1. Select the object you’d like to reorder and drag into position in Mobile Layout. 

2. A visual representation of the select object will help you with positioning.

3. Release the object to add it to the new position.

4. Click "Save" to save changes to your page.

Hide objects in Mobile Layout - Auto Column 

Objects within an Auto Column Layout cannot be hidden in either Desktop or Mobile Layouts. You can hide an entire Section that contains a Columns in Auto Layout. 

Mobile Layout with Manual Column Layouts

Manual Column Layout allow you to move and layer objects freely within the column. Manual layouts often require additional mobile layout adjustments to get the best mobile experience.

Using the Squeegee tool - Manual Column

The Squeegee tool allows you to move all objects below a horizontal plane up or down to create or remove space. 

1. Select an object.
2. Click on the Squeegee icon on the upper left of the object's wireframe.
3. Drag up or down to create or close space.

Sorting objects in Mobile Layout - Manual Column

You have freeform placement of objects within Manual Column Layout. 

1. Select an object. 
2. Drag and drop where you would like it to appear. 
3. Click "Save" to save changes to your page.

Hide objects in Mobile Layout - Manual Column

Hiding objects in Manual Columns within Mobile Layout can be helpful when they do not fit your mobile experience as nicely as they fit your Desktop Layout experience. 

1. Select the object that you want to hide while in Mobile Layout.
2. Go into the “Size and Position” tab of the Editing Menu.
3. Click on the Show/Hide icon to hide or unhide the object.
4. The opacity of the object will change in edit mode to confirm it's hidden state.
5. Click “Save” and “View Live” and notice that object is no longer present on the page.

Learn to group objects in either Auto Groups or Manual Groups together to manipulate them as one.