Get The Plugin
Account Login

Divi Hacks Plugin

Examples & Documentation

Parallax Overlays

These classes will allow you to have a background overlay on parallaxed background images. Plus there’s some other cool classes to give you additional overlay options.

classes

  • gradient-overlay
  • gradient-overlay-reflect
  • gradient-overlay-rotate-90
  • gradient-overlay-rotate-180
  • gradient-overlay-rotate-270

Usage

Add any one of the classes Section, Row, Column, or Module Settings > Advanced tab > CSS ID & Classes > CSS Class.

Use with

These classes work best on Sections, although, you can use them on rows, columns, or other modules, you just might not get the best experience. 

Design

Set the background image and turn on parallax.

Configure the overlay at Section, Row, Column, or Module Settings > Content Tab > Background

Make sure to set BOTH the background color and the background gradient.

Examples

This is a parallax gradient on a Row

This is a CTA module


gradient-overlay-reflect

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More
?

gradient-overlay-rotate-90

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

?

gradient-overlay-rotate-180

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

?

gradient-overlay-rotate-270

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.