The filters control offers the following CSS filters: blur
, brightness
, contrast
, hue
, invert
, opacity
, saturation
, sepia
.
class Prefix_Element_Filters extends BricksElement { // Set builder controls public function set_controls() { $this->controls['exampleFilters'] = [ 'tab' => 'content', 'label' => esc_html__( 'CSS filters', 'bricks' ), 'type' => 'filters', 'inline' => true, 'css' => [ [ 'property' => 'filter', 'selector' => '.css-filter', ], ], ]; } // Render element HTML public function render() { echo '<div class="css-filter">' . echo get_bloginfo( 'name' ); . '</div>'; } }
All sections, rows, columns, and elements already have a CSS Filters control under the Style tab CSS group.