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”]