Tutorial & code

Row Background Blend modes

This row template contains the CSS blend mode info to create some nice blends between Beaver Builder background colors and images.

Minimum BB plugin required:      Saved under:  
Skill level:     Contributor: 

Template Location

Bj Custom Rows Nav 1

Video

Notes

See the Row Background Blend modes template in action.

Code

CSS

.fl-row-content-wrap{
background-blend-mode:multiply; 
}

/*

|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color
|luminosity|exclusion|difference|hue|hard-light|soft-light|color-burn|

Darkening - darken, multiply, and color-burn darken images in their own ways.
Lightening- lighten, screen and color-dodge lighten up the image.
Contrast- overlay, soft-light and hard-light modes play up the contrast.
Comparative - difference and exclusion modes would fall in this category.

https://dev.opera.com/articles/getting-to-know-css-blend-modes/
*/

You can support my work by buying the tools I use through my affiliate links:

Exclusive 25% Off These Two Lifetime Deals:

MainWP.   Discount code "digitalfreedoms"
WP Code Box.  Discount  code "beaverjunction"

--------------------------------------------------------------

WP Rocket | ShortPixel | Beaver Builder |

Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.

Leave a Comment