Desktop, tablet, mobile views

Creating a totally unique design is very rewarding. You get to tailor your site perfectly to your brand for maximum impact.

When creating a custom layout you will work in a single initial view - desktop, tablet or mobile. From here you will need to craft the design for each of the other views in order to have a fully responsive website. For example, if you have created your desktop view you will need to still create the tablet and mobile displays. 

We have some time-saving tips for doing this so you can ensure your custom design comes together in no time.


Step 1. Desktop, Tablet & Mobile Views

You can preview the way your site looks on each desktop, tablet and mobile by toggling between each of the device views at the top of the editor.


Step 2. Copy Styles

You will notice that the two views you have yet to design look less than desirable.


This is quickly and easily fixed by copying the styles from the view you have already designed. Under the section properties drop down you can copy in the layout from another view.

So for example, if you have designed the desktop view then you can 'Copy in Desktop Styles'. This will mean you have a layout that you can easily adjust to suit. Quick note, you will need to do this for each section on the page you would like to adjust.


Step 3. Adjust the Layout

With the new view copied, you can now work at optimising the design for the new view. Simply move and resize your images and text to best suit. You can even change the height of sections 

It should be noted that layout adjustments will be unique to each view, however, the content of each layer (e.g. the text content or images) will remain consistent across all views. This means when you need to update any text you only need to do it once not many times.


Final Notes

You can repeat these steps independently for each section and if you do radical design changes you can come back and do this again. 




Powered by Zendesk