Beautiful footer. How to properly press a floating footer to the bottom of the page. Latest blog updates
Footer is the bottom block of a website page, the last but not the least important. The fact that the footer or “footer” of the site, as it is also called, is located at the bottom of the page, does not mean at all that it contains unimportant information and few people “get to” it. But at the same time, this part of the page should not be overloaded with unnecessary data. What is best to include in the footer and how to make it as functional as possible?
We recently went through the websites of 50 Ukrainian online stores and assessed their footers based on several parameters, including the number of links, the presence of links to social media accounts or newsletter subscriptions. The sites were chosen randomly, but we tried to cover a variety of areas of online sales, for example: electronics and household appliances, fashion, cosmetics and perfumes, products for children, food, building materials, marketplaces, shopping clubs, etc. The list of online stores we studied included both leaders in their industries and newcomers.
useful links
The average number of links contained in the footers we reviewed was 21.
We counted the smallest number of active links for the online store PARFUMS.UA - 5 links, not counting the “Up” button.
We counted the least number of links on the PARFUMS.UA company website: store pages on social networks and contact information.
We counted the largest number of links, as many as 86, from another online store of cosmetics and perfumes, MakeUp.com.ua. Here, in addition to the newsletter subscription line, there are links to categories and subcategories, contacts, delivery information, news, articles and profiles on social networks, etc.
Most of the sites we visited used the footer as a block for useful information for the visitor who is interested in learning more about the store and how it works. Many sites have included in the footer, for example, links to the privacy policy, rules for using the site, etc.
88% of the sites we examined included a link to the “About Us” page in the footer. And another 88% - a link to a page with contacts or the contacts themselves. Only 22% of sites have links in the footer through which the user could, to one degree or another, receive service from the company. 56% of all sites we looked at included links to shipping and payment information and/or return policies in the footer.
Copyright. Protection of rights
The icon is present in the footers of 76% of online stores we analyzed.
On the website of the online store of gadgets and accessories “Citrus”, like on many other websites, there is a copyright protection sign.
According to the rules, the icon is followed by the name of the copyright holder and the period of validity of the copyright. Although unique content that appears on the site is by default subject to copyright law and is not required to be installed, most webmasters still add this icon to the site footer.
On the website of the online store of building materials “StroyMAG”, next to the copyright sign, the phrase “All rights reserved” is used.
In addition, along with the copyright symbol, many sites also use the phrase “All rights reserved,” which means that they have proof of authorship that they can present if something happens. In this way, site owners are trying to ensure that copy-pastors are warned that stealing is wrong.
Social networks and other marketing
As practice shows, the footer is also a place where a visitor can find links to the pages of an online store on social networks or another way to further interact with it.
Fully 92% of the footers studied contained links to social media accounts. This is the most popular element among the footers of the sites we analyzed.
For example, the footer of the website of the online flower store “Kviter”, like the footers of most of the sites we looked at, contains links to their accounts on popular social networks.
34% of online stores included a line for subscribing to e-mail or SMS newsletters in their footers. Some promise pleasant bonuses for subscribing, such as a coupon for a certain amount.
For example, in the online clothing store Answear, a subscription is changed to 300 UAH. to purchase.
30% of footers analyzed also included links to some form of marketing content. Most often these were links to a blog, articles, video reviews, etc.
Vacancies
Jobs are another fairly popular footer element. 40% of the sites we analyzed included links to this information at the bottom of their pages. Apparently, this is where users can look for potential job opportunities with the company.
Unexpected observations
We found such a seemingly suitable element for a footer, such as a site map, in only 30% of online stores.
Trust signs, for example, a safe purchase guarantee icon, were included in the footer by only 4 online stores out of all 50.
In the footer of the BonPrix shopping club website you can find an icon promising a safe purchase.
Payment method icons in the footer were also used by a small number of online stores - only 18%.
Your footer
This modest analysis of 50 footers of randomly selected online stores is, of course, not a scientific study. And the numbers we received can hardly be applied to the e-commerce industry as a whole. If, according to our analysis, 54% of online stores include phone numbers in their footers, this does not mean that 54% of all e-commerce sites do the same.
But this information is valuable food for thought that can help you decide what to add to your site's footer. Still, it is most logical to place some elements in the bottom block of the site, because that is where the user will expect to see them.
The site footer is the bottom part of the site, the basement. It is the opposite of (headers), correct design of the footer plays a huge role in the success of website promotion and improving its usability.
More videos on our channel - learn internet marketing with SEMANTICA
What is a website footer using an example
“It’s shoes that make a woman a woman,” says the secretary in the famous film. And she's right! If you are wearing felt boots, you are walking through a snowy forest. If the shoes are high heels, then you are in for an unforgettable evening. If you wear sneakers, then you are going to play sports or walk a lot. Is not it?
Many people think that if the footer is placed at the very bottom, the user does not have the patience to “scroll” to it, and therefore its design is less important than the design of the header. But that's not true.
What should be in the footer of the site
For a website to work, it must be convenient, readable and attractive to the visitor. Let's look at the elements of the site's footer and evaluate their significance. The footer doesn't have to contain all of these elements. Choose a custom list for your site.
- Map of site.
This full list site pages, displayed according to its structure. This element improves usability, facilitates user navigation, tells search engines about all pages of the site. If there are a lot of pages on the site, select the most important ones and display them in the HTML sitemap.
- Contacts.
Duplicate the contact information from the site header in the footer. You can place your most important contacts. If a visitor has reached the end of the page, it means that he has read all the information and there is a chance that he will make an order. For its convenience, it is necessary to place contacts.
- Feedback form.
Allows the visitor to contact you without leaving the current page. This is convenient for your potential clients.
- Up arrow".
Allows the visitor to instantly return to the site header without scrolling through a long page.
- Callback order form.
Works the same way as the feedback form. Do not forget that the call back must be made at the earliest short time. Otherwise, you will lose the trust of a potential client.
- Links to social networks.
If you actively communicate with visitors on social networks, place links to your groups and pages below. Social networks are important tools for connecting with customers and increasing their loyalty.
A somewhat outdated version of the navigation block, which makes it possible to quickly find the necessary pages.
- Developer link
What role does the footer play?
A beautiful footer - otherwise, a resource footer - does not just improve appearance site, but also useful for the user experience.
We will give basic tips on how to make a functional footer for your website.
Pay attention to:
- The importance of hierarchy. Don't lump information together. The user should be able to understand it easily.
- Clear lists. Allow more space for list headings than for the text itself.
- The presence of boundaries between elements.
- Unity of fonts. Use design styles that work well together.
- Splitting into columns. This structures the information.
- The presence of indentation between the footer and the last block of the site.
- Unity of the footer on all pages of the portal.
- Unity of styles for the footer and the entire site.
- Simplicity. Put yourself in the user's shoes. He should be able to easily find the information he is interested in.
- Use a sub-footer if there is too much information in the main part of the footer.
Each footer should be clearly separated from the main content of the site. Usually the footer is decorated in a different color, the content part of the web resource. The color of the footer may also differ slightly from the background of the site; usually the footer is darker.
Design your footer in an unusual way. For example, a basement design might include a folded piece of parchment. If the top contains an island and waves, then the bottom can be designed in the form of a seabed, and an open treasure chest will be an interesting element. On an artist’s website, the key element of the footer may be a brush and palette, and on a musician’s website, a black piano that turns into a black footer. The bottom of the site can also be designed in a clear classic style.
An interesting footer can also attract the user's attention.
This is some kind of nightmare! Why is the footer of your site “popping up” again and shifting the design? Is it really impossible to properly press the footer to the bottom of the page with something? Content or bricks at least! Brick won't fit into the monitor?
I see, then sit and do nothing until you read our article to the end.
Making the right footer for your website
Many website owners encounter this problem when the footer of the page simply floats to the top. And then it is not clear what to do. Most often, website designs made on a quick fix, on one's own ( circle “crazy hands”) or novice webmasters.
At the same time, nothing terrible happens in the first stages of the site’s life. And this idyll continues as long as the content puts “its weight” on the basement, preventing it from rising up. But it’s worth placing smaller volumes of material on the page, and the recently “calm” footer instantly rises to the top, bringing the entire site design into an inappropriate appearance.
To eliminate this “defect” of the designed template, it is not necessary to spend money on the services of a webmaster. Most often, the site footer can be put in place yourself. Let's consider everything possible options To resolve this issue:
First way
The first way to anchor a footer to the bottom of the page is based on CSS. Let's start with the example code, and then take a closer look at its implementation:
html ( height: 100%; ) header, nav, section, article, aside, footer ( display: block; ) body ( height: 100%; ) #wrapper ( width: 1000px; margin: 0 auto; min-height: 100 %; height: auto !important; height: 100%; ) #header ( height: 150px; background-color: rgb(0,255,255); ) #content ( padding: 100px; height:400px; background-color: rgb(51,255,102) ; ) #footer ( width: 1000px; margin: -100px auto 0; height: 100px; position: relative; background-color: rgb(51,51,204); )
In order to attach a footer tag to the bottom of the page
html ( height: 100%; ) body ( height: 100%; )
We also set the minimum height of the container layer to 100%. In case the width of the content is greater than the height of the container, set the property to auto . Thanks to this, the wrapper will automatically adjust to the width of the content placed on the page:
#wrapper ( min-height: 100%; height: auto !important; height: 100%; )
The "height: 100%" line of code is intended for older versions of IE that do not accept the min-height property.
To separate space for a footer in the page design, we set an indent for the tag
#content ( padding: 100px; )
At this stage, we have a web page that is full screen wide and has an additional 100 pixels, which are “neutralized” by a negative margin value for the footer (margin: -100px) when its position is set to relative (position: relative). So, by using a negative padding value, we "pull" the footer into the area of the container, which has its height set to 100%.
IN in this example web document markup is specified using relatively new HTML tags 5 that may be misinterpreted outdated versions browsers. Because of this, the entire page design may not be displayed correctly. To avoid this, you need to replace the new tags from the arsenal of version 5 of the hypertext language with regular ones
Improved version
The method discussed above on how to make the footer at the bottom of the page “unshakable” is not suitable for everyone. If you are going to modify and improve the design of your site using pop-ups in the future, then it is better to stop using the previous implementation.
Most often used in the implementation of pop-up windows CSS property z-index. Using its values, you specify the order in which the layers are stacked on top of each other.
The higher the z-index value of an element, the higher it will appear in the overall “layering” stack.
But because we used a negative padding value for the footer in the previous example, the bottom of the popup will overlap the top footer area. Even though it will have a higher z-index value. Because the popup window's parent (wrapper) still has a lower value for this property.
Here's a more advanced option:
CSS - example code:
html, body ( height: 100%; ) .header ( height:120px; background-color: rgb(0,255,102); ) .main ( min-height:100%; position: relative; background-color: rgb(100,255,255); ) .footer ( height:150px; position: absolute; left: 0; bottom: 0; width: 100%; background-color: rgb(0,0,153); )
As you can see from the code, we placed the footer as part of the main element. We set relative positioning for the container, and absolute positioning for the footer. We fixed the basement at the very bottom of the container, setting its position on the left and top to 0.
Option for a basement with a non-fixed height
The previous implementations can ensure that the footer is always at the bottom of the page. But only if the footer is of a fixed width. But what if the amount of content posted in it cannot be predicted?
This will require a more advanced option for a non-fixed basement. It sets the footer to table-row for its display property. This will make it appear as a table row.
If shoes are the final component of any outfit, then the footer for an e-Commerce site is the final element of its selling design. By focusing on the bottom element, the footer, modern websites are ready to showcase their personality in every way possible. In a competitive e-commerce environment, there are enough original ideas, creativity and design trends. Before diversifying the footer of an E-commerce site, it is worth considering important points. What to place first and what is the best way to do it? Our roundup of inspiring footer designs has some interesting options.
Read also: 13 eCommerce Marketing Trends for 2019
Interesting statistics from Chartbeat. A study of the behavior of 25 million users showed how deeply they browse pages. It turns out that the user's attention is drawn to the space below the fold line. Receiving more practically useful information, visitors linger longest in the area 1200px from the top of the page (with an average 700px vertical screen in the browser), or behind the second screen.
View time (sec.) / Distance from top of page (pixels)
There is a large gap in the duration of viewing the first and second screens. The TOP is 4 seconds, the duration reaches a maximum (16 seconds) at 1200 pixels from the top and with further scrolling, it slowly decreases.
Share of visitors (%) / Distance from top of page (pixels)
A significant portion of visitors (more than 25%) do not even wait for the content to load and start scrolling the page. This means that only 75% will see the very top first. The most viewed area of the page is 550px (just above the fold line).
The study dispels the myth that users don't scroll to the bottom of the page and watch all the content. The footer is also important for a modern eCommerce site, and even has its own advantages.
Ideas on how to design a “basement” (footer), examples of selling designs
These 10 tips will tell you how to beautifully design the footer for a website - according to the rules of composition in web design and solving priority tasks. Apply the most appropriate tactics to improve usability, UX ( user experience) and even increase sales.
1. Required information
Traditionally, the required organizational and legal issues are covered in the footer of the site. Notifications are designed with less noticeable text, which frees up other areas of the pages for more meaningful elements. Here's a sample list to consider:
- Copyright notices
- Legal Disclaimers
- Billing information
- Cookie Notice
The website selling the product must meet legal requirements and provide information about the procedure and return periods. Its location in the footer is convenient for both the selling resource and visitors.
Footer example: Yves Rocher
Online store of the Yves Rocher brand: full-screen footer with a pleasant design of alternating layers. Informs about the company, the infrastructure of the selling website - from order tracking to personal data policy. There are also tips on using the product, bonuses, promotions
Example footer: Lumity
Dealers of nutritional supplements are subject to increased legal requirements. responsibility. There are quite a few things they should/shouldn't say on their sales website. Links to legal information are highlighted in bold for better visibility.
A footer with a beautiful background image fits very organically into the overall design of the site. There is no clear boundary, rather the content itself serves as a separator
Example footer: Saddleback Leather Co
A selling website with a beautiful retro header and footer design. 100-year warranty against defects in material and finish. Return conditions are accompanied by interesting stories... not everything is so sad with the necessary e-Commerce information, it turns out
2. Negative space – sufficient visual distance
When limiting the number of footer links, don't skimp on negative space - this will have a stunning effect on visual perception and improve readability. General rule: By maintaining visual hierarchy, central elements are noticed faster (can be used to your advantage!).
Footer example: QUAY AUSTRALIA
With a minimalistic style and a fixed drop-down menu, the online store can afford a spacious footer
Footer example: Incase
About the large amount of micro-negative space (between small elements) we can say this: as long as all the necessary information is present, it is legible and quickly perceived - everything is fine
Example footer: Stumptown Coffee Roasters
The spacious footer of a coffee site is an excellent completion of a clean design composition, in which there is a lot of macro-negative space (“air” between sections/sections)
3. Final call to action
Read also: 30+ examples and ideas for designing target action buttons
The stylish design of the footer speaks volumes about the resource itself. It’s important to note: the buyer stays here a little longer than in other parts of the page. A convenient opportunity for one more, final call to action. Often this is a subscription/newsletter, but you can also link a CTA call to account registration.
Footer example: Greetabl
Greetabl has a modestly designed bottom of its pages that includes a call to subscribe. With a minimum of elements, the call becomes noticeable, and in harmony with the turquoise background it turns into a decoration of the site
Footer example: Ecwid
Nice design with calls to action at the bottom of the pages. The structure of the selling website builder is universal. It has been translated into 35 languages for its million customers.
4. Floating cart – increasing the availability of selling functionality
Accessing the shopping cart from the bottom of the site is a great way to improve the usability and selling qualities of the site.
Footer example: Lemonadela
The selling website of the catering company is pleasant to look at and convenient for the buyer
5. Footer navigation
The bottom part of the site is ideal for information that is not often viewed: about the company, terms of service and privacy policy. In this case, the function of the footer is to save everyone. Feeling lost in the eCommerce environment, someone becomes interested in infrastructure electronic store, instinctively scrolling further...
Negative space is essential for the readability of content. In general, the “footer” is not for navigation purposes, unlike a menu or site map. Only in rare cases, e-commerce sites place individual product categories in the footer (
All wordpress templates consist of several files that are responsible for processing and displaying one or another part of the blog - header, main content, sidebar and footer. Today we will talk about the latter. The footer (footer of the site) is its lower part with all the content. Most often it is used by a webmaster to provide information such as creation date, copyright protection, title, etc. But not in all WordPress themes This is easy to implement, some simply don’t have simple options for adding information to the footer.
What to place in the site footer?
First, let's decide what type of site, what can be placed in the basement to improve behavioral factors.
Contact Information Most suitable for web stores. Placing the address of a travel card, phone number, mail address of a store or organization, etc. in the basement allows a person to make an order or purchase faster.
Navigation or repeating the navigation block is suitable for any type of site. This is very important for long pages. In this case, the user will not have to go back to the top to go to the desired section. But if you do not want to place a navigation block in the footer, then you can quickly return to the top using the up arrow.
Social bookmarks, if the content of your site involves mass discussion, or you post reviews of events related to the development of the topic, then in the footer you can place links to social media in which you promote the resource. The tag cloud, as well as the additional navigation block, is suitable for all types of sites. Placing a 3D tag cloud in the footer will not only be convenient for users, but also beautiful from a design perspective.
It is necessary to note that the chance of clicking on footer links if it is not beautiful and informative is close to zero due to the inconspicuousness of such a footer.
Examples of beautifully designed website footers
In order to create a beautiful and informative footer, we bring to your attention the most famous works of web design studios:
1. Design solution of the French web studio KDIGIT:
2. Footer design by web design studio SNOWDEN industries:
3. Design solution for the footer of the Swedish company Uforia CMS:
4. Elegant footer design by Tapbots:
5. Footer of the web design studio Ready made designs:
6. Mecannical footer design:
7. Beautiful footer design:
As I hope you have already understood, all these footers are implemented on the basis of beautiful background images and blocks of information placed on them. If you shouldn’t have any particular difficulties creating a background image, fortunately there are various image editors like Photoshop for this, then with quick and convenient placement of information in blocks it is possible.
Adding blocks of information to the footer
The most in a simple way adding blocks of information to the footer will add a block of footer widgets to the WordPress admin panel. To create such a block of widgets, you need to open the admin menu—>editor and in the column on the right, select the functions.php file, in which we add the code:
if (function_exists("register_sidebar")) register_sidebar(array("name" => "Footer Sidebar", "before_widget" => "", "after_widget" => "", "before_title" => "
if (function_exists("register_sidebar" ) ) register_sidebar(array( "name" => "Footer Sidebar" , "before_widget" => "" , "after_widget" => "" , "before_title" => " "
,
"
,
)
)
;
"after_title" => " |
This is the code for registering a new block of widgets in the admin panel, where 'name' is the name of the widget, 'before_widget' is the displayed HTML code before the widget, and 'after_widget' is the displayed HTML code after the widget, as well as the code before and after the title header. It is usually added to the very beginning of the functions.php file.
Save the contents of functions.php and go to the “Widgets” section. If everything was done without errors, then you will find a new block there:
So, we have made the display of a new block of widgets in the admin menu, now we need to display the widgets of this block on the site. To do this, open the admin menu -> editor and select the file footer.php on the right. By the way, such widget blocks can be displayed not only in the footer, but also in any other place on the site.
In the footer.php file add the following code.