Resources by A Girl and Her Mac
  • Divi Stuff
    • All Resources
    • CSS Tutorial
    • Free Layout
    • WooCommerce
Select Page

Last Updated on September 8, 2019

Coming Soon Layout – Background Hero Slider with Bloom

Nov 27, 2016 | Free Layout | 27 comments

Post Views: 7,387

I had a visitor request that I tweak a previous layout I posted to have a slider in the background, so I made it, and then thought it might work well as a coming soon page. You can invite people to sign up and then you can email them when you launch.

Free Divi Layout | A Girl and Her Mac
View DemoDownload

Install the layout

  • Start a new page > enable the Divi builder > click on the 2 arrows in the upper right and upload the Coming Soon Layout.json file from the UNZIPPED file you downloaded.

screen-shot-2016-11-27-at-6-24-18-pm

Install the Bloom optin

  • Go to Bloom > Optins > look for the 2 arrows and click > import the Bloom .json file in your folder and upload. Don’t forget to set up your email service and activate the optin.

Screen Shot 2016-08-05 at 7.07.28 PM

Notes

  • The CSS can go in your Divi options panel, child stylesheet, or page CSS panel.
  • As this is a coming soon page you should select “blank page” under Page Attributes on the right so your header and footer don’t show.
  • In my customizer settings I’ve made my headings bigger site-wide so your headings in section 2 and 3 may not quite match up. In the customizer go to general > typography > change the header text size to 40 (this is totally optional)
  • You’ll need to know how to change the url path of an image for small screen sizes (see pic below) and have some CSS knowledge if you want to change how Bloom looks (all Bloom CSS is inside the optin).
Editing the background image for small screens

27 Comments

  1. Ryan J
    Ryan J on December 1, 2016 at 4:59 pm

    Beautiful work! I think I’ll use this on my website while I work through a redesign. Thanks for sharing!

  2. Frans Kemper
    Frans Kemper on December 9, 2016 at 12:37 pm

    Hello MacGirl,
    Love your stuff and always following your work.
    I am building a online store and loved your coming-soon layout.
    I have 2 questions, if I may.
    1) How and where do I change the color and transparency of the green blocks? (I couldn’t find anything related in the CSS) and
    2) I am not using any of the email marketing providers, thus I tried to add the HTML, but it became HUGE. So instead of using the bloom, I added a code module. But that one came below the page.
    Any way I can place that where the bloom module was?
    Thank you so much and very best regards. (Dont mind my images, they are horrible yet.
    Frans Kemper

    • Frans Kemper
      Frans Kemper on December 9, 2016 at 1:37 pm

      Hello Again Mac Girl,
      The colors and transparency I figured out.
      But the sign up thingy is a tough one to crack for me.
      Any bright ideas please?
      Best wishes,
      Frans

      • Leslie
        Leslie on December 9, 2016 at 2:36 pm

        Hi Frans! I have replaced that section with a different module before so I know it can be done, but if you’re using the code module it can be a bit tricky as code is most likely going to come with its own CSS parameters that could be conflicting with mine. I’m not positive I’ll be able to help with what you’re trying to achieve but I’ll email you!

      • Marieke
        Marieke on October 24, 2018 at 7:42 am

        I’m just starting with Divi. This is the first page I need to create. How can I change the color (blue teints)of the modules?

    • Hans
      Hans on November 24, 2018 at 3:16 pm

      Hello Frans and MacGirl,
      How and where did you change the color and transparency of the green blocks pls?

      • Leslie
        Leslie on November 26, 2018 at 8:30 pm

        Hi Hans! You can change those colors in the row > background color settings. I have a transparent color set behind all three, plus two transparencies set for the first two blocks.

  3. nordie
    nordie on July 3, 2017 at 3:01 am

    hi there
    i really like this layout, I do have one question:
    how do i make the capitals is to non capitals font in the optin signup

    • Leslie Bernal
      Leslie Bernal on July 3, 2017 at 1:25 pm

      Hi Nordie! I’m pretty sure the CSS for that would be inside the bloom optin itself. When you go inside the optin and get to the design part there should be some custom CSS in there, look for the part that says “text transform: uppercase;” and delete that line of code. If you need help you can email me or fill out my contact form.

      • Nordie
        Nordie on July 3, 2017 at 1:31 pm

        yep Blind & stupid Me
        .et_bloom_form_content input {background-color: rgba(0, 0, 0, 0.6) !important; border-radius: 0px; text-transform: uppercase;}

        BTW
        would it be abble to implement a slider in the hero header?

        • Leslie Bernal
          Leslie Bernal on July 3, 2017 at 1:44 pm

          Lol it happens 🙂

          Hmm not sure I’m understanding your q about the slider as this layout already has a slider being used in the header.

          • nordie
            nordie on July 3, 2017 at 1:53 pm

            My bad i was referring to the hero optin

            • Leslie Bernal
              Leslie Bernal on July 3, 2017 at 2:15 pm

              As a totally separate layout yeah you should be able to put a slider behind a bloom optin as long as that bloom optin has shortcode associated w it. Not all of the variations of bloom optins do, I know for sure the inline style does (which I believe is the kind I’m using here). So you would just need to set up a slider and in the text field put the shortcode for the bloom optin, then you would need to take away the animation on the description but that’s just one line of code.

              I’m not really sure if I’m even understanding your question correctly though so let me know.

            • nordie
              nordie on July 6, 2017 at 3:57 am

              No its all good it was my bad for not reading, sorry

  4. Teresa
    Teresa on August 9, 2017 at 5:11 am

    Trying to add the Coming Soon Layout file but it doesn’t work. It freeze on 1% import estimated time 1mn…

    • Leslie Bernal
      Leslie Bernal on August 9, 2017 at 7:56 am

      Hi Teresa! It sounds like you have a low upload limit, if you Google “increase PHP limit” or “increase memory limit” you should find some fixes, or you can just contact your host.

  5. Garry
    Garry on September 22, 2017 at 3:06 am

    Hi
    Looks nice 🙂
    How do you make the green panel stick to the bottom of the screen?

    thanks

    • Leslie Bernal
      Leslie Bernal on September 26, 2017 at 7:06 pm

      Hi Garry! Sorry for the delay in responding, the panel sticks to the bottom by using the CSS provided in the download files. If you have trouble installing the layout and adding CSS let me know 🙂

  6. Jeroen van Gils
    Jeroen van Gils on April 6, 2018 at 3:18 pm

    This layout looks really great. I would love to use it, but when I upload the .json to the Divi library I am getting the error: “This file should not be imported in this context?”. Do you know what I am doing wrong?

    • Leslie Bernal
      Leslie Bernal on April 6, 2018 at 5:44 pm

      Hi Jeroen! If you take a look at the instructions this layout needs to be imported through a page, not the library, so if you try through a page it should work. Let me know if you still have issues 🙂

      • Jerzy Grzegorzewski
        Jerzy Grzegorzewski on January 4, 2019 at 4:52 am

        Hi Leslie, I have the same problem as Jeroen. With new Gutenberg update, I can’t actually see this option you have mentioned in instruction. Only Bloom file was no problem to upload.

        The layout I absolutely great 🙂 Thank you!

  7. Jerzy Grzegorzewski
    Jerzy Grzegorzewski on January 4, 2019 at 8:38 am

    Hi, I just found my “missing” arrows 🙂 and made it upload the cool layout 🙂

    Cheers

    • Leslie
      Leslie on January 4, 2019 at 10:55 am

      Glad you got it sorted! Thanks for visiting 🙂

  8. Thomas
    Thomas on February 7, 2019 at 12:46 pm

    Hi, I have a problem in my hero. When the browser has a with of 980 pixels or smaller, then I have a top and bottom padding of 50 pixels, so I can see the black background at the top and bottom of the background-image.

    I tried to solve it in the child-theme-css but it’s not working. Please could you help me?

    Cheers
    And thank you, and sorry for my bad english

    • Leslie
      Leslie on February 8, 2019 at 10:12 am

      Hi Thomas! I don’t see that happening at that size or smaller, did you already get this fixed?

  9. Graeme
    Graeme on April 29, 2019 at 12:57 pm

    I’m loving the layout, thanks for sharing it. I have hit a bit of a snag though. I am able to format the design of the text in all of the modules except the title text “Find out when we’re live…..” I would like to bold it and increase the size, but for some reason the changes I make in the editor aren’t working.

    • Leslie
      Leslie on April 30, 2019 at 9:28 pm

      Hi Graeme! That is odd, can you tell me what Divi version you’re using? Also if you’re using the frontend builder does it do the same thing if you try the classic backend builder?

  • A Girl and Her Mac
  • All Resources
  • Woo Styling
  • Free Layouts
  • CSS Tutorials
Resources by A Girl and Her Mac   —   This site does have a few affiliate links   —   The Fine Print

Read next article ...

Center Align Divi Fullwidth Header Buttons on Mobile

Read previous article ...

Bottom of Page Sticky Bloom Optin (incl. Mobile On-Click Version)