The header is one of the most important elements of your website, appearing at the top of every page and providing navigation and branding. DigiFlash’s Full Site Editing capabilities allow you to completely customize your site header using blocks, giving you full control over its design and functionality.
Accessing the Header Editor
To edit your site header, navigate to Appearance → Editor from your WordPress dashboard. In the Site Editor, click on Patterns and look for the Template Parts section in the left sidebar. You’ll see a list of available template parts, including your header.
Click on the header template part to open it in the editor. You’ll see the current header design with all its blocks, such as the site title, navigation menu, and any other elements included in the header.
Editing Header Elements
Once the header is open in the editor, you can click on any block to modify it. The site title can be edited through their respective blocks, and you can adjust their typography, colors, and spacing. You can also replace the Site Title by your Logo by adding the Site Logo block.
The navigation menu block allows you to add, remove, or rearrange menu items. You can change the menu layout from horizontal to vertical, adjust spacing between items, and customize link colors and hover effects. DigiFlash supports responsive navigation, ensuring your menu works perfectly on mobile devices.
You can add new blocks to your header by clicking the + button in the top toolbar or within the editor canvas. Common additions include search bars, social media icons, buttons for calls-to-action, or custom HTML for specific functionality.
Creating Multiple Headers
DigiFlash allows you to create as many custom headers as you need for different sections of your website. To create a new header, go to Appearance → Editor → Patterns, click the Add Pattern button and Add Template Part.
Select Header as the template part type and give it a descriptive name, such as “Landing Page Header” or “Minimal Header.” This new header starts blank, allowing you to design it from scratch using any blocks you want.
You can duplicate an existing header to use as a starting point. Simply open the header you want to copy, click the three dots menu in the top toolbar, and select the duplicate option. This creates a copy that you can then modify without affecting the original.
Using Different Headers on Different Templates
The power of Full Site Editing in DigiFlash extends to using different headers on different templates. To assign a custom header to a specific template, navigate to Appearance → Editor → Templates and select the template you want to modify.
Once the template is open, locate the header template part at the top. Click on it to reveal the block settings panel on the right side. In the settings, you’ll find an option to choose which header to use. Click the dropdown menu to see all available headers and select the one you want to apply to this template.
This flexibility allows you to have a unique header for your homepage, a different header for blog posts, another for landing pages, and yet another for your shop pages if you’re using WooCommerce. Each template can use the header that best suits its purpose.
Creating Custom Templates with Custom Headers
You can take customization even further by creating entirely custom templates that combine your custom headers with specific page layouts. To create a custom template, go to Appearance → Editor → Templates and click the + icon.
WordPress will ask you to name your template and choose what type it should be. You can create templates for pages, single posts, archives, or even completely custom template types. Once created, you can build the entire template structure, including which header template part to use at the top.
After designing your custom template with its designated header, you can assign this template to specific pages. When editing a page in the WordPress editor, look for the Template option in the page settings panel on the right side. Click the dropdown menu to see all available templates, including your custom ones, and select the template you want to use.
Managing Header Variations
As you create multiple headers for your site, it’s important to keep them organized. Use clear, descriptive names for each header template part so you can easily identify which header serves which purpose. Names like “Main Header,” “Transparent Header,” “E-commerce Header,” or “Event Page Header” make it simple to select the right header when editing templates.
You can also preview how different headers look on your site before publishing changes. The Site Editor provides a live preview, and you can navigate through different pages to see how the header appears in context with your content.
Styling Your Header
DigiFlash’s Global Styles system affects your header along with the rest of your site. Colors, typography, and spacing set in Global Styles apply to header elements, ensuring visual consistency. However, you can override these global settings for individual header elements if you want the header to have a distinct appearance.
To access block-specific styling, select any block within your header and use the settings panel on the right to adjust colors, typography, dimensions, and spacing. These changes apply only to that specific instance, giving you precise control over your header’s appearance.
The Site Editor also allows you to adjust the header’s width, add background colors or images, apply padding and margins, and control how the header behaves on different screen sizes. DigiFlash ensures all header designs remain responsive and fast-loading regardless of customization.