How to Have Multiple Headers and Footers with Different Designs on Your Wix Studio Site

Show and tell
, ,
1

Hi everyone!

I wanted to share a discovery I made while working on my Wix Studio site. Did you know it’s possible to have multiple headers and footers, each with a different design, on different pages of your site? This feature can really enhance the user experience and allow you to tailor the design to suit the content of each page. Here’s a step-by-step guide on how to do it.

Step 1: Create Your Headers and Footers

Design Your Headers and Footers: Start by designing the different headers and footers you want to use in the Wix Studio editor. You can do this is a blank section. Customize each one to match the style and purpose of the specific page it will be used on.

  1. Use the “Add” button on the left sidebar to insert elements like logos, navigation menus, and other design features into your header and footer.
  2. Tip: Design them inside a container. You can then set the container to 100% width and specific height you require, also add padding for the elements.

Step 2: Duplicate and Edit

Duplicate and Customize: To create additional headers and footers, go to the Global Sections.

  1. Duplicate your current header or footer by clicking on it and selecting “Duplicate”.
  2. Edit the duplicated header or footer to fit the design and elements you want for the specific pages.
  3. Tip: Make sure to rename each header/footer so it is easily recognised.

Screenshot 2024-06-07 083533

Step 3: Assign Headers and Footers to Pages

Add to Specific Pages: Assign each customized header and footer to the appropriate pages.

  1. Click on the three dots (more options) on the header or footer you want to add in the Global Sections.
  2. Select “Add to…” and choose the pages you want this specific header or footer to appear on.
  3. Make sure to select the other header or footer currently assigned to those pages and remove it to avoid overlaps.
  4. Tip: Don’t forget to check each breakpoint for the correct header/footer.

Screenshot 2024-06-07 083815

Screenshot 2024-06-07 084050

Step 4: Test Your Site

Preview and Test: Before publishing, preview your site to make sure the headers and footers appear correctly on each page.

  1. Click on “Preview” in the top right corner of the editor.
  2. Navigate through your site to ensure each page displays the intended header and footer.
  3. Make any necessary adjustments.

Bonus Tip: Use Velo in Headers and Footers

If your site requires more advanced functionality, consider using Velo code in headers and footers. This involves using Wix Velo to programmatically change headers and footers based on user interactions or other criteria, the posibilities are endless.

By following these steps, you can create a more engaging and visually appealing website with custom headers and footers for different sections. I hope you find this guide helpful, and I’m excited to see how you use multiple headers and footers to enhance your Wix Studio sites!

Please share your experiences and any tips you have in the comments below. I hope this will assist newcomers to the Studio editor and inspire fresh creative designs.

Have a look at this quick example https://dcidesigns.wixstudio.io/multipleheader

Happy designing!

3 Likes
2

This is awesome @Dan_Suhr! :purple_heart:

I think a great use case for something like this would be marketing landing pages. (The main site would use the default header, but have specific headers (or even footers) for marketing pages).

Great example, and straight forward demo!

2 Likes
3

Dear All!
Yes it is a very nice feature to use different footers or headers on different pages.
But unfortunately I haven’t found a solution to have different footer design on the same page depending on device type. I can create differnt footer for desktop and a different one for mobil, but only one of them can be pinned at the top of the page, on the another device it only can be sticky. And it creates a problem. Please solve that footer can be pinned on every device, even if we don’t use (because of the device format) the same footer on each device.
Thanks. Krisztina

4

@krisztina-sipostamas are you talking about the classic editor ? and are you meaning the header pinned to top of page, or footer pinned to bottom ? If you have some screen shot sof what you are trying to achieve i’m sure it can be done.

1 Like
5

Sorry, the header pinning is a problem (so not the footer). If I pin my header on the desktop - header made especially for desktop , I can not more pin the header on mobil - header made especially for mobil. And it is a problem. I only can use the sticky method on mobil. And if I pin it on mobil, and can not pin on desktop.
Best, Krisztina

6

You seem to be working on the classic editor, not Studio.
In that case you need velo to show hide

7

Hi, Dan, I work on Studio.
I can not pin different header on desktop and mobil on the same page. I have to choose which device to “pin” on. On the another device the haeder only can be set as “sticky”.
If you have any solution how to pin different header on different device on the same page, I would be happy to hear your idea to solve it.
Best, Kriszitna

8

I understand what you mean now after testing. The best way is to hide the desktop header on the mobile view and set the mobile header as a sticky with no transition effect (same as pinning it to the top)

9

Hi @Dan_Suhr I’m trying to edit my site - www.holynationchurch.com with the header. I like the home page header, but it has got the same header on each of the other pages across the website. I want to make each page different with different headers. How is this possible?

10

Different headers per page is bad user experience as it could trigger confusion for the website visitor. In turn, if the navigation is broken or made poorly it will hurt SEO drastically.

But if you really want a different header design for each page then open up the Page Settings and turn off header/footer.
Then style the page however you want.

11

@fb62afe1ace431305dea as your site is built on the classic editor and not Studio the above post of mine is not suited to your situation.
You could use code to show and hide a container in the header to be able to change the style in the classic editor.

@codequeen yes if navigation is broken it will hurt SEO, but if done correctly having different headers will not affect SEO at all and even can enhance the SEO. It is a fine line though.

My post was more about having different designs to suit the page style.

12

Also, if the changes you want to make to the header/footer are relatively minor (e.g, changing background color, some spacing, etc.), we were able to find a way to add a custom class to the header & footer on a per-page basis so they could be targeted properly by CSS. This might just be easier to manage in the long run if the majority of the header/footer are the same on all pages, as you don’t have to remember to make the exact same edits on all headers/footers any time you want to make a more ‘global’ type of change (e.g., updating the menus, etc.).

For us, we just needed the header on the Home page to have a transparent background so it would overlay a large intro video, but on interior pages it needed to have a color so it would show up properly. As everything else was going to be the same, we didn’t want to have to manage 2 separate headers going forward any time changes were made. So we just targeted the Home page header and changed the background.

Here’s what we used to add the ‘homePage’ class to the headers & footers on the Home page.

$w.onReady(function () {
    // Add custom page class to header and footer (adjust to whatever IDs they have)
    const header = $w("#header");
    const footer = $w("#footer");

    header.customClassList.add("homePage");
    footer.customClassList.add("homePage");
  });

Then we could simply style like:

.header.homePage {
/* styles unique to Home page header */
}

-or-

.header:not(.homePage) {
/* styles included on all pages EXCEPT Home */
}
1 Like