\nWe\u2019ll take these elements one by one:<\/p>\n
- \n
- Copyright<\/strong><\/li>\n<\/ul>\n
The copyright notice, although not mandatory, is still a must-have for any website. It is a notice that helps to prevent copyright infringement. In case someone copies elements of your website, those persons can’t claim ignorance. Footers containing only the copyright notice have a simple, yet elegant presentation.<\/p>\n
The copyright notice usually includes the \u00a9 symbol (copyright symbol), the year of publication, and the name of the copyright owner.
\n![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/copyright-min-1024x395.png\")
<\/p>\n- \n
- Terms of service<\/strong><\/li>\n<\/ul>\n
As the copyright notice, the terms of service are not mandatory, but they should be included in the website footer. They refer to the general rules and guidelines people are deemed to follow when using your website. They may be named as such (\u201cTerms of Service\u201d) or \u201cTerms of Use\u201d or \u201cConditions of Use\u201d, like in the example of Amazon:<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/terms-of-service-min-1024x358.png\")
\nTerms of service can be enforceable, through the browsewrap and clickwrap<\/a> methods. The browsewrap method refers to the inclusion of the Terms of Service through a link in the website footer. The clickwrap method, however, refers to the placement of the terms of service in forms, i.e. when users try to create an account. When they click \u201cSubmit\u201d, they also have to agree to the terms of service of that site.<\/p>\n- \n
- Contact, address and business hours<\/strong><\/li>\n<\/ul>\n
One of the most important elements in a website footer is contact information. If people like what they see on the page, they will want to further get in touch with you. Leaving a phone number, email address and physical address in the footer will help them a lot.<\/p>\n
Sometimes, it is also recommended to include a map for simple geo-localization as well as what business hours a company operates.<\/p>\n
All you need to do is transmit that you are findable through some points of contact, easy to be identified in the website footer.<\/p>\n
The footer below was created with the Mesmerize theme<\/strong><\/a>, for the Pizza restaurant demo<\/a>.<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/footer-address-business-hours-min-1024x232.jpg\")
Mesmerize Theme<\/a> Footer<\/p><\/div>\n
<\/p>\n
- \n
- Social media buttons<\/strong><\/li>\n<\/ul>\n
It is a best practice that you should place social media icons in the footer of your webpages. You want your visitors to stay as long as possible on the site. And you will want to direct them to other places\/groups only after they have taken into consideration the whole information presented on the website.<\/p>\n
That is why putting social media icons in the header or body of the page is not quite recommended. However, when placed in the website footer, they make your visitors dwell longer with your business (even if somewhere else online).<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/social-media-buttons-min-1024x164.png\")
<\/p>\n- \n
- Widgets<\/strong><\/li>\n<\/ul>\n
Widgets are small applications that can help you insert different pieces of content into the website footer. Some examples include Calendar, Archives, Categories, Recent Posts, Recent Comments\u2026 and the list continues.<\/p>\n
Below is an example of footer with widgets included:<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/widgets-min.png\")
<\/p>\n- \n
- Description<\/strong><\/li>\n<\/ul>\n
Some might want to include a description in their website footer. Or some links with short presentations of what characterizes the business. The above example is representative of a website presentation placed in the footer. Here is another example – with links to short presentations of a business:<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/description-min-1024x364.png\")
<\/p>\n<\/p>\n
- \n
- Search box<\/strong><\/li>\n<\/ul>\n
It might be useful to include a search box in the website footer. Users might not have found what they were looking for in the page body; when they hit the page bottom, you offer them the possibility to perform a specific search for the item they are searching for. This is a sign that, although they reached the end of a page, they have not reached the end of the website. They might navigate further into the website and consult the needed information.<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/search-box-min.png\")
<\/p>\n<\/p>\n
- \n
- Subscription option<\/strong><\/li>\n<\/ul>\n
It\u2019s common practice to put an email signup form in the website footer. Users that find helpful the information in the website will be inclined to subscribe to a newsletter, when they find this option in the footer.<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/footer-subscription-min-1024x289.jpg\")
Footer built with Mesmerize Theme<\/a><\/p><\/div>\n
<\/p>\n
- \n
- Call-to-action<\/strong><\/li>\n<\/ul>\n
It is recommended that you include a clear CTA in your website footer.\u00a0Now it\u2019s time for you to take action. Don\u2019t let this moment pass by, and invite users to further exploration, like in the example below. CTAs might well increase conversion rates, by helping undecided users to make up their mind, in favour of a product\/piece of information\/service, etc.<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/CTA-min-1024x563.png\")
<\/p>\nWhat inspires your website footer?<\/h2>\n
With the elements listed above, you can make a mix of visual and writing that leaves the users with certain impressions about your website.
\nSo, what does a website footer inspire in the readers?<\/p>\n- \n
- Reviewing the website<\/strong><\/li>\n<\/ul>\n
A quick glimpse back into the website can trigger stronger connections of the users with that website. An overview of the most important pages\/information, in the form of a shortlist of links, can go a long way in further engaging the users.<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/review-website-min.png\")
Source: https:\/\/www.awwwards.com\/<\/p><\/div>\n
- \n
- Continue navigation within the website<\/strong><\/li>\n<\/ul>\n
Sometimes, the footer can be so intriguing, that it doesn\u2019t let the user go. It invites him\/her to continue navigating within the website, and find the answer to a key question: is this website appealing to me? What do you think about this:<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/continue-navigation-min-1024x509.png\")
Source: https:\/\/www.awwwards.com\/<\/p><\/div>\n
<\/p>\n
- \n
- Action (contact, CTA)<\/strong><\/li>\n<\/ul>\n
An encouragement to take action (be it directly or indirectly) can well find its way into a website footer. Shell invites users to perform a certain action, based on their profile and in a very elegant manner:<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/action-min-1024x350.png\")
\nThe centered column briefly asks \u201cCan we help?\u201d and gives the list of possibilities to act upon the situation that best describes a certain user.<\/p>\n- \n
- A sense of belonging to a community<\/strong><\/li>\n<\/ul>\n
There are different ways a website owner can design their footer to express this feeling. In the example below, the designer does this visually, by expressing in several colourful graphic elements the atmosphere in a certain geo-location, at a given time.<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/belonging-to-a-community-min.png\")
Source: https:\/\/www.awwwards.com\/<\/p><\/div>\n
- \n
- Cleanness<\/strong><\/li>\n<\/ul>\n
By respecting a certain hierarchy of information, and grouping links accordingly, a website footer can give the impression of being organized, neat and clean, and ready to be explored. This is what the example below conveys when being scanned by users already reaching the website footer:<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/footer-clean-min-1024x225.jpg\")
Footer built with Mesmerize Theme<\/a><\/p><\/div>\n
- \n
- Professionalism<\/strong><\/li>\n<\/ul>\n
A good-looking footer has all chances to look professional and transmit that there are no superfluous items in the dedicated space. No items are redundant, and everything is well placed to transmit the values inherent to the organization.<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/professionalism-min-1024x264.png\")
<\/p>\nMost popular types of website footers<\/h2>\n
Below you can find the most popular types of website footers, learn when to use them, and what they do for your website.<\/p>\n
Fat footers<\/h3>\n
There is a general trend in web design that encourages the creation of footers with plenty of elements and information. Why this?<\/p>\n
A study revealed<\/a> that, although the most-viewed space of the page is placed above the fold, the most-engaged users are those that spend more time and engage with the website more at the bottom of the website. The below the fold space is thus viewed for nearly 3 times longer than the above the fold space.<\/p>\n
Joulefinancial.com offers plenty of information in its footer, making it easy for visitors to find contact data and plunge into more educational info provided by the site.<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/joule-financial-min-1024x602.png\")
<\/p>\nSub-footers<\/h3>\n
Sub-footers let website owners add a secondary level to a webpage footer. Information that is necessary, but which website owners do not want to showcase in a specific way, can be placed into a sub-footer.<\/p>\n
Copyright, social media icons or subscribe buttons can be arranged under some useful site links and any other valuable information.<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/sub-footers-min-1024x497.png\")
<\/p>\nCTA-focused footer<\/h3>\n
Demicreative.com<\/strong> has a plain call-to-action, when inviting users to \u201cGive us a shout\u201d. The invitation is followed by the mail address and the phone number, facilitating people to \u201cgive a shout\u201d regarding their brand.\u00a0 The blue background is reassuring and professional, smoothing the way these people can enter a collaboration with Demicreative.<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/demi-creative-min-1024x501.png\")
\nBluestag.co.uk<\/strong> also has a clear call-to-action, \u201cHire Us\u201d, followed by the contact details. The phone number and the email address are clickable and ease the contact process for all who are inclined to \u201chire\u201d Bluestag.co.uk.<\/p>\n![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/bluestag-min-1024x440.png\")
<\/p>\nSocialtriggers.com<\/strong> has a more obvious call-to-action. The traditional CTA button is outstanding – in the website footer, by its placement and its salient color.<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/socialtriggers-min-1024x326.png\")
\nEmaildesign.beefree.io<\/strong> is another example of CTA-focused footer. After having consulted the webpage, people are more inclined to select the services the company provides. That is why the button saying \u201cTake me to the Bee Mail Editor\u201d invites people to try the service of the company, even from the website footer.<\/p>\n![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/email-design-min-1024x419.png\")
<\/p>\n\u201cAbout Company\u201d-focused footer<\/h3>\n
Social Fresh<\/strong> only has a link in the menu, towards an \u201cAbout us\u201d page. The rest of the homepage is filled with articles that consolidate their competencies, so the need to find out more about the company might arise when reaching the page bottom. As a result, they included a short description of the company on the left side of the footer, for people that are more interested in their activity.<\/p>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/social-fresh-min-1024x505.png\")
\nWpbeginner.com<\/strong> has a similar footer, with some space dedicated to a description of the company. It addresses people who have been interested in one article, and who are afterwards interested in finding out more about Wpbeginner.com. Based on how convincing the description is, people decide whether they mark the website as a point of reference for future related searches.<\/p>\n![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/wp-beginner-min-1024x386.png\")
<\/p>\nSitemap and links at the center of the footer<\/h3>\n
This footer example for our Mesmerize Fashion website demo<\/a>\u00a0 was designed to be rich in links, presenting the organization and the latest posts published on the blog. They are structured according to a simple hierarchy, to meet the standards for cleanness and avoid clutter.<\/p>\n
- Professionalism<\/strong><\/li>\n<\/ul>\n
- Cleanness<\/strong><\/li>\n<\/ul>\n
- A sense of belonging to a community<\/strong><\/li>\n<\/ul>\n
- Action (contact, CTA)<\/strong><\/li>\n<\/ul>\n
- Continue navigation within the website<\/strong><\/li>\n<\/ul>\n
- Reviewing the website<\/strong><\/li>\n<\/ul>\n
- Call-to-action<\/strong><\/li>\n<\/ul>\n
- Subscription option<\/strong><\/li>\n<\/ul>\n
- Search box<\/strong><\/li>\n<\/ul>\n
- Description<\/strong><\/li>\n<\/ul>\n
- Widgets<\/strong><\/li>\n<\/ul>\n
- Social media buttons<\/strong><\/li>\n<\/ul>\n
- Contact, address and business hours<\/strong><\/li>\n<\/ul>\n
- Terms of service<\/strong><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/footer-sitemap-min-1024x219.jpg\")
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/ny-times-min-1024x455.png\")
<\/p>\n![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/webflow-ecommerce-min-1024x488.png\")
<\/p>\n![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/animoto-min-1024x141.png\")
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/chobani-min-1024x235.png\")
![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/architectural-digest-min-1024x493.png\")
<\/p>\n![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/blue-fountain-media-min-1024x452.png\")
<\/p>\n![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/guerlain-min-1024x174.png\")
<\/p>\n![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/ebay-min-1024x356.png\")
<\/p>\n![\"\"](\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/05\/no-footer-min-1024x518.png\")
<\/p>\n