Easily Add A Footer To Your Site

5580 views 4 minutes

The footer of your website is the area that appears at the bottom of each page, and allows to display additional information, and improve navigation. Adding a footer to your site brings many benefits, such as improving your website design and giving it more credibility. SiteW offers a specific function allowing you to easily configure your footer.

General information

Your website footer is the area displayed at the bottom of each page of your website, regardless the height of the page. The blocks you add to your footer are automatically placed right below the last block of each page.

Why add a footer?

Most websites contain a footer because it is a zone where visitors are used to quickly finding practical information. The footer generally contains a menu, contact information, links to social media pages, and sometimes a button (or link) to go back to the top, etc.


Your footer will be compatible with the automatic and manual mobile views.
It can contain any block except the following ones:

  • Blog
  • Forum
  • Shop

The footer height works in the same way as your pages: it automatically increases,  if you move a block downward. Resizing or moving one or more blocks automatically changes the footer height, if necessary.

Configure your footer

Your footer content


Create free

Of course, it is not mandatory  to have a footer; so you can deactivate it, in just one click, for your whole website, or just individual pages. To do so, you just need to uncheck “Display the footer”, after selecting “Use website main configuration” or “Customization of this page only”, in the Footer section of the Design tab.

Configuration per page

The footer can be configured in two different ways:

  • General footer (by default)
    All the blocks located in the footer will be displayed on all pages. Pages with a custom footer won’t show the general footer content (either one or the other displays, not both at the same time).
  • Footer for a specific page
    You can create specific footers for some pages (for instance, for the footer of a Terms and conditions page). Therefore you can configure a footer “for this page only”. In this case, only the blocks of this specific footer will be displayed on this page. Moreover, this specific footer will have its own configuration: its background, width and margins can be different from the general footer’s.

To allow you to easily  identify the type of footer (general or specific), the footer is outlined in orange when configured for the whole site, and in blue, when related to the current page.

Add blocks

There exist three methods to add a block to your footer:

How to create a dynamic website 

(new block) : Directly drag a new block into the footer area.

Web design portfolio

(existing block) : Move an existing block to the bottom left corner, a label appears, drop the block in it.

Website builder free hosting

(existing block) : Right click on an existing block, then select “Add to footer”.

Note that when a block is located at the bottom of the page, an icon displays (when selected) allowing you to add this block to the footer.

Free webs
Similarly, you have the possibility to move a block from the footer to the main part of the site by dragging and dropping it into your page (it will automatically be removed from the footer).

Add a Menu block

In the footer, just like for the rest of the website, the Menu block manages the pages on which it is displayed. So the same Menu block can be displayed both in the general footer and in the specific footers (if it is configured this way).

Customize your footer appearance

Background and width

Create free

The footer area acts as a “container” that contains different elements (blocks). You can add a background, here are the possible options:

  • No background: your footer is transparent
  • Single color
  • Gradient
  • Background image: images can be fixed, which brings style
  • Texture (repeatable image)

By default, your footer displays in full screen. However, you can set your footer to have the same width as your content area.

Top and bottom margins

Top margin (top external margin)

How to create a website using html

The top margin defines the space between your footer and the bottom of the last block of the current page. Most of the time, we try to prevent the footer blocks from sticking to the blocks of the page. That’s why you can set a margin that allows to separate the footer from the page content. We call this margin the “top external margin”. You can set this margin, either by using the appropriate handle, or by using the cursor in the Footer section of the Design tab. The maximum value of the margin is 300 pixels.

Bottom margin (bottom internal margin)

Web design tutorial

This margin allows to add space between the bottom of the lowest block of the footer, and the bottom of the footer itself.
This margin is useful only if you have set a specific background (image/color/gradient), because it allows to separate the bottom of the footer, from the bottom of the lowest block of the footer. We call this margin the “internal bottom margin”.

To conclude, with the SiteW function specifically dedicated to footer, you will be able, in just a few clicks, to create a footer for all your website pages. The footers will automatically adapt to your content, without any intervention on your part. This will help you spare time and gain efficiency to create your website!

Some examples of footer

Create free blog

Web design software

How to create a website wikihow

Website design software

Cécile Alliot
Growth Manager
I am the ambassadress of figures as well as a coffee lover, and as a Growth Manager, I share my little tips with you to make online life easier.

Last update: July 02, 2020

What’s new?
The latest updates and new functionalities on our tool, after an advanced decoding with our developers.