Setting up the Header
Table of Contents:
- Header Video Overview & General Info
- Header Options
- Global/ Custom Header Layout
- Transparent Header
- Header with Popup Menu
The main tool to build the Header area is located in Flotheme -> Header. From here, you can set a Global Header that will be applied to all existing pages, posts, galleries.
Pronto includes a selection of predefined Header Layouts to choose from: a mix of classic header layouts and headers with popup functionality.
Also, with Pronto you can create your own custom Header layouts (build from scratch or create by duplicating an existing layout).
2. Header Options
For the predefined Flotheme Headers you have the following options: edit, duplicate, reset to default template, enable sticky and set as Global Header.
For the Custom Headers you have similar options, plus the delete functionality.
Design your Header
Once you’ve selected your Header layout, proceed with the customization of your chosen layout. You can customize your design, logo settings, size of your header, fonts, colors, etc.
Click the edit option, it will redirect you to the Gutenberg Editor. Once you are in the Gutenberg editor, open the Flex Block and start making adjustments.
Even if you don't want to modify the look of the Header, it's important to customize your logo and select the menu that you want to be used inside your Header.
- PNG Image with transparent background
- max-width 500px
- The max file size should be 150kB.
To upload the image, go to the header Flex Block and add a logo element.
Deactivate the "Use Text Instead Of Image" function to be able to upload an image and simply upload the logo you want to use for your header. Make sure you upload both the light and default logo versions.
The light logo will be used when your header will be transparent and will be positioned on top of an existing block.
Although a full tutorial on how to set up your Menus can be found here, it's important you know at this point that you can create a Menu inside a Flexblock using the Menu Element.
Regardless if you want to use an existing menu or create a new one, make sure that you select the menu that you want to use for each Layout (Global or Custom), as shown here:
5. Global/ Custom Header Layout
After configuring your Header, feel free to use the "Set as Global" option to enable the chosen Header as the Global one.
In comparison with the previous themes, if you want to use a Custom Header, you won't have to create it inside each individual page.
You can create a Custom Header Layout inside Flotheme -> Header, and then simply use that design on another page, by disabling the Global Header option and selecting another Layout form the dropdown menu, as shown here:
6. Transparent Header
If you want to have a transparent header, select the "Merge with Content" option shown in the screenshot above to enable this option.
This will position your header on top of the first block.
Make sure you customize the Elements Color Value if necessary.
7. Header with Popup Menu
If you want to build a header with a popup menu, you can start with using any of the predefined layouts available in Flothemes -> Headers : Header D, E or F.
You will notice that the headers with popup menus are made from 2 blocks: a Flex Block and a Popup Block.
The main header is built with the Flex Block, here you add the Popup Toggle element which triggers the popup.
The layout of the popup is built with Flex Popup Block. It's important to link the Popup Toggle with the Popup Block via the Popup id option.
Please find more details related to Flo Popup Blocks here.