Skip to content
  • There are no suggestions because the search field is empty.

How do I use Visibility Toggles?

Visibility Toggles let you decide whether a block or row appears on mobile, tablet, or desktop, giving you full control over how your site looks on every device.

How do Visibility Toggles work?

Not every layout works well across all devices. You might want two differently sized banners on your Home page, one built for mobile and one for desktop. Or you might have designed a layout for a section of your Product page that you'd prefer to flow differently on tablet than it does on desktop. Visibility Toggles let you set this up without building separate pages for each device.

How do I use Visibility Toggles?

  1. Open BlockLab and select the block or row you want to control. You'll know it's selected once a green/red outline is visible.



  2. Click on the Block tab to target a single block, or the Row tab to target a whole row, including every block inside it.



  3. Find the Devices icons. You'll see three: Mobile, Tablet, and Desktop.



  4. Click a device icon to turn it on or off for that block or row.

When a device icon is highlighted in green, the block or row is active and will display on that device. When it's greyed out, the block or row is hidden completely from that device.

For example, greying out Mobile while keeping Tablet and Desktop turned on means that block will only appear to customers browsing on a tablet or desktop. Mobile visitors won't see it at all.

Tips

  • Use Row visibility when you want to hide or show an entire section at once, rather than adjusting each block inside it individually.

  • Always preview your page on each device after changing a toggle, to check the layout still reads well with that block or row removed.

  • Turning a block or row off for a device does not delete it. You can switch its visibility back on again at any time.