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.

LIVE DEMO

Download

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

Title: Learn How To Build An Online Business and Escape the Ordinary
Button: Start my FREE eCourse!
Body: Join over 1,000 entrepreneurs in learning how to build your online business from scratch!
Service Provider: Select your service provider
List: Select your email list
Action: Redirect to a custom URL
Redirect URL: Link to your Thank You Page
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.

Layout: Body On Top, From on Bottom
First Name Fullwidth: No
Last Name Fullwidth: No
Email Fullwidth: No
Fields Text Color: #000000
Fields Focus Text Color: #000000
Fields Padding: Top: 12px, Bottom: 12px, Left: 12px, Right: 12px
Fields Font: Open Sans
Fields Rounded Corners: 4px
Fields Border Width: 1px
Title Heading Level: H1
Title Font: Poppins
Title Font Weight: Bold
Title Text Alignment: Center
Title Text Size: 52px desktop, 44px tablet and 32px mobile
Title Line Height: 1.1em
Body Font: Open Sans
Body Text Alignment: Center
Body Text Size: 18px desktop, 16px tablet and 14px mobile
Use Custom Styles For Button: Yes
Button Text Size: 18px desktop and 16px tablet
Button Text Color: #FFFFFF
Button Background: #fb5f55
Button Border Width: 1px
Button Border Color: rgba(0,0,0,0.2)
Button Font: Open Sans
Button Font Weight: Bold
Show Button Icon: No
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!

Links Mentioned:

Recommended Courses:

Divi/WordPress Beginners Course
Use code “diviwp25” at checkout to get the course for only $25!
CSS & jQuery 4 Divi Course
Use code “css30” for $30 OFF the course!
My #1 Recommendation To Make a Full-Time Income Online

Similar Articles:

admin

Written by: