Using the Elementor header & footer builder

Themezinho themes support custom headers and footers built with Elementor. This gives you pixel-perfect control over your site’s header and footer without touching a single line of code.

Prerequisites

• Elementor (free or Pro) — version 3.5+
• Elementor Header & Footer Builder plugin (free, from wordpress.org) — or Elementor Pro which has this built in
• Themezinho theme active and configured

Installing the plugin

1. Go to Plugins → Add New.
2. Search for Elementor Header & Footer Builder.
3. Click Install Now, then Activate.

Creating a custom header

1. Go to Appearance → Header Footer Builder (or Templates → Header Footer Builder).
2. Click Add New.
3. Give it a name (e.g., “Main Header”), set the type to Header, and click Create Template.
4. The Elementor editor will open. Build your header using Elementor widgets: Logo, Nav Menu, Button, Search, etc.
5. When done, click Publish.
6. Before publishing, set the Display On condition to Entire Site. This ensures your header appears on every page.

Using the Themezinho header presets

Themezinho includes several pre-designed header templates you can import. Go to Elementor → My Templates and look for any templates labelled “Header” in the demo templates section. Click the folder icon to import them, then customize to taste.

Creating a custom footer

1. Return to Appearance → Header Footer Builder and click Add New.
2. Name it (e.g., “Main Footer”), set type to Footer, and click Create Template.
3. Design your footer in Elementor. Common sections: logo + tagline, menu columns, social icons, copyright.
4. Set Display On to Entire Site and click Publish.

Setting display conditions

Display conditions let you show different headers/footers on different parts of your site. Common setups:

• Entire Site — always displayed
• Shop pages only — show a minimal header on the shop/product pages
• Single posts — show a sticky reading-progress header on blog posts

To set conditions: in the Elementor editor, click the gear icon in the bottom-left, go to Display Conditions, and add the conditions you need.

Hiding the default theme header

Once your Elementor header is live, you’ll want to hide the default theme header so they don’t stack. Go to Appearance → Customize → Layout (exact path varies by theme) and toggle off “Show default header”. In Themezinho, this option is under Customize → Header Settings → Disable Default Header.

Troubleshooting

Header not showing on all pages

Double-check the Display Conditions — they need to include “Entire Site” or the relevant page type. Also clear any caching plugins after making changes.

Header overlaps the page content

Add top padding to the first section of your page to account for the header height. Alternatively, in the header template settings, enable the “Sticky” option only when scrolling.