Tablet and Mobile layouts are created for each page of the project individually. Once enabled, you just need to reconfigure the same widgets you created on the desktop version within the corresponding dotted frame. This allows visitors using a tablet or mobile device to view an adjusted version of the page instead of the automatically scaled desktop layout shown by default (when Tablet of Mobile views are disabled).
The content of your widgets is synchronized between desktop, tablet, and mobile layouts so any revisions to text, pictures, links, or videos register in every version. However, widgets must be positioned within the dotted frame and their attributes—such as size, color, font styles, animations, etc.—must be changed independently in the desktop (1024 px), tablet (768px), and mobile (320px) layout.
All widgets exist in all three layouts. When you add a new widget to the mobile layout a hidden copy is created on the desktop. To alter the content between the layouts—e.g., to create different texts for desktop and smartphone visitors—you can copy the widget, edit it separately, and then hide the duplicated widget for a particular layout.
If a widget is used in different layouts simultaneously, you will see a Desktop or Mobile icon when you hold your cursor over it. For example, if you are editing the desktop version and see the Mobile icon next to a widget, this means it also exists in the mobile version of your project. Click this icon to view the widget in your mobile layout. This feature allows you to easily track changes in case of unexpected consequences to your desktop or mobile layout.
Note: when creating mobile or tablet layouts all animated widgets will appear static. Use Shift+Cmd+C/V on Mac (Shift+Ctrl+C/V on Win) to copy animation attributes from On Click and On Load desktop widgets and apply them to mobile or tablet widgets.