Header Template

With Magazine Blocks’ Template Builder, you can create professional, magazine-style headers that perfectly match your content and brand. This comprehensive guide will walk you through everything you need to know about how to edit header in WordPress or create a new header template.

Prerequisites:
- Magazine Blocks v1.2.0 or higher.
- Basic Content: Logo, menu items, and other content for header.

Accessing Header Templates #

After you have installed the Magazine Blocks plugin, you can easily change WordPress header, replacing the header offered by your theme. So, follow these steps:

• From your WordPress dashboard, navigate to Magazine Blocks >Template Builder.
• Click on Header in the Website Parts section.

You’ll get two approaches on how to edit header in WordPress website:

Option 1: Use Default Template for Header (Recommended for beginners) #

The quickest way to get started is by using Magazine Blocks’ professionally designed default header template.

Step 1: Import the Default Template

To use the default template provided by the plugin, follow the steps below:

1. Click on the “Header” tab in the “Website Parts” section.
2. Find the default header template provided by Magazine Blocks.
3. Hover over the template and click “Preview” to see how it appears.
4. Click Import to add it to your template library.

Step 2: Edit the Imported Template

Now, you can edit the template as per your needs. When editing the template, you’ll work with the WordPress block editor enhanced with Magazine Blocks features.

You can customize colors, fonts, spacing, and layout to match your brand. Also, you can add your logo, adjust menu items, and modify any content.

Add Custom Menu to your WordPress Header Template

The best part of the Magazine Blocks’ Template Builder is that it allows you to add a menu directly from the editor. To add the necessary menus to your WordPress header, click on ‘Create a new Menu‘.

On the right side of the editor, you’ll find a ‘+’ sign to add a new menu.

Click on it and search for the menu you want to add. You can add pages, posts, categories, or custom links.

For example, you can add specific menu items, such as a Home Link, which provides a direct link to your homepage. It automatically connects to your site’s homepage

Next, click on the same menu to configure it. When you click on any menu item, you’ll see configuration options in the right sidebar:

The configuration for each menu differs. For example, if you add the News menu, you will get different configuration options for the menu:

• Name: Enter a descriptive name for your menu (e.g., “News”, “Main Menu”, “Header Navigation”)
• Link: Add a custom URL if the menu title should be clickable and link to a specific page
• Description: Add a brief description of the menu’s purpose – this helps with organization and may be displayed depending on your theme
• Title Attribute: Provide additional information that appears as a tooltip when users hover over the menu
• Rel Attribute: Define the relationship of the linked URL (useful for SEO purposes – common values include “nofollow”, “noopener”, etc.)

Advanced Settings:

• Additional CSS Class(Es): Add custom CSS classes for advanced styling.

Similarly, you can add more menus by clicking on the “+” sign either on the editor or on the right side of the block settings.

Once you complete it, you can hit the Publish button. Your new header will replace the current one across your entire site.

Visit your website to see the new header in action, replacing the older header.

Option 2: Create Custom Template (For advanced customization) #

For complete creative control, build your header from scratch. Click on the Create Template button and you’ll be navigated to the template editor.

You can now create a custom header template by adding all the necessary elements from the template editor. To add a navigation menu on the header, start by adding a section.

You can then divide the section into multiple columns by choosing the layout.

Next, add a menu to each column and customize it as needed. You can also add blocks from Magazine Blocks, such as News Ticker and others. Also, you can insert an image block to add a logo to your header.

Hit the Save or Publish button. Here’s a simple example of a custom header created using Magazine Blocks:

If you return to the Header Templates, you’ll see the templates, including the existing custom headers you’ve created.

Similarly, you can create other templates.