Astra Pro Page Header (Page Header) function in detail

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.

图片[1]-Astra Pro Page Header 模块详解:打造个性化页面标题区域

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
图片[2]-Astra Pro Page Header 模块详解:打造个性化页面标题区域
  • Click the "Settings" button to enter the Page Headers settings interface.
图片[3]-Astra Pro Page Header 模块详解:打造个性化页面标题区域

Page Header Setting Process

  • Click "Add New"Add newfootergave a name to
图片[4]-Astra Pro Page Header 模块详解:打造个性化页面标题区域
  • Configuring Page Header, Site Header and Display Rules
  • Save the release for immediate effect

Page Title Layout

Page Header
Page title and breadcrumbs up and down and centered

图片[5]-Astra Pro Page Header 模块详解:打造个性化页面标题区域
图片[6]-Astra Pro Page Header 模块详解:打造个性化页面标题区域

Inline
headings andcrumbDisplayed on the left and right sides respectively

图片[7]-Astra Pro Page Header 模块详解:打造个性化页面标题区域
图片[8]-Astra Pro Page Header 模块详解:打造个性化页面标题区域

breadcrumb navigation

Enable to display the current location path to help visitors quickly return to higher-level content

图片[9]-Astra Pro Page Header 模块详解:打造个性化页面标题区域

Header and breadcrumb colors

Text color can be set separately to adapt to the page color style

图片[10]-Astra Pro Page Header 模块详解:打造个性化页面标题区域
图片[11]-Astra Pro Page Header 模块详解:打造个性化页面标题区域

Background settings

Custom sizes
Set the top and bottom inner margins and control the header height freely.

图片[12]-Astra Pro Page Header 模块详解:打造个性化页面标题区域
图片[13]-Astra Pro Page Header 模块详解:打造个性化页面标题区域

full screen mode
Show header area as full-screen background

图片[14]-Astra Pro Page Header 模块详解:打造个性化页面标题区域
图片[15]-Astra Pro Page Header 模块详解:打造个性化页面标题区域

Colors and picture backgrounds
Can set a solid color background or upload a background image

图片[16]-Astra Pro Page Header 模块详解:打造个性化页面标题区域
图片[17]-Astra Pro Page Header 模块详解:打造个性化页面标题区域

overlay color
Add transparent overlay colors to images to enhance contrast

Featured Image Replacement Background Image
Automatically use articles orweb pageThe featured image in the background

parallax scrolling
The background moves at different speeds during scrolling to enhance the visual dynamics of the page.

Site Header (Site Header) Related Settings

Merge Header
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

图片[18]-Astra Pro Page Header 模块详解:打造个性化页面标题区域
图片[19]-Astra Pro Page Header 模块详解:打造个性化页面标题区域

Logo Configuration
Support for uploading site-specific logoThe width can be set separately for Normal and Retina HD.

menu settings

Main menu color
Customizable background color, link color, hover color, etc.

Submenu colors (since v2.5.0)
Provides sub-menus for the main menu and upper and lower header areasmenuColor settings

图片[20]-Astra Pro Page Header 模块详解:打造个性化页面标题区域

Selecting menu contents
Can replace the default main menu and select other menus for presentation

图片[21]-Astra Pro Page Header 模块详解:打造个性化页面标题区域

Adding customized menu items
Text can be added to the end of the menu,HTMLContent, buttons, search icons, widgets, etc.

图片[22]-Astra Pro Page Header 模块详解:打造个性化页面标题区域

Display menu items independently on mobile
Customized menu items can be displayed separately from the main menu on mobile for easyresponsiveopening (chess jargon)

图片[23]-Astra Pro Page Header 模块详解:打造个性化页面标题区域

display control

Page condition display
Choose which pages, articles or categories to display specific headers on

图片[24]-Astra Pro Page Header 模块详解:打造个性化页面标题区域

Display by User Role
You can set the display scope corresponding to different user roles, for example, visitors and logged-in users see different content.

图片[25]-Astra Pro Page Header 模块详解:打造个性化页面标题区域

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


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
客服微信
Customer Service
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: [email protected]
Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
本文作者:托尼屎大颗
THE END
If you like it, support it.
kudos115 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments