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. Getting 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 trademark Yves Rocher: full-screen footer with a nice 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. The 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 a 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 the e-commerce infrastructure, 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 (
Hello, dear readers of the blog site. We continue the topic of block layout, which was started and continued in the three previous articles. In principle, we have already managed to create both a two- and three-column site layout, and we even managed to consider the nuances of creating a fluid layout.
In addition, in the first articles on website layout (), some basic concepts of webmastering were discussed, without understanding which it would be quite difficult to understand the nuances.
What problems did we have with our website layout?
Today we will try to solve one small problem that may arise with the layout we created earlier. Most often, this situation occurs when viewing it on large monitors (with high resolution) and when displaying a page with a small amount of information.
In this case, it may turn out that the footer will not be pressed to the bottom of the screen, but will be located almost in its middle height, which in most cases will look ugly and not aesthetically pleasing.
Still, in my opinion, it is necessary to press the footer to the very bottom of the site layout, and this will be especially true in the case when the page height is less than the height of the user’s screen. This can be represented schematically like this:
Those. The correct footer behavior for the case of a small amount of information on the page and a large user screen will be as follows:
To implement this, we need to perform a number of manipulations with the code of our layout. Moreover, we will make changes not only to the style file CSS styling Style.css, but also in Index.html containing HTML code and forming Div blocks. But first things first.
As an example, we will use the three-column website layout we created earlier. In this case, Index.html will look like this:
And the following CSS properties were written in the Style.css file:
Body, html ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px ; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer ( background-color:#FFC0FF; clear:both; )
Well, the layout itself looked something like this:
As you can see, the footer is not pressed to the bottom and, therefore, does not meet our requirements (it is always located under the lowest column), so we will have to make adjustments to the code. The same thing can be done for a two-column layout, and for a rubber layout too. The method is universal.
How to push the footer to the bottom of the website layout
So, we need to move the Div container with the footer to the bottom of the screen. To do this, you will first need to set the height of the entire page to one hundred percent (it will occupy the entire screen). This will be necessary in order to then change the size of the main block with the layout to 100%.
The entire content of the site page is placed in the opening and closing Body tags, and therefore we need to add another CSS property for the Body tag in Style.css, setting the height to 100%:
Body, html ( margin:0px; padding:0px; height: 100%; )
This will not affect the appearance in any way yet, but now the main blog can be stretched to the full height of the screen. Those. it was a kind of preparatory stage.
Basic CSS properties, if desired, you can look at. Now let’s set the container Div that contains our entire layout to a minimum height of 100%:
I also want to highlight it (div with id="maket"). To do this, I’ll give it a frame using the corresponding Border() property:
The border: solid 3px black property allows you to set a solid border (solid) 3 pixels thick in black for this container. This will allow you to clearly see that the container with the layout has stretched to the entire height of the screen, even with a small amount of information on the page:
Now we will need to take the footer block out of the general container and place it below, immediately after the general one. What will it give? And the fact that, finally, the footer in the layout will deign to go down, and will not, as before, be pressed against its longest column. In this case, Index.html will look like this:
Please note that the block with the footer is no longer located inside the general container (maket), and therefore its width is no longer regulated by the CSS properties specified for maket in the Style.css file. The width of the footer will stretch across the entire screen, but it will still be located at the bottom of the screen, immediately below the main block:
But again a problem arises, because in order to see the footer, you now have to scroll the screen in the browser (see the scroll bar in the picture above).
This happens because the main container (maket) occupies the entire height of the screen (this is determined by the min-height property: 100%), and the footer is located immediately behind it and to view it you will have to scroll, which is not very convenient and functional .
You can solve this problem by setting a negative padding for the Div container with the footer so that it moves upward by a distance equal to its height. In this case, the footer container will overlap the main one and fit into the height of the browser screen (i.e., you will not need to scroll to view it).
But in order to set a negative offset from the top, you need to know this very height of the footer, but we don’t know it yet.
Therefore, first we will set the height of the container containing the footer by setting the corresponding property in Style.css:
#footer( background-color:#FFC0FF; clear:both; height: 50px; )
And then we set a negative margin for it at the top to a height equal to its height:
This will allow the footer to rise up to exactly its own height and thus fit into the browser screen (you can now remove the CSS border property: solid 3px black from the rule for maket, so that the thickness of the frame does not prevent our entire layout, including the footer, from fitting in the height of the screen):
As you can see, now the scroll bar does not appear in the browser and our entire three-column block-based site layout fits on one screen (in case there is little information on the page) and has a footer located at the very bottom. Which is exactly what we needed to do.
We insert the spacer and fight Internet Explorer
But a problem arises, which will appear only when there is more information on the layout page and the following situation may arise:
It turns out that a situation may arise when the information in one of the layout columns overlaps the footer, which will not look nice. This happens because of the notorious negative padding that we set for it and which helped raise our basement against the main layout container.
Those. It turns out that at the bottom of the screen there are two blocks overlapping each other in the basement area.
The solution to this problem is to add a new empty Div container (the so-called spacers) into the main container of our layout (maket), in the place where the block with the footer was previously located.
By setting this new container to a height equal to the height of the footer, we can avoid information from the main container colliding with the block with the footer. Let's assign an ID () to this container called Rasporka and as a result the Index.html of our three-column layout will look like:
And in Style.css we will write for this ( , which sets the height of this spacer container equal to the height of the basement:
#rasporka ( height: 50px; )
As a result, the footer will be pressed from below not to the information contained in the main container (for example, the text in the highest column), but to an area equal to the height of the footer with a spacer container containing no information.
This way we avoid collisions and distortions in our three-column layout. Everything will be clear and beautiful (delicate and noble):
As I mentioned above, the width of the footer must now be set separately, because... this container is no longer part of the main one. To do this, you need to add additional properties for the Footer to the CSS file, allowing you to set its width and align it horizontally in the middle of the screen.
It makes sense to set the width equal to the width of the entire layout using the Width property, and horizontal alignment can be done in the same way as we did for the entire layout on a block layout.
Thus, we will need to add additional properties for the ID Footer:
#footer( background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; )
Using the width:800px property, the width is set to 800 pixels, and using the two properties margin-left: auto and margin-right: auto, the indentation to the left and right of the footer is set automatically, as a result of which these indents will be equal and our hero will be aligned to middle:
Well, it seems like there’s nothing left to improve, but that wasn’t the case. As always our favorite browser Internet Explorer 6 does not understand something from the CSS properties we use. In this browser (and, perhaps, in some other old ones too), despite all our efforts, the footer will not be pressed to the bottom, but will still stick to the highest column of the site layout.
All this happens because ( does not understand the min-height: 100% property that we used to set the minimum height of the main block. equal height screen.
Therefore, to solve this problem we will have to use a so-called hack that allows us to explain (on our fingers) to older browsers what to do. Before list of CSS properties for maket you will need to insert the following combination:
* html #maket ( height: 100%; )
This rule will only apply to Internet browser Explorer 6, the rest will not take it into account and implement it.
So, the final look of Style.css with the footer pressed to the bottom of the screen will be as follows:
Body, html ( margin:0px; padding:0px; height: 100%; ) * html #maket ( height: 100%; ) #maket ( width:800px; margin:0 auto; min-height: 100%; ) # header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content ( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer( background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-left: auto; margin-right: auto; ) #rasporka ( height: 50px; )
Well, the final form of Index.html was given just above. That’s it, this series of articles devoted to block layout of 2 and 3 column fixed and fluid website layouts can be considered complete.
You can also watch the video “Working with Html div tag”:
Good luck to you! See you soon on the pages of the blog site
You might be interested
Block layout - We create two-column, three-column and fluid layouts for the site 
DiV layout - Create blocks for a two-column layout in HTML, determine their sizes and set positioning in CSS
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 that have been put together in a hurry, on your own, suffer from this drawback ( 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); )
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 this example, the web document's markup is set using relatively new HTML 5 tags, which can be interpreted incorrectly 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 due to the fact that in the previous example we used negative meaning footer padding, 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.
Everyone who is accustomed to fully designed website pages prefers the look of something “nailed” (sticky) to the bottom of the page footer. But there are two problems on the Internet: input fields that do not grow downwards and footers that are not nailed (to the bottom of the window). For example, when we open short pages like habrahabr.ru/settings/social, it immediately strikes the eye that the information intended to be at the bottom of the viewing window sticks to the content and is located somewhere in the middle, or even at the top of the window when the bottom is empty.
So, instead of .
This guide for beginner layout designers will show how to make a “nailed” footer in 45 minutes, correcting the shortcomings of even such a respected publication as Habr, and compete with it in the quality of execution of your promising project.
Let's look at the implementation of one type of nailed footer, taken from the network, and try to understand what is happening. css-tricks.com/snippets/css/sticky-footer
CSS:
* ( margin:0; padding:0; ) html, body, #wrap ( height: 100%; ) body > #wrap (height: auto; min-height: 100%;) #main ( padding-bottom: 150px; ) /* must be the same height as the footer */ #footer ( position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both;) /* CLEAR FIX*/ .clearfix:after (content: "."; display: block; height: 0; clear: both; visibility: hidden;) .clearfix (display: inline-block;) /* Hides from IE-mac \*/ * html .clearfix (height: 1%;).clearfix (display: block;) /* End hide from IE-mac */
HTML:
Let's start with theory
The usual implementation of a nailed footer relies on the unique CSS2 property that elements are immediate children of BODY- maintain percentage height ( height:100% or another) relative to the window, if all their parents have the same percentage height, starting from the tag HTML. Previously, without doctypes, but now in Quirks Mode, percentage heights of elements are supported at any level, and in modern doctypes - only within percentage-defined elements. Therefore, if we make a content block (let's call it #layout) having 100% height, it will scroll as if it were a window. All (streaming) content is placed in it, except the footer and maybe the header.The footer is placed after this block and given 0 pixels of height. In general, you can follow #layout place as many blocks as you like, but they should all be either 0 pixels high or outside the flow of the document (not position: static). And there is another important trick that is usually used. It is not necessary to make the height equal to 0. You can make the height fixed, but subtract it from the main block using the property margin-bottom: -(height);.
In human terms, styles create an empty “pocket” at the bottom, into which the footer is inserted, and it always ends up either stuck to the bottom border of the window, or to the bottom border of the document, if the height of the document is greater than the height of the window. There are many footer implementations on the Internet and on Habré, with varying degrees of success in all browsers. Let’s continue to build it ourselves, using Habr’s layout as a “workhorse”.
Because the bottom of the block #layout- this is a pocket, for the footer it should be empty, not displaying page objects. And here we encounter another limitation - we cannot create an empty pocket at the expense of padding V #layout, because then it will become more than 100%. It won't save you either margin- emptiness must be created using the properties of nested elements. Plus, it is necessary to ensure that floating elements do not crawl under the block border, which is done, for example, by the block
Let's look at the structure of our test subject's pages. The easiest way to do this is to open the Firebug window or a similar window (Developer Tools (Ctrl-F12)) in Chrome.
Let's move on to a working example
Which ones do we see? layout flaws in terms of implementing the effect of a nailed footer? We see that1) The footer on the site is located inside a block with id=layout, which does not have a percentage height. According to theory, he, the parents and the content block.content-left need to set the height to 100%. Problems arise with the latter - it is not suitable for this. Consequently, one interlayer block is missing or the footer is not at the right level. Besides,
2) The height of the footer is variable (depending on the number of elements in the list and the font size, this can be seen not from the HTML, but from the CSS). AND
3) above #layout there is an advertising block with a fixed height of 90px;
4) there are no alignment blocks either in the footer or (generally speaking) in the block #layout(yes, but above the block .rotated_posts; however, perhaps it should be classified as a footer).
Point 4 - you will have to draw it with a script.
It would seem easy to deal with the third point by adding #layout(margin-top:-90px;) But remember that this block may not exist - it is suppressed by banner cutting, or advertisers suddenly decide not to show it. There are a number of pages on the site where it is not. Therefore the dependence margin-top from an ad block is a bad idea. It's much better to place it inside #layout- then he won’t interfere with anything.
The first point is that in order for the nailed footer to work at all, you need to place a block of footer under #layout. However, with using javascript You can implement other nailed footer schemes, but in any case you need JS or initially correct layout to do without it.
Since we cannot be stronger than the latest website layout designer who “slapped” the footer inside the content, we will put aside the idea of properly placing the footer on our future website (which, therefore, will be “cooler” than Habr!), and we will dissect Habr with javascript (userscript) to the correct one condition. (Let’s say right away that it is not the layout designer or switcher who is to blame, but the type of site, of course, determines the strategic decision of the project management.) This way we will not achieve the ideal, because in the first second or two during the loading process the page will have an incorrect layout. But what is important to us is the concept and the opportunity to surpass in quality the most popular website in the IT world.
Therefore, in the right place in the script (early, at the end of the page loading), we’ll write transfers of the DOM blocks of advertising and footer to the right places. (Let’s be prepared for the fact that, due to user scripts, the solution will be more complicated than a pure solution.)
var dQ = function(q)(return document.querySelector(q);) //for shortening var topL = dQ("#topline"), lay = dQ("#layout"), foot = dQ("#footer" ); if(topL && lay) //banner - inside the content block lay.insertBefore(topL, lay.firstChild); if(lay && foot && lay.nextSibling) //moving the footer lay.parentNode.insertBefore(footer, lay.nextSibling);
We have placed the blocks in their places - now all that remains is to assign the necessary properties to the elements. The footer height will have to be set exactly, simply because we already know it by the time the user script is active (end of page loading). Due to the trigger point of the userscript, as mentioned above, a jump in the display of the footer on the page is inevitable. You can try to put on a “good face”, but with a “bad game”? For what? The “bad game” of the site allows you to create a concept without extra effort, which will be enough to assess the quality and will not be needed for the “correct game” on your project.
if(foot)( //block-aligner
Here we allowed ourselves to use a self-written function h.apnd_el, which does roughly the same thing as in jQuery -
$("").css((height: footH ||0)).appendTo($(footer))
And then - another typical function of implementing CSS rules - h.addRules. You can't do without it here, because you need to declare a rule with " !important" - precisely because of the peculiarities of the priorities of styles from the user script.
With these pieces of code, we will be able to see the nailed footer in the userscript (after jumping down) and fully understand how to build the page layout. Using a jumping design on a daily basis is unpleasant, so it is recommended to do it solely for demonstration and testing. In the HabrAjax user script, I installed a similar script, closing it with the “underFooter” setting (check the box in the list of settings before “footer nailed to the bottom”), starting with version 0.883_2012-09-12.
Does nailing the footer affect the need to update ZenComment styles if they are installed? Yes, it does. Due to the complex chain of style priorities, in which styles inserted by the user script have the lowest priority, we had to slightly adjust the user styles for possibilities working with nailed footer. If you do not update your user styles (to 2.66_2012-09-12 +), the footer will not work accurately.
Block rotated_post (three popular posts from the past) looks more logical with a footer, so in the real script it is also moved to the footer.
The second point (from the list of layout shortcomings) is a discussion purely for Habr (it does not apply to user script and partially repeats the previous ones).
Pages have an issue that prevents them from having a nailed footer on pure CSS- undefined footer height, depending on the default font sizes in the browser. To implement a footer using CSS, you need to select the relative heights of the fonts, but they may not work if the user’s computer does not have the required fonts. Therefore, the solution must include a JavaScript that can adjust the approximate position of the footer to the exact position using transitions. Or, looking at the acceptability of the solution made in the user script on different platforms, make a calculated installation of nailed footer - first observations show that the solution is practical.
Conclusion: it is possible to fully design a layout on Habré, but for this you need a layout designer who clearly understands the behavior of the layout and places the blocks in the correct order. (Currently the footer and top banner are “in the wrong place” and not in such a way that you can just style the footer nailed down.) You can do without JS if you set the height of the footer in relative units, taking some room for font uncertainty.
Implementation
If you enable HabrAjax 0.883+, we will see the “nailed footer” working. It adapts in height using scripts. It allows you to evaluate how much better pages with a nailed footer look compared to regular ones. ZenComment user styles are compatible with scripts, but for the nailed footer to work correctly with them, you need to install ZenComment version 2.66_2012-09-12 +.Facts about implementation behavior
Shamanism with footer, styles and scripts is shamanism (only supported by theory). IN different browsers slightly different behavior, but in some places - unexpected. Without user scripts and rearranging blocks, the results will be different. This is what experiments with implementation in user script yielded.1) Firefox - unexpected lack of footer jumps. It’s strange that they are not there - rendering occurs after the footer is placed at the bottom.
2) Chrome - it surprised me with “wandering scrolling” - empty spaces at the bottom are added to the page with a period of once a second - something wrong is happening with the calculation of heights. The solution is to write html,body(height:100%) in the user style, but there is no guarantee that it will always work. It is more reliable to check whether the document does not exceed the height of the window, and if it does not, then move the footer, otherwise - nothing. Jumping is okay, it exists.
3) Opera - no jumps (v. 12.02) when the page first loads, but a hasty reload may show a footer jump. Otherwise it behaves no less correctly than Fx.
Well, you will have to specially teach Chrome to behave correctly (with a script) and roll out the version in this form for display. Therefore, the section in the user script is a little more complicated than the one given in the article.
It should be recalled that this is not a full-fledged implementation - it does not take into account, for example, cases of window resizing by the user. You can also find rare (in practice) combinations of changing footer heights before and after moving, where the logic begins to fail without leading to inconvenience. The shortcomings were left deliberately, because a balance was maintained between the complexity of improvement and the temporary nature of the solution.
As a result, we got a completely workable operating scheme, at least for fast desktop computers. If incorrect behavior of the footer is detected, the “underFooter” setting should be disabled.
What pages is this useful for?
On a standard website, without user styles, even short question and answer pages turn out to be longer than 1500px, which in most cases is unnoticeable with horizontal monitors. But even with ordinary monitors, you often come across personal user pages with a height of about 1300 pixels, where the unattached footer appears in all its glory. The number of pages in the user settings is also not very long.If you use ZenComment user styles, they greatly reduce the required page height, and the HabrAjax user script may not show some or all of the side blocks in the sidebar. Therefore, with scripts and styles, the effect of an unattached footer is noticeably more often observed. Therefore, it is logical that the footer fix appeared in HabrAjax for the first time. But a regular website also has a number of pages where a nailed footer would be useful.
Will there be support?
The behavior of the site over the past year shows that the developers (and therefore the management) began to introduce features that previously existed only in user scripts and user styles. For example, at the beginning of the year I wrote where I collected many small wishes. Six months later, I returned to it and was pleased to note (right in the text; you can see the “UPD” and dates) that a number of features described as wishes had already been implemented into the site.
Next, let's look at the “arrows” instead of squares for rating comments. They appeared in almalexa usernames (“Prettifier”) 3 years ago and were adopted into ZenComment 2 years ago. About 2-3 months ago they appeared on the site. One begins to believe that after some time the arrows will be spaced some distance apart, as is done in ZenComment (one arrow to the left of the number, the second to the right) in order to miss less.
Therefore, perhaps the “nailed footer” on Habré is not as fantastic as it might have seemed 3 years ago.
Other features in the HabrAjax script that have appeared for the last 3 months (can be disabled in settings):
* auto-growth of input fields (in Opera it can slow down on large texts);
* days of the week for dates other than “today” and “yesterday”;
* events in the Feed, collapsed to 1 line and 2 characters;
* abbreviation of the words “habr*” to “χ·” and “χα”;
* date hints by article numbers - it is reported what month and year the article is before it is downloaded, by the number in the URL;
* “Related posts” have been reduced to 2 words. Screenshot of “related posts” popping up (shows 12 links, not 4).
We are starting the fifth lesson on editing templates in CMS Joomla 3, this time we will talk about the footer for the site. Let's look at possible footer design options and some approaches to creating it.
What is a footer
The footer or footer of a site is the lowest part of it, which usually contains information about the site, copyright, etc. Standard version in template Protostar, the footer does not contain any meaningful information:
The standard content of the footer is the current year, the name of the site and the “Back to Top” link leading to the top of the page. To be honest, this footer option is completely useless to visitors to our site, besides, the “Back to Top” link is absolutely unnecessary in our case, we have already made a beautiful button for these purposes.
Therefore, to begin with, I suggest getting rid of the standard footer content. Open the file index.php standard Protostar template and look for the code that is responsible for displaying the footer. The code between lines 205 and 219 is responsible for displaying the footer, which looks like this (depending on the version of Joomla and the changes made to the index file, the lines of code may differ):
Now let’s remove the extra code from lines 210 to 217; as a result, the code for the footer will be like this:
Essentially, we removed everything that was possible, leaving only the ability to display modules in the footer; this line is responsible for this:
We save the index file, go to the site and refresh the page. The footer content disappeared, which is what we wanted. Now you can add new information to the footer at your discretion, but before adding it, it’s worth answering the question - what can be in the footer of the site?
What information to display in the site footer
In order to make the footer effective, it must contain information that may be of interest to site visitors. Depending on the focus of the site, this information may vary. Here is a small example of the same information that may be contained in the footer:
- Extra menu- this menu can duplicate an existing one, or be unique. Duplicating the menu in the footer is useful when your site is often visited from mobile devices; the visitor, having scrolled to the very bottom of the page, can take advantage of additional site navigation.
- Contact Information- for selling sites, or for sites that provide various services, the presence of contact information is simply necessary, and the footer is the place for it.
- Social media buttons- in the modern world, social networks are everything for many people, so such information will never be superfluous.
- Various links- for example, links to a site map, news feeds, etc.
- Widgets- you can display in the footer information reflecting activity on the site, traffic counters, recent comments, etc.
- Advertising- there comes a time when you want to get from the site not only its presence, but also profit, in this case the footer may not be a bad container for advertising.
Don’t try to cram all of the above into the footer of your site; an overabundance of information, like its absence, will also not lead to anything good.
On the other hand, it doesn’t matter what information will be contained in the footer of your site, the main thing is that it fits into the overall design and is beautifully designed.
Creating a footer for the site
Now let's discard the theory and proceed directly to creating the footer. There can be several ways to form a footer:
- Auto- involves the use of various modules to display certain information
- Manual- modules are not used, all changes are made manually using template file editing tools
- Mixed- in this case, both of the above options are used together
Each of the methods is good in its own way, for example, at the initial stage, using modules will greatly simplify the task, and the method when modules are not used will speed up page loading. In any case, the choice is yours.
In order to consider all possible options, I will opt for the third option. This way, you will have a general idea of what is being edited and how.
As an example, I decided to divide the footer into three vertical parts, links to certain pages of the site will be displayed on the left, some kind of logo will be in the center, and small text will be displayed on the right. Modules will be responsible for displaying the left and right parts of the footer, and we will write the logo manually in the index file.
First, let's create new positions for modules in the footer (we talked about how to do this in the lesson on setting up and editing templates) in the amount of two pieces. Since they will be located on the left and right sides of the footer, they have a corresponding name - footer-left And footer-right. We declare them in the file templateDetails.xml.
Now we make changes to the template index file, my code turned out like this:
baseurl. "templates/". $this->template . "/images/joom4all.png"?>" />And for clarity, a screenshot:
It’s clear how the modules are displayed, but I’d like to dwell on the logo in more detail. The code responsible for displaying the logo is:
At first glance, it looks like an ordinary HTML tag for an image, but instead of the usual file path it is written php code. This code may seem complicated and incomprehensible at first glance, but in fact, if you look at it, it becomes clear that there is nothing complicated in it:
- - start of php code
- echo- responsible for outputting a string
- $this->baseurl- this line returns the site name
- templates/- here we indicate that the image is stored in the templates folder
- $this->template- returns the name of the current template
- /images/joom4all.png- path to the image inside the template root folder and name of the file with the image
- ?> - end of php code
As a result of using this php code, we get the relative path to the image file. In other words, no matter what name the site has or what template is used, the image will be taken from the images folder of the selected template.
We save the file index.php, now we can close it, we will no longer need it.
Now let's create several modules, which we will display in the newly created new positions. The first module will display a menu in the footer, and the second will display small text.
At the next stage, we create modules - for a menu with the “Menu” type and for text with the “HTML code” type (how to create a module). We select the newly created module positions as positions for them:
To distinguish our footer menu from the rest of the menu on the site, in the menu module settings we add the “_footer” class suffix to it:
In order not to explain what kind of module with the “HTML code” type is, I will show the principle of its operation in the screenshot:
I filled this module with certain text that will be displayed in the footer, in addition to the regular text, I wrote a small php code that displays the current year:
We save the modules and go to the site to check the result and this is what I got:
Although the result is there, it is not very impressive. Now we need to more adequately style the footer elements using CSS.
First, let's create new footer blocks:
Foot-left, .foot-center(float: left;) /*footer block alignment*/ .foot-left (width: 20%;) /*left block width*/ .foot-center (margin-left: -6px ;) /*central block indent*/ .foot-right ( /*right block*/ float: none; height: 60px; )
The next candidate for styling is the menu, to which I applied the following styles:
Ul.nav.menu_footer (margin: 0;) /*zero margins for the menu*/ ul.nav.menu_footer li ( /*design of menu text*/ font-family: "Lobster", cursive; font-size: 16px; line -height: 18px; ) ul.nav.menu_footer li.item-179 a ( /*Sitemap menu item*/ margin-left: 15px; color: #fc8f30; ) ul.nav.menu_footer li.item-180 a ( /*Menu item About the site*/ color: #5aa426; border-top: 3px solid #5aa426; ) ul.nav.menu_footer li.item-181 a ( /*Menu item Contacts*/ margin-left: 45px; border- bottom: 3px solid #0f70ad; color: #0f70ad; )
And finally, we separate the footer from the main part of the content:
Footer.footer hr (border-top: 3px solid #fc8f30;) /*separate the footer from the main content*/
Save the style file, go to the site and look at the result:
So we created a footer for our site that looks much more fun than the standard one. This concludes this lesson, and in the next lesson we will check possible errors in adaptive design and correct some shortcomings. In addition, I advise you to read the article on how to quickly create a Joomla 3 template and in particular a footer from scratch using Bootstrap.
