Visual

Allows you to set visibility settings on blocks.

Z-index

The Z-index property only applies to positioned elements, that is blocks that have a relative, absolute, or fixed position.

It might not seem so obvious, but HTML elements are generated in a 3D space. Aligned on the x-axis and y-axis, elements can also rest on the z-axis.

The Z-index property defines the order of the elements on the z-axis.

The higher the number, the higher the item is in the stack and therefore closer to the screen surface.

When the Z-index property for the parent of a block is set, its children cannot be stacked above or below that level (relative to the Z-index context of the parent).

Modify/Reset
  1. Select a block

  2. Open the Block Inspector

  3. Open the Design tab

  4. Open the Layout tab

  5. Open the Visual tab

  6. Find Z-index

  7. Enter the desired z-index value

  8. Click dot to reset

Visibility

The Visibility property defines the visibility of an element. It can either be visible or hidden.

In most cases, even when the element is not visible, its location is preserved. Check the Display: none property to completely hide your block.

Select/Unselect
  1. Select a block

  2. Open the Block Inspector

  3. Open the Design tab

  4. Open the Layout tab

  5. Open the Visual tab

  6. Find Visibility icons

  7. Select appropriate options (visible, hidden)

  8. Click option to unselect

Overflow

The Overflow property defines how the web browser should behave when content is larger than the space reserved for it.

Overflow defines whether content larger than the placeholder is still visible, if it is inherited, auto, visible, hidden, scroll, scroll-y, scroll-x.

Inherited Takes the display value of the parent.

Visible The element is fully displayed, even if it exceeds the height defined for its block, at the risk of colliding with the remaining elements.

Hidden The content that exceeds the placeholder is not displayed and can not be accessed.

Scroll, Scroll Y or X The overflowing content is hidden but it is possible to make it appear by using the scroll bars displayed by the browser.

The scroll option is an interesting solution if you want to save space.

  • Select a block.

  • Open the Block Inspector.

  • Open the Design tab.

  • Open the Layout tab.

  • Open the Visual tab.

  • Find Overflow.

  • Select required Overflow option (inherited, auto, visible, hidden, scroll, scroll-y, scroll-x).

  • Click dot to reset.

Last updated