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

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!

2 Likes

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

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

@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

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

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