We create a footer on our blog. How to use CSS to push the footer to the bottom of the browser window Maximum attention grabber

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. 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. The general rule is that if you maintain 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 (

Conversion rates are influenced by many factors, including usability and visual design. The site footer (footer or “footer”), despite the fact that it is located at the bottom of the page and is almost always invisible on the first screen, is also of great importance.

When creating an online store, you need to pay no less attention to it than other elements and make it as meaningful as possible.

Decor

The footer should be designed in the same style as the entire online store website. Moreover, even if the entire online store is designed in a minimalist style, you can add beautiful images or animation to the footer, because it will not distract attention. You can design it in an original way to evoke positive emotions among visitors.

Site navigation

You can place alternative site navigation in the footer. This is especially convenient on sites with long pages. The visitor will scroll to the end and, without going back, will be able to go to the necessary sections of the catalog. You can make it more detailed than in the header of an online store; there is enough space there.

Links to pages

The footer is great for posting useful but not too significant information. For example, if the top menu contains links to the catalog or categories of an online store, then you can add links to a blog or useful articles in the footer.

Contact Information

Most often, contact information, links to pages on social networks, and sometimes even a map marking the location of the online store (or pickup point) are added to the footer. Such information increases the trust of visitors.

You can also add information aimed at helping the buyer to the footer of the site. If he scrolls to the bottom of the page and doesn't find what he was looking for, he will most likely close the page. In this case, you can add a “site search” or a “Request a call” button in the footer.

You should not add unnecessary information to the footer of the site - for example, it is better to leave company details (TIN, OGRN, etc.) for the “About the company” or “Contacts” pages.

Website owners often do not pay attention to the footer, thinking that it does not provide value: it is located at the very bottom, and therefore is not interesting to users. But that's not true. A properly designed basement with a thoughtful design, competent structure and necessary content will attract the user’s attention, keep him on the site and coordinate him on further actions. That is why the effectiveness of a well-built basement is undeniable.

In this article we will explain in detail what is it - website footer, what is its importance and what it should be like to work for your business.

What is a footer, how important is it and why?

The footer (footer, footer) of a website is the very bottom part of the page, where useful, but not primary information is displayed. This can be absolutely any information that may be of interest to the target audience, as well as information that should be on the site, but it is not rational to put it in the main menu in order to keep it compact and logical.

A well-optimized footer will facilitate site navigation and help achieve business goals, as it is an additional source of important information for the user if he did not find it on the page.

Main advantages of the bottom of the site

Footer can include absolutely any information that may be of interest to the user: from contact information to links to pages with additional services of the company. These elements bring a number of business benefits.

Focus on what's important

One has only to work some magic on the design of the basement, and it will become the main focus on useful information. Using the footer, you can tell your client more about the company and its activities, offer to subscribe to the newsletter, or provide information to partners using an active link to the relevant pages. The footer simplifies navigation for the user if he needs to go to any section on the site. To do this, he just needs to select the necessary link at the end of the site without scrolling up the entire page. Therefore, it is in vain to think that the lower part of the site is useless. It will definitely find its user, attract attention and keep it on the site.

Increased lead generation

Maximum useful and important information

All useful information that does not fit in the menu or is not suitable for its specifics can be placed in the footer. Disclose legal information to your user, attract sponsors and partners, and provide useful links for company employees. Believe me, such information will not be overlooked.

Site navigation

If the user has moved far from the header (site header) and is approaching the footer, it means that he has not yet found what is interesting and important to him. So, everything is in your hands. Placing navigation links will make it easier for your potential client to find the information they need and extend the time they use the site.

Maximum attention capture

The footer holds the attention of the site visitor until the last moment, holding it. It’s like the final chord gives the user another chance to get valuable information. And for this to work well, you just need to properly design the bottom part of the site. We'll tell you how to do this later.

What should be in the footer of the site?

The content and design of the website footer are closely related. The design of the entire block depends on what will be placed in this part. Content elements depend on the company’s activities and the characteristics of the target audience. We will list most of the items that can be placed at the bottom of the page. All you have to do is choose the ones that are most suitable for your particular case, based on your business.

Copyright

An easy way to protect your content from theft is to claim copyright. This implies that for stealing any content or idea/design of the site, the person who did it can be held accountable. In reality, of course, things are much different, as attempts may still be made to steal your content.

Every year you need to update the figure next to the copyright information. This can be done in two ways: manually or automatically using a simple script in the code.

Awards and certificates

Any information about certificates, awards and achievements becomes powerful social proof, which increases user trust in the company. Therefore, if your company has any merits, be sure to talk about them in the basement. An additional advantage is that since the footer is displayed on every page, information about your awards will definitely be noticed. If your company does not have any certificates or awards, but you are a partner of Google, Samsung, Asus or another large and prestigious company, then be sure to indicate this in the footer.

Site Map

The footer sitemap is a list of pages on your site that will help the search algorithm index the pages. Or the map can be in the form of URLs that the search engine did not previously detect when crawling the site.

The footer will help index absolutely all pages of the site using Sitemap, which is very good for its promotion.

Privacy Policy/Terms of Use

Often, information about the privacy policy is posted in the footer of the site. This describes how information is collected, stored and how it can be used. For some sites, posting privacy policy information is required by applicable laws.

A link to the terms of use page is required if the site contains content prohibited for minors. For example, if the site sells alcohol or tobacco. By going to the terms of use page, the consumer will have to read them and confirm that he is an adult. This relieves responsibility from the site owner if the user is under 18 years of age.

Feedback form

Don’t miss the opportunity to retain a client by inviting him to fill out a feedback form.

The feedback form will help convert the user into a client. It helps visitors make a final decision about cooperation if the user was previously not sure that they were ready for it. At the same time, the feedback form may contain various calls to action. For example, the call “Any questions left? Ask them to us” works very well. Especially when the user could not find the answer to his question. Placing a feedback form in the footer is a big and bold plus for website conversion.

Of course, the call form should be not only in the footer, but also on the main page, so as not to miss the client at the moment when he wants to perform an action. Read what the main page of the site should look like.

Company contacts

As a rule, a whole section is dedicated to company contacts, a link to which is placed in the menu. But in order to make it easier for the user to navigate the site and not force him to scroll up the page when he is closer to the end, contacts should also be placed in the footer. In this case, contacts should be placed in micro markup so that the search engine better understands the company’s contacts.

In addition to contact phone numbers and email, which are often placed in the header, you can indicate the address of the physical location of the office or offline store, as well as indicate the full postal address if the company's activities require the need to exchange letters using standard mail.

Useful links to the site

Navigation links to site pages will help the visitor find what interests him, if he has not previously found it in the main menu. Also, similar links can be duplicates to the pages “Delivery”, “Payment”, “About the company”, etc.

Now the trend is to develop a voluminous footer, which becomes an additional menu, including not only links, but also short content. Typically, this approach is used in cases where placing such content on pages is inappropriate due to the emphasis on the main sentence. For example, information about a company is rarely posted on the pages of an online store, since it is less interesting to the user than the product it sells. In such cases, you can briefly place information about the company in the basement. But at the same time, it is important to monitor its volume so that a large piece of text is not repeated and does not create complete duplicate pages on the site due to the fact that the footer is the same on all pages.

Social media icons

The bottom of the site is a great place to place social media icons. Traditionally, they are placed in this part of the page in order to keep the user’s attention on the site, not allowing them to quickly leave it. Therefore, if a user is interested in communities on social networks, they habitually go down to the end of the site to enter them.

Link to enter your personal account

Not all website visitors are clients. The site can be visited by partners and employees. Therefore, placing a link to enter your personal account in the footer is an excellent solution.

Newsletter subscription form

Subscription to the newsletter is not always the main requirement from site users. But it can act as an additional way to retain customers by constantly notifying them with up-to-date information. In such cases, you can place a subscription form in the footer. Rest assured, it will definitely capture all the users interested in it.

Site search form

For online stores and large portals, it is logical to place the search form at the top of the site in the most visible place. But for some sites this is not relevant.

But here, be prepared for the fact that users are not used to looking for a search form in the footer. Therefore, it must be isolated and highlighted in order to attract attention to it. However, such an element in the basement can rarely be found on domestic sites. Most often it is found on American resources.

About company

Key queries

The footer is a great place to place linking blocks with promoted page queries to increase the relevance of the site to the search engine.

But here the number of key occurrences should not be abused - the Google search engine does not increase the effectiveness of SEO promotion for them. Therefore, one or two keywords are enough for the keywords to look harmonious with the overall content.

Latest blog updates

If you are blogging to attract additional attention to your company, then information about updated content can be displayed at the bottom of the page. But it is recommended to place such a block in this part of the site only in cases where the blog is only an additional tool and will be of interest only to a small group of your target audience.

Using the same principle, you can place any information in such a block. For example, links to useful articles.

When designing a footer, it is very important to give the user the opportunity to scroll to it. Very often, many sites contain a serious error in terms of use - they use ajax, which constantly loads content when scrolling down the page. As a result, the user simply does not reach the footer and it becomes useless. This technology is effective, since a person does not need to reload pages to learn more, but it is necessary to give the person the opportunity to independently decide whether he wants to watch the content further. Therefore, when designing a footer and at the same time using Ajax loading of content, load by click so that the consumer can reach the end of the page and find the information he is interested in without returning the page to the top.

Call to action

Let's cooperate! Write to us! Leave your phone number and we will call you back within 5 minutes! A simple but catchy call to action coupled with a contact form or newsletter form placed in the footer will help increase website conversions. Don’t forget that calls should be clear and clear, so that the user does not have to think about how to take the action that is suggested to him.

Map

With the help of a map placed in the footer, you will be able to increase the trust of visitors in your company. In addition, you will make life much easier for Google Maps users who want to quickly find where your office is located.

Place a work map that will be convenient for users to use. There is no point in posting a Yandex map if the site is aimed at Ukrainian users, since the service is blocked for Ukraine and when loading such a map there will be emptiness. Which, you see, is not solid.

Which elements are best to choose for the footer depends on the type of your activity, the type of site, its design, content and target audience. An analysis of the interests of your target audience and a competent website structure will help you answer this question.

What should not be in the footer?

Despite the fact that the site footer is not the main focal block of the site, to which all attention is devoted, this does not become a reason to create a trash bin out of the footer. Therefore, get rid of unnecessary, unnecessary and non-valuable links, leaving the most useful and important ones. How to understand that links are not needed? It's simple: if they don't fit logically with your navigation or categories, most likely you can do without them.

Don't overdo your footer SEO. Don’t forget that the search engine will immediately see black hat SEO and punish you for it.

And don't be afraid of free space. An excessive number of links will spoil the impression of the site and make it difficult for the user to find the information he is interested in, which leads to dissatisfaction. And if your user is not satisfied, he will go to your competitors without even thinking about it.

How to competently design a website footer? 5 valuable recommendations

The design of the website footer and its structure must be thought out to interest and attract the online user. How to do this - read 5 valuable recommendations.

Use creative solutions

The main background of the footer should be different from the general background of the site in order to catch the eye. But at the same time, it must correspond to the design idea of ​​the project and be harmoniously combined with it.

To effectively highlight the site’s footer, you can use brighter colors or even use thematic images that will emphasize the direction of the site.

If you decide to get creative, be sure to connect the footer design and website design with the help of elements that will be executed in the same color. Make a logical transition between the penultimate and last block, but do not forget about the accents on the footer. The main thing is to choose the right colors to look stylish. In this article you can learn how to choose the right colors for a website.

Post your animation

Animation elements are always interesting to watch. In addition, they play on a person’s emotions, subconsciously pushing him to action. Even with a small and modest animation, the footer design will be transformed.

Choose readable fonts

Avoid small fonts, even if there is too much information. It's better to exclude some links that are no longer necessary. Don't force your user to look closely at words to read them. And be sure to choose colors that contrast with the background so that small letters stand out well, making them easier to read.

Use more space

The more free space in the footer area, the higher the concentration on information which is set out in it. Thematic headings and subheadings with logical blocks will help improve the ease of using the footer and searching for information in it.

This law of web design is relevant for the entire site. Free space will be a big plus in terms of usability - it is more convenient for the user to perceive information.

Organized, correct and neat placement of useful links will help you convey information correctly to your client. And the client can quickly find what interests him, without digging through many links that are useless to him. And don't forget about your mobile users. Be sure to optimize your footer so that it displays correctly on any mobile device.

Post a call to action

The footer is the final chord of the site, the goal of which is to keep the user on the site for as long as possible. Placing a call to action will be another chance to increase website conversion. It will not only keep the visitor on the page for some time, but will also turn him into a client. CTA in the footer is a classic that most popular and successful websites resort to.

How does the footer of an online store differ from the footer of other types of sites?

The content and volume of information in the footer of the site depends on the company’s activities, the scope of its services, the menu structure and the needs of the target audience. Therefore, the footers of a landing page or business card site may contain a small amount of information and links: contacts, a call to action and nothing more. But this is not enough for an online store.

The main menu of the online store contains links to categories and subcategories for the purpose of selling goods. It is not logical to place the rest of the information about the company’s services in the main menu. Therefore, it is placed in the footer. We recommend viewing examples of online store designs to learn how to properly design a website footer.

Specific information can be posted here: information for partners and regular customers, about additional services of the company (for example, information about the terms of credit, installment plans, delivery), links to the corporate department page for resolving individual issues (in particular, financial issues, questions about returning goods , settling disputes, etc.). Here you can add links to pages about:

• Company vacancies;
• Contacts of manager-consultants regarding specific equipment sold by the online store;
• Information about discounts for regular customers, loyalty program;
• Information about payment options for legal entities and individuals;
• Addresses of service centers;
• Information on cooperation for partners and suppliers;
• Link to FAQ;
• Information about purchasing gift certificates;
• Information about the company, operating hours of the offline and online store and much more.

To summarize, the footer of an online store differs only in its content and the number of useful links. Otherwise, the requirements for structure and design are identical to those set for the footers of any type of site. The main thing is that the basement is visible to the visitor and convenient for his use.

Stunning examples of website footer design

Let's look at examples of website footers of various types of activities, designs and content. Get ideas for developing an attractive and correct footer for your website :-)

Example of site footer No. 1

An example of a footer that shows how minimalism in this block helps to focus attention on the main thing: the company logo (brand) and social network icons. There is nothing superfluous, it looks stylish and beautiful. The combination of black and white is a classic. And classics will never go out of trend.

Example No. 2

A large number of useful links + a large negative space do their job: they provide extensive information on the company’s services and help the user quickly find what he is interested in. The footer is divided into two blocks: important information, where the headings for columns with links are highlighted in red, and additional information. A simple but effective solution when you need to place a large number of links at the end of the page.

Example No. 3

The footer acts as a block with a feedback form. A small call to action, neat form and original design attract attention and motivate action.

Example No. 4

6 main links to additional information, icons for entering social networking communities - nothing new. But in this case, the highlight of the footer is information about payment methods. The company takes a very powerful step by instilling trust in the client and increasing his loyalty to it. Logos of banking systems in the footer increase the ease of using the site and making payments. Convenient payment methods for the client are another plus for increasing website conversion.

Example No. 5

In this example, the footer is the final stage for the client - his action. For this purpose, the necessary marketing and technical elements have been developed: there is a call to action, a button for filling out personal data, as well as a transition function for viewing the company’s presentation. As additional information, active links to social networks and contact details of the company are provided, if it is more convenient for the client to contact it independently or visit the office in person.

Example No. 6

In this footer example, the emphasis is on contacts with the company. An additional tool for keeping visitors on the site is an active button for downloading the brief. The original design and a lot of free background keep and concentrate attention on the main thing.

Example No. 7

An example of a typical footer for an online store, where there are a large number of links to different pages of the site. Here the user can find additional information about the company, stores and services. Thanks to the correct structure of the footer, a large number of links look organic - it’s easy to find what you need here. Such ideas should be worked out in advance by the SEO and included in the terms of reference for the creation of the site. This is done in order not to miss some important information by providing it to end consumers.

Do you already know what your website footer will be like?

Having considered all the advantages and values ​​of a website footer, it can hardly be called useless. And although this block ends the page and is located at the very bottom, it rarely goes unnoticed. Therefore, every website owner should pay special attention to developing the footer. Think about what links you need to place in this block, what structure and design is best to choose so that the entire footer looks not only ergonomic and stylish, but also brings benefits - it keeps the site visitor on it. We showed you a large number of examples of popular sites and provided several important recommendations. All you have to do is, focusing on business and target audience, to develop your own effective basement for the site. And if your project is just under development, we recommend reading the article on what an effective business website should be.

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:

baseurl. "templates/". $this->template . "/images/joom4all.png"?>" />

At first glance, it looks like an ordinary HTML tag for an image, but instead of the usual file path, PHP code is written. 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.