hi guys and welcome to another WordPress
Divi theme ecommerce site built this is Jamie from system 22 and web designer
tech tips com well we’ve been building this ecommerce
site here with the Divi theme from elegant themes if you don’t have it you
can get it from my link below this video it is an affiliate link it won’t make
any difference to your price but it’ll be doing me a favor if you use that one
so we’re going to continue on and let’s create a contact page for our site
so if we go to our dashboard go down to pages what hit add new you
can also do it from new at the top there if you prefer that way and we’ll use the Divi Builder we just want to put a text field in here
it’s going to say contact us now let’s make that having one and put
it in the middle just as add a bit of text this you you there we go that’ll do I think I’ll send
to that text as well and let’s say that now we want to add a contact form let’s
add another row about what I want to do here let’s try 1 1/3 and 2/3 and we’ll put
our address here you something like that you and let’s just say that you and here we want to insert the contact
for TV makes it really easy for you here’s a contact form and you can get
some this is what comes up generically but you can you can get some really
complex forms going on here with conditional logic and everything else
it’s very clever but for our purposes today it’s just we’ll just use the name email a message
forms here and we’ll see how many we help I think
I’ll do another video I’ll just put this in think I’ll do
another video about these forms on their own and show you how to use a
conditional logic because it’s really useful if you’re doing much more complex
form and here we just put in the email address where you want your message to
be sent which is your email address that you like to receive messages through
we don’t need to put out a message patent display capture you can
do if you want to I’m just gonna let it go here the capture is where you have to
click on this or put a number in that equals the sum that’s on the the page to
prove that you’re not a bot we don’t need to redirect it we don’t
want to put a specific background in there
you so look here name his idea the field the title
it’s an input field you’ve got all kind of things to choose from email fields
text boxes checkboxes radio buttons and a drop-down with various things in there and you can choose whether to allow
cymbals give it a minimum length or a maximum length required field yep I’m
gonna leave mine all require this the conditional logic that I was talking
about which you can use for if they fill out a certain field or a check box
another box will appear asking a different question so you can get quite
complex there we don’t want to background let’s just say that let’s see
what we’ve got so far let’s just have a look here hitting that little eye icon that was
right there I just wanted an address titling up here save that an exit
and in here just curious you and we’ll make that I think a heading to
a probably do it say that let’s take it a proper peak
we’ll publish the page published we just hit the preview one okay I’d like to see yeah that needs to
be bigger that’s an h1 there this probably want a bit more space there and the actual background for our page I
think we’ll use something similar to our checkout page something similar to this so let’s go back
a lot of this we can do with we’ll double I’ll just do this first bit
right here for the page background in here I’ll go to photograph get the plus and I’ll use we’ll probably get away
with using one that’s not that long but we’ll see see what this one it’s got that lady on
the right there that set that one it’s background we can always change it again not breeze era lacks effect or say that now let’s add our standard sections from
our library which is our footer and our little countdown thing that we’ve had
going there you
so there’s a green counter and below that let add the actual footer
for all the other pages you
might decide to put a full-length google map in here we’ll do that next let’s
update that and preview our changes yeah I mean all of this will tweet with
our I’ll put a little
to hide her in there to make that look good but those are working fine that
background image is okay that’s kind of make that disappear
though doesn’t it so we swap that one out let’s change our
titles something more with the styling that
we’ve got here so let’s enable the visual builder you and let’s see what this text this style
of this text was or we’ve got going here okay its Volk or so let’s use that for
our headings up here as well and we’ll make them our blue color
let’s close that down just edit this little piece now text is okay but we want to go into the design and we
want to edit the heading text which is h1
now I want the Volk or you there it is and for the color we want that blue color which is 10 ca
ca there we go that’s fine just copy that and we also want to do the same thing
for this down here think that was actually bold so summer look see what
size this was actually each two that we’ve got going
on there 41 pigs fine just change this to the same as we’ve
got going on there think it was bold 41 things you yeah I think it looks better as regular
let’s just keep that it’s a 41 regular and we’ll do the same for these other
ones here go into this module and change the heading for this one like this a heading one Oh crow fantastic talak size 42
fantastic and as you see that blues kind of cut
this out so we’ll change that in a moment let’s also do the heading on this
one now you can set all this up in your
customizer as well so every time you put this in those headings will
automatically be like that we just didn’t do that earlier now let’s put a
little bit more space between those two you that’s fine
and change this background in which we’ve got going on here something with a
little less blue the trashcan let’s add a different image we might use this one again it’s got
less blue over here could do different alignment think we want Matt perhaps top center better there and you can read all this so we’re happy
with that I do want to put a bit of drop shadow
under those boxes there yeah I think that makes us stand out a
little better so we’ll leave that one there you and we’re happy with that button that
buttons fives got our correct colors on it so just need to add on the bottom of
this section or the top of this section let’s do the bottom of this section a
divider so that goes into there a little easier we’ll use that curly one we want to put
it on the bottom of this section and we’ve had quite a lot of luck I
think with that curly one right there yeah that’ll work fine save that okay so I think we’re happy with that
what I’m gonna do in the next video I’m gonna add a full width
google map you
but we’ll do that in the next one so let’s just save our changes and once they’re saved exit the visual
builder so there you have it there’s your basic
contact page I hope you found that useful if you have please like and
subscribe to the channel if you’re interested in web development take one
of our web development courses below we’ve got some huge discounts for our
YouTube subscribers there’s also some great free courses down there so do take
a look once again this has been Jamey from Sisseton 22 and web design and tech
tips comm thanks for watching have a great day