When it comes to the design of big brand websites, there are a few things they rarely stray from: clear calls-to-action, a memorable logo, and a custom footer. Although your site’s footer may not grab the attention of your audience the way a call to action or a logo would, it should not be dismissed – a successful footer can act as a right-hand-man for your site’s navigation.
These footers are known for holding a basic site map, allowing users to get to precisely the page they’re 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.
Take a look at Evernote’s footer as an example. As you can see, any visitors who are familiar with the site is able to find the page they’re looking for without having to click through numerous pages to get there. These veteran visitors or existing customers don’t always want to go through the careful flow that you’ve put in place for new visitors.
Intrigued? Let’s get to building.
To start, once in Sitebuilder, open Style Designer and scroll all the way down to “Options.” From there, since we are going to be creating our own custom footer, go ahead and uncheck “Display Footer.”
Next, scroll up to “Layout,” and remove all of your site’s “Content Padding.”
Note: Removing your site’s content padding will change the look of your site’s 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.
Once you’ve removed your Content Padding, go ahead and click “Save,” and exit out of Style Designer.
Next, drag and drop the custom panel widget to the bottom of your site content.
Next we will adjust the settings of your Custom Panel Widget. Under the “Presets” tab, the preset in the upper right-hand corner will be selected – you can keep this as-is.
Next, click the “Background” tab to choose what color you would like your footer to be.
Once you’ve decided on a background, click the “Border” tab and bring that 1px down to 0px.
Next, click the “Spacing” tab to change the margin of your new footer. To 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.
Go ahead and click “Save,” and your custom footer has been built!
Next, let’s add content.
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.
Now, start adding in links to your sitemap. Also note that it’s important to make use of different Headers when creating your footer, allowing users to distinguish between headings and links.
Once completed, go ahead and publish your new, fabulous looking footer and take a moment to sit back and admire your work.
Have you created your own custom footer yet? Show us what your creativity has come up with!
For more quick site-building tips, check out our other posts in the series:
A great feature to have, but not being able to simply copy the whole widget onto every page, I won’t be including it on my website…. I simply don’t have the time (or patience really) to sit there and copy the whole thing onto all my pages. Please introduce a system where you can copy a widget and paste it onto other pages.
The menu in the Style Designer has: Presets, Colors and Fonts. Does not have anything else. So now tell me how to do this.
An enhanced footer really makes a site. I always include a sitemap and have recently liked the facebook feed plugin, called the “facebook like box”
Thank you so much for posting this! I’ve always wanted a professional looking footer on my website.
Unfortunately I have a lot of pages to my site and making this kind of change is going to take a long time. It would be really nice if Yola had a feature of saving widgets.