Once you’ve created and saved your custom header using the Porto Header Builder, the next step is to assigning header to your website. This allows your newly designed header to appear across your site or on specific pages as desired. Follow the steps below for a smooth and proper setup:
Step 1: Save Your Header Template
Before assigning, ensure that your header is saved:
- Navigate to Porto > Template Builder > Header.
- Confirm your custom header is listed and published.
- If not saved, click Add New, build your header, and save it with a clear, descriptive name for easy identification.
Step 2: Assign the Header Globally
To display your custom header across your entire site:
- Go to Porto > Template builder > Header and find the header block you want to set as Global Header.
- Click Blue "Edit Display Conditions" button of your Global Header block.
- In the Display Condition Setup Popup, set display condition as "All".
- Click Save Changes to apply the header site-wide.
Step 3: Assign the Header to Specific Pages (Optional)
If you wish to use different headers for specific pages or posts:
- Go to Porto > Template builder > Header and find the header block you want to set as a Header on specific page.
- Click Blue "Edit Display Conditions" button of your Global Header block.
- In the Display Condition Setup Popup, set display condition as "Single > Pages > Your Page Name" for specific page's header setup.
- In the Display Condition Setup Popup, set display condition as "Single > Posts > Your Post Name" for specific post's header setup.
- It's mechanism is same in all post types including pages, posts, portfolios, members, products and other ACF post types. You can read this article for the better understanding of Display Condition concept.
- Click Save Changes to apply the header on specific pages.
Step 4: Clear Cache and Verify
After assigning your header:
- Clear any caching from your caching plugin or CDN service to ensure changes are reflected.
- Visit your site on both desktop and mobile devices to verify that the header appears as expected.
By following these steps, you can confidently display your custom-designed header across your Porto-powered website, ensuring a consistent, professional, and responsive user experience.
