Give Divi’s Header a stunning gradient effect

Eleganttheme’s Divi is one of those WordPress themes, which gives you a lot of freedom when it comes to customizing, adding stuff and experiment around with. With the following code snippet I show you how to create an interesting looking gradient effect on Divi’s Full-Width-Header-Module.

Let’s start

On a Divi page of your choice, use the Divi Builder to create a new Full-With-Section and put in a Full-Width-Header-Module. In the Section Module Settings, all you have to do is put in a nice little css class name under the Custom CSS tab as seen on the image below. I used gradient here.

The Full-Width-Header-Module Settings you can make however you want, put in some text, a nice headline, buttons. However, the only thing: Don’t set any background (image or color) for the Module itself. Don’t !

Now go to the Divi Theme Options, Tab Integrations at Add code to the < head > of your blog,  add the following snippet and hit save:

CSS

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".gradient").mousemove( function (event) {
    var w = jQuery(this).width(),
    pct = 360*(+event.pageX)/w,
    bg = "linear-gradient(" + pct + "deg,#2ecc71,#2980b9)";
  jQuery(".gradient").css("background-image", bg);
  });
});
</script>

 

Now preview your page, if everything is correct it should look something like this (preview not available anymore). If you have any questions, hit me up in the comment section. Source: stack overflow