Desktop View VS Mobile View (Funnels and Websites)

Every site builder has both a mobile and desktop view. Unless you edit an object, the desktop and mobile views will be identical. When you go to review your mobile view of your site, you will likely find some aspects of your site you wish to change or adjust for your mobile viewers. This makes sense, mobile and desktop screens are different sizes so viewing the elements within them will be a different experience.

So we will need to adjust how the mobile view looks to best suit mobile viewers. Let’s learn how to edit your mobile view below.

Mobile Mode

At the top of your editor, you will see a button for Desktop Mode and another called Mobile Mode. Selecting the “Mobile Mode” will toggle to the mobile view editor of your site. All Website objects by default are mobile and desktop visible. However, you can change this, which will help greatly in some circumstances.

Changing Object Visibility to Mobile/Desktop Only

There will be times where you feel you need a specific section only on desktop or mobile, want to remove elements for a more streamlined mobile view or have a separate section for desktop and mobile views. You can edit the visibility of your sections, rows, columns and elements with the visibility setting.

You can select any object, go to settings, then advanced settings. This is very helpful when optimizing the look and feel of your desktop or mobile views for your site.

After toggling, you will only be able to see the elements based on how you toggle them. So if you removed Desktop, you would only see the element on the mobile editor view on the live mobile view of a website.

Removing a object's visibility on mobile or desktop will also hide the other objects within that object. For example, if you hid a section on mobile, the rows, columns and elements inside that section will also no longer be visible.

Mobile Responsiveness Settings

Within your object settings, you will see mobile responsive toggles that allow you to edit an object's settings unique to mobile or desktop. For example, the image below shows an image element alignment settings. This means you can change how this element looks on the desktop view, then toggle to the mobile view and edit the mobile settings to be unique from the desktop view.

You will find mobile responsive settings like this on several object settings. You can see specific examples of mobile responsive settings in the article, Creating Mobile-Responsive Designs Made Easy - COMING SOON.

Pro Tips for Mobile Mode Editing

There are a number of of tips and tricks to learn when editing your mobile site, let’s check out a few:

1. Finish Desktop Mode First
   1. More often than not, completing a full version of your desktop view of your site makes it easier to edit your mobile view. So get that desktop view looking stellar THEN start working on your mobile view after your desktop view is the way you like it.
2. Mobile Navigation Menus
   1. If you have a site navigation menu, create a Global Section with Mobile-only visibility. This can be added to the mobile version of each of your pages for a clean and consistent look. You can do the same for the Desktop Navigation menu.
3. Duplicate an Object and Change Visibility
   1. If you cannot get a section or object to look good on mobile without editing the desktop view, create a mobile-specific section. You can do this easily with the “duplicate” function. Which will create a copy of the object. Then you can change the visibility of one to desktop only and the new one to mobile only. Now we can edit the mobile one without messing up the desktop. This is great for images.
4. Learn how to see the Mobile View of your Site on Your Desktop
   1. Did you know… you can see the mobile view of your site from your computer? Learn how here.