Here’s how you can make a module stick to the bottom of the hero section.

This would be helpful for things like newsletter signups, special notices (without using a popup), and contact forms.

The object

We’re going for a layout something like this:


The Video

Note: It’s a bit long, but I go through everything for you so you can customize the CSS yourself if you need to.


The classes

This time, you need to do TWO things haha

Add a custom class (save-the-world) to the section like this:

And add a custom class (overlay-module) to the module you want to overlay like this:


The css {
  padding: 0;
  height: 40vw; } .et_pb_row {
    padding: 0;
    height: 40vw;
    width: calc(100% - 120px); /* customizable - was originally 80% */
    max-width: 100%; /* customizable - was originally 1080px */ } .et_pb_row .et_pb_column {
      position: relative;
      height: 40vw;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; } .et_pb_row .et_pb_column .overlay-module {
        position: absolute;
        bottom: 0;
        right: 0;
        height: auto;
        width: 25vw; /* customizable */
        padding: 1.5rem; /* customizable */

@media all and (max-width: 980px) { {
    height: auto; } .et_pb_row {
      height: auto; } .et_pb_row .et_pb_column {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        height: auto;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end; } .et_pb_row .et_pb_column .et_pb_module {
          margin-bottom: 0; /* customizable */
        /* if you're not using the code module, you can change the .et_pb_code to something else (like .et_pb_text) */ .et_pb_row .et_pb_column .et_pb_code {
          padding-top: 60px; /* customizable */
          padding-bottom: 30px; /* customizable */
          width: 100%; } .et_pb_row .et_pb_column .overlay-module {
          position: relative;
          width: auto; } }
To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.
(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)


And you are done! Hope this helps you make cool hero sections!

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi



Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

You will also get a discount coupon in your inbox as soon as you sign up!

Photo by 35mm on Unsplash