Headers and footers in Showit are built using site canvases, which means you can create them once and reuse them throughout your site. You can also have multiple site canvases, allowing different pages to have different headers and footers. This flexibility makes Showit a powerhouse for landing pages, sales pages, and product launches.
Want a sticky header? Just tweak the section’s sticky settings in Showit.
Why Headers and Footers Matter
Your header and footer aren’t just decoration – they’re workhorses. They help visitors navigate your site, reinforce your brand, and provide key links to important pages. When designed well, they enhance the user experience and make your site feel polished and professional. And vice versa, if the header and the footer are clumsy, it drags the whole website design down.
Best Practices for Showit Headers
Keep It Simple & Clear – Don’t overcomplicate navigation; make it easy for users to find what they need.
Use a Fixed Header – A sticky header keeps your menu accessible while scrolling.
Optimize for Mobile – Your mobile users need a streamlined, easy-to-use version.
Incorporate Branding – Consistent logos, colors, and typography help reinforce brand recognition.
Use Call-to-Action (CTA) Buttons – Make it easy for visitors to take action, whether it’s booking a service, contacting you, or signing up.
Here’s a header we design for one of our client’s Showit website. See the website here.
Best Practices for Showit Footers
Keep It Functional – Include must-have links like Contact, About, Privacy Policy, and social media.
Use a Hierarchical Layout – Organize footer sections logically to improve readability.
Organize elements in cloumns – Keep everything visually tidy.
Ensure Readability – Use legible fonts and proper contrast for accessibility.
Add Subscription Forms – Your footer is prime real estate for collecting email sign-ups.
Include a Copyright Notice – It’s a small touch, but it protects your content and adds credibility.
Here’s a footer for the same website designed by our studio.
Implementing Headers and Footers in Showit
Leverage Site Canvases – Design once, apply everywhere, and keep your branding consistent.
Customize Per Page if Needed – You don’t have to use the same header and footer across your entire site. Showit lets you mix things up for landing pages and specific sections.
Test Across Devices – Your design needs to work seamlessly on desktops, tablets, and mobile screens.
Add a Slideout Desktop Menu – Want a modern, space-saving navigation option? Set up a hidden site canvas that appears when users click a burger menu (an SVG shape). This keeps things clean while giving visitors access to more navigation options.
Common Mistakes with Headers and Footers
Cluttered Navigation – Too many links? Too many distractions? Your visitors won’t know where to click.
Poor Mobile Optimization – If your header and footer aren’t designed for mobile, you’re alienating a huge portion of your audience.
Inconsistent Design – Mismatched headers and footers can make your site feel chaotic instead of cohesive.
Lack of Call-to-Action (CTA) – Headers and footers are valuable real estate – don’t waste them. For example, you can a newsletter block with a sigh up call-to-action in you footer.
Hard-to-Read Text – Avoid low contrast, tiny fonts, retina-burning background colors, or anything that makes users squint.
Ignoring Footer Functionality – A footer isn’t just a throwaway section – it’s where users often look for key information.
Final Advice
Don’t reinvent the internet! Users expect predictability when navigating websites. A creative, one-of-a-kind header might sound cool in theory, but in practice, it can be confusing. Stick to familiar layouts and structures that make it easy for visitors to find what they need.
Conclusion
A well-structured header and footer make your website more intuitive, visually appealing, and user-friendly. By following these best practices, you can create a seamless experience that helps visitors find what they need—without frustration.
All of our Showit templates have professionally designed headers and footers. Buying a pre-designed template will help you avoid all the common mistakes without getting too deep into web design.