The Page Header in the Porto theme controls the display of the page title, breadcrumb navigation, background styling, and optional decorative elements at the top of each page. Porto gives you flexible global controls, page-level overrides, and the ability to build fully custom Page Headers using the Porto Block Builder (Elementor or WPBakery).
This guide explains how to configure global settings, override per-page fields, and create fully custom Page Header layouts.
1. Global Breadcrumb & Page Header Settings
Global breadcrumb and page title settings are controlled in Porto → Theme Options → Breadcrumbs → Breadcrumbs. Here you can configure breadcrumb type, visibility, title visibility, and structural options.
- Breadcrumb & Page Title Configuration
- Breadcrumb Type (1–7) - Choose the visual style of your breadcrumb layout.
-
Show Page Title - Toggle the page title display globally.
When enabled, additional options appear:- Show Content Type Name in Singular - Show Content Type Name in the breadcrumb of single content type.
- Show Parent Page Title in Page - Show Parent Page title in the breadcrumb of single page.
-
Show Breadcrumbs - Toggle breadcrumb visibility globally.
When enabled, additional options appear:- Show Yoast Breadcrumbs Instead of Default - Please select "YES" to display the Yoast breadcrumb path instead of default.
- Breadcrumbs Position - "Default" is the below of header and "Inner Top" is the top position of main content.
- Breadcrumbs Prefix - Input the text before the breadcrumb path (It will be appeared on the top of path).
- Hide the Leaf Path on Breadcrumbs - Please select "YES" to hide the leaf path in singular page.
- Show Blog Link - Please select "YES" to insert the permalink of the blog page in single post page.
- Show Shop Link - Please select "YES" to insert permalink of shop page to breadcrumb path in single product page.
- Show Custom Post Type Archives Link - Please select "YES" to insert the permalink of "Archive Page" to breadcrumb path in single custom post page.
- Show Categories Link - Please select "YES" to display the categories in single page.
- Breadcrumbs Delimiter - Select the type of separator between each breadcrumb.
- Title Tag - Choose HTML tag for page titles (H1, H2, etc.)
- Custom CSS Class - Assign a custom class for advanced styling.
- Breadcrumb Styling
In Porto → Theme Options → Breadcrumbs → Breadcrumbs Styling, you can customize Background (color or image), Padding, Margin, Typography (font, weight, size, line height, etc). These global styles apply site-wide unless overridden by a custom Page Header block.
2. Page-Level Overrides (Page/Post Editor)
For any individual page or post, you can override some global Page Header settings. In the editor, scroll to Porto View Options. Here you can control Page-Level Options
- Show Page Title (On/Off)
- Page Subtitle (manual input)
Only these two settings can be overridden per-page. Title type, breadcrumbs layout, background styling, etc., still follow the global settings unless replaced with a custom Page Header block. Use this when
- A specific landing page should hide the title
- A blog post needs a unique subtitle
- A product page requires a clean header
3. Creating a Custom Page Header (Using Porto Block Builder)
Porto allows you to completely replace the default Page Header with a custom block built using the Porto Block Builder.
Steps to Create a Custom Page Header Block
- Go to Porto → Template Builder → Block → Add New
- Open the block with your preferred builder (Elementor or WPBakery).
- Insert the “Porto Page Header” element.
- Inside this element, you can configure Breadcrumb Type, Page Title and Subtitle, Breadcrumb visibility, Background image, Background color, Padding and spacing, All breadcrumb-related settings.
- Design the complete header layout (rows, images, overlays, backgrounds, etc).
- Save the block.
Important - The settings inside the “Porto Page Header” element take higher priority than global Theme Options.
4. Assigning the Custom Page Header Block
Once your custom block is created, assign it using Porto’s layout and condition system.
Porto allows assigning Page Header blocks to:
- Entire site
- Specific pages
- Specific posts
- Categories
- WooCommerce pages
- Custom post types
- Other conditional displays
This capability makes it possible to use different Page Header designs across different sections of your website.
Summary of Priority Levels
When multiple settings exist, Porto applies them in this order:
- Custom Page Header Block (highest priority)
- Page-Level Title / Subtitle override
- Global Breadcrumb & Page Header Settings
- Default Porto style (if no settings applied)
