View mode slider and toggle

‘View mode slider

The ‘View mode slider’ allows you to see how your content looks at different device widths so that you can see how your content will look when viewed on desktop computers, tablets and mobiles.

For instance, when I open my project on my computer in Elucidat it will show at ‘Desktop’ view:

…if I want to see how the page will look at ‘Mobile’ view I press this button:

…then I drag the ‘View mode slider’ to the left so that it is in ‘Landscape and Tablet phone’ view:

…my content will now resize to show how it will look on a Mobile:

View mode toggle

You may have noticed these controls when you’ve been editing:

This element is called the ‘View mode toggle’.

The ‘View mode toggle’ has two purposes.

Firstly it allows you to identify which device sizes you are currently making changes on.

For example, at the moment I’m in Desktop view and looking at the editing options for my background colour.

As you can see, all of the device sizes are currently highlighted:

This means that if I currently make a change then this will be visible in all of the device sizes.

To show this, I’m going to recolour my background and save the change.

Now if I look at all of my view modes, you can see that the change has occurred in all of them.

Tablet view:

Mobile view:

The second use of this control is that it allows me to pinpoint exactly what changes I would like at different device sizes.

For instance if I take the above example, what if I wished for my change to only be visible in the ‘Desktop’ view.

All I need to do is make sure that only my ‘Desktop’ icon is highlighted, and that the other devices sizes are not like so:

You can toggle devices on and off by clicking the icons.

Now that I’ve set this I can make my edits, I’m going to change the colour of my background (this time I’ll change to red), and then save.

Now if I move between my view modes you can see that the background colour has only been changed in my desktop view mode.

Desktop view:

Tablet view:

Mobile view: