Have you heard about Brizy? It’s a page builder plugin just like Elementor and Divi Builder which allows you to create beautiful pages on your WordPress site without having to deal with CSS or HTML. Same as Elementor and Divi Builder, Brizy also comes with a feature to allow you to create a custom header on your WordPress. This article will show you how to create a custom header in WordPress using Brizy.
Creating a custom header in Brizy is a bit different from Elementor and other page builder plugins. Brizy doesn’t allow you to create a custom header template. Instead, if offers a dedicated block to create a custom header. But you can still assign a custom header to specific area(s) on your website as Brizy also support display conditions. To be able to create a custom header in Brizy, you need to use the pro version.
Creating a Custom Header in Brizy
Just like Elementor and other page builder plugins, you can add any element you like to your custom header. In this example, we will show you how to create a simple custom header that consists of a site logo and a navigation menu.
To get started, create a new page (Pages -> Add New) and edit it with Brizy (sure, you can edit an existing page). You can read this article if you are new to Brizy.
Add a new block to the page you are currently editing by clicking the plus button on the canvas area. On the Header category on the left sidebar, select a header block template you like to import it to the canvas area.
To edit the default content on the header block template you have just imported, you can simply click the element to open the settings bar.
Setting the Site Logo
To edit the default site logo, you can click the logo element to open the settings panel. As the settings panel opens, you can click the Image tab to open the image selector. Simply select the logo image you want to use by clicking the image selector. Or, if you want to load the site logo (assuming you have set it on the theme customizer), you can also click the database icon and select Site Logo.
You can click the gear icon on the settings bar to set the logo size (high and weight). To add a link (if you manually select your logo image), you can click the chain icon. You can also set the alignment by clicking the alignment icon.
Setting the Site Menu
To select a menu, you can hover your mouse over the Menu element and click the grey arrow icon. On the appearing settings panel, click the menu tab and select a menu you want to use from the Menu option. As you can see, you can also turn the menu into a hamburger menu if you want it.
To set the typography of the menu items as well as text color, you can click a menu item. Click the Typography tab to set the typography (font family and font size). To set the text color, you can click the Colors tab.
To set the header style (fixed, static, or sticky), you can hover your mouse over the header block and click the mixer icon to open the settings bar. Click the Menu tab and select the header style on the Header option. In order to ease your job in adding custom header in other pages, you can also set the header block as a global block by enabling the Make it Global option.
Setting the Order of the Header Block
Once you are done customizing all elements on the header block, you can reorder the blocks on the page you are editing and place the header block to the top.
That’s it. You can publish your page once you are done editing it. You can repeat the steps above to add the custom header to other pages and templates. You don’t need to create the header block from scratch as you have set a global header block. You can simply open the Global Blocks to add the global header you have set.
Setting the Display Condition
As said earlier, you can assign the custom header to certain area(s) on your website as Brizy supports display conditions. To set a display condition to the header block, you need to set it as a global block. To do so, hover your mouse over the header block and click the mixer icon.
On the appearing bar, click the Menu tab and enable the Make it Global option.
Once the header block turned into a global block, the Menu tab once again and click Display Conditons (a global block has a globe icon on its top-right corner).
On the appearing dialog you can select the area you want to assign the custom header to. For instance, if you want to assign the custom header to the entire website, you can select the All option. Or if you want to assign the custom header to blog posts only, you can select Posts. You can add multiple display conditions. You can click Add new display condition to add a new display condition Make sure to click the Save button to apply the display conditions you set.