Creating website header
Summary: Master website header customization with ease. Explore Elementor’s advanced header builder to edit imported headers, design new ones from scratch, and fine-tune both global and page-specific header settings to match your brand perfectly.
Customize Your Website Header with Keystone Themes
Your website’s header is a vital element—it guides navigation and shapes first impressions. With Keystone Themes, you can easily customize your header using either the default options or Elementor’s powerful Header Builder. Here’s how:
1. Default Theme Header
Keystone Themes includes a clean, static header menu by default—perfect for straightforward websites that don’t require extensive customization.
2. Using the Elementor Header Builder
Edit the Imported Header
When you import demo content, a header layout is included automatically. To customize it:
- Go to WordPress Admin > Headers
- Open the existing header template and click Edit with Elementor
- To adjust menu items:
Navigate to Appearance > Menus, select Main Menu from the dropdown, make your changes, and Save
Create a New Header from Scratch
Want a fresh layout? Creating one with Elementor is simple:
- Go to Admin > Headers > Add New
- In the popup:
- Set a Title
- Choose Type: Header
- Set Conditions: Entire Site
- Enable the header toggle
- Click Edit with Elementor
- Drag and drop elements like:
- Logo
- Nav Menu
- Woo Mini Cart
- Header Search
- Popup Modal
- Button Widgets
- You can also use pre-built templates from the Template Library
(Click the folder icon and search for “Header”) - Click Update to publish your header
Once saved, your new Header template will be live on your site.
3. Global Header Settings
Access site-wide header settings at:
Admin > Theme Options > Layout > Header
Options include:
- Header Position: Choose between Default or Sticky
- Show on Scroll Up: With Sticky enabled, the header only appears when scrolling up
4. Page-Level Header Controls
For per-page header customization via Elementor:
- Edit the page with Elementor
- Click the Settings Cog (bottom-left)
- Switch to the Style tab > Header settings
Available options:
- Position: Default, Sticky, or Static
- Transparent Header: Enable or disable
- Color Scheme: Set text color for transparent headers
- Use Secondary Logo: Swap to an alternate logo when transparency is enabled
- Background Blur: Apply a subtle blur behind the header
- Vertical Spacing: Adjust top and bottom padding
Final Thoughts
Your header plays a major role in user experience and branding. Whether you stick to the default layout or harness the flexibility of Elementor, Keystone Themes gives you the tools to craft a header that’s functional, stylish, and aligned with your site’s purpose.
