Looking for a quick way to launch a coming soon or landing page?
I had made a quick coming soon page using GeneratePress and Beaver Builder to use before my new website was ready to go live. After I launched my site I figured I would share this with the GeneratePress and Beaver Builder community.
In this YouTube video I show you how to easily import the files and get your page set up quickly. The free template files are linked below as well as the custom CSS used to style the Beaver Builder subscription form fields. The transcription for the video is included below as well.
Free File Downloads & Custom CSS
Download the two files here on Dropbox.
Custom CSS for the Beaver Builder subscription form fields:
Please feel free to contact me if you have any questions.
Hi, everybody. This is Mike Oliver. I have this coming soon landing page that I had built when I was redoing my site and I wanted to repurpose it. I figured I would give it away as a freebie and make this quick video on how you can easily install it. I’m using GeneratePress and Beaver Builder. GeneratePress is the theme that I always use, so I’m not sure how some of the other themes work as far as creating landing pages and turning off things like your header or your footer. I’m sure you can, but as far as what you see here, this is all just one Beaver Builder row. You don’t need GeneratePress to do this. What I’m going to do at the end of the video is you can download these two XML files.
One’s for the GeneratePress element, which creates a landing page, and then one is just this entire Beaver Builder row. What you can do is save it. Use it for coming soon page and email opt-in page, landing page offer. It doesn’t really matter what theme you have. As long as you have Beaver Builder Standard installed, which is the paid version, you can go ahead and use this. What I’ll do is I want to walk through really quick how you can import the files and then kind of how everything was set up just so you have a better idea of how it works in case you ever want to do something like this yourself. How I created this was I went and I installed GP Premium and Beaver Builder. Those are the only two plugins I have.
What I needed to do was for it to be a landing page, I wanted to turn off all the elements on the page that you normally see like your logo, navigation, all that good stuff. You can do that with GeneratePress Elements. What I want to do first is when you go under your appearance in GeneratePress, you want to make sure that disable Elements is activated, that Elements is activated. I had set my fonts in the customize your settings. You could override those by setting them locally in the little Beaver Builder modules, but I just did it this way, but just make sure these two are definitely on because you’re going to need them to be able to do this. What I’ll do is I’m going to go to Elements.
I went and removed everything so that I could just walk you through on how to add these because you can literally set up a landing page or a coming soon page in about 10-15 minutes using the files I’m going to give you. To get this entire look, the first thing that I’ll do is I want to import the GeneratePress Element that I used. If you never imported anything into WordPress, you’re going to go to tools and import, and then scroll down to WordPress and click install. Then, run the importer. Now I have these two files on my desktop. This is the landing page element, which is GeneratePress Elements, and then the landing page homepage, which is the actual page that you’re going to import as well.
I’m going to import the element first and I’ll assign it to myself. You don’t need to worry about checking this because there’s no attachments. I’ll click submit. It says, “Have fun.” Now when I go back to the element section, you’re going to see here that I have the landing page. What I’ll do again real quick is I’ll go back to import and this time I’m going to import the page. Landing page, home page, XML. Same thing. There’s no attachments. All right. Now I’ve got my element. I’ve got my page. Since this is a landing page and it’s the only page on this site, I want to double check that I have that page set to be on the homepage. As of now, it doesn’t. This is just going to show my latest post.
What I’ll do is I’ll change this to my homepage, which is the landing page. Your landing page doesn’t have to be the homepage. It could be any page on your site. I just did this because for a coming soon page, this is the only page, so it made sense to use the homepage obviously. But say you had a landing page offer on some random page on your site, you could go ahead and basically put it anywhere you want. All right. What I will do is go ahead and I’m just going to click save here. Now, I’ve got the two files imported and I’m ready to go ahead and watch. I’ll just go ahead and refresh. This is what you should end up with now when you go to your homepage and click refresh.
Now real quick, I’ll just walk through how exactly this works because it’s super easy. When you go into that element that you imported, it’s a landing page. The name is landing page. It’s a layout element. When you click Elements in add new. There’s three types, there’s header, hook and layout. This one is using layout. I’m going to get out of that. All I had to do to create a landing page was go into disable Elements and check everything. Now, this turns off the GeneratePress, your logo, your navigation, your content title, your footer, everything. Then, all I have to do is tell it where do I want this and I chose front page, which is your homepage.
Now like I mentioned, if you had a big site and you wanted to create a landing page offer and it was yoursite.com/offer, you would just need to assign this to that page, which would be going to pages… Click page. This little dropdown here, you could select that page. It doesn’t have to be the homepage. It could be any page. As of now, I got it on the front page. That’s it for the layout element. You’re going to disable everything, assign it to the page you want and you’re done. Now the page obviously is set to the homepage, which is here. All this is is one Beaver Builder row with two columns. I’m going to go ahead and launch Beaver Builder. I’ll go down here, click on the row settings.
The way I created this little blob shape is using their row shapes, and I use a bottom shape style. I use the wave. Where is it? Right here. Bottom shape. I use waves. I use viewport width because you can get that nice stretch. Sometimes the waves come in real spiky, so I set the width real wide, basically two and a half times the viewport width, and then I also added some stretch by scaling it. Because if I just use one, it’ll pull it to where… Bottom left. It’s going to basically pull it to one side. 1.5, it’ll stretch it across because I wanted kind of this one to kind of wave shape. You can mess with these settings. You can kind of get any shape you want. I added this little gradient to it, which is you can change the angle of the gradient.
You can basically change the colors. You could do whatever you like. As far as the row itself, I went and added a little bit of top padding. Because when I take that away, if it’s not set to full height, which it is currently I believe… Let me double check. Yeah, it’s set to full height. If it’s not set to full height, your row is going to kind of collapse like that. I had set it to full height. But if you didn’t and you had more content, and I’ll show you just by setting it to default, when I remove that 50, it gets up here. But then by adding it, you can push your title down a little bit. Say you wanted it to go down even further, you could do that. I can actually leave that at zero and you go back and just reset it to full height.
Because I have the footer shape set to the bottom left, as long as it’s full height, this is always going to sit on the bottom of the browser window. As far as the content, all this is is… Let me save that. This is going to be your heading module, another heading module, a text editor module. You could change out these texts. You could change this to whatever you want. This over here is just the Beaver Builder subscribe form. Now, I had set the service to email address because it won’t let you pick… It won’t let you save one of these actual email apps without inputting your actual settings.
I didn’t want to do that, so I just set it to email address because it’s the only way to let me save this and get out of it, but you can go ahead and pick your email platform of choice. Put in your API. Connect your list. That way, anyone who fills out this form, it’ll go to that email list. Super easy. I set it to stacked. You can go through these settings and mess with it. You can customize the thank you message, the button color. All this button is is just this blue color from the gradient and then the hover color is that same color, but I just pulled down the opacity to .8. These are all just settings that you can go through. One thing I did do… All right.
Real quick, because this is a coming soon page, if you wanted to use this as an email opt-in row or an offer like I did when I was done with this and my site was ready to go live, I saved this out and I actually saved it as an email opt-in row that I could use somewhere else. What you could do then is just click on the row settings. When you click save as… It might not let me do it because I’m recording a video and it’s done this in the past, but when you click save as, usually it’ll ask you to give it a name and save it. You can either do it as globally or not. That way you have it under your Beaver Builder templates as a row template.
If you wanted to use it down the road as an email opt-in row, you could just go ahead and drag it in and it’s already built. Let me get out of this. I’m sorry if it sounds like I’m in a jungle. I’m in my backyard and I live in Florida. There’s just tons of birds and snakes and stuff going on. Please just ignore it. I’ve got this row. This is all set. As far as the responsiveness, I went and tweaked the settings so it stacks pretty well on mobile and tablet. What I will do is take those two XML files and I’m going to zip them up and put them on probably Dropbox. I’ll put a link below the video. Then, I’ll also put… Oh yeah. I had a little bit of CSS that I put in here.
When you’re building this form, the Beaver Builder email form, two of the settings it doesn’t have is the field design. Basically the color of the field and the border on the field. I kind of always just grab this and I’m going to put this below the video as well. All this does is input type text is this box, input type… Sorry about that. Input type email is this box. What I did is I just removed the border. If I go ahead and break that, you’ll see the border comes back just because I thought it looked a little nicer. The background color is pretty close to what it comes by default, but I added it in case you wanted to change the background color a little bit.
I’ll put this below the video as well. I’ve got my form now. Like I said, I’ll put those two XML files on Dropbox. Realistically, you could install WordPress, GeneratePress, Beaver Builder. Import those two XML files and edit your info. Sync up your lists and have this coming soon page with an email opt-in in 10-15 minutes tops. If you have any questions, let me know. You can comment below or you could go to my website. I’ll put that link below and you could just send me a private message. Always happy to help. I hope you find some use in this and feel free to pass it along. Share it with your friends. It’s pretty handy especially if you’re going into maintenance mode and you just want something simple like this.
That’s it and I hope you have a great day.