In this video you will learn step by step how to easily get a Google Maps map on the contact page of your WordPress site I'm back on the website from my WordPress tutorial and around this video to follow you need 2 plugins
If you've already done my WordPress tutorial, you probably already have it, but I would like to show you shortly These are the "SiteOrigin Plugin Plugin" and the "SiteOrigin Widget Bundle" If you have them installed and activated, we can start and go directly First, back to our website Since I want to embed the card on my contact page, I first go to "contact" and now I click on "edit page" Next I add a new line and choose a 100% layout
Click on Insert and select the line, click on Add widget and now you have to have this SiteOrigin Google Maps widget here, that you can easily select can and can insert here If you did not find this in this list, you have to update in between, then you go to plugins and SiteOrigin widgets and now this would have to activate or Make sure this is activated If you have done the whole thing you go back go to the contact page and Now we click on "Edit" and now we see here that we have one here Need "API key" For this we click on this link up here and now we click here on "Request key" Now you have to log in with your Google Account or if you do not have one you have to register and now you click again on "request key", Now you click on it and now you can create eg a new project here You can now call this, for example, "Sample Demo" or think of a name, it does not really matter, click "Next" and now this key will be generated You can now mark and copy this here or simply click here on the right of this icon Now this link is automatically copied or this key copied and now you can you just go back and paste this key here
Here you can enter your location, for example, I enter Stuttgart now and now you can make different settings here I would like to show you how it looks so far, click on "Done" and on "Preview the changes" and now we see the embedded below Card, which is completely interactive and really looks great What I want to do now is to remove these controls and on the other hand, it bothers me personally that the map zooms when scrolling And to change that, I go back to "Edit page", click on "Edit", deactivate this function and activate this function And now let's look at the result
And that looks really good now Next, I want to spice up the site a bit more design-related and would like to do so I first stretch the map to the full width For this I go back to "Edit page", click on "Edit line", open this layout tab and select here "lines layout" the "entire width stretched" Layout off Click on "Done" and check the changes and lo and behold, the map is now stretched to the full width Next, I'd like to move the map slightly higher, below it Insert line and therefore I go back to "Edit page" and now I can drag and drop the line here very simply up here to the desired one Move position
Check the changes again and now we have a white space here which I would personally remove and go back to "Edit Page", go here to the lines settings and now we can enter here above "0px" to reduce or remove the padding, as this is standard with "100px" is set Click on "Done" and check the changes and now you see the whole thing really good However, I would like to change the line height and I would like to reduce this and I go back to "Edit page", click on "Edit" and can here enter any value for "Height" For example, I enter "250" here, click "Done" and "Preview Changes" And now I really like that and yes, then we are already at the end of this video arrived
What I want to show you here at the end is that of course this page too is completely "responsive" and here you can see how the whole thing looks like on a smartphone Of course we should not forget to save all the changes and we go back to "Edit page" and click on "To update", close the preview, I can also close this tab and now let's take another look at the page and now we are at the end of this video I hope you enjoyed it and that I could help you with that and Of course I am always happy about a "subscription" or a "thumbs up" Until next time!