Using Google Maps on your WordPress website is a great way to help your site visitors find you in the real world.
In this tutorial you’ll learn how to:
✔︎ Add Google Maps to your WordPress website
✔︎ Set a full-width section to stretch your map across your site
✔︎ And more!
hey y’all this is Donna from Elementor
today I’m going to show you how to use
element tours Google Maps widget this is
a useful addition to your home or
contact pages so users can easily locate
your business in the real world for this
tutorial I’ll be using the free
restaurant home page template so on a
fresh blank page let’s click on the add
template button and click to insert our
free template
great let’s scroll down to the visitors
section as you can see there’s a map
here we’re going to delete it so right
click and choose delete now in the
widgets panel let’s search for the
Google Maps widget and drag it here let
go when you see the blue line is
displayed
once it’s dragged into its place you
will see on your left the Edit Google
Maps area first under content we need to
set our address I thought it would be
fun to imagine eating at Disney today
sounds good
okay so let’s enter 1313 Disneyland
Drive Anaheim California just like that
the map is updated to show the happiest
place on earth
next let’s set the zoom level zoom
allows you to zoom in or out of the map
to get a closer look at the address or
see a broader perspective of the area
the next option allows us to control the
height of the map if you want to change
the width of the map you need to adjust
the column width grab the edge of the
column and drag it to the width you’d
like next let’s see the style options
under the style tab here you can set CSS
filters for normal and hover State click
on the pencil to edit the settings as
you can see there are various filters
you can adjust here blur
brightness contrast saturation and hue
will leave our map as is for now one
popular design technique is to place a
full width map on the page I’ve created
the same page here only with a full
width map as you can see let’s discuss
how to create that now first will delete
this map to create our own great
now click the add new section button and
we’ll choose one column as we did before
I’ll search for the Google Maps widget
and drag it into our new section let’s
preview this I’ll click to hide the
panel obviously we have some work to do
to make this map full with to do that
will edit the sections layout settings
click the sections handle to edit its
settings under layout notice that the
content width of my section shows boxed
we’ll want to change that to full width
great that gets us really really close
but if you notice we still have this
small gap around the sides it’s really
easy to get rid of that just change the
sections columns gap to no gap
awesome the gap is gone and our map is
now full width that’s it for more video
tutorials click the subscribe button and
tap that bill to be notified when new
videos are released you can also browse
element tours extensive documentation at
docs.bmc.com
