{"id":7415,"date":"2014-05-29T16:08:08","date_gmt":"2014-05-29T23:08:08","guid":{"rendered":"http:\/\/www.yola.com\/blog\/?p=7415"},"modified":"2014-05-29T16:10:15","modified_gmt":"2014-05-29T23:10:15","slug":"5-minute-website-fixes-creating-a-contact-page-with-a-custom-map-banner-image","status":"publish","type":"post","link":"https:\/\/www.yola.com\/blog\/5-minute-website-fixes-creating-a-contact-page-with-a-custom-map-banner-image\/","title":{"rendered":"5-Minute Website Fixes: Creating a Contact Page with a Custom Map Banner Image"},"content":{"rendered":"

Throughout our 5-minute website fix series, we\u2019ve brought you quick, pain-free ways to update your site. We\u2019ve filled you in on driving conversions with landing pages<\/a>, giving your site the Flat look<\/a>, creating custom backgrounds<\/a> as well as many more tricks of the trade.<\/p>\n

This week, we\u2019re excited to show you our latest tip to give your site a modern appeal \u2013 creating a contact page with a custom map as a banner image.<\/p>\n

\"5-minuteBefore 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.<\/p>\n

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\u2019ll need to add in the tiniest bit of code to make room for your custom map. Now, don\u2019t let the term code<\/em> intimidate you \u2013 removing banner images with the HTML widget is a cinch.<\/p>\n

While in Sitebuilder, simply drag and drop the HTML widget (located in the \u201cPopular\u201d tab of Widgets) onto your contact page, and copy and paste the following code into the widget:<\/p>\n

<style>#sys_banner {display:none;}<\/style><\/em><\/p>\n

\"5-minute
\nGo ahead and hit the \u201cSave\u201d button and your banner will be removed on this page only.<\/p>\n

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.<\/p>\n

Hop into Style Designer, and remove your Content Padding from each side.<\/p>\n

\"5-minute<\/p>\n

Next up \u2013 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.<\/p>\n

\"5-minute<\/p>\n

Once you\u2019ve found your location, click settings, and we\u2019ll get rolling!<\/p>\n

\"5-minute<\/p>\n

Now, since we want the map to extend the width of your content area, you\u2019ll want to check \u201cAuto Width\u201d to make it line right up with the end of your content area, and hit \u201cSave.\u201d<\/p>\n

Now, go ahead and preview your site, and see how great it looks!<\/p>\n

Have any great tips you\u2019d like to see featured on the 5-Minute Website Fixes series? Let us know!<\/p>\n","protected":false},"excerpt":{"rendered":"

Throughout our 5-minute website fix series, we\u2019ve brought you quick, pain-free ways to update your site. We\u2019ve 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\u2019re excited to show you our latest tip to… Read More »5-Minute Website Fixes: Creating a Contact Page with a Custom Map Banner Image<\/span><\/a><\/p>\n","protected":false},"author":456,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","neve_meta_reading_time":"","_themeisle_gutenberg_block_has_review":false},"categories":[130],"tags":[596,728,297,777],"_links":{"self":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/7415"}],"collection":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/users\/456"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/comments?post=7415"}],"version-history":[{"count":7,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/7415\/revisions"}],"predecessor-version":[{"id":7427,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/7415\/revisions\/7427"}],"wp:attachment":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/media?parent=7415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/categories?post=7415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/tags?post=7415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}