Configuring Footer

Last Updated on

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.

 

In this article


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.

To enable or disable the footer:

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

Configuring footer - Footer

Setting Description
Footer Enables or disables the footer section.
Disable on mobile Enables or disables the footer section on a mobile device.
2
Click on Save Settings.

To enable or disable the sub footer:

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

Configuring footer - Subfooter

Setting Description
Sub footer Enables or disables the sub footer section.
Sub footer navigation Enables or disables the sub footer navigation.

2
Click on Save Settings.

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:

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

Configuring footer - Footer

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.

2
Configure the settings and click on Save Settings.

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:

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

Configuring footer - Footer type

3
Click 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.

To add the background color or image:

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

Configuring footer - Layout

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

Configuring footer - Background color

3
A new window on the right will appear.

Configuring footer - Background settings

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

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

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

Configuring footer - Global Settings

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

Configuring footer - Background color

4
A new window on the right will appear.

Configuring footer - Background Settings

5
Use the color selection tool to add the background color or click on Custom to upload a background image.
6
Click 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:

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

Configuring footer - Footer

2
Scroll down to the Text section.

Configuring footer - Text settings

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

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.

4
Click on Save Settings.


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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket