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.

Activate Mobile Layout Builder 

To activate your mobile editing mode:

  1. Click Settings in the left Side Bar.
  2. Click the "Mobile" tab.
  3. Toggle on  "Mobile Layout Builder" to begin designing your mobile layout. 
  4. You can now begin editing your mobile layout. 


Access your Mobile Layout Builder

To begin editing your mobile layout:

  1. First 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. 



Learn to group objects together to manipulate them as one.

Learn how to hide elements of your page for mobile, without deleting on desktop.

Learn how to move all content up and down the page using the Squeegee Tool.

Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!