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:

1From the WordPress left menu, go to Theme Options > Footer.

Setting Description

FooterEnables or disables the footer section.
Disable on mobileEnables or disables the footer section on a mobile device.
2Click on Save Settings.

Sub Footer

To enable or disable the sub footer:

1From the WordPress left menu, go to Theme Options > Footer > Sub Footer.

Setting Description

Sub footerEnables or disables the sub footer section.
Sub footer navigationEnables or disables the sub footer navigation.

2Click on Save Settings.

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:

1From the WordPress left menu, go to Theme Options > Footer.

Setting Description

Boxed footerIf enabled, the footer content will be placed inside the main grid, otherwise it will be full width.
Footer Column Gutter SpaceConfigures the padding between the footer columns.
Footer Padding Bottom/TopAdds spacing to the top and bottom of the footer section.
Footer Widget Margin BottomAdds spacing to the bottom of the widgets in the footer section.
Footer typeToggles between a regular and fixed footer section.
Footer column layoutChoose how many columns (widget areas) your footer will have.

2Configure the settings and click on Save Settings.

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:

1From the WordPress left menu, go to Theme Options > Footer.
2Change the Footer Type setting to Fixed.

Configuring footer - Footer type

3Click on Save Changes and check the result.

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:

1From the WordPress left menu, go to Theme Options > Main Content > Layout & Backgrounds.

2Below Background Color & Texture click on the Footer section.

Configuring footer - Background color

3A new window on the right will appear.

Configuring footer - Background settings

4Use the color selection tool to add the background color or click on Custom to upload a background image.
5Click on Apply then Save Settings.

Adding a Page Specific Footer Background Color or Image

To add the background color or image for a specific page only:

1From the WordPress left menu, go to Pages and pick your page.
2Scroll down to Jupiter Styling Options and enable Override Global Settings.

Configuring footer - Global Settings

3Under Background Color & Texture click on the Footer section.

Configuring footer - Background color

4A new window on the right will appear.

Configuring footer - Background Settings

5Use the color selection tool to add the background color or click on Custom to upload a background image.
6Click on Apply and publish or update your page.

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:

1From the WordPress left menu, go to Theme Options > Footer.

2Scroll down to the Text section.

Configuring footer - Text settings

3Configure the footer title, text and copyright text typographies.

Setting Description

Footer title sizeChanges the font size of the footer titles.
Footer title weightChanges the weight of the footer titles.
Footer title text caseSets the text case of the footer titles.
Footer text sizeChanges the font size of the footer text.
Footer text weightChanges the weight of the footer text.
Footer Copyright Font SizeSetsdds the font size of copyright text.
Footer Copyright Letter SpacingSets the letter spacing of copyright text.

4Click on Save Settings.

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.