GenerateBlocks Pro 2.2 has landed, and it’s a game-changer for WordPress site builders. The new Site Header Block and Navigation Block empower you to create fully customized, high-performance headers and navigation menus directly in the WordPress block editor.
Paired with 15 ready-to-use Site Header Patterns in the GenerateBlocks Pro Pattern Library, these blocks make it easier than ever to get started, whether you’re a beginner or a pro. This release makes building unique headers easier than ever before, offering limitless design possibilities. Let’s explore the key benefits and how these tools can transform your website-building experience!
A New Era of Header and Navigation Design
With GenerateBlocks Pro, you have the option to build your header and navigation using GenerateBlocks. If you can dream it up and build it with GenerateBlocks, it can become your site’s header or navigation. These innovative blocks offer a significant leap, moving beyond the WordPress Customizer’s constraints.
Getting started with these new blocks might seem daunting, but the 15 Site Header Patterns in the GenerateBlocks Pro Pattern Library provide pre-designed, customizable templates to kickstart your projects, saving time and sparking inspiration.
Here are the standout benefits:
1. Unmatched Design Freedom with Starter Patterns
The WordPress Customizer often limits header and navigation styling to predefined options. The Site Header Block and Navigation Block shatter these barriers, letting you build anything from minimalist headers to complex hero sections with dynamic content. To help you get started, the GenerateBlocks Pro Pattern Library now includes 15 Site Header Patterns, offering professionally designed layouts that you can import and customize in seconds. These patterns cover a range of basic styles, giving you a head start on your design. The Site Header Block also supports:
- Logos, menus, buttons, or dynamic content with full design control.
- Merged headers with page content for stunning hero sections.
- Precise editor width settings for accurate design visualization.
The Navigation Block lets you create responsive, dynamic menus with complete control over layout, typography, and colors. You can place menus anywhere — sidebars, footers, or custom sections — unlocking endless possibilities.
2. Lightning-Fast Performance
Performance is at the core of GenerateBlocks, and these blocks are optimized for speed. Unlike Customizer-based navigation or standard block menus, the Site Header and Navigation Blocks minimize bloat for fast-loading headers and menus. These blocks outperform customizer-based navigation in accessibility and performance, thanks to a modern, lightweight codebase. Both the Navigation Block and Site Header Block use minimal Javascript, and the Site Header Sticky Navigation does not require jQuery.
3. Device-Specific Customization
Create entirely different headers and navigation menus for each device. Need a compact mobile menu and a multi-tiered desktop navigation? These blocks let you tailor designs for every screen size, ensuring a seamless user experience. This responsiveness far surpasses the Customizer’s one-size-fits-all approach.
4. Seamless Integration with GenerateBlocks Global Styles
Apply your Global Styles and Global Classes to headers and navigation for consistency. Use predefined button styles for navigation CTAs or maintain uniform typography across your site. This integration boosts performance, saves time, and ensures a cohesive look with minimal effort.
5. No Limitations. You Can Build Anything
If you can build it with GenerateBlocks, it can be your header or navigation. The Site Header Block supports advanced layouts and dynamic data with GenerateBlocks Pro, while the Navigation Block’s child blocks offer granular styling controls.
The 15 Site Header Patterns provide a foundation, but you can customize them or build from scratch for small blogs or complex eCommerce sites. Use them as individual blocks, reusable blocks, or within GeneratePress Elements for maximum flexibility.
Getting Started with the Site Header and Navigation Blocks
Here’s how to use these blocks, starting with the Pattern Library.
First, create a classic menu in Appearance > Menus. The Navigation Block will immediately inherit from the menu you establish in WordPress, so ensure your menu is ready.
Next, determine how you’ll be placing the Site Header Block. If you’ll be placing it site-wide, start with GeneratePress Elements. Ensure that Elements is activated in your GeneratePress settings.
Go to Appearance > Elements, and click Add New.
Choose “Block” as the Element type. Label it something intuitive, such as “Site Header.”
Set the Element Type to “Site Header.” This will replace the theme’s site header.
Under “Display Rules” at the bottom of the page, choose which pages on which you would like to display this header. For the entire site, choose “Entire Site” for the Location.
Next, click the GenerateBlocks logo in the upper right, and open the Pattern Library.
Choose from one of the 15 pre-made headers available.
Style the header any way you wish, setting various styles for different device sizes: desktop, tablet, or mobile. You can set your new block-based header to be “sticky” with the Site Header Block settings. Refer to the Site Header documentation for more details.
As you’ll see with the Patterns in the GenerateBlocks Pattern Library, you can add any other blocks you wish to the Site Header Block. In our examples, you’ll see buttons and logos added to the Header patterns. You can get creative here.
The Navigation Block within the Site Header Block has a variety of settings, giving it great flexibility. The block consists of a main Navigation Block and several child blocks. Each block provides extensive controls for customizing your site’s navigation. Refer to the Navigation Block documentation for more details.
Save the Element by clicking “Publish,” and view your site to see the change to your site’s header. GeneratePress Elements will replace your existing header from the Customizer with the Element you have created. Make sure you view your site on all device sizes to ensure it looks the way you wish.
Check out The Admin Bar’s video tutorial on GenerateBlocks 2.2 for practical examples of using these blocks and patterns effectively.
Why These Blocks and Patterns Matter
The Site Header and Navigation Blocks, combined with the 15 Site Header Patterns, align with WordPress’s shift toward Full Site Editing (FSE). They simplify design while ensuring compatibility with WordPress’s evolving ecosystem. The patterns provide instant starting points, making these tools accessible for beginners while offering the flexibility developers crave.
Build responsive, accessible, and fast-loading headers and menus without heavy page builders or custom code, all within the GeneratePress and GenerateBlocks ecosystem.
Tips for Success
- Start with Patterns. Import a Site Header Pattern from the Pattern Library to quickly set up a professional header, then tweak it to match your brand.
- Use Dynamic Data. Personalize your header with dynamic content, such as user-specific information for logged-in users. (Example, “Welcome, Janet.”)
- Test Across Devices. Leverage device-specific customization for an optimal user experience.
Headers and Navigation Have Never Been Easier
The GenerateBlocks Pro Site Header and Navigation Blocks, enhanced by 15 Site Header Patterns in the Pattern Library, redefine WordPress header and menu design. These tools offer unmatched creative freedom, blazing-fast performance, and seamless integration with your existing designs. Whether you start with a pattern or build from scratch, you can create headers and navigation as unique as your vision—no limitations.
GeneratePress One provides everything you need to create innovative headers and navigation for your next project. Watch for new Starter Sites coming soon, like the Key West example above, to showcase innovative ways to use GenerateBlocks to create headers and navigation that set your site apart from the competition.