Mobile Editing - Modifying your Pages for Mobile Devices
Before you make any mobile edits - Build Your Foundation First
Your content will automatically be mobile-optimized and should look great on mobile phone and tablet across your pages as-is*. Therefore, in most cases there is no need to "edit" your tablet or phone view*.
The above mentioned applies when you follow steps at the beginning of your build - by BUILDING YOUR FOUNDATION with setting up the three GLOBAL STYLING Steps. Most Importantly Global Styling Step 3 - Text Styling in Desktop AND Mobile. Please see this article and apply before making any Mobile Edits:
Please also see these articles:
However, there may be a section/block here or there that you'd like to tweak to perfect the viewing experience for your on-the-go visitors. With ShinePages you can edit your desktop, table and mobile views individually to maximize your user's experience.
Please make sure you: 1) Watch the video below 2) Follow the instructions below BEFORE you attempt to edit the mobile view of your site and ensure that your desktop design is COMPLETE before doing any form of mobile view editing.
IMPORTANT NOTE:
ALWAYS DESIGN ON DESKTOP VIEW FIRST! ONCE YOU HAVE YOUR DESKTOP VIEW FINALIZED, THEN YOU CAN TWEAK SELECTED MOBILE/TABLET VIEWS AS NEEDED OR DESIRED.
DO NOT "EDIT" DIRECTLY IN MOBILE OR TABLET VIEW WITHOUT FIRST CREATING A "MOBILE-ONLY" VERSION OF THE BLOCK.
Why? Because any edits made to "shared-view" blocks will be made across ALL views and will impact your original Desktop design. (Note: ALL content is "shared-view" as standard when created or edited within the Desktop view)
Therefore, if you wish to make specific changes ONLY to the mobile view or tablet view (and you do NOT want it to affect the Desktop view) - you must first copy the original "shared-view" block and then drag and paste it into the Mobile-editing view, thus creating a duplicate "mobile-only" block. (watch the video for instructions)
You can then hide the original "shared-view" block by clicking on the Tablet and/or Phone icons to the left of the block in mobile-editing mode. Now any updates made to the "mobile-only" block will ONLY be made to the mobile version.
Another option (if you don't need to make big changes to your mobile view) is to keep the "shared view" block as-is and simply:
1) Adjust it by making it "stretched" or turning off the "stretched" option
2) Selecting "Reverse column order" or de-selecting this option OR
3) Drag a widget onto the mobile-editing view, thus adding a "mobile-only" WIDGET.
See below:
NOTE: We recommend keeping the number of these "mobile only" blocks to a minimum, as it can get a bit overwhelming to deal with multiple versions of content for multiple blocks on your pages. Plus - if you need to make content changes in the future, you will need to make those edits in all versions of that block vs. only having to make it once in Desktop view and having it automatically show up properly on Mobile and Tablet.
There should be very little need to "tweak" blocks or make "mobile-only" versions for Mobile/Tablet if the Text and Heading widgets across your pages are tied to Global Text Styling (ie: on-page text styling edits have not over-ridden those settings) and the Desktop and Mobile Global Text Styling settings have been sized appropriately.
AGAIN - Please see the below articles FIRST with important information:
