Setting up the Header
Table of Contents:
- Header Video Overview & General Info
- Header Options
- Logo
- Menus
- Global/Custom Header Layout
- Transparent Header
- Header with Popup Menu
1. General
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, and 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.
3. Logo
Requirements:
- 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.
4. Menus
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 from 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.
