Skip to content

Black Friday 50 % slash sales is here! Use Black1122 as coupon code to get 50% off on any of our products.

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.

One response to “Add Transparent Background to Site Origin Rows

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.