Disable Page Title in Astra Page Header Tutorial – Advanced Headers

Astra Advanced Headers Module

I love using the Astra Page Header (Advanced Headers) in Astra Pro. However, the page title takes up too much space on the image. Also, the default white text often fails to contrast with photos, especially when they are not dark.

In Astra Page Header settings, you can make the page title colour darker, but it doesn’t look good. You can also add an overlay colour to the image. I don’t like this because my photographs are essential to visitors and should remain clearly visible.

The Astra Page Header module does not natively support a graduated background for the page title, which would help it stand out. I previously used CSS for this effect, but now disable the page title on images and position it below the photographs instead.

If you are interested in using CSS to add a graduated background behind the page title, below is an example of how I used to achieve this.

CSS Code to Add a Graduated Background Behind the Page Title

/* Target Astra Page Header on name of post - Wide Screens */

@media only screen and (min-width: 1440px) {
.postid-xxxxx .ast-advanced-headers-title {
  font-size: 1.25em;
  line-height: 34px;
  color: #ffffff;
  font-weight: 300;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  margin-left: 15%;
  margin-right: 15%;
  padding-top: 20px;
  padding-bottom: 20px;
   }
} 

/* Target Astra Page Header on name of post - Narrow Screens */

@media only screen and (max-width: 1440px) {
.postid-xxxxx .ast-advanced-headers-title {
  font-size: 1em;
  color: #ffffff;
  font-weight: 400;
  background: rgba(0, 0, 0, 0.20);
  border-radius: 5px;
  margin-left: 0%;
  margin-right: 0%;
  padding-top: 15px;
  padding-bottom: 12px;
  line-height: 24px;
  }
}

The Google AI answer shown below only works on posts and pages if you are not using an Astra Page Header. The suggestion to use CSS to hide the page titles is not a good idea from an SEO perspective. You do not want Google’s crawler reading your source code and noticing that you have hidden the title, as this will likely impact your search engine ranking.

Disclaimer: I do not consider myself to be an expert in CSS coding. The above CSS is not intended to be an example of best practice in CSS coding.

Disable Astra Page Header and Reposition Below

It is possible to disable the page title in the page headers and instead reposition it below; the process is easy. If you Google how to do this, depending on how you phrase your query, you may be directed to the following Google AI explanation.

Google AI Answer

The following is not accurate advice from Google AI: To disable the page title in Astra when using Page Headers, [Post author edit: That’s not correct for Page Headers] you can either disable it on a specific page or globally. For a specific page, [Post author edit: That’s also not correct for Page Headers] edit the page, locate the Astra settings, and use the “Disable Title” option. For a global setting, you can use custom CSS to hide all page titles.

The above Google AI answer only works on posts and pages if you are not using an Astra Page Header. The suggestion to use CSS to hide the page titles is not a good idea from an SEO perspective. You do not want Google’s crawler reading your source code and noticing that you have hidden the title, as this will likely impact your search engine ranking.

This Setting Won’t Work With Astra Page Headers

Here is The Correct Answer

Typically, directly under or fairly soon under the above AI explanation search engine result, you will see a result from Astra’s page header documentation titled How to Remove Page Header Title? First, find the two blocks of PHP code below on Astra’s page and then copy and paste them into your clipboard. In Astra’s Page Header documentation, you will find other code snippets you can use with your page headers. The link to Astra’s documentation for page headers is at the foot of this post.

Copy The Two Blocks of PHP Code

PHP first block of code

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

PHP second block of code

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

You Can Use The Code Snippets Plugin For This

I added the above two blocks of code as separate snippets using the Code Snippets plugin. Activate each snippet with the setting Only run on site front end. The link to the Code Snippets plugin is at the foot of this post.

Now go to your post or page that uses an Astra Page Header, refresh it, and observe that the page title has been removed from the page header image. It has also been repositioned under the image, as in the page header example shown at the top of this post.

Tips For Better Astra Page Headers in Astra Pro

Image sizing for Astra Page Headers

As far as I am aware, Astra’s documentation does not provide guidance on suitable image pixel dimensions for use with the page header module. I often prepare a high-quality image sized 1920 pixels wide by 1080 pixels high. If I am not satisfied with the image sharpness in the Astra Page Header, I prepare the image at 2400 by 1350 pixels. Both of the above image sizes have an aspect ratio of 16:9. I primarily use the WEBP image format to improve page and post load times. On my website, I believe I get excellent sharpness in the page header images, especially at the higher pixel dimensions.

Take Better Photos For Astra’s Page Headers and For Other Website Images

Types of Camera Devices

You need a digital single-lens reflex (DSLR) camera or a mobile phone, both of which can produce razor-sharp photos with realistic colours. Of course, you can tweak your photographs for better colours with image editing software. However, you can’t do much if the camera source is producing unsharp photos.

In my experience, when using a DSLR camera, you are likely to get sharper photographs with a more expensive lens than with the kit lens that comes standard with most DSLRs. If you are using an old but high-quality mobile phone, you are likely to capture the sharpest photos without needing to zoom in on the subject. With up-to-date mobile phones, zooming in has much less impact on photo sharpness.

WordPress Image Sizing Guidance

For featured images used as the share image, for instance, when sharing your post on Facebook, Astra recommends a size of 1200 x 628 pixels. I keep to that featured image size on this website. For landscape-oriented images used in the WordPress core gallery block, I set the maximum horizontal width to 1400 pixels. This allows users to view a large image when they click through to see the full-sized image.

For portrait-oriented images, I reduce the image height to 1100 pixels. Portrait-oriented images taller than 1100 pixels may have their titles clipped at the bottom. The image title, if you have one set, is displayed when website visitors click to view the full-sized image.

Enable Your Camera Grid Lines

Enable the grid lines on your camera to achieve level horizons and better composition in your photographs.

I hope that this tutorial has been helpful. Are you using the Astra Page Header in Astra Pro? I’ll be pleased to welcome your comments below.

External Links

Astra documentation: How to Remove Page Header Title?

Code Snippets plugin at WordPress.org.

Posts in Computers and Internet. View all in this subject.