如何在 Astra 主题中启用透明标题

surname Cong Astra Starting with theme version 1.6.0, the Transparent Header option is now part of the free version of the Astra theme, previously only available through the Astra Pro Addon plugin is available. The Transparent Header feature allows users to create a more attractive and modern top of page that enhances the visual appeal of the site.

How Transparent Titles Work

With the transparent title feature enabled, theThe main header background will become transparent, the page content will be pushed to the top and the content at the top of the page becomes the background for the transparent header. If the top area of the page contains an image, that image is automatically pulled to the top and set as the background image for the transparent header.

Enable transparent headers

The steps to enable transparent headers are very simple, here are the exact setup steps:

Step 1: Enter the Customizer

exist Appearance > Customize > Title > TransparentThe Transparent Title option is found in the header.
In the Transparent Header section, enable the Transparent Header feature, set a different logo, and you can add a bottom border color.

Step 2: Select Device Display

Select the device on which the transparent header will be displayed, optionally on the desktop,mobile maybe Desktop and mobile Show.

Layout and styling of transparent headers

Transparent headers not only change the background, but also offer more customization options:

Enable transparent headers

Enable transparent headers for the entire site: Check this option to display transparent headers throughout the site.
Disable transparent headers: Disable transparent headers on certain pages or posts, set include:
- 404Search and archive pageThe
- Blog HomeThe
- All PagesmaybeAll ArticlesThe

Custom Styles

Using different logo: When transparent headers are enabled, they are displayed by default Layout > Title > Site Logo If you want to set a different logo for the transparent title, you can adjust it in the settings.
Bottom border size and color: You can set a bottom border for transparent headings to make the design more sophisticated.

Color and background settings for transparent headers

In the Customizer, you can adjust the color options for transparent headers, including:

background color: Sets the background color of the transparent title.
Site title color: Sets the color of the site title.
Menu Style: Adjust the background color, text color, link hover color, etc. of the menu.
Submenu Style: Adjusts the background color and link color of the submenu.

caveat

Transparent header layout: Transparent headers inherit the global typography settings (Global > Typography > Basic Typography).
Page Meta Setting Priority: Transparent headers can be enabled or disabled via thePage Meta setting to control. This setting takes precedence over the global setting in the customizer.

summarize

Transparent titlefeature can dramatically improve the visual appearance of a website, making it look more modern and professional. With simple settings, users can easily enable transparent headers, adjust styles and colors, and make the website perform well on different pages or devices. Feel free to contact the support team if you encounter any issues.

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