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.
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
`;
} 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!