You will find the new option under the same section of Page Header. Now you will instead find the options to enable the Parallax on specific devices where you want to display the Parallax effect.

The main reason we have implemented this option?

• Some images do not appear properly with the Parallax effect on responsive devices like mobile phones. In such cases, users can disable the parallax effect on Mobile and vice versa.

The New select option contains the following choices –

1. None = Disable Parallax across all devices.
2. Desktop + Mobile = Enable parallax on both the devices.
3. Desktop = Enable parallax on just Desktop ( Disable on mobile )
4. Mobile = Enable parallax on just Mobile ( Disable on Desktop )

How to Enable the Parallax Effect on Responsive Devices?

1. Create a new Page Header.
2. Now, In their settings, You will notice that the old option ( checkbox ) to enable Parallax has been replaced with the new option ( Dropdown ).

Note: We have also taken care of the Existing and New Users with this Improvement.

For existing users:

We will migrate the already set values, so if the user had the option enabled, it will work as it is and the parallax effect will be enabled after updating to 2.2.5 or above.

Users will now be able to select the Options from the responsive devices as per their requirement.

For new users:

By default, the Parallax will be set to None and it can be changed as required for the responsive devices.

We are providing two filters. One to remove the Page Header Title and another one to add the Page Title in the Content Area.

Let’s dive into both the cases and see the filter on how it will work –

Case 1:

How to remove Page Header Title which appears on top of the image. Here, you can remove the Page Header Title on all single pages, archive pages, and posts. Alternatively, you can remove Page Header Title only from single pages (the title will still be visible on archive pages and posts), from all pages (but not posts), or only from your Home page.

Solution 1: You will need to add the following filter, to remove the Page Header Title on all single pages, archive pages, and posts:

add_filter( 'astra_advanced_header_title', 'remove_page_header_title' );
function remove_page_header_title() {
  return;
}

Solution 2: You will need to add the following filter, to remove the Page Header Title only from single pages:

add_filter( 'astra_advanced_header_title', 'page_header_title_disable' ); 
function page_header_title_disable( $title ) { 
  if ( is_page() ) {
    $title = false;
  }
  return $title;
};

Solution 3: You will need to add the following filter, to remove the Page Header Title from all pages but leave it on all posts:

add_filter( 'astra_advanced_header_title', 'page_header_title_disable' );
function page_header_title_disable( $title ) {
if ( is_singular( 'page' ) || is_archive() ) {
$title = false;
}
return $title;
}

Solution 4: You will need to add the following filter, to remove the Page Header Title only from the Home page:

add_filter( 'astra_advanced_header_title', 'page_header_title_disable' );

function page_header_title_disable( $title ) {
if ( is_front_page() || is_home() ) {
$title = false;
}
return $title;
};

Case 2:

After removing the Page Header from the Top Banner, we will need to add the title in the below content area.

Solution: Let’s see the filter you will need to add the title to the content area –

add_filter( 'astra_the_title_enabled', 'display_page_title', 999 );
function display_page_title() {
  return true;
}

This is how you can remove the Page Header Title and add the Title in the content section.

This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

You can design attractive Page Title/ Page Header area with breadcrumbs, background color/image. You can also design site header to suit your page header design on the particular page.

Quick Steps on How to Design Attractive Page Headers Using the Page Headers Module
Step 1: Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?
Step 2: Activate the module from the Astra Options under the WordPress Dashboard > Appearance > Astra Options
Step 3: Visit Page Headers section [ Appearance > Astra Options > Page Headers ] to design page headers

After activating a module click on Settings option to get started.

Now you can see Page Header option under the Appearance tab, below Astra Options.

Add a new page header & give an appropriate name to it.
Choose options for Page Header, Site Header set the Display Rules and you are done!

• Page Header
• Site Header
• Display Rules

Page Header

Layout

It will arrange the page title and breadcrumbs (if enabled) on one another, in the middle of the page.

It will appear on the front end as –

Inline

It will display the page title and breadcrumbs (if enabled) in the right and the left side.

It will appear on the front end as-

Display Breadcrumb

Breadcrumbs show the current location of the user on the website. It is often used as a secondary navigation that allows users to go up and down in the hierarchy of links.

You need to enable this option if you want to display breadcrumbs.

It will appear on the front end as –

Title and Breadcrumb Colors

You can set colors for title and breadcrumb text with this options.

It will appear on the front end as-

Background Size

You can define a height for the page header with this option. It enhances the page header design.

Custom Size

You can define Top and Bottom Padding for the page header. Custom Size can be given any positive number with or without units as “5px” or “5px”. Default unit is in “%”

It will appear on the front end as-

Full Size

It will display page header as a full screen.

It will appear on the front end as –

Background

You can set color or image as a background for page header.

Color

You can choose a color from color picker for page header background.

Image

You can set a background image for page header with this option.

You get following advanced options with this-
Override this image with the featured image on individual posts & pages.
If you want to override the above background image with the featured image that you have set for a particular post or page, enable the option.

Overlay Background Color
If you enable this option, background color (if set any) will be applied as an overlay for the background image.

It will appear on the front end as –

Parallax
In the parallax effect, the background image is moved at a different speed than the foreground content while scrolling.
Enable this option if you want parallax effect for the background image.

If you want to remove Page Title from page header, you would need to use custom code (filter).

Site Header

If you wish to customize the current site header along with the page header, you can use this option.
When you customize your site header with this option, all settings under Site Header tab will override the customizer settings for current site header.

Merge Page Header with Site Header

This option will merge the page header with the current site header. It will set a current header as transparent and pull the page header to the top. Enabling this option will display the advanced customization options list.

It will appear on the front end as –

Site Identity

This allows you to choose a logo for your header different than your site logo. Leave this empty if you want to use the same logo as your site logo. You can add normal as well as retina logo and can set easily set a logo width.

Customize Site Header

When you merge the page header with site header, background set for page header will be applied automatically to the site header.
You can set Background Overlay Color, Border Bottom Size, and Color for your site header with this option.

It will appear on the front end as –

Primary Menu

If you want to override the current menu colors for the site header, use these options.
You can set Background Color, Link / Text Color and Link Active / Hover Color with this.

Submenu Color Options [NEW]

From Astra Pro v2.5.0, we are introducing separate options for Link Active Color, and Submenu Color options as shown below. Similarly, these options will be seen for the Above Header, and Below Header Link and Submenu color options too.

Custom Primary Menu

If you want to display a different menu that your Primary Menu, you can select it from the drop-down. All menu available on site will appear in the drop-down.

Custom Menu Item

It allows you to add a custom menu item at the end of the selected menu from the above option. You can select a custom menu item from the drop-down.

Customizer Setting

Choose this if you want to display Custom Menu Item set for Primary Header in the customizer.

Search

It will add a search icon for a search box at the end of the selected menu. When you click on the icon search box will appear.

It will appear on front end as-

Text / HTML

It will allow you to insert text and HTML element code. You can insert a call to action button, contact number, email address etc.

Widget

You can add a widget to the header with this option.

After selecting the widget option as a custom menu item, you will able to set a widget from Appearance > Customize > Widgets > Header

Choose any WordPress default widget or you can use any third-party plugin to add a widget to the list.

Take custom menu item outside
This option allows you to separate your custom menu item from the selected menu. It will show your custom menu item separately on responsive devices-

Note: If you have activated Header Section Addon and using Above and/or Below Header section, then you get an option to customize them.

Display Rules

Display On

You can choose your page header to display on specific pages, posts on your site. Choose a location from the list. You can Add Display rule and/or Exclusion rule.

User Roles

You can decide a user role for which page header should be visible.

We have designed a demo using Page Headers Addon. It will show how you can creatively use Page Headers Addon.
https://websitedemos.net/blog-03/category/fashion/