Divi Theme Create a coming soon page in 30 minutes

Divi Theme Create a coming soon page in 30 minutes

hi guys this is Jamie from system22.net and
great-webdesign.com welcome to this video in this video today we’re gonna
design a quick coming soon landing page we’re using the Divi theme here I’ll
just show you how easy it is to design something like this so I’ve got a fresh
install of WordPress and a fresh install of the Divi theme I’ll put the link to
the Divi theme below if anybody is interested in using it it’s absolutely
awesome if you’re a web developer like me and you do a lot of WordPress sites
it’s probably the only theme that you’ll ever need so we’ve got our fresh install
here let’s go to our dashboard and get it organized okay the first thing I want to do is
create a new page and I’m gonna call it coming soon or coming anything like that
call yours what you wish and as with most TV things I’m gonna use
the Divi theme builder here I’m just simply gonna load a predefined page from
the library and let’s look for I scroll down you should see it coming to see in
there it is right there so if I go ahead and just load that one up it’s gonna put
this there let’s just publish this page and have a quick look now preview our
changes this is what its gonna give us as a default which is okay it’s a nice
bare-bones start what I’m gonna do is I’m going to make that transparent put
that in the middle or put our logo in there probably get rid of this menu put
a date and time and obviously put our own message in and a little subscribe
form there and I think I’ll add a contact us form just below here so let’s
go ahead set the time on the countdown timer
first I’ll set that up to 2018 doesn’t matter obviously if you’ve got something
in mind set it to what you want now it’s fine what I want to do is I want to give it a
background image something fairly dark because I’m going to use white or light
colored legend thing on there so let’s grab quick background image I’m
gonna go to a free site called the stocks I show you here I’ll put this link below
also and I like to use one called pixels cuz it’s a coming soon I’m gonna use
something like a train track or something like that to sort of indicate
that something’s coming along with driver I’ll do fine download a large
version of it and as you can see it’s got a cc0 license which is free for
personal and commercial use which is just what we want here so I can get that
out the way now and what I’m gonna do is I’m gonna make that image a little
darker so I’m gonna put put it in a Photoshop what I’m gonna do is I’m gonna just put
a colored overlay on top of it if you don’t have Photoshop even downloaded
GIMP which is a great things kind of like Photoshop or photoscape or
something like that when she was also free I’ll leave links below for that as
well but I’m going to just put a dark section over the top of this you know
like I say oh this is just a dark black rectangle well I’m gonna take the
opacity down to about 30-40 percent just so the writing that we’re gonna use is
gonna stand out a bit much say forty percent point yep that’ll do fine and
I’ll save my image I’ll just call it background fine okay so went back to our
Divi theme here I’m just going to add that photo to the background there it’s full size that’s just what we once
said his background that’s fine I’m gonna use a parallax parallax effect but
I don’t want true parallax which will true parallax will make it move at a
different rate from the rest that you know when you’re scrolling down or move
it at a different rate I’m gonna use your CSS parallax which will keep it
stationary and what’s on top of it will move I’ll show you in a minute
so let’s just say that we’ve got a timer instead of a look at our subscribe
section okay I want to put my own text in here I’ve got some that I pre-written and this is for people describing you
can get a free MailChimp account or Feedburner Aweber this is where you hook
it up to your particular account that you’ve got so that’s fine we’ll say that
we’re gonna leave the button as submit and what I want to do is I want to add a
contact section just below this so I’m a full width section contact fall that’s
fine because we’ll we add it back in a little while let’s just see what we’ve
got so far preview the changes okay well things are starting to come
together a little bit there Danai see we’ve got a countdown going on here I
want to put a title in there I’ve got my info in here we’ll change that don’t
quite like the purple background on there we’ll change that to perhaps a
green there’s a lot of space between those two here’s our contact form so
let’s just change a few of these things first and take it from there so we go
back to our page change the background on our subscribe
module doesn’t look like it’s there see yep Mario’s okay and let’s make that
more or the photos kind of green so let’s make it a dark green wouldn’t want
to be able to see through it pretty good sir
that’s the opacity right now bring that down some put it down a little bit too
far there it doesn’t look like there’s anything there I mean that’s gonna work
but it’s not quite what I want it’s a little more like it just put it
up just a tad more save an exit Oh countdown timer yeah I want to put a
new title in there I think some of these caps we’ve got that we’ve got that going
on I get rid of that divide over to seem like much this divider is just giving it
space between the two so let’s bring that down to two and I’m gonna update the page and
preview our changes that’s getting there I’ll make those
more like that submit button so they’ve got just a white outline contact asses
down there we’ll make that flow first just do that one quick these are
subscribe go into the design it’s a form for your background color make that
transparent text color we’ll make it white focus background color we’ll just
have a little bit of color in there pale gray that you’ll be able to see through
focus text colors also white now I think I’ve gotta use a bit of
custom CSS to give it a border let’s look see what we’re looking in here yeah
as you can see that’s fine everything is fine
vaguely see that background focus color there with that’s okay but what I want
is a border around it like that which is about two pics isn’t it
so I’ll just go into the custom CSS and write a bit of custom CSS here and not
the description not the form of fields she picks swords and white which is FFF
see that’s done the trick okay it’s simply a force it will be important
attributes like using this unless I have to but I think I have to hear it to try
that yet there we go that’s put a border around and they all look kind of the
same there make sure input text is right yeah yeah that’s fine and submit button
don’t really want that icon my submit button so you’re down to add button icon I just said that to know
so we should have no button they’re actually now yep that’s that’s fine
let’s take a quick update another look yeah that’s getting there we’ll style
this in a moment get rid of that from style now what I want to do next I guess
it sort out this top menu up here so I want that to be transparent I want to
put a logo in the middle there so go back let’s go to our theme options let’s
add my own logo Save Changes and go to the theme
customizer my logo should be there but it’s white
on white so you probably can’t see it now what I’m gonna do is header and
navigation get a format I want to put it in the center I know you can’t see it
but you will in a moment primary menu bar background color there let’s take
the opacity this slider all the way down if we go back and set our static page to
a new page that we’re just developing here coming soon that’s the page there
we go there’s our transparent logo or transparent header there with our white
logo so that’s getting there now what I want to do is style this one
to make it a little more like this one I don’t think I’ll put the background in
there but I’ll make it so it’s clear like that and will style that button to
look a bit more like this one so if we save and publish that and we go back to
our page and it’s going to our contact form here this is where you can put in a
title if you want success Mercedes and the submit button text so I’m gonna
pretty I just say find out more and here’s where you put the actual message
email address oh yeah me at my email com wherever you want that message to be
sent to obviously and you can customize the fields here if you feel you need to
don’t want to capture beauty that’s fine for background color okay with all that
transparent we’ll probably have to use some custom CSS again let’s look in the design features here
that’s all fine that’s all fine form field takes color we’re gonna make that
white things are feel the buff for which is to pick solid white and a button button things color you want Matt to be
white as well button background color we want to be transparent drag that all the
way down and ball with two picks we will border color white as well don’t
want to like on it if you want one that’s fine I’m not gonna put one on
mine see what’s going on here okay that’s a
bit more like it it’s fine you’ve got a lot of space between theirs but we can
deal with that in a moment it’s pretty much done we have to use a bit of custom
CSS what I would like is to get that button in the middle kind of like this
one contact us for go on that icon on there either okay so that’s the call to
action the contact us button there I like everything about it apart from the
icon there there’s the button just some stars for
button it’s fine but Dexcom white all the way to for a color white icon that’s
what we want to get rid of no just have a quick look at that that’s more like it okay so we’ll save
that now then this contact form I’m going to give it an ID so if we go to
the advanced and you’ll see a CSS our ID because I want that button to be able to
just scroll down to this contact form the contact button so give it just CTC
for one or anything it doesn’t give it whatever you want I’ll save that now if
I go back to my call to action button the URL hashtag that’s important CPC
which is the CSS ID we’ve given to the contact form let’s save that one update
see how we’re getting on now it’s got it I see that contact button when I click
this it should scroll down to that contact form there we have it yeah
that’s what we want to say I’d like to see that centered I don’t think it’s
okay throwing up the error message because I hit the button there that’s
fine I’d like to see it in the middle there
now I think I may have to do some custom CSS on let’s have a look the contact button don’t feel you must not go work for some
reason no still there okay let’s see what we need to do if I inspect that I’m
using Google Chrome here and you can either hit the f12 will right click container in I think it’s a container that’s a center yeah that’s exactly so
what I’m gonna do is I’m gonna copy this let me just check this float element
yeah I’ll set that to none that’s it and I’ll just copy this from the dot all the
way down to the closing curly bracket there and I’m gonna paste that into my
custom CSS sheet so I’d save I can get out of there let’s go to our custom CSS
which is on our Divi options down at the bottom here just give it a title which is for those of you who watch my
videos before it’s a forward slash star star forward slash to close it out
that’s a usual utter common CSS mark out language there now I just paste that CSS
I copied in there that’s what I just copied from the Chrome browser need the
float now don’t need to overflow:hidden or margin top because we did not change
that and now just a bit of space there hit Save Changes now if we go to our
site as long as I did I update that page let’s make sure I think they did that
page here save and exit update and preview our changes there we go that
looks more in line with the form that we’ve got up here my shortened mat it’s maybe a bit too much space that’s
for look at the page yeah we’ve got to divide it yeah I’m just gonna get rid of
that divider between our contact form as well and just take some of the padding
down on this it’s 200 let’s make it a hundred hopefully that should be it yeah that
works fine so there’s our nice coming soon page got our logo there we’ve got
our content here people can subscribe to your MailChimp or whatever it is you can
just get that going to a regular email if you want to we’ve got the countdown
timer working I hit the contact us will take us down to the contact form that’s
working then the last thing I’m gonna do elegant themes loves to put this bottom
bar on there and it’s displays and advertises their their website which is
great because they do some great stuff but you might not want that on your site
I don’t particularly want it so what I’m gonna do is I’m going to remove it the
easiest way is to do it with custom CSS so I’ll just make a comment just so when writing a lot of CSS if you
give it a title like that it’s a much easier to find stuff afterwards and the
simple code is let’s take footer bottom – bottom closed curly brackets and what
we wanted to do display display save our changes that should do it now if we go
back to our page it’s there at the moment if I do a refresh it’s gone so
that’s it there we have it so there’s your coming soon page we’ve taken about
20 minutes or 30 minutes to create a unique coming soon page with a MailChimp
form and a contact form so there you have it that’s how you do it with the
Divi theme it makes it very easy for you and it’s pretty good-looking too once again this has been Jamie from
system 22 and great web design comm if you’ve enjoyed this video please
subscribe to our channel thanks for watching have a great day

Daniel Ostrander

Related Posts

2 thoughts on “Divi Theme Create a coming soon page in 30 minutes

  1. TechJ22 says:

    Nice, but I didn't see you remove the top menu links?

  2. Volodymyr Tokach says:

    But all pages will be accessible at fron-end, Coming Soon might close website for everyone except creator…

Leave a Reply

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