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:

Divi - overlaying module on hero section

 

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:
Divi - overlaying module on hero section

And add a custom class (overlay-module) to the module you want to overlay like this:
Divi - overlaying module on hero section

 

The css

.et_pb_section.save-the-world {
  padding: 0;
  height: 40vw; }
  .et_pb_section.save-the-world .et_pb_row {
    padding: 0;
    height: 40vw;
    width: calc(100% - 120px); /* customizable - was originally 80% */
    max-width: 100%; /* customizable - was originally 1080px */ }
    .et_pb_section.save-the-world .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_section.save-the-world .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) {
  .et_pb_section.save-the-world {
    height: auto; }
    .et_pb_section.save-the-world .et_pb_row {
      height: auto; }
      .et_pb_section.save-the-world .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_section.save-the-world .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_section.save-the-world .et_pb_row .et_pb_column .et_pb_code {
          padding-top: 60px; /* customizable */
          padding-bottom: 30px; /* customizable */
          width: 100%; }
        .et_pb_section.save-the-world .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!

Divi - overlaying module on hero section To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! Start learning proper CSS for Divi

 

Notice

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!

Photo by 35mm on Unsplash