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

.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; } }

[sc name=”customcss”]

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

[sc name=”learn css”]