Context based Block Visibility
Visibility rules let a block show only in the right situations: on certain screen sizes, only to visitors who are signed in (or signed out), or only during certain times and dates. You set them on each block, without writing any code.
Where to find the settings
- In the interface builder, click a block in the preview or in the Block Tree to open its options.
- Open the Section Visibility panel.
Each option is a chip with an eye icon. Click a chip to switch between visible (open eye) and hidden (crossed-out eye).
Show on screens
Hide a block on certain screen sizes. For example, show a compact menu only on phones and a full menu only on larger screens.
| Chip | Screen width |
|---|---|
| Mobile | 600 px wide or less |
| Tablet | 601 to 960 px |
| Desktop | wider than 960 px |
The width is the visitor's browser window, not the type of device. A narrow desktop window counts as Mobile or Tablet.
Show for users
- Hide Logged in to show the block only to visitors who aren't signed in, for example a "Sign in" or "Join now" banner.
- Hide Logged out to show the block only to signed-in visitors, for example a "My account" panel.
Only visible between times
Switch on Only visible between times, then add one or more Time Period entries. Each one has:
- Start Time and End Time (defaults 09:00 to 17:00). The block shows from the start time up to, but not including, the end time.
- Restrict by weekday (optional): pick the days the period applies to. Leave it empty for every day.
If you add several periods, the block shows when any of them matches. For example, you could add Monday–Friday 08:30–17:00 and Saturday 09:00–12:00 for an "We're open, call us now" banner.
Only visible between dates
Switch on Only visible between dates, then add one or more Date Period entries with a Start Date and End Date. This is useful for things like an early-bird offer for your Annual Conference, or a notice for a Spring Workshop. As with times, any matching period makes the block visible. If you set both times and dates, the block only shows when both match.
How the rules are checked
- Times and dates use the visitor's own clock and time zone, from their device.
- Rules are checked in the visitor's browser after the page loads. Blocks with visibility rules generally aren't part of the page the server first sends, so they appear a moment later. Avoid putting your main page heading behind these rules if search ranking matters.
- The rules are re-checked when the visitor signs in or out, resizes the window or moves between routes.
- Visibility controls what's shown. It isn't a security feature. To protect information, use permissions; see Application Access and Permissions.
Turning a block off completely
The eye button at the top of a block's options (Disable this section) switches the block off for everyone. A disabled block shows "(Disabled)" next to its name in the builder and is left out of the published site entirely. It's a handy way to park a block without deleting it.
Testing your rules
- Use the Mobile, Tablet, Desktop and Fluid preview frames to check screen rules.
- In Preview Context Options, choose a User to preview as a signed-in visitor, or a Date to preview a particular day and time. See The Preview Window.
Routes and menu items
Whole routes can have logged-in, logged-out, time and date rules too. Turn on Advanced Options in the route's settings (see Settings Sidebar). Menu items have the same Advanced Options (see Menus Sidebar).