Astra Pro The plugin provides the Page Headers module to create page header fields for your website, includingcaptionStyle,breadcrumb navigationThe program can be customized to fit a variety of page structures and display needs, such as background settings and layout methods.
![Image [1]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411102808654-image.png)
pre-conditions
To use this module, you need to install the Astra theme and the Astra Pro plugin and enable the Page Headers module in the backend.
Enabling Steps
- Install and activate the Astra Pro plug-in
- Go to backstage > Astra > Astra Pro Modules, Enable Page Headers Module
![Image [2]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411103359681-image.png)
- Click the "Settings" button to enter the Page Headers settings interface.
![Image [3]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411103407258-image.png)
Page Header Setting Process
- Click "Add New"Add newfootergave a name to
![Image [4]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411103528205-image.png)
- Configuring Page Header, Site Header and Display Rules
- Save the release for immediate effect
Page Title Layout
Page title and breadcrumbs up and down and centered
![Image [5]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411103538767-image.png)
![Image [6]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411103625164-image.png)
headings andcrumbDisplayed on the left and right sides respectively
![Image [7]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411103637646-image.png)
![Image [8]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411103653970-image.png)
breadcrumb navigation
Enable to display the current location path to help visitors quickly return to higher-level content
![Image [9]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411103701103-image.png)
Header and breadcrumb colors
Text color can be set separately to adapt to the page color style
![Image [10]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411103707812-image.png)
![Image [11]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411103748462-image.png)
Background settings
Set the top and bottom inner margins and control the header height freely.
![Image [12]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411103800372-image.png)
![Image [13]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411103807802-image.png)
Show header area as full-screen background
![Image [14]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411103819782-image.png)
![Image [15]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411103824567-image.png)
Can set a solid color background or upload a background image
![Image [16]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411103909890-image.png)
![Image [17]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411104013435-image.png)
Add transparent overlay colors to images to enhance contrast
Automatically use articles orweb pageThe featured image in the background
The background moves at different speeds during scrolling to enhance the visual dynamics of the page.
Site Header (Site Header) Related Settings
When enabled, the page header is displayed in conjunction with the site header and the background is automatically applied to the entire header area
Top of page visual more unified, suitable for transparent navigation design style
![Image [18]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411104026186-image.png)
![Image [19]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411104038793-image.png)
Support for uploading site-specific logoThe width can be set separately for Normal and Retina HD.
menu settings
Customizable background color, link color, hover color, etc.
Provides sub-menus for the main menu and upper and lower header areasmenuColor settings
![Image [20]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411104055525-image.png)
Can replace the default main menu and select other menus for presentation
![Image [21]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411104103146-image.png)
Text can be added to the end of the menu,HTMLContent, buttons, search icons, widgets, etc.
![Image [22]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411104113785-image.png)
Customized menu items can be displayed separately from the main menu on mobile for easyresponsiveopening (chess jargon)
![Image [23]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411104136636-image.png)
display control
Choose which pages, articles or categories to display specific headers on
![Image [24]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411104218442-image.png)
You can set the display scope corresponding to different user roles, for example, visitors and logged-in users see different content.
![Image [25]-Astra Pro Page Header Module Explained: Creating a Personalized Page Header Area](https://www.361sale.com/wp-content/uploads/2025/04/20250411104226981-image.png)
summarize
The Page Header module isAstraPage title design provides highly flexible control items, suitable for application in blog homepage, service page, brand introduction and other scenarios. Match the background image,opening (chess jargon)Styles and menus are customized to be able to create a visually appealing first screen of the page.
Related articles
Link to this article:https://www.361sale.com/en/49714The article is copyrighted and must be reproduced with attribution.




















![Emoji[wozuimei]-Photonflux.com | Professional WordPress repair service, worldwide, rapid response](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![Emoticon[baoquan] - Photon Wave Network | Professional WordPress Repair Services, Worldwide Coverage, Rapid Response](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

No comments