Mobile Homepage vs. Desktop Homepage
Your SNO site is completely mobile responsive and will automatically adjust to the size of the device being used to view the site, but you do have the ability to customize what's seen on mobile versus what's seen on your desktop.
There are two ways to vary how your mobile homepage appears, depending on if your website has been converted to FLEX Pro or not.
Option 1: Mobile Homepage Customization with FLEX Pro
For websites that have been converted to FLEX Pro, the Widget Area Designer (found within the Site Designer tab on the SNO Design Options Page) now provides an option to hide a widget area on mobile screens that are less than 600 pixels wide.
To take advantage of this option, click on the gear icon in the top left corner of a widget area and then click “Hide Widget Area on Mobile Displays.” If you are looking to create a simpler display on mobile, this is how to do it.
With FLEX Pro, you can also create different versions of your website’s header and footer that are optimized for tablet or mobile devices. Instructions on designing those can be found here.
Option 2: Using the Mobile Widget Area
To vary how your mobile homepage appears, you can also use the Mobile Homepage Widget Area.
If your website has been converted to FLEX Pro, you can activate this widget area by going to Appearance -> SNO Design Options -> Appearance -> Set the Mobile Widget Area to “Active."
If your website has not been converted to FLEX Pro, you can activate this widget area by going to Appearance -> SNO Design Options -> Homepage Settings -> Set the Mobile Widget Area to “Active.”
Once you have activated this widget area, it can be found and altered under Appearance -> Widgets in your Widget Control Panel. It works just like any other widget area, by dragging and dropping your chosen widgets into it and saves automatically.
Keep in mind that when you add a widget to this widget area, it immediately replaces your default homepage when viewed on a mobile or tablet device. This means that if you mistakenly add a blank widget to the Mobile Homepage widget area, then you'll have a blank screen on a mobile device when viewing your site. In other words, be intentional when using this feature.
Finally, you'll also want to intentionally choose what items are displayed in your Mobile Menu. This is the little three-bar stacked sandwich you see at the top right of the mobile homepage. Its colors are controlled in the SNO Design Options -> Header -> Text Color. Its items are controlled under Appearance -> Menus. Either create a separate menu and assign it to the Mobile Location or just assign a menu that already exists to your Mobile Location.
