---
title: How To Control The Visibility Options For Essential Blocks?
description: "Learn how to use Essential Blocks' Visibility Options to control opacity, position, overflow, and z-index, creating dynamic and interactive web pages effortlessly."
url: "https://essential-blocks.com/docs/configure-visibility-options/"
updated: "2024-05-20"
category: Configurations
tags:
  - block
  - block library
  - blocks
  - Essential Blocks PRO
  - WordPress
---

# How To Control The Visibility Options For Essential Blocks?

**[Essential Blocks](https://essential-blocks.com/) Visibility Options** feature lets you position and reposition separate blocks, overflow, and adjust opacity and comes with a lot more options. With these, you can create an interactive web page with blocks and sections where you can showcase different content on positions you prefer.

Follow this step-by-step guide to learn how to utilize the control and design an interactive page.

## **How To Configure EB Visibility Options?**

The Visibility control works for any blocks by Essential Blocks. To make this work and configure, add a new post or page or open an existing one. Then, add or utilize multiple blocks by Essential Blocks. Once you select a block and tap the ‘**Advanced**’ tab from the right menu, you will see the ‘**Visibility Options**’ section.

![Visibility Options](https://essential-blocks.com/wp-content/uploads/2024/05/image-4.png)

For example, we have added the ‘**Advanced Heading**’ block, and we can see it upon going to the ‘Advanced’ tab.

### **Explore Visibility Options**

The section comes with four different options: **Z-Index, Overflow, Opacity,** and **Position**. However, Z-Index & Overflow are free features but you need to [**install and activate Essential Blocks PRO**](https://essential-blocks.com/docs/install-activate-essential-blocks-pro/) to use the Opacity and Positions options.

#### **Understanding Z-Index Values**

The Z-Index defines the stack order of an element with values set. However, this is dependent on the options you choose from Positions. For example, if you set the position ‘**Fixed**’ and choose to display a block on top of another block, you need to set the value of the primary block higher than the secondary block, as shown below.

#### **Overflow Options**

With the Overflow options, you can choose how much space a block’s content should occupy on a page and how you want to display it. This section comes with 5 different options: Default, Auto, Hidden, Visible, and Scroll.

![Visibility Options](https://essential-blocks.com/wp-content/uploads/2024/05/image-4.gif)

For example, we have added content under a block. Then, as we select the position as ‘**Hidden**’, the extra length of the content gets hidden. If you want it to overflow and get visible, you just need to select ‘**Visible**’.

#### **Opacity Control**

With the opacity control, you can set how to highlight a block’s content on a page. The more you set opacity values, the more exposure a block will have on your page.

![Visibility Options](https://essential-blocks.com/wp-content/uploads/2024/05/image-5.gif)

#### **Position Setting**

With the position settings, you can set how your specific block’s position will be displayed on the web page. It comes with five options: **None, Fixed, Relative, Sticky,**and**Absolute**. Once you set a position, it will work with the other blocks on the page.

For example, if you set the position of a block as sticky (Advanced Image here), it will be sticky on the page once you scroll. However, if you want to display that particular block over other blocks as a sticky one, you need to set the Z-Index value for that higher than the other blocks.

That is how easily you can use **EB Visibility Options** and utilize dynamic control on your web pages.
Getting stuck? Feel free to [contact our support](https://wpdeveloper.com/support/) for further assistance.