Hidden Rows and Modules
Changing the Visibility of Page Elements
There are occasions when a module or a complete row need to be temporarily hidden. An example of this is the list of classes on the class list pages like https://www.skc.edu/registrar/fall-class-list/. When these terms are over the list of classes is hidden until the new and updated list has been created during the next school year. Rather than deleting the row that houses this list and recreate it again the following year it is simply hidden from the user until it’s been updated. But, the editor can still see it when they are editing the page.
What Does a Hidden Element Look Like?
Well, it looks like nothing when you are viewing the page as a user. However, once you click on “Beaver Builder” in the black bar at the top of the window, all hidden elements (modules, rows, and columns) are revealed. You can tell that they are hidden when you see a blue “eye” icon in the upper right corner of the blue outline when you’ve hovered over the element.
How to Change the Visibility of a Hidden Element
Modules
To change the visibility of a module, you will be accessing the “Advanced” tab in its editing dialogue. Like all modules, once the blue outline is surrounding the module, click inside it to bring up the dialogue. The Advanced tab is on the far right of the dialogue. On some modules that have several tabs, you will find the Advanced tab hidden in the more section denoted by the ellipses (...). Once in the Advanced tab, locate the Visibility Section.
In the Display field you’ll find a number of choices, but the only ones that you’ll need to worry about are “Always” and “Never” these make the visibility Always visible or Never visible unless you are viewing the page as an editor.
Rows
What are Rows?
Web pages are organized into rows and columns. The modules sit within this gridwork of rows and columns. There are times when you’ll need to change the visibility of an entire row that houses multiple modules. For instance, there’s a row that contains a Heading, a Text module, and a Gallery, and they only need to be visible the first week of each month. In this case, rather than changing each module’s visibility, we can change the visibility of the entire row.
Changing a Row's Visibility
To get to a row’s editing dialogue, it’s no different than a module, except that you will be looking to the outside of the modules. Scroll to the area on the page that has the multiple modules that you’d like to hide (or make visible) and if you hover one of these modules you’ll see they have a blue outline, but outside of that along the left and right boundaries of the page will be a grey outline. Now move your mouse off of the module into the space between it and the right or left edge of the page and that grey outline will turn to blue. Unlike modules where you can just click inside of them to begin editing you need to find the upper left corner of the row. When the row’s outline turned from grey to blue you’ll see in the uper left corner a blue box with a wrench icon. Hover over this wrench icon to access the row’s editing dialogue by clicking “Row Settings.”
In the row settings dialogue, just as the module dialogue, access the Advanced tab and change the visibility as required.
Don’t Forget to Save
Save the module or row, finish editing the rest of the page and click “Done” and “Publish” to apply the changes to the live website.