April 1, 2020
Divi theme eCommerce tutorial Full Width Google Map

Divi theme eCommerce tutorial Full Width Google Map

hi guys and welcome to another WordPress
Divi theme ecommerce site built this is Jamie from system 22 and a web designer
tech tips calm in our last video we just put together
this little contact page here what I’d like to do in this one is just add a
full-width google map under our contact form here now there’s a couple of ways
you can go about doing this with Divi I’m gonna do it without an API here you
may ask what that is is go back to our a page here here’s our contact form so I’d
usually I’d want to add a full-width section
insert a module and you’ll see that Divis already got a full width map
provided for you right there and you can put in your address and add different
pins for that map but to do this you need a Google API key and to get one you
need to go to your Google developers console and you can get one there but
I’m going to show you how to do it without having to get an API key
so if I just close that and we would get rid of that math module I’m just gonna
insert a full-width code module instead now I’ve got that address of the Empire
State Building up here let’s just close that out and show you
because obviously I’ve got no real sight from my store so what I’m going to do to
get the code for a full with Matt because I’m going to go to the share
button they embed map
and here we are it’s made us a map with the Empire State Building address you
can scroll in or scroll out to whatever size you want it put that little pin right in the middle
shut that up and here’s the code that we want to embed this in our site so over
here we can go copy HTML and it’s copied us for it obviously you can left-click
and drag and do it that way if you prefer now that we copied the HTML let’s
go back to our site here’s that page where we want to put
the content hit ctrl-v and just paste that in there now that might look a
little scary but it’s not we got a tweak a little bit of this code
in a minute but don’t worry I’ll show you exactly what to do so let’s save
that update our page and see what we’ve got
and we will have a map on our page but it’s not gonna be displaying quite like
I want it displayed so now it’s updated let’s preview the change and take a look what we’ve got
there we go well there’s our map it’s a map
can’t deny that and it’s a it’s a live Google map so you can scroll in and out
on it but it’s not well it’s not what I want I want it to be the whole of the
width of this page so like I said before we’ve got to go back and tweak a little
bit of code there let’s go back to our page there’s that
full width code now if we look down right near the end here you can see
width equals 600 yours make something say something different but it makes
it’s gonna say width equals something and in between those inverted commas
there be careful not to clip those off just get the number when we’re right in
100% and there’s the high of 450 I’m gonna
add I think I’m gonna add let’s make it let’s make that about 600 purely because
I want to put a divider in in a minute and I will take up some of that height
so now it should be a hundred percent of the width of the our screen and it
should be 600 pixels deep so let’s say that Update you as updated let’s see what we’ve got now I will preview those changes that’s a
bit more like it now we’ve got our full width map which is exactly what I wanted
with our address right there in the center it’s live so you can scroll to
zoom or what have you and so we’re gonna want to take away this divider which is
in the bottom of this section we’re going to want to add one to our little
map section that’s here so let’s do that with our visual builder now that is loaded let’s check out this section and take off
a divider at the bottom there that one so we just want to reset that
to none that’s good that’s going straight into our map now
but we do want to add a divider at the bottom of this to go into this little
green section there so let’s grab this one go to design
divided and we want it on the bottom again style-wise we’ll use the same one that
we had before which was that sort of curly one seemed
to work pretty well for us see what that looks like
you yeah I think that’s gonna work fine on
my wing that high a little bit more something like that there we go let’s
save that you that’s good I’m happy with that let’s
save our changes and exit the visual builder you and there we have it we’ve now got our contact page with a bit of contact
info form our address and ours and a full-width google map below that’s live that you can scroll in and
out and of our footer and our little counter section there so there we are
that is how to add a full width cook google map to your Divi WordPress site
fact that will work for any site HTML bootstrap you name it that’s how to get
your embed code for your map but we’ve done it this way with the Divi theme
without having to get an API key from Google which it’s just one less step so
I hope you’ve enjoyed that if you have please like the video and share it
subscribe to our channel if you’re interested in web development take one
of our courses below we’ve got some huge discounts for our YouTube subscribers
there’s also some great free courses down there so take a look once again
this has been Jamie from system 22 and web design and tech tip comm thanks for
watching have a great day

Leave a Reply

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