Configuring the Footer Layout for built-in footer

How to change the footer layout

Note: The footer layout can only be configured if you are using the Default footer type.

1. From the WordPress left menu, go to Appearance > Customize.

2. From the Customizer left dashboard, go to Footer.

3. In the Footer settings, enable the Widget Area option.

4. After the Widget Area is enabled, you will be able to choose the Layout.

5. Click on Close and Publish the changes.

Styling the default Footer

How to style the default footer

You are able to configure the following settings for the footer widgets:

  • Font family
  • Font size
  • Text Color
  • Font Weight
  • Background
  • Border
  • Margin
  • Padding
  • Letter Spacing

The above settings can be applied to the footer widgets in the below location:


1. From the WordPress left menu, go to Appearance > Customize.

2. From the Customizer left dashboard, go to Footer.

3. From the Footer popup, click on Styles tab.

4. In the Styles tab, you can configure the footer widget styles.

5. After styling, click on Close and Publish the changes.

To change the footer background color, refer to this article.

Reordering Subfooter Menu and Copyright


It is possible to change the order of subfooter menu and copyright by simply using drag and drop feature:

Adding Widgets to the Footer

How to add widgets to default footer

Note: Before being able to add widgets to the footer, the Widget Area needs to be enabled and the footer layout configured. To learn how to do this, check out this article.

1. From the WordPress left menu, go to Appearance > Customize.

2. From the Customizer left dashboard, go to Widgets.

3. Select one of your footer widget areas and add a widget by clicking on Add a Widget.

4. Configure the widget settings and save the settings.

Assigning a custom footer to a specific page

How to assign footer to a specific page only

After creating your footer, you can assign it only to a specific page or pages:


Note:Post Options
 section will appear on the page backend only after you install the plugin Advanced Custom Fields PRO. It’s bundled with Jupiter X and can be installed via Jupiter X > Control Panel > Plugins as described in this article.

1. From the WordPress left menu, go to Pages and enter the page where you wish to assign your header to.

2. From the Page Options, click on Footer.

3. As Type, select Custom and below that select your footer Template.

4. Publish or Update the page.


Note:
 You can use Default Footer but it has limited settings and styles rather than the footer that you create with Elementor.


Assigning the Footer Globally

How to assign the footer for all pages globally

After creating your footer, you can assign it globally to all pages at once:


1. From the WordPress left menu, go to Appearance > Customize.

2. From the Customizer left dashboard, click on Footer.

3. For the Footer Type, select Custom and select your footer Template below.

4. Click on Close and Publish the changes.

Note: You can use Default Footer but it has limited settings and styles rather than the footer that you create with Elementor.

If you want to assign custom footer to a specific page only, please refer to this article.

Using the built-in footer in Jupiter X

How to use and configure built-in footer in Jupiter X?

Jupiter X theme lets you use a default customizer footer or create a new custom footer from scratch using Elementor.

Difference Between Default Customizer Footer and Custom Elementor Footer?

Simply put, the default customizer footer has limited options and styles while the Custom Elementor Footer has pretty much unlimited customization because of its widgets. This means that you will be able to add any Elementor element to the footer: buttons, images, headings, icons, etc.
Customizer footer feature is a great way to quickly create a simple footer to use on your website.

1. From the WordPress left menu, go to Jupiter X > Customize.

2. From the Customizer left dashboard, click on Footer.

3. A new panel will show up with the footer customization settings. For the FooterType, select Default.

Here are the most important options which you can find to customize your default footer:

  • Behaviour: You can have a regular footer (Static) or change it to Fixed.
  • Widget Area: By enabling the Widget Area options, you are able to add widget area to your footer. Then by going to Customizer > Widget and choosing the desired widget area, you can add you preferable widgets to the widget area. Please refer to this article in order to learn more about it. You can also set the Footer’s layout to full width and manage whether the footer should be displayed in smaller screen sizes or not. 
  • Sub Footer: The Sub Footer content consists of the Copyright Text and Menu. Both can be customized. Similar to the footer, you can make the sub footer Full Width and have control over the displaying of the sub-footer in smaller devices.


4. From Styles tab, you can change each component’s styles by clicking on the Customize button.

Note: To set footer background, refer to this article.

5. 
After all the customizations, close the options panel and Publish the changes.

Creating a Custom Footer in Jupiter X

How to create and use a custom footer in Jupiter X?

Jupiter X theme lets you use a default customizer footer or create a new custom footer from scratch using Elementor. The process of creating a footer using Elementor includes creating a footer template and assigning it to a page. Creating the footer using Elementor allows you to use all of the Elementor elements, allowing you to have a highly customized footer.

Difference Between Default Customizer Footer and Custom Elementor Footer?

Simply put, the default customizer footer has limited options and styles while the custom Elementor footer has pretty much unlimited customization because of it’s widgets. This means that you will be able to add any Elementor element to the footer: buttons, images, headings, icons, etc.

Customizer footer feature is a great way to quickly create a simple footer to use on your website. However, if you are looking for some specific footer design, Elementor will allow you to do that.

Note: To learn more about styling the default footer, we suggest you read this article

Using a custom footer in your website

To use a custom footer in your website, you must:

  • Create your custom footer in Elementor
  • Assign it to all pages on your website or to a specific page.

We will describe them step by step.

Creating a new Custom Footer in Elementor


Note:
 Adding a new custom footer in Jupiter X, can be only done with the Elementor plugin. To learn how to install it, check out this article.

1. From the WordPress left menu, click on Templates and go to Saved Templates menu.

2. Next to My Templates title, click on the Add New button.

3. For the template type select Footer and give your footer a name and click on the Create Template button.

4. You will now be redirected to Elementor page editor where you can choose a footer template from the library or create your new footer from scratch using Elementor. Some of the pre-made footers are part of Elementor Pro and in order to use them, you must purchase Elementor Pro first. You can also use the Jupiter X pre-made templates. Those templates are free. 
To see the Jupiter X templates, simply click on Jupiter X.  You can use your preferable template by clicking on Insert button.

If you don’t want to use pre-made templates and plan to create your custom footer from scratch, simply click on x icon. That will redirect you to the Elementor page editor.

5. If you’re using a pre-made template, you can customize it or add new widgets to it.  In order to customize a brand new footer (without using a pre-made template), first determine how many columns you need for your footer template. Then add your desired Elementor’s widgets to it such as Site Logo.

You can also add WordPress widgets to your footer template by going to WORDPRESS category in Elementor widgets panel.

6. Publish the template after your customization.

Warning!  

In case you are using Elementor Pro for footer template with Display Conditions, some of the Jupiter X footer customizations may not work properly and to fix that :

1. Make sure the Display Conditions are not provided for your footer templates.

Just save a template without conditions. 

2. Make sure the Sticky option under Scrolling Effect is set to None in the Advanced settings of the Section container in your footer template.

Assigning the Custom Footer to your Website

After creating the custom footer, you must assign it to your website. To do that please follow the steps below:

1. From the WordPress left menu, go to Jupiter X > Customize.

2. From the Customizer left dashboard, click on Footer.

3. For the Footer Type, select Custom and assign your footer from Template.

4. Click on Close and Publish the changes.

Editing Custom Footer via Customizer

There are options that allow you to edit the custom footer template or create a new one without leaving the Customizer panel when editing footer settings. 
When setting footer type to Custom, you’ll be able to select a template from the drop down list in Template setting or click on the “New” button to create a new footer template. The popup window will appear with Elementor editor allowing you to create a new footer.

If you selected the template from the drop down list, you can also edit it clicking on “Edit” button.

This way you won’t need to return to Elementor Templates and leave Customizer panel to be able to create or edit footer template. Now it’s possible inside the Customizer > Footer

Note: You can also assign the custom footer to a specific page only, please refer to this article to learn more about it.

Configuring Footer

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

Footer Enables or disables the footer section.
Disable on mobile Enables 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 footer Enables or disables the sub footer section.
Sub footer navigation Enables 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 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.

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

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.

Adding Content to the Footer

The footer has two main sections. The first section is specific to widgets and can have up to six widget areas. The second section is a sub footer which includes copyright text and navigation. Widgets can be added globally into a footer, or can be page specific.

In this article, we’ll explain how to add widgets, shortcodes and HTML codes into the footer and configure the copyright text and navigation in the sub footer.

Adding content to footer - footer content


Adding Widgets to the Footer

The footer widgets (content) can be added globally so your footer has the same content across the whole website, or they can be added only to a specific page, so your footer differs from page to page.

Adding Global Widgets

To add global widgets:

1From the WordPress left menu, go to Appearance > Widgets.

Adding content to footer - footer content

2On the Widgets page, drag and drop one of the widgets into one of the footer widget areas.

Adding content to footer - footer content

3Configure the widget settings and click Save.

Adding Page Specific Widgets

To add page specific widgets:

1From the WordPress left menu, go to Pages and pick your page.

2Scroll down to Jupiter Widget Options.

Adding content to footer - footer content

3Assign your desired widget area to one of footer columns.

Adding content to footer - footer content

4Publish or update the page.

5Follow the section above to assign widgets to your specified widget area.


Inserting a Shortcode in the Footer

Visual Composer shortcodes can be added to the footer via the text widget. Below, we’ll explain how create a button shortcode to use in the text widget.

Creating the shortcode

To create the shortcode:

1From the WordPress left menu, go to Pages > Add New.

Adding content to footer - footer content

 

2From the Visual Composer Screen, click on the + icon

Adding content to footer - footer content

3In the Add Element pop-up screen, search for Button and click on it to be added to the page.

Adding content to footer - footer content

4Configure the button in the Button Settings pop-up and click on Save Changes.

Adding content to footer - Button settings

5Switch to the backend by clicking on Classic Mode.

Adding content to footer - footer content

6Copy the generated shortcode.

footer content

7Leave the page without saving.

Adding the Shortcode to the Footer

To add the shortcode to the footer:

1From the WordPress left menu, go to Appearance > Widgets.

Adding content to footer - footer content

2On the Widgets page, drag and drop the Text widget into one of the footer widget areas.

Adding content to footer - footer content

3In the Text widget Content, paste your shortcodes.

Adding content to footer - footer content

4Click on Save.


Inserting HTML Codes in the Footer

HTML codes can be added to the footer via the text widget. Below we’ll explain how to add a logo and text to the footer.

1From the WordPress left menu, go to Appearance > Widgets.

Adding content to footer - footer content

2On the Widgets page, drag and drop the Text widget or Custom HTML widget into one of the footer widget areas.

Adding content to footer - footer content

3In the Text widget Content, add your HTML codes:

<img src="https://demos.artbees1.netdna-cdn.com/jupiter5/wp-content/uploads/2015/12/jupiter-logo-footer.png" alt="Jupiter Logo - footer content" height="180" width="180">
<p style="color: blue">Some text below the logo</p>

4Click on Save.


Configuring the Sub Footer Content

The sub footer content consists of the copyright text and navigation. Both can be changed and customized, which we’ll explain below.

Configuring the Sub Footer Copyright Text

To configure the copyright text:

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

2Enter your copyright text to the Sub Footer Copyright Text input field.

footer content

3Click on Save Settings.

The Sub Footer Copyright Text input field accepts HTML code, which means the text can be further customized and styled. Below is an example on how to change the copyright text color via HTML:

<p style="color:blue;">This copyright text is blue.</p>

footer content

Configuring the Sub Footer Navigation

To configure the sub footer navigation:

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

2Enable Sub Footer Navigation.

3Click on Save Settings.

4From the WordPress left menu, go to Appearance > Menus.

footer content

5Click on Create a New Menu.

footer content

6Give your menu a name and click on Create Menu.

footer content

7Add menu items from the column on the left. In Menu Settings, tick Footer Navigation.

footer content

8Click on Save Menu.