The Header Template Builder in BlogNews for Elementor allows creating custom headers visually with Elementor.
Instead of using a theme’s default header, this feature gives full control to design and style the header using BlogNews widgets such as Site Logo, Menus, Search, Site Title, Tagline, Social Icons, and more.
The template can then be assigned globally or conditionally to different parts of the website.
How to Create a Header Template
Follow these steps to create a custom header with Site Builder:
- Navigate to the WordPress Dashboard.
- In the left sidebar, go to BlogNews → Site Builder.
- Select the Header tab and click Create Template.
- Choose Display Conditions (Only For Pro), such as:
- Entire Site – apply this header across the whole site.
- Specific Pages – apply only to selected pages.
- Categories/Archives – apply to certain post categories or archives.
- Click Create Template to launch the Elementor editor.
- Design the header using BlogNews widgets like Site Logo, Menu, Search, etc.
- Once finished, click Publish to make the header active based on the display conditions set.
Content & Display Settings
When creating a header, the Site Builder provides:
- Template Name: Assign a unique name for easy identification.
- Display Conditions: Control where the header appears (entire site, single page, archive, etc.).
- Edit with Elementor: Use Elementor’s drag-and-drop interface to design the header visually.
Styling Controls
Since the header template is built with Elementor, all styling settings of BlogNews widgets are available:
- Container Styling: Background color, gradient, image, padding, margin, and box-shadow.
- Widget Styling: Each widget (Logo, Menu, Search, etc.) includes its own color, typography, alignment, hover, and spacing controls.
- Responsive Controls: Adjust the header design for desktop, tablet, and mobile separately.
Pro Tip
- For news and magazine sites, combining the Site Logo, Navigation Menu, and Search Widget provides an optimal user experience.