How to edit visibility options
The Visibility section, found within the Advanced tab, enables you to control when rows, columns, or modules are displayed in your layout, using breakpoints and conditional logic.
Module
Row
Column
Breakpoint
By default, every row, column, and module is visible on every device size. You can use the Breakpoint setting to hide individual rows, columns, and modules for certain device sizes.
Device Toggle Icons
Use the device toggle icons to easily control the visibility of rows, columns, or modules across different devices. Click the device icon to toggle between "display" (blue) and "hide" (gray) for each device type.
Extra Large Device: This setting controls the element's visibility on desktop devices.
Large Device: The element will be visible or hidden for small desktop computers, laptops, and landscape tablets.
Medium Device: The element will be visible or hidden for devices like small tablets.
Small Device: The element will be visible or hidden for devices like portrait tablets, and smartphones.
Multi-selection
By default, all device toggle icons are enabled (blue), meaning the row, column, or module is visible on all devices. You can select multiple devices at once, giving you flexible control over when your content is displayed.
You can customise visibility for specific devices. For example, you can:
- Display a row on Extra Large, Large, and Small devices, while hiding it on Medium devices.
- Hide a Heading module on Extra Large and Small devices, while displaying it on Large and Medium devices.
Stacking Order (Columns only)
This option only applies to columns, allowing you to reverse the stacking order of columns for medium and small devices. You can choose from the following options:
Disabled (Default)
Small
Medium
Small & Medium
Display Options
Customise the visibility of your rows, columns, and modules based on specific conditions.
Options
- Never: Only visible to the user editing the page, ideal for unfinished designs.
- Always: Visible at all times for every user.
- Logged Out Users: Only visible to users who are not logged in.
- Logged In Users: Only visible to users who have logged in to your website.
-Conditional Logic: Show or hide rows, columns, or modules based on specific conditions
Display Icon Indicator
When you restrict the display of a row, column, or module, a visual indicator (eye icon) appears in the EE Builder UI overlay. The icon's color changes based on the chosen display option, providing an easy way to identify the visibility status of your content while editing your layout.
When you limit the display of a row, column, or module using the Never, Logged Out Users, or Logged In Users options, a blue Eye icon will be displayed in the EE Builder UI overlay.
- When you limit the display of a row, column, or module using the Conditional Logic options, a red Eye icon will be displayed in the EE Builder UI overlay.
