Pro This module comes in the Pro package only.
Webal Footer is a footer of up to six columns and a bottom bar, all in one module. Each column shows one of these: a menu, your logo and a short text, your contact details, your address, your company details, your social links, a text of your own, or the modules of a module position.
The bottom bar holds the copyright line, a menu of legal links and a credit. It works on Cassiopeia and its child themes, and it can write structured data for search engines.
Tip. A footer is the band at the very bottom of every page. A menu here is a Joomla menu that you make under Menus, and legal links are links such as Privacy policy, Cookie policy and Terms.
Before you start: make your menus
In Menus, make a menu for each link column, for example a "Footer menu". Make one more for the legal links (Privacy policy, Cookie policy, Terms, Accessibility statement). Only the items a visitor may see are shown: published, inside their dates, allowed for the visitor's access level and language, and not set to "Display in Menu: No".
Add it to a page
These steps follow the order of the screens in Joomla, and nothing is saved until you press Save.
- Log in to the Joomla administrator, and in the menu on the left choose Content, then Site Modules.
- Press New, and a list of module types opens so that you can choose from it.
- Choose Webal Footer from the list of module types, which starts a new module of that kind.
- Type a Title for the module, using a name that tells you what the module is for.
- On the Module tab, under Columns, press Add for each column, up to six. In each row, choose what it Shows, type a Heading, and set its widths.
- For a menu column, choose the Menu, for a module position column, type the Module position, and for a text column, type the Text.
- Open the Details tab and fill in the logo, contact, address, company and social columns. Leave Use the site business details on to use what you entered once in the Options.
- Open the Layout tab and choose the Heading level of the column headings, where Heading 2 is usual.
- Open the Bottom bar tab. Type the Copyright line, choose the Legal links menu, and add a Credit text if you want one.
- Optional: open the Structured data tab and switch Structured data on.
- Go back to the Module tab, then open the Position list in the right-hand column and choose
footer, which is the footer position of Cassiopeia. - Under Title in the same column, choose Hide. The module title is the name of the footer for screen readers, and with no title, the words "Site footer" are used.
- Press Save, and wait until the message "Module saved." appears.
- Open the Menu Assignment tab and, in Module Assignment, choose On all pages.
- Press Save & Close, which saves the module once more and closes the editing screen.
- Open that page on your site and look for the module in the position that you chose.
Tip. Set the footer to show on all pages. A module that has no Menu Assignment shows on no pages at all, and even the copy of Webal Footer that the package installs shows nothing until you save it with On all pages.
Accessibility. Use one footer on a page, and give different footers different headings and module titles.
Options
Module tab
The options of this module sit in the middle column of the Module tab, and the group is called Content.
| Option | What it does | Default |
|---|---|---|
| Columns | One row for each column of the footer, up to 6. A column with nothing to show is left out, together with its heading. The options of a row are in the next table. | None |
| Option | What it does | Default |
|---|---|---|
| Shows | What the column holds: A menu, Logo and short text, Contact details (telephone, email, opening hours), Address, Company details (name, company number, VAT number), Social links, A text of your own, The modules of a module position. | A menu |
| Heading | The title of the column, for example Company or Contact us. | Empty |
| Show the heading | No hides the heading from the page. A menu column keeps it as the menu's name for screen readers. | Yes |
| Menu | The Joomla menu to show. Only for a menu column. | - Choose a menu - |
| First menu level | The first level of the menu to show. Starting at level 2 or deeper shows only the sub-items of the branch the visitor is on. | 1 |
| Last menu level | The last level of the menu to show. | 1 |
| Menu look | List puts the links one under another. Inline puts them in a row. | List (one link under another) |
| Text | The text of a text column. You can use paragraphs, bold, italic, lists and links. | Empty |
| Module position | The name of a module position, for example footer-extra. Only for a module position column. | Empty |
| Width from 768 pixels | How wide the column is from 768 pixels wide, in twelfths of the row: 6 is half, 4 is a third, 3 is a quarter. | 6 |
| Width from 992 pixels | How wide the column is from 992 pixels wide. Automatic shares the row equally between the Automatic columns. | Automatic (equal share) |
| Order on a narrow screen | First or Last moves a column to the top or bottom of the stack on a narrow screen. Only the look changes: keyboard users and screen readers still meet the columns in the order of the list. | Default (same as the list) |
| HTML id | For your own links or styles. Every id on a page must be different. | Empty |
| CSS classes | Extra class names for the column, up to 6, separated by spaces. | Empty |
Details tab
| Option | What it does | Default |
|---|---|---|
| Logo | The logo for a Logo column. | See below |
| Short text under the logo | Optional text shown under the logo in a Logo column. | Empty |
| Use the site business details | Yes shows the business details entered once in the Options. No gives this footer its own. | Yes |
| Company details | Name, registered name, company number, VAT number, regulator text and registered office. Shown when Use the site business details is No. | Empty |
| Address | This footer's own address. Shown when Use the site business details is No. | Empty |
| Opening hours | This footer's own opening hours. Shown when Use the site business details is No. | Empty |
| Telephone numbers | This footer's own telephone numbers. Shown when Use the site business details is No. | None |
| Email addresses | This footer's own email addresses. Shown when Use the site business details is No. | None |
| Show the opening hours in the Contact column | Yes adds the opening hours, as a table, under the numbers and addresses of a Contact column. | Yes |
| Show icons beside the contact details | Yes puts a small icon before each telephone number and email address. | Yes |
| Social links | The social links, each with a network and an address. | None |
| Social links show | What a Social links column shows for each link: icons only, icons and text, or text only. | Icons only (the name is read out by screen readers) |
| Social links look | Monochrome icons in the text colour, outline icons in the platform colour, or filled brand colours. | Monochrome (plain icons in the text colour) |
| Social links size | Standard (2.75 rem, about 44 pixels), Large or Extra large. | Standard (2.75 rem, about 44 pixels) |
Bottom bar tab
| Option | What it does | Default |
|---|---|---|
| Bottom bar | The line along the bottom of the footer. The options are in the next table. | See below |
| Option | What it does | Default |
|---|---|---|
| Copyright line | Plain text with two words in curly brackets: {year} (the current year in your site's time zone) and {sitename} (the name in Global Configuration). Empty means no copyright line. | © {year} {sitename} |
| First year | Four digits, 1900 to 2100. With 2019, {year} shows as 2019 to the current year. A first year in the future is ignored. | Empty |
| Legal links menu | A Joomla menu, top level only, for the small links along the bottom. | - None - |
| Credit text | For example "Website by Webal". | Empty |
| Credit link | With a link, the whole credit is the link. A link that opens in a new tab says so to screen readers. See the Link group. | Nothing (no link) |
| Spread of the bottom bar | Where the copyright line, the legal links and the credit sit along the bar. They wrap on a narrow screen. | Spread out (space between) |
Structured data tab
| Option | What it does | Default |
|---|---|---|
| Structured data | Yes writes one block of structured data: the business name, legal name, address, telephone, email, VAT number, opening hours, social links and logo, but only the parts this footer shows. | No |
| Structured data type | Automatic uses LocalBusiness when opening hours are shown, otherwise Organization. Or choose one. | Automatic (LocalBusiness when opening hours are shown, otherwise Organization) |
Layout tab
| Option | What it does | Default |
|---|---|---|
| Heading level of the column headings | The level of each column heading in the page outline. Heading 2 is usual. Plain text keeps the look without a heading. | Heading 2 (h2) |
| Space between columns | The gap between the columns, from None (0) to Very large (5). | Large (4) |
| Lines between columns | Yes draws a thin line above the bottom bar, and between the columns while they are stacked on a narrow screen. | No |
The Layout tab also holds the shared groups General, Spacing, Width, Colour scheme and Background: see General, Spacing, Width, Colour scheme and Background.
Animation tab
The shared Animation group, where everything is switched off for visitors who ask their device for less motion.
Advanced tab
This tab holds Joomla's own settings, such as Module Class and Caching. The footer is stored in Joomla's module cache for visitors who are not signed in.
Result
Accessibility
- The footer is a named region, and it is named by the module title, or "Site footer".
- Each menu is a named navigation, and the legal links are a navigation named "Legal links". Two navigations on a page may not share a name, so a second one with the same words becomes "Legal links (2)".
- Headings follow the level you choose and are never skipped by the module.
- Links are real links: underlined, 44 pixels high, with a visible focus ring. A link that opens in a new tab says so.
- Telephone and email rows are real tap-to-call and email links, and the opening hours are a table with a caption and a heading for each day.
- Icons are decoration and screen readers skip them, but the words stay.
- The content is always there without scripts.
Accessibility. The footer paints its own surface and text colour from the Webal colours, so every word and link has a checked contrast wherever it sits, in light and dark mode.
Other languages
The words you type, such as headings and text, stay as you typed them. The words Webal Blocks adds, such as "Registered office" and "Legal links", come from the language files.
On a site with more than one language, give each language its own copy of the footer (set the module's Language), or turn its caching off. The cache holds one copy for each menu item.
Tips
- Only a column that has something to show appears. A menu with no items, an empty position, or an address nobody entered is left out, together with its heading.
- Widths use twelfths of the row: 6 is half, 4 is a third, 3 is a quarter. Below 768 pixels every column is full width, one under another.
- The year in the copyright line is worked out when the page is built. A page kept in Joomla's module cache can show last year's number until the cache time ends.
- For a coloured footer, use the Colour scheme (Light or Dark) or the Background group. Fixed colours picked in Background do not follow the light and dark switch.
- For a footer that runs edge to edge in Cassiopeia, choose Width of the block: Full width, edge to edge, and set the module's Module Style to None. Webal Blocks then takes off the template's own 40 pixels of space above and below the footer.
- Use Structured data in one module for the whole site. Joomla's System - Schema.org plugin may already write your organisation. If it describes the same business, leave it off.
- A module position column shows every published module of that position, without its frame. While caching is on for the footer, a module in it is shown only when its own Caching is "Use Global". Turn caching off for the footer to show other modules.