{"id":6942,"date":"2014-03-03T16:27:40","date_gmt":"2014-03-03T23:27:40","guid":{"rendered":"http:\/\/www.yola.com\/blog\/?p=6942"},"modified":"2014-12-18T10:37:20","modified_gmt":"2014-12-18T17:37:20","slug":"5-minutes-website-fixes-look-like-a-big-brand-with-a-custom-footer","status":"publish","type":"post","link":"https:\/\/www.yola.com\/blog\/5-minutes-website-fixes-look-like-a-big-brand-with-a-custom-footer\/","title":{"rendered":"5-minutes website fixes: Look like a big brand with a custom footer"},"content":{"rendered":"

When it comes to the design of big brand websites<\/a>, there are a few things they rarely stray from: clear calls-to-action<\/a>, a memorable logo<\/a>, and a custom footer. Although your site\u2019s footer may not grab the attention of your audience the way a call to action or a logo would, it should not be dismissed \u2013 a successful footer can act as a right-hand-man for your site\u2019s navigation.<\/p>\n

These footers are known for holding a basic site map, allowing users to get to precisely the page they\u2019re looking for in just one click. This site map tends to include links to each of the pages in your navigation, the social networks your business is on and any other link you may find informative to your users.<\/p>\n

Take a look at Evernote\u2019s footer as an example. As you can see, any visitors who are familiar with the site is able to find the page they\u2019re looking for without having to click through numerous pages to get there. These veteran visitors or existing customers don\u2019t always want to go through the careful flow that you\u2019ve put in place for new visitors.<\/p>\n

\"Evernote
\nIntrigued? Let\u2019s get to building.<\/p>\n

To start, once in Sitebuilder, open Style Designer and scroll all the way down to \u201cOptions.\u201d From there, since we are going to be creating our own custom footer, go ahead and uncheck \u201cDisplay Footer.\u201d<\/p>\n

\"drag
\nNext, scroll up to \u201cLayout,\u201d and remove all of your site\u2019s \u201cContent Padding.\u201d<\/p>\n

\"remove
\nNote:<\/strong> Removing your site\u2019s content padding will change the look of your site\u2019s layout, as it will no longer have spacing from the content border. This is easily fixed by adjusting the margin on the widgets placed on your site. You can always test this out on a new site before putting it on your own.<\/p>\n

\"Add
\nOnce you\u2019ve removed your Content Padding, go ahead and click \u201cSave,\u201d and exit out of Style Designer.<\/p>\n

Next, drag and drop the custom panel widget to the bottom of your site content.<\/p>\n

\"drag
\nNext we will adjust the settings of your Custom Panel Widget. Under the \u201cPresets\u201d tab, the preset in the upper right-hand corner will be selected \u2013 you can keep this as-is.<\/p>\n

\"Edit
\nNext, click the \u201cBackground\u201d tab to choose what color you would like your footer to be.<\/p>\n

\"Add
\nOnce you\u2019ve decided on a background, click the \u201cBorder\u201d tab and bring that 1px down to 0px.<\/p>\n

\"Remove
\nNext, click the \u201cSpacing\u201d tab to change the margin of your new footer.\u00a0To make your Custom Panel Widget extend to the edge of your Content Background, we will need to remove all of the margin. Click the slider beneath “Margin,” and shift it all the way to the left until each side says 0px.<\/p>\n

\"Custom<\/p>\n

Go ahead and click \u201cSave,\u201d and your custom footer has been built!<\/p>\n

Next, let\u2019s add content.<\/p>\n

For the sake of this example, we will create a four-column footer. Drag and drop a column divider widget into your footer. Next, drag and drop two additional column divider widgets, one on each side, to create four columns.<\/p>\n

\"add
\nNow, start adding in links to your sitemap. Also note that it\u2019s important to make use of different Headers<\/a> when creating your footer, allowing users to distinguish between headings and links.<\/p>\n

\"Add
\nOnce completed, go ahead and publish your new, fabulous looking footer and take a moment to sit back and admire your work.<\/p>\n

\"Your
\nHave you created your own custom footer yet? Show us what your creativity has come up with!<\/p>\n

For more quick site-building tips, check out our other posts in the series:<\/p>\n