Site Building Advice One Response

5-Minute Website Fixes: Creating a Contact Page with a Custom Map Banner Image

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.

5-minute website fixes- preview your Yola siteBefore 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:

<style>#sys_banner {display:none;}</style>

5-minute fix-removing your banner image
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.

5-minute website fixes- removing your content padding

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.

5-minute website fixes- adding in your custom map

Once you’ve found your location, click settings, and we’ll get rolling!

5-minute website fixes- adjusting the settings on your custom map

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!

  • http://www.yola.com/ Yola

    Thanks! Glad you enjoyed it!