Neve Page Header
The Page Header is the area below the header/navbar where the page title over a hero image is usually shown.
Let's see how this area works. It's basically a builder with two rows where components like buttons, HTML widgets, or a menu can be added.
The page header builder can be accessed on Dashboard -> Appearance -> Customize -> Page Header.
Please note that by default, this section will be visible on all pages, below the navbar, after adding some components on those rows.
For displaying it only on certain pages, use the tags available in the Global Page Header Settings.
Page Header Rows
There are two rows available in this area, those are the locations where you can add the available components. The fact that they are called rows doesn't mean that the section height can be custom like 500px.
Each row can be divided in a maximum of 12 columns and has its own settings as
- Layout - Full Width Contain | Full Width | Contained
- Style - Row height | Skin mode | Row background(color or image) | Overlay Color | Overlay Opacity
What is noticeable here is that the background image of a row can be set to use the featured image of the page. In this case, the image you set here will be used just as a fallback for the pages without a featured image.
Page Header Components
Each component can be added on a row by clicking the plus button and choosing it. All the components available here are resizable by drag & drop, just hover on their margin.
Let's see all the components available here, and for more details about each of them, just click on a component name.
The button component
From here you can set the button link and text. By clicking on the three dots at the end of the row, you can get a dynamic label or URL.
The button can have its own margins/paddings and alignment. The alignment options is useful in case you resize the button component to occupy more columns within the page header.
Choose the desired color, background color, border-radius(rectangular or rounded button), and the button style.
The HTML component
This is a text area where you can add plain text or HTML. This component has three tabs with options like the other components, General | Layout | Style.
The most powerful feature here is the magic tags available in the editor.
These tags are something like, display the page title here but get the title of each page. As the whole page header will be displayed sitewide, those magic tags are very helpful in showing information specific to each page, like the title, or the description.
Below is a screenshot of how to set these magic tags to build a hero section where the page title and description are displayed.
This is an example of a product category page that also has a description.
For adding the background image and increasing the section height, the row settings come in handy.
The Page Header Menu component
This is a regular menu location, in case you want to have a different menu here. You can assign a menu here from Dashboard -> Appearance -> Menus, or directly from the component, in the General tab.
General - set the desired menu in this location
Layout - edit the height and space around the menu items. The alignment, padding, margins can be set for the whole component.
Style - for the menu items you can change the color, hover color, and the hover skin mode. Besides that, there are dedicated typography options.