How to add a Blog page banner/title with Astra

This document will guide you through adding a banner or title area to your blog page using Astra. It explains options suitable for both Astra Free and Astra Pro users.

Why Isn’t My Blog Page Title Showing?

The blog (latest posts) page in WordPress acts as an archive displaying your latest posts. By default, content you add via the page editor (like titles or images) is not visible on the frontend. Instead, the appearance is controlled by the blog archive template from your theme.

In Astra, there are a few options to show the blog page title or even show a complete banner with an image and custom texts.

Please follow the steps below to show the blog page banner with Astra.

Method 1: Enable Blog Page Banner Using the Customizer (Astra Free & Pro)

The simplest way to show a blog page title or banner is through the Astra Customizer. You can set a background color or image and toggle the display of title, description, or breadcrumbs. Here’s how:

1. Go to Appearance > Customize > Post Types > Blog/Archive > Blog Title Area.

2. Choose “Banner Layout 2” and enable it for the blog page.

3. Select which elements you want to display, such as the title, description, or breadcrumbs.

4. To change the background color or add a background image, open the Design tab.

This way, you can easily enable the banner for the blog page and show the blog page title for your latest posts page.

Method 2: Custom Blog Page Banner with Site Builder (Astra Pro Only)

In this step, you will learn how to create a custom blog page banner using the Site Builder module of Astra Pro. Site Builder is a powerful, premium feature available with Astra Pro.

By using Site Builder, you can easily add eye-catching banners, templates for single posts, archives, header & footer, etc. Learn more about the Site Builder module here:

1. Make sure the Site Builder module is enabled in your Astra Dashboard.

If you are not subscribed to the Astra Pro yet, please upgrade here with the latest offers.

2. Click Settings under the Site Builder module to access layouts.

3. In Site Builder Layouts, select Hooks, then create a new layout.

4. Use the block editor (or builder like Spectra, Elementor, or Beaver Builder) to design your custom banner. Add any elements you want—images, headings, breadcrumbs, graphics, etc.

5. After finalizing the design, click the Astra icon to load the layout settings and select Hooks placement as After Header or Before Content and apply the display conditions to show the banner on the Blog/Posts Page.

This way, you can design the layout according to your choice and add the elements such as breadcrumbs, images, text, graphics etc.

If you also want to modify the header menu for the blog page, please check this guide.

With the above Site Builder module method, you can design a beautiful blog page banner layout in the editor. If you wish to quickly show the blog page title, you may use the customizer option.

I hope the above information was helpful. If you have any questions or feedback, please leave a comment below or reach out to our support team.