How to properly push the floating footer to the bottom of the page. How to properly push the floating footer to the bottom of the page Floating footer and mobile devices

Hello, dear friends and guests of the blog! Today we will talk about creating a site, or rather, about its one component - Site Footer, according to the scientific Footer HTML or just footer. Despite the fact that this is the least visible part of the site and few people pay attention to it, it seems so at first glance and many people think so. And because of this, many often neglect the design of the basement of the site, which is fundamentally wrong and wrong!

Since the footer of the site is just as important as the header and body, or, correctly, header and body. So let's get down to the fact that we will arrange our site footers as befits a good site builder, and I will try to help you with this!

So let's start from the beginning...

What is a website footer or Footer HTML?

The footer of the site is its lowest part, where the webmaster usually places links to go to the main page, maybe the menu of the entire site, page navigation, about the author, about the project, about the site, contact information, page transitions for frequently asked questions questions, links to social networks and their buttons, informers and counters, and what is not placed in the footer of the site. All the information that the webmaster himself can come up with!

And the one who thinks that few visitors enter the basement of the site is wrong, he is fundamentally wrong!

And based on this, you need to pay no less attention to the footer of the site than to its, at first glance, more visible parts, like the body and header of the site. Although I repeat myself, I think that it is not in vain. This is how I am trying to explain to you the significance and importance of the proper design of the footer of the site!

How to properly design the footer of the site?

There is nothing difficult in this! I will now present to you several types of quite beautiful and presentable basements for your sites. And you can choose the most suitable one from them, and also at the end of this article there will be a link where you can download all the footers for sites presented by me and, of course, use them when creating your new sites, or replace existing ones with mine, more attractive ones footerhtml.

This is the first footer of the site:

This is the second footer for the site:

This is the third footer for the site:

This is the fourth footer for the site:

This is the fifth footer of the site:

This is the sixth footer of the site:

Well, how do you like these Footer HTML? Did you like at least one of them? I hope that yes?!

If you like them, then I suggest you download them completely free of charge right now and use them for your own purposes!

The folder you downloaded contains six Footer HTML files. And you just have to correct the content in a text editor for your site and that's it!

Speaking of text editor! For example, I use, and advise you, only. Since it is the most convenient and safe!

Now that's all. Thank you for your attention!

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. It is most commonly used by a webmaster to represent information such as creation date, copyright protection, title, and so on. But, not all wordpress themes are easy to implement, some simply do not have simple options for adding information to the footer.

What to put in the footer of the site?

To begin with, let's decide what type of site, what can be placed in the footer to improve behavioral factors.

Contact Information most suitable for web stores. Placement in the basement of the address of a map, telephone, mail address of a store or organization, etc., allows a person to make an order or purchase faster.

Navigation or repeating the navigation block is fine, for any kind of sites. This is very true for long pages. In this case, the user does 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 a quick return to the top can be implemented with the up arrow.

social bookmarking, if the content of your site involves a 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 networks in which you are promoting the resource. The tag cloud, as well as the additional navigation block, will suit all types of sites. The location in the footer of the 3D tag cloud, it will not only be convenient for users, but also beautiful from the design side.

It should be noted 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. Design of the footer of the design web studio SNOWDEN industries:

3. Design solution in the design of the footer of the Swedish company Uforia CMS:

4. Sleek Tapbots Footer Design:

5. Ready made designs footer:

6. Footer design by Mecannical:

7. Beautiful footer design:

As you probably already understood, all these footers are based on beautiful background images and blocks of information placed on them. If you should not have any particular difficulties with creating a background image, since there are various image editors like Photoshop for this, then it is possible with quick and convenient placement in information blocks.

Adding information blocks to the footer

The easiest way to add information blocks to the footer is to add a footer widget block to the WordPress admin area. 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" => "

", "after_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 widget block in the admin, where 'name' is the name of the widget, 'before_widget' is the rendered HTML code before the widget, and 'after_widget' is the rendered 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 done 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 footer.php file 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.

(footer - a derivative of foot (eng.) - leg) - this is the lowest section of the site, opposite the header - the top. Of course, the head of the site - the header - is the most important element, but the footer is like the ground under your feet: it must be durable and functional. Although not all users scroll through web pages to the end, you should not ignore the melon section of the site.

What is customary to place in the footer?

The standard footer elements are:

Social media buttons and social media group widgets
Links to the main sections of the site
Links to third party resources
Copyright
Contact Information
Search

You should not use all of the above elements at the same time, otherwise the basement will look like a real dump of all the most unnecessary. It is necessary to take care that the elements in the footer are located proportionally, do not violate the overall concept and color scheme of the site.

The original footer is a place where you can surprise the visitor

The footer is exactly the place where you can implement very interesting design ideas, even if it is the site of a serious official company. Here are a couple of interesting examples:

The main thing to remember is that not all customers may like such originality and there should be a line of reason in everything. If you still decide on the original design of the footer, for example, drawn, then it still should not stand out from the general concept of the site. If all elements are designed in the same style, then the site looks holistic and interconnected, and the transition from one element to another occurs intuitively and imperceptibly.

Marketing research has shown that sites and portals where footer elements are arranged logically, designed in the same style and not scattered throughout the space, are remembered much faster and do not cause difficulties in work.

A fairly large height can be allocated for the footer, but it should not exceed half of the user's working screen, so that he still does not forget why he came to your site.

Additional menu in the footer

A common practice is to duplicate the site's menu in the footer, or to place a slightly modified menu. At the same time, it is often published in expanded form if the menu has a multi-level structure. This is very useful as an alternative navigation: at the bottom of the main menu, as a rule, it is not noticeable, but the user does not have to make additional efforts and he can immediately go to the section he needs. It is easy to follow the map of user clicks on the buttons on the site from Yandex Metrica or Google Analytics.

For example, it might look like this:

These are, perhaps, all the main elements that can be in the footer on the site and be useful to visitors. The most important thing to take away from this article: do not neglect this section of the site, and it will help maintain the loyalty of visitors and increase the time spent on the site.

HTML is a world of conventions derived from formalization. Dividing the data obtained in the process of systematizing the subject area and solving the problem into a header, footer and document body is a traditional approach. Perhaps it was formed according to the logic of an ordinary document. But most likely, this very idea of structuring has survived to this day due to competition between popular content management systems (CMS), which place HTML code about themselves in the footer of each page (website footer).

The meaning and place of the footer

Typically, an HTML page includes a "signature" - a block of tags at the bottom of the document. So the developer (customer) imagines the site footer. That this is only information about the owner of the site and copyright, links to other pages, feedback, technical support, etc. is beyond doubt. So visitors think, and developers count on it.

But the footer of the site can be not only at the bottom, or rather not the footer itself, but its meaning. A footer is a footer, that is, something defined as the bottom of the page should be exclusively at the bottom. This is the basic logic, but in each specific case it is desirable to decide in advance: that the footer of the site is not a basement, but only authorship, ownership, navigation, technical support, links to social networks and feedback.

According to CMS, the footer is its signature, and editing the site footer is available to the developer. Handcrafted sites are usually not inclined to change the opinion of visitors and place the footer always at the bottom, but in their style they create structure and content.

Floating basement and mobile devices

The idea of anchoring a footer to the bottom of a window is a common occurrence. The problem is the decision to choose the style of placement of the main content. Some developers make the whole page and place footer tags at the end of the code as inline elements without absolute positioning. CMS also follow this pattern.

Some developers fix the position of the header and footer at the same time. In this case, it turns out that the website footer is just an extension of the bottom border of the browser window. This solution requires additional effort in writing JavaScript code, since the visitor can always change the size of the browser window, and the coordinates of the footer tags will have to be recalculated.

There is no bottom or top on mobile devices. Their screen can rotate in space. To place something at the bottom or at the top is a relative task. The solution is formed as a page of a certain structure that provides relevant content. There is no mouse here, but there is a system of various options for touching and moving the visitor's fingers across the screen.

The idea of a virtual keyboard and website footer - what is it? This is the actual position of the data entry capability strictly below the input data field. A little inconvenient solution, but really working.

Content structure and actual meaning

At any time when a visitor is on the site, regardless of the device he uses, the actual content should think about adaptive layout in such a way that the visitor does not have any questions:

site header is here;
content - here;
and the footer of the site - that this is only on demand.

The browser window always imposes restrictions on the content of the page, depending on the version of the browser and the model of the device on which it is running. Both the server-side programming language and the JavaScript language provide the developer with the necessary tool to determine in which environment the site is loaded.

The correct use of browser data is enough to correctly mark up the content, determine the place of the header, footer and content.

If you are currently working on a new design or even a redesign of your landing page, then one area of the project that should not be ignored is the footer section.

The desire to develop almost perfect often leads to the complication of the whole process. Designing can get so overwhelming that you quickly forget about some important but underused parts of the page.

We can already hear you say: “Who cares about some footer?! Still, few people scroll to the end. ” But we wouldn't be so sure about that.

Of course, the header section and design above the fold (Above The Fold) should be given priority, because it is the visitors who spend most of their time. However, the bottom of the page, in particular the footer of your landing page, also deserves attention.

In a very interesting case study, website content analytics company Chartbeat found that 65% of page engagement occurs just below the fold.

So people still scroll! And if you don't optimize the bottom half of your landing page, including the footer, you may be missing out on unique opportunities like:

Providing additional important information about your brand and product.
Improved user experience and navigation.
Increasing conversion rates.

For users who want to spend a little more time on your landing page and scroll all the way to the bottom of the page looking for the information they need, a well-designed footer area makes all the difference.

In this post, we will cover all the details of creating and using footers, regardless of the type of site. Let's start from the very beginning.

What is a footer?

Footer is the bottom part of a website or landing page. They come in all shapes and sizes. Some sites have small footer areas, while others are very large, with multiple columns and footers. Some sites do not have a footer at all, while others have a special feature called (Infinite Scrolling) integrated. This means that there is no footer at the bottom of the site, no end of the page as such. We will not cover this topic today.

Footers usually contain contact information, a search box and navigation links to important pages, and social network profile icons. The footer can also be used to provide other meaningful information about the business, such as including a company mission statement, office location information (map), site statistics, Social Proof, email signup form, registration or login details. to your account, other types (Call-To-Action, CTA), etc.

Why you should design your footer

The presence of a footer is not strictly required, however, its absence can cause dissatisfaction and frustration for visitors who are trying to find specific information about a product or your business.

The footer section is ideal for copyright details and links to contacts, ordering terms and conditions, privacy policy, cookie notices, and more. Posting links to groups in social networks is especially popular here - most people already expect to find it in the footer.

In addition to improving a site's Navigational Flow as well as user experience, strategic footer design has been proven to impact conversions.

Examples of beautiful footers

Let's take a look at a few examples of footers that might inspire your own ideas.

The landing page selling Bork’s A803 AirEngine air purifier has an attractive footer design that includes navigation links (in two different styles: clickable images and list columns), a newsletter signup form, and social media icons.

The page of the illusionist Igor Zavyalov also looks very nice. The design consists of contact information, links to social profiles and a simple, pretty contact form.

Before the footer of the Bitrix24 landing page, there is a “pre-footer” section aimed at conversion (the potential client is invited to leave contacts for communication with managers). This is followed by the main footer area with a map, navigation links, a callback conversion link, and a phone number.

The strip-lenta.com website has an original footer with an envelope containing contacts and a contact form:

The footer is preceded by a pre-footer area with social proof - logos of famous clients:

But they didn't stop there! There is also a post-footer zone, which involves the performance of a conversion action:

Finally, let's look at the unusual ending of Alfa-Bank's landing page, created for recruiting. The site itself is made in such a way that when scrolling we see a modification of the hero-applicant: he moves, changes clothes, becomes more confident and successful. At the end of the page, he stands with a sign, by clicking on which you go to the page with current vacancies. There is nothing else in the footer, but the main function of the landing page has been completed - a conversion in the form of a transition to familiarize yourself with the information and the subsequent sending of a resume.

Well, we think that's enough food for inspiration. Now let's take a look at 16 things to keep in mind when designing a footer.

Basic footer elements

1. Copyright information. Let unscrupulous visitors to your landing page understand that its content is protected by copyright and that plagiarism will have consequences. The footer is the perfect place for this kind of information.

2. Contact information. As already mentioned, many people scroll the page looking for your contacts (phone, address, email). It is extremely important to include them in the footer, especially if you choose not to include them in the header.

Advice. By placing the phone in the footer, make it clickable, this will make it easier for the user to contact your company directly when loading the landing page in cases where he uses a smartphone.

3. Privacy policy. Online privacy laws are becoming more and more stringent, so having a link to such a page is very important.

4. Terms of service. Whether you're providing services or selling products through your landing page, you don't want your customers to get confused about the nuances of doing business with you. Make sure the footer clearly displays a link to the terms of service page.

5. Feedback / reviews. An optional part, but if you have a separate page dedicated to this, it would be useful to include a link to it here.

6. Map. If your landing page is a business card for a business whose main activity is offline (say, you own a guest house, restaurant, or event space), then be sure to consider adding location data to the footer. It can be a simple text with an address or local integration with Yandex Maps, Google Maps or 2GIS.

Here's how you can add a map to your landing page using the section builder in :

Optional footer elements

Now let's look at other, less significant, footer design elements.

8. Social proof and icons for social media profiles. If you want to show your influence on social media or encourage people to follow your priority accounts, consider adding these icons. And by displaying the number of your followers for each profile, you will form social proof.

9. SiteMap helps search engines better understand the structure of your site and content. Many sites place a link to the SiteMap next to the copyright information in the postfooter.

11. A simple email form is a great way to increase Opt-In conversions. Alternatively, if there is no space in the footer to place the registration form, we suggest placing a CTA button or a link to the main page where you plan to generate leads.

12. Contact form to send you messages. Suitable if you do not want to put your contacts in the footer, in particular the email address. Adding a form like this reduces the risk of receiving spam and makes it easy for users to contact you from virtually any page on your site. Be aware, however, that this element can take up a significant amount of bottom space.

13. Mission Statement. If you want to show your visitors what your brand stands for, what your goals and aspirations are, then consider adding a condensed version of your mission statement to the footer. If it is problematic to make a capacious message, then include a link to a special page.

14. List of recent blog posts. You might want to add a feed of the latest blog posts here. An even more effective strategy is to display only the best, most popular blog posts. Four or five links will be more than enough.

15. "About me" / "Biography". When it comes to a personal brand website or blog, you can also add a short bio about yourself, including a photo, which will add a lively, “human” element to the site. Adding a link to your About Me (About Us) page will give your visitors the opportunity to learn more about you.

16. Conversion links or calls to action. Do you have product pages, bestselling sections, or affiliate pages that you need to promote? How about embedding links to them in the Anchor Text of the footer?

What should not be added to the footer

Here's what to avoid:

Page view counters and widgets showing traffic statistics.
Direct affiliate links.
Embedded social media feeds.
Advertisements.

What tools to use when working on design?

It depends on which platform your site is running on. For LPgenerator users, for example, there are many ready-made layouts and high quality free landing page templates that you can customize:

That's all!

We hope this post was helpful to you. We also want it to encourage you to rethink how you use the footer section. Whatever your conversion goals are, just experiment a lot and you'll see what works and what doesn't.

Start with a few basic elements and what you think will improve navigation and user experience.

If you suspect people aren't scrolling to the footer, set up heatmaps and scrollmaps to find out for sure.

Whatever you decide to do, don't let your footer sag. Time to answer the following questions: