What is the tutorial about?
Dynamically hide or show elements in Breakdance on your website depending on the device used by the viewer. Whether you want to display a certain element only on desktop and hide it on mobile, or vice versa, this tutorial has got you covered. It’s a valuable resource for those aiming to create a seamless user experience across all devices, ensuring that your website looks amazing no matter which device it displays on.
Tutorial Steps
- Add Two Headings:
Start by adding two headings to your page. For instance, you can label them as in the video “This shows on desktop but not mobile” and “This shows on mobile but not desktop”. To differentiate them, you can color them differently. - Set Up Desktop Visibility:
Click on the element you want to show or hide. Go to the settings tab and select “Hide on Breakpoint”. Under “Hide”, choose the breakpoints where you want to hide this element. For desktop visibility, choose all breakpoints except for desktop. - Set Up Mobile Visibility:
Repeat the process for the mobile visibility. This time, under “Hide”, choose “Desktop”. Leave all the mobile breakpoints unchecked. - Preview:
To preview how your elements will look on different devices, use the device dropdown. You can also choose “Inbuilder Preview Hidden” to see how the hidden elements will look on the front end.
Use Cases for this Tutorial
- Responsive Web Design:
This tutorial is for anyone looking to create a responsive website that adjusts to the viewer’s device. - User Experience Optimization:
By showing or hiding elements based on the device, you can optimize the user experience by ensuring that your website displays optimally on all devices. - Mobile-First Design:
If you’re designing with a mobile-first approach, this tutorial will help you hide unnecessary elements on mobile devices.
