Updated:
Coming Soon Layout – Background Hero Slider with Bloom
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.
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.
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.
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).
Beautiful work! I think I’ll use this on my website while I work through a redesign. Thanks for sharing!
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
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
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!
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?
Hello Frans and MacGirl,
How and where did you change the color and transparency of the green blocks pls?
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.
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
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.
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?
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.
My bad i was referring to the hero optin
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.
No its all good it was my bad for not reading, sorry
Trying to add the Coming Soon Layout file but it doesn’t work. It freeze on 1% import estimated time 1mn…
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.
Hi
Looks nice 🙂
How do you make the green panel stick to the bottom of the screen?
thanks
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 🙂
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?
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 🙂
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!
Hi, I just found my “missing” arrows 🙂 and made it upload the cool layout 🙂
Cheers
Glad you got it sorted! Thanks for visiting 🙂
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
Hi Thomas! I don’t see that happening at that size or smaller, did you already get this fixed?
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.
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?