Show or Hide Webpage Elements on Mobile, Tablets or Desktop Computers with EverWeb 2.9
Friday, March 22, 2019 12:29 PM
One of the highlights of EverWeb 2.9 is the ability to show and hide images, videos, text, or anything else on your website depending on the device your visitors are viewing your website on.
For example, if someone visits your website on their mobile device they can see one image, but on a desktop computer they can see a large, more detailed image.
This means that with EverWeb 2.9 you can “turn off” or “turn on” elements depending on the device your visitors are using.
This makes creating Responsive Websites more flexible and easier, giving you further customization options for Responsive EverWeb websites.
On our website, we use this feature to show and hide the Download button in the navigation menu depending on the device the visitor is usiing. When we have more space on a Desktop computer we show the ‘EverWeb’ text next to the logo in the top left and the Download button. While on a mobile device, you will only see the navigation hamburger menu.
How to Show or Hide Elements on Different Screensizes
To show or hide objects on different devices, simply select the object in the EverWeb Design Canvas and go to the Inspector->Metrics Tab. At the bottom you will see the Responsive section where you can select the devices you want the element to appear on.
The ‘Breakpoints...' button lets you customize the how an EverWeb website determines the device. You can click the button and define the maximum width for each device - mobile, tablet, desktop.
When a visitor visites your website from a device smaller than the defined ‘breakpoints’ they will see the element based on your selections.
From within EverWeb, go to the Window menu->Show Breakpoints to see a dotted red line where each breakpoint is set.
When an element is hidden and you resize the EverWeb window the objects will show or hide depending on these settings. You can also view the hidden objects by going to the Window menu and selecting ‘Show Hidden Objects’ to see an outline of any object that is hidden at the current browser width.
Selecting Hidden Objects
If an object is hidden in the Design Canvas you can easily select it by right clicking on the design canvas and selecting “Hidden Objects”. If there are any hidden objects on the page you will see them listed in the Hidden Objects right click menu.
Watch This Feature in Action
See the show and hide objects feature in action in our video tutorial below;
For more step by step videos on creating a responsive website, see our video tutorials section which walks you through creating a responsive website on your Mac.