How to Create a Divi Hero Section with Opt-In and Video Background

Make a Full Width Divi Hero Section with Opt-In and Video Background

Proven Hero Section with Email Option Form built in Divi

Roughly few weeks back I was developing something for one of my friends and he wanted to have a hero section similar to famous Create and Go hero section. I literary went on the website itself and have rebuilt this awesome full width video background opt-in hero section. 

Create a New Section, Single Column Row and Follow Tutorial Below

Once you’ve created single column row, let’s start by adding Email Opt-In module, next we gonna add Text module which we gonna use to load down arrow animation and finally we will need a Code module which we gonna use to load custom CSS.

Edit Section and Add a Video Background

We will continue by editing a section. Here we will first add a video background by getting in Section Settings> Content>Video here select Insert from URL, and simply copy your video URL and Insert into post.

Next, we will add a CSS class to the section by going into Section Settings>Advanced>CSS ID & Classes and here under the CSS Class add a class cag-hero-section.

Copy Custom CSS Snippet in to Code Module

Before editing email opt-in and text module we first want to apply the custom CSS from the snippet below. To do so simply copy snippet from below and paste it into the Code Module.

<style>
/* Create And Go Hero Section*/
.cag-hero-section{
  padding-top:0px;
  height: 624px;
}
.cag-hero-section:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 1;
}
.cag-hero-section .et_pb_row {
    height: 624px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80% !important;
}
.cag-hero-section .et_pb_newsletter .et_pb_newsletter_form .et_pb_newsletter_fields {
    justify-content: center;
}
.cag-hero-section .et_pb_newsletter_form p.et_pb_newsletter_field {
    -ms-flex-preferred-size: 280px;
    flex-basis: 280px;
    margin-right: 1.5%;
}
.cag-hero-section .et_pb_newsletter .et_pb_newsletter_form .et_pb_contact_field_half{
    -ms-flex-preferred-size: 280px;
    flex-basis: 280px;
    margin-left: 1.5%;
}
.cag-hero-section #et_pb_signup_firstname::placeholder,
.cag-hero-section #et_pb_signup_email::placeholder{
  color:#898989 !important;
  }

.cag-hero-section .et_pb_subscribe .et_pb_newsletter_button {
    width: 300px;
    margin: 0 auto;
}
.cag-hero-section .et_pb_subscribe .et_pb_newsletter_button:hover {
    box-shadow: inset 0 2px 2px 0 rgb(255 255 255 / 22%), 0 233px 233px 0 rgb(255 255 255 / 12%) inset;
    border-radius: 3px;
}
@media only screen and (max-width: 768px){
.cag-hero-section .et_pb_newsletter_form p.et_pb_newsletter_field {
    -ms-flex-preferred-size: 47.5%;
    flex-basis: 47.5%;
    margin-right: 1.5%;
}
.cag-hero-section .et_pb_newsletter .et_pb_newsletter_form .et_pb_contact_field_half{
    -ms-flex-preferred-size: 47.5%;
    flex-basis: 47.5%;
    margin-left: 1.5%;
    margin-right: 0%;
}}

/* Create And Go Scroll Down Link*/
.cag-scroll-down-link {
    height: 30px;
    width: 100px;
    left: 50%;
    margin-left: -50px;
    line-height: 60px;
    position: absolute;
    bottom: -40px;
    color: #FFF;
    text-align: center;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0 0 3px rgb(0 0 0 / 40%);
    -webkit-animation: cag_fade_move_down 2s ease-in-out infinite;
    animation: cag_fade_move_down 2s ease-in-out infinite;
}
.cag-scroll-down-arrow {
    background-image: url("https://wpsociety.com/svg-files/scroll-down.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
@-webkit-keyframes cag_fade_move_down{0%{-webkit-transform:translate(0,-20px);opacity:0}50%{opacity:1}100%{-webkit-transform:translate(0,20px);opacity:0}}@keyframes cag_fade_move_down{0%{transform:translate(0,-20px);opacity:0}50%{opacity:1}100%{transform:translate(0,20px);opacity:0}}
</style>

Edit Email Optin Module

Once you’ve applied a CSS snippet we will continue Email Optin module. Here you can play a lot and give it your own twist but to achieve exactly the same look as hero section at Create and Go simply apply settings below.

Email Optin Setting>Content

  1. Title: Learn How To Build An Online Business and Escape the Ordinary
  2. Button: Start my FREE eCourse!
  3. Body: Join over 1,000 entrepreneurs in learning how to build your online business from scratch!
  4. Service Provider: Select your service provider
  5. List: Select your email list
  6. Action: Redirect to a custom URL
  7. Redirect URL: Link to your Thank You Page
  8. Use Background Color: No

I would also strongly recommend to activate the Spam Protection in the settings below.

Email Optin Setting>Design

In Design settings we first want to update layout and then rest of the fields underneath step by step.

 

  1. Layout: Body On Top, From on Bottom
  2. First Name Fullwidth: No
  3. Last Name Fullwidth: No
  4. Email Fullwidth: No
  5. Fields Text Color: #000000
  6. Fields Focus Text Color: #000000
  7. Fields Padding: Top: 12px, Bottom: 12px, Left: 12px, Right: 12px
  8. Fields Font: Open Sans
  9. Fields Rounded Corners: 4px
  10. Fields Border Width: 1px
  11. Title Heading Level: H1
  12. Title Font: Poppins
  13. Title Font Weight: Bold
  14. Title Text Alignment: Center
  15. Title Text Size: 52px desktop, 44px tablet and 32px mobile
  16. Title Line Height: 1.1em
  17. Body Font: Open Sans
  18. Body Text Alignment: Center
  19. Body Text Size: 18px desktop, 16px tablet and 14px mobile
  20. Use Custom Styles For Button: Yes
  21. Button Text Size: 18px desktop and 16px tablet
  22. Button Text Color: #FFFFFF
  23. Button Background: #fb5f55
  24. Button Border Width: 1px
  25. Button Border Color: rgba(0,0,0,0.2)
  26. Button Font: Open Sans
  27. Button Font Weight: Bold
  28. Show Button Icon: No
  29. Button Padding: Top: 10px, Bottom: 10px, Left: 40px, Right: 40px desktop, Left: 25px, Right: 25px tablet

Copy Custom HTML Snippet in to Text Module

One last thing that we have to do is we have to add down arrow animation. To do so simply copy HTML snippet from below and paste it into the Text module inside the Text.

<div class="cag-scroll-down-link cag-scroll-down-arrow" data-cag_iconfont="ETmodules" data-cag_icon=""></div>

Optional CSS Modifications

If you want to know more you’re at the right place as in the next few lines I will explain you how you can edit some of the settings in the CSS snippet.

.cag-hero-section:before is basically used to display overaly over the video background. Background color is now rgba(0,0,0,0.6), if you want you can apply any overaly color to your video here.

.cag-hero-section .et_pb_subscribe .et_pb_newsletter_button:hover is used to create that cool hover box shadow effect on button.

.cag-scroll-down-link and .cag-scroll-down-arrow are both used to define scrol down link annimation underneat the form.

Congratulations!

I hope you have enjoyed learning how to create a hero section with video backgound and email optin form. If you have any questions or need help please comment below. If you find value in this type of post, please subscribe so you don’t miss out any new Divi tutorials!

Real Estate Lead Generation & Appointment Setting Machine

How To Start A Blog?

Cheap Email Marketing Services