A header is arguably the most important component of any website. Typically, it displays the logo, site title, tagline, and primary navigation of your site. The Header Block included in the Organic Blocks Bundle provides more control over your website header. As a result, it’s possible to change the style, fonts, colors, menus, and layout of your header within the WordPress Gutenberg editor. This is particularly useful for building entire websites with blocks.
As Gutenberg and WordPress themes evolve, we anticipate blocks being used to build every component of a modern website in the near future. As a result, Organic Themes is preparing for this shift. Moving forward, the Header Block will be an invaluable asset for WordPress website construction.
The Header Block is super easy to use! In most WordPress themes, header are options are located within the WordPress Customizer. Those options consist of the ability to add a logo, change your site title, and set a custom menu. We simply moved these options into a block. As a result, managing your header design is already a familiar experience.
Getting Started
First, search “Organic” or “Header” within your list of available blocks. Next, add the Header Block within the Gutenberg editor. Afterwards, choose from a variety of options in the block settings to complete the setup of your header.
Header Block Options
The Header Block displays a site logo, title, tagline, primary menu, and secondary menu. Additionally, several options are available to change the block appearance. For convenience, the options are divided into categories. Descriptions are provided below.
Site Identity
- Logo: Upload or select a logo image from the Media Library.
- Logo Size: Change the scale of the logo image.
- Display Site Title: Toggle the display of the site title.
- Site Title: Change the global WordPress setting for the site title.
- Font: Choose a Google Font for the site title.
- Weight: Change the font weight for the site title.
- Font Size: Change the font size for the site title.
- Letter Spacing: Change the letter spacing of the site title.
- Display Site Description: Toggle the display of the site description/tagline.
- Site Description: Change the global WordPress setting for the site tagline.
- Font: Choose a Google Font for the site tagline.
Primary Navigation
Secondary Navigation
Layout Settings
- Header Position: Change the CSS positioning of the header.
- Content Width: Change the maximum width of the content within the header.
- Display Background: Toggle the display of the header background.
- Padding: Change the top, bottom, left, and right padding for the header.
Color Settings:
- Header Background: Change the background color of the header block.
- Site Title Color: Change the color of the site title text.
- Site Description Color: Change the color of the site description text.
- Menu Link Color: Change the color of the primary menu parent links.
- Menu Hover Color: Change the hover state color of the header navigation parent links.
- Submenu Link Color: Change the color of the header navigation submenu links.
- Submenu Hover Color: Change the hover state color of the header navigation submenu links.
- Submenu Background: Change the submenu background color.
Block Requirements
All WordPress blocks, including Organic Blocks, require WordPress 5+ and the Gutenberg editor. Additionally, the Organic Blocks Bundle requires that your server is using PHP 7+ in order to work properly. Please Note: These are standard requirements for running WordPress 5+ on any web server.
Additionally, the Header Block requires that Custom Menus are created within the Appearance > Menus section of the WordPress admin before menus can be applied in the block settings.