Enable the Divi Builder for your post, then go to Divi Post Settings and set the Page Layout to “Full Width” and Post Title to “Hide”, then add the Fullwidth Header module in a fullwidth section having 0 padding.

The most important settings for this effect are the fullscreen mode, you need to enable it in the Fullwidth Header Module Settings, and the background color. The rest of the settings are totally up to you. Personally, I like blue and yellow colors, so, I’ve chosen dark blue color for the background and yellow for the grid ( grid color is set in the JS code below ).

Add the grid_bg_effect_container id to Fullwidth Header Module Settings -> Custom CSS -> CSS ID field. If you already have an id assigned to the Fullwidth Header module then you shouldn’t add another one because an element must have only one id assigned to it, in such a case you will have to find the grid_bg_effect_container id in the JS and CSS snippets below and replace each and every instance of it with your id.

This is the JS code snippet for the animated grid background effect. You can set the grid row and column numbers, size of squares, make grid color static or animated, change speed of animation, etc (see highlighted and commented lines in the code below).

<script type="text/javascript">
/*  Animated Grid Background Effect */
(function($) {

       /* insert canvas inside the fullwidth header container */
       $( "#grid_bg_effect_container" ).prepend( "<canvas id='grid_bg_effect'></canvas>" ); 

(function(main) {
    main();
  })(function() {

    'use strict';

    var c = document.getElementById('grid_bg_effect');
    var ctx = c.getContext('2d');
    var W = c.width = window.innerWidth;
    var H = c.height = window.innerHeight;
    var CX = W / 2;
    var CY = H / 2;

    var Square = function(x, y, size, color) {
      this.x = x;
      this.y = y;
      this.size = size;
      this.color = color;
      this.angle = Math.random() * Math.PI * 2;
      this.resize = 1;
    };

    Square.prototype = {
      constructor: Square,
      update: function() {
        this.color += 1; /* set speed of color change */
        this.angle += 0.08; /* set speed of grid animation */
        this.resize = 1 + Math.cos(this.angle) * 0.2; /* set grid resize scale */
      },
      render: function(ctx) {
        ctx.save();

        /* DO NOT USE THE FOLLOWING 2 LINES AT THE SAME TIME */
          /* ctx.fillStyle = 'hsla(' + this.color + ', 100%, 50%, 1)'; */ /* uncomment this line to enable animated grid color */
          ctx.fillStyle = '#ffcc00'; /* set static grid color here */
        ctx.translate(this.x, this.y);
        ctx.scale(this.resize, this.resize);
        ctx.fillRect(-this.size / 2, -this.size / 2, this.size, this.size);
        ctx.restore();
      }
    };

    var size = 50; /* set grid size */
    var square = null;
    var squares = [];
    var maxCol = 20; /* set grid column number */
    var maxRow = 10; /* set grid row number */
    var x = CX - (size / 2) * (maxCol - 1);
    var y = CY - (size / 2) * (maxRow - 1);

    for(var row = 0; row < maxRow; row++) {
      x = CX - (size / 2) * (maxCol - 1);
      for(var col = 0; col < maxCol; col++) {
        square = new Square(x, y, size * Math.random(), Math.random() * 100);
        squares.push(square);
        x += size;
      }
      y += size;
    }

    requestAnimationFrame(function loop() {
      requestAnimationFrame(loop);

      ctx.clearRect(0, 0, W, H);

      for(var i = 0; i < squares.length; i++) {
        square = squares[i];
        square.update();
        square.render(ctx);				
      }

    });
    
  });

})(jQuery);

</script>

The canvas positioning needs to be adjusted so that it doesn’t push the Fullwidth Header contents and fits the screen, for this we’ll use the following CSS snippet:

/* Animated Grid Background Effect */
canvas#grid_bg_effect { 
    display: block; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 100%; 
    transform: translate(-50%, -50%); 
}

/* Header contents background */ 
#grid_bg_effect_container.et_pb_fullwidth_header .et_pb_fullwidth_header_container .header-content { 
    background: rgba(0, 0, 0, 0.65); 
    padding: 25px; 
}

That’s all, enjoy the effect. Feel free to share your thoughts and suggestions below and don’t forget to subscribe to updates to stay connected! ;)

Inspired by: Grid