Throughout our 5-minute website fix series, we’ve brought you quick, pain-free ways to update your site. We’ve filled you in on driving conversions with landing pages, giving your site the Flat look, creating custom backgrounds as well as many more tricks of the trade.
This week, we’re excited to show you our latest tip to give your site a modern appeal – creating a contact page with a custom map as a banner image.
Before we get started with the fun, one important note is that this new 5 minute fix has best results on our two most flexible Styles: Super Flat and Skyline.
Super Flat and Skyline each are capable of giving your site big, beautiful banner images on each of your pages. That being said, if you do in fact have banner images on each page, you’ll need to add in the tiniest bit of code to make room for your custom map. Now, don’t let the term code intimidate you – removing banner images with the HTML widget is a cinch.
While in Sitebuilder, simply drag and drop the HTML widget (located in the “Popular” tab of Widgets) onto your contact page, and copy and paste the following code into the widget:
Go ahead and hit the “Save” button and your banner will be removed on this page only.
In addition, you will want to remove the Content Padding from Style Designer, to make your map line right up with the edge of your content background.
Hop into Style Designer, and remove your Content Padding from each side.
Next up – adding the custom map. Drag and drop the Google Map widget just below your navigation. This will bring up a map, where you can search for your exact location.
Once you’ve found your location, click settings, and we’ll get rolling!
Now, since we want the map to extend the width of your content area, you’ll want to check “Auto Width” to make it line right up with the end of your content area, and hit “Save.”
Now, go ahead and preview your site, and see how great it looks!
Have any great tips you’d like to see featured on the 5-Minute Website Fixes series? Let us know!