The editor allows for the design of truly responsive websites, optimizing them for the three most important viewports - desktop, tablet and mobile. These viewports can be uniquely designed and contain unique content for the particular viewport without ever compromising the source code which remains a single page of HTML. Watch the video below for a quick tutorial on the topic!
1. How does it work?
One of the main differences between these viewports is their width. The tool makes it possible to design a website that looks good across the different viewports as it is possible to adjust the columns without changing their content.
You can change between viewports by selecting one of the three different icons on the top of the editor interface.
2. Column width change
What may look well designed on the desktop view may look poor on the mobile device view. Therefore, in order to keep the images visible and the text readable, it is important to adjust the column width between viewports to improve the user experience. To an extent, this happens automatically based on responsive design. However, you have the option to further customize column width based on viewport if you think a different width works better for your content.
3. Hiding Modules
Sometimes it makes sense to hide specific elements in different viewports. To do so, click on the row or module you wish to hide, select the Hide on Device option and choose in which viewport you wish to make that element invisible.
For example, this feature can be particularly handy if you wish to display a phone number or some other kind of CTA high on a mobile page but do not wish for it to appear on the desktop version. As behavior on mobile devices is often different than when using websites on desktops, this feature is truly helpful for driving conversion.
Once you have enabled that option, a small symbol will show up in front of the viewport.
Please note, you can't hide elements from the view in which you are working currently. e.g. If you are in Mobile view, you can't hide elements from Mobile view. To hide something from Mobile view, you should edit the element from within one of the other views.
4. Global Styling
One way to ensure that the website is optimized for all the viewports is by defining global styling per viewport. This unique characteristic means you can differentiate text sizes, button sizes and many other elements to suit desktops, tablets and mobiles optimally. To learn more about Global Styling, please click here.