The toujou footer

The footer is the area at the bottom of your website and it is displayed on all subpages regardless of the screen size or device. In any toujou footer, predetermined information is automatically displayed on the front end. This default footer can be personalised by creating the content for the footer manually. Both options will be discussed in this tutorial.

Default setup Manual setup

Default footer in toujou

This screenshot shows a toujou demo website with a default footer at the bottom of the home page.

The toujou footer consists of the following components:

A line in a primary color dividing the footer from the content area
A black background with a white font color and link texts in the light primary color
Content is divided into four blocks: footer logo, first level navigation, service navigation, contact information for your main contact and social media icons

Linked tutorials

Changes to the standard display features of the footer are not made in the content area of the footer. Instead, the front end display of the default footer is derived from the basic settings that you choose for various functions of your website.

Footer logo

The footer logo is a different version of your website logo that you will need to upload separately for it to be displayed in the default footer. Once added to the footer, it becomes a link button that leads your visitors to the home page.

See tutorial: Logo settings

First level navigation

The navigation that is automatically linked from the footer corresponds to the top bar navigation of your website. If you make changes to the first navigation level of your website, you will also see these changes automatically reflected in the footer.

See tutorial: Edit pages/navigation

Service navigation

In the page tree of your website you can find the »Service Navigation« folder, which consists of the subpages Contact, Legal note and Privacy statement. Any changes you make in this folder will be automatically reflected in the links in the footer.

See tutorial: Edit pages/navigation

Contact & Social media

Your business contact information will be displayed here, but it will only show your main contact details if you have more than one listed. Social media icons will also be displayed but only if you have already inserted account links during your toujou setup.

Contact data Social media settings

Manual setup

Manually editing the toujou footer is quite similar to editing a sub-page that allows you to fill it with the content of your choice. If you decide to manually set up your toujou footer none of the default features described above will work automatically. You are always able to manually add these features if you’d like.

Step 1: Open Storage Folder

The footer can be found in a folder called »Storage Folder«, similar to a content page. This configuration is always included in every toujou package and should not be changed.

Important: If your website is already online, manual changes should always be made with caution. To make changes you can hide the footer page, which will cause the default footer to be displayed. This will allow you to edit the footer and double check your work using the view button before letting it go live on the front end.

Step 2: Create content

To use a manual footer, all you need to do is create a content element in the Content area of the footer page. To do this, click on the + Content button, just like you would when you are creating other subpages.

Important: Ignore the Header and Bottom area of this page. If you hide or delete elements of this page, the default footer will be displayed automatically.

Step 3: Select element

Select the content element of your choice in the element tabs and click on it as usual for editing. As an example case we have chosen the element Three text blocks.

Important: Not every element of the toujou element library is suitable or useful for the footer. Please contact us – we are here to help!

Example for a manual footer

In the Three text blocks element we will create a footer consisting of three instead of four blocks.

Back end view

In the example element, we will recreate the navigation and company address and add opening hours on the right as sample content.

Important: All links (in our example to the navigation menu, e-mail address, and telephone number) must be adjusted and also updated manually to allow for later changes. Font sizes, styles, alignment, and design are up to you.

See tutorial: Working with the rich text editor (RTE)

Front end view

After saving your choices, the new content element can be viewed and checked in the front end.

Important: It is absolutely necessary to double check how your new footer behaves in the front end and how it behaves on different devices and screen sizes.

See tutorial: Responsive and mobile first

Create another element

With toujou, you are not restricted to just one single content element when working with a manual footer. To demonstrate, we will now create a second element, Text, below the Three text blocks element.

Back end vs. front end

In the Text element we have recreated the information from the service navigation, consisting of Contact, Legal note and Privacy statement, horizontally. The screenshot also shows how the sample elements work together in the front end.

Pieces of advice

toujou is based on TYPO3 and anyone familiar with TYPO3 knows that there are many different options to use to reach your desired results. We would like to point out important information and little tricks that can assist you when you’re creating and editing your website.

Before your website is launched, you should consider whether you want to use toujou's default footer or whether you want to make individual adjustments manually. As explained several times in this tutorial, it is up to you to keep a manual footer up to date.

The need for a manual footer depends to a certain extent on the type of business you have and the information that is important for your success. Our footer example that included opening hours is obviously very useful for retailers and companies that rely on customers visiting their brick and mortar business. Other businesses may find it necessary to have their websites display more subpages and navigation levels in the footer, to allow for newsletter subscriptions, link partner logos, and so on. Our advice: Look around at different websites among toujou customers, on the web and/or your competitors and decide what will work best for you.

Speaking of toujou customers: Adaptations of the background color and various other design elements that cannot be displayed with toujou elements alone were usually implemented by individual web design. Please contact us to find out what options could be available to you beyond the use of the element library.