Today, we are going to talk about gradient and how to set gradients using Divi Fullwidth Header Extended Module. Gradients are making a comeback. For some time, we see many websites that fulfill their web design with a color gradient. This technique is interesting because it allows to give a depth to the site and a universe with different connotations associated with warm or cold colors quickly.

We did 3 examples for you to take a look and how we did that. You can view the demo here.

Gradient type: Left to Right

Gradient type: Diagonal Top Left to Right Bottom with background images

Gradient type: Diagonal Top Left to Right Bottom

Get Started

Make sure you toggle on “Overlay Gradient” and there are 5 types of gradients to choose from:

  • Left to Right →
  • Top to Bottom ↓
  • Radial ○
  • Diagonal ↘
  • Diagonal ↗

Choose one that suits your design. You will notice that the option First Gradient Color and 2nd Gradient Color will appear after switching on the “Overlay Gradient“. You can set with rgba(with transparency) or hex color.

To have a background image, you can just simply upload to the background image and you’re good to go! It’s that easy with Fullwidth Header Extended, now you can enjoy and create something awesome!

Since background video are set in Fullwidth Section Setting, just go ahead and upload your video or paste your URL and it will work with overlay gradient as well. Let me know what do you think about this by leaving a comment below.

Pin It on Pinterest