The footer of a website is as important as the header. Its purpose is to guide visitors by providing business information and website navigation options. However, it should not appear cluttered with too much information; it’s recommended to keep the design simple.
In this article, we’ll explain how to enable or disable the footer and sub footer, add content to them, and configure layout, design and typography.
To see the footer section in action, check out the bottom of the demo page.
Enabling or Disabling the Footer and Sub Footer
The footer and sub footer are enabled by default. When a template is activated, it may change the settings for the footer or sub footer and disable them.
Footer
To enable or disable the footer:
| Setting | Description |
|---|---|
| Footer | Enables or disables the footer section. |
| Disable on mobile | Enables or disables the footer section on a mobile device. |
Sub Footer
To enable or disable the sub footer:
| Setting | Description |
|---|---|
| Sub footer | Enables or disables the sub footer section. |
| Sub footer navigation | Enables or disables the sub footer navigation. |
Adding Content to the Footer and Sub Footer
To add content to the footer and sub footer, you mostly need to use widgets. To learn more about adding content, read the Adding content to the footer article.
Choosing the Layout
The layout of the footer determines how the content added via widgets in the footer will be displayed.
To change the footer layout:
| Setting | Description |
|---|---|
| Boxed footer | If enabled, the footer content will be placed inside the main grid, otherwise it will be full width. |
| Footer Column Gutter Space | Configures the padding between the footer columns. |
| Footer Padding Bottom/Top | Adds spacing to the top and bottom of the footer section. |
| Footer Widget Margin Bottom | Adds spacing to the bottom of the widgets in the footer section. |
| Footer type | Toggles between a regular and fixed footer section. |
| Footer column layout | Choose how many columns (widget areas) your footer will have. |
Configuring the Sticky Footer
A sticky or fixed footer sticks to the bottom of the page so other sections move over it. Check out the Hera template to see it in action.
To make the footer sticky:
Configuring the Design
There are a few settings in Theme Options that allow you to change the default styling of the footer.
Adding a Global Footer Background Color or Image
To add the background color or image:
Adding a Page Specific Footer Background Color or Image
To add the background color or image for a specific page only:
Configuring the Typography
There are a few settings in Theme Options that allow you to change the typography of the footer.
To change the typography:
| Setting | Description |
|---|---|
| Footer title size | Changes the font size of the footer titles. |
| Footer title weight | Changes the weight of the footer titles. |
| Footer title text case | Sets the text case of the footer titles. |
| Footer text size | Changes the font size of the footer text. |
| Footer text weight | Changes the weight of the footer text. |
| Footer Copyright Font Size | Setsdds the font size of copyright text. |
| Footer Copyright Letter Spacing | Sets the letter spacing of copyright text. |
If you want to change font-family for the footer items, you need set it in Theme Options > Typography as described here. Set Font Family and choose the elements to which it will be assigned: paragraph, links or footer navigation, etc.
Setting sub footer copyright text in the center
To get the copyright text in sub footer centered, you need add this code in Theme Options > Advanced > Custom CSS:
#sub-footer .mk-footer-copyright {
float: none !important;
display: block !important;
text-align: center !important;
}If you want to style some other section (footer widget or so), please create a ticket in our help desk.
