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. At the time of writing (October 12, 2020), Brizy offers no setting option to set display conditions for the custom header. Instead, you can only add a custom header in the page/template you are currently editing.
What if your website consists of several pages? Unfortunately, you need to edit every single page (and template) where you want to add the custom header to. Yes, it would be time-consuming. To save you a little time, you can set the header block on the page you are currently editing as a global block. This way, you don’t need to create the header block from scratch. To add a custom header in other pages, you can simply add from the global header block you already created.
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.
Set the order 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.