May 31, 2023

Hide or show elements in Breakdance by Device

Play Video

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

  1. 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.
  2. 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.
  3. Set Up Mobile Visibility:
    Repeat the process for the mobile visibility. This time, under “Hide”, choose “Desktop”. Leave all the mobile breakpoints unchecked.
  4. 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.

Required Resources

Breakdance Builder Logo
Free Options
Credit to Breakdance
The Breakdance YouTube channel serves as a practical resource for users of their WordPress website builder. It features in-depth tutorials, where they demonstrate the process of creating a website from the ground up. The channel emphasizes hands-on learning, making it an essential tool for both beginners and experienced users aiming to maximize the capabilities of the Breakdance platform.
Hide or show elements in Breakdance by Device
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.