Divi Coming Soon Layout with Background Slider and Email Signup

Nov 27, 2016

Updated Jan 2024

Free coming soon page layout with fullscreen background slider, social media follow, and email signup/optin.

Notes

Download, unzip, and import the .json file into a new page, not the Divi library.

Most of the styling (background colors, social media colors, etc) is in the module settings.

The demo site is using the blank page setting.

CSS Code

/*** COMING SOON FW SLIDER LAYOUT ***/
 #coming-soon .et_pb_slides .et_pb_container {
     height: 50vh !important; /* height of slides on mobile/tablet */
}
 #coming-soon .bottom-row .et_pb_column {
     padding: 40px 25px;
     display: -webkit-flexbox;
     display: -ms-flexbox;
     display: flex;
     align-items: center;
}
 #coming-soon .et_pb_social_media_follow {
     display: -webkit-flexbox;
     display: -ms-flexbox;
     display: flex;
     flex-direction: column;
}
 #coming-soon .et_pb_social_media_follow li a {
     margin-right: 15px;
}
 @media only screen and (min-width: 981px) {
     #coming-soon .et_pb_slides .et_pb_container {
         height: 100vh !important; /* height of slides on desktop */
    }
     #coming-soon .bottom-row {
         position: absolute;
         bottom: 0;
         z-index: 9;
    }
     #coming-soon .et_pb_newsletter .et_pb_newsletter_fields {
         flex-wrap: nowrap;
         column-gap: 3%;
    }
}

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.