Add Transparent Background to Site Origin Rows

I want you to know that you can add color overlays to Site Origin row. That is, you can add transparency to your row background images. Now that you know, let me show you how.

Add CSS class to Site Origin Row

I am sure you know how to do this but in case you don’t. You can call this class any name you like. I have decided to name mine

be-transparent

Copy & Paste This Code

You can paste this code in your style.css or in Appearance>Customiser>Custom CSS.

.be-transparent.panel-row-style{
  position: relative;
}
.be-transparent.panel-row-style::before{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1
}
.be-transparent .panel-grid-cell{
  z-index: 2
}

That’s it.

If you want to know how you can add gradient, subscribe to my newsletter and I will send it right to your inbox.

Thanks for reading.