Website Building » Wix » How Do I Make the Footer Different on Each Page Wix?

How Do I Make the Footer Different on Each Page Wix?

Last updated on January 3, 2023 @ 7:21 pm

There are a few different ways that you can go about making the footer different on each page of your Wix website. One way is to use the Wix editor to customize the footer for each individual page. This can be done by going to the ‘Manage Pages’ section of your site, selecting the page you want to edit, and then clicking on the ‘Customize Footer’ option in the ‘Page Settings’ menu.

Another way to achieve this is by using Wix Code. With Wix Code, you can create a custom footer for your entire site that will automatically be applied to every page.

GREAT NEWS:

Exciting update! We've collaborated with Wix to offer WBI users with a free plan for all website creation needs - Explore the details here.

To do this, simply create a new file in your Wix account and name it ‘footer.js’. Then, paste the following code into the file and save it:

import wixWindow from 'wix-window';

$w.onReady(function () {
let page = wixWindow.getCurrentPage();
if (page.title === "Home") {
$w('#footer').text = "This is the home page footer";
} else if (page.title === "About") {
$w('#footer').text = "This is the about page footer";
} else if (page.title === "Contact") {
$w('#footer').text = "This is the contact page footer";
} else { // default footer text for all other pages
$w('#footer').text = "This is the default footer text"; }
});

This code will change the text in the ‘footer’ element on each page of your site depending on which page the visitor is currently viewing. You can customize the footer text for each page by changing the text between the quotation marks in the code above.

$w.title === "Home") {  
// style home page footer using HTML tags
$w('#footer').html = `

This is the home page footer

`;
} else if (page.title === "About") {  
// style about page footer using HTML tags
$w('#footer').html = `

This is the about page footer
PRO TIP: When creating a website using Wix, you may want to create a different footer for each page. This can be done by going to the ‘Page Settings’ for each page and selecting the ‘Edit Footer’ option. However, it is important to note that this will only work if you have a paid subscription with Wix. If you do not have a paid subscription, the footer will be the same on all pages of your website.
`;
} else if (page.title === "Contact") {  
// style contact page footer using HTML tags
$w('#footer').html = `

This is the contact page footer
 
`;
} else { // default style for all other pages
$w('#footer').html = `
 
This is the default footer text
 
`;
}
});

Save your changes and preview your site to see your new HTML styled footers in action!

Madison Geldart

Madison Geldart

Cloud infrastructure engineer and tech mess solver.