Figarts is now Pluginette. Enjoy fast support and high quality products.

July 14, 2017

Add Transparent Background to Site Origin Rows

[et_pb_section bb_built=”1″ admin_label=”Section” _builder_version=”3.0.47″][et_pb_row admin_label=”Row” _builder_version=”3.0.47″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”3_4″][et_pb_text admin_label=”Text” _builder_version=”3.0.51″ text_font_size=”20px” background_layout=”light” text_orientation=”left” border_style=”solid”]

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


Copy & Paste This Code

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

  position: relative;
  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.

[/et_pb_text][/et_pb_column][et_pb_column type=”1_4″][et_pb_sidebar admin_label=”Sidebar” orientation=”right” area=”sidebar-1″ _builder_version=”3.0.51″ /][/et_pb_column][/et_pb_row][/et_pb_section]