How to Create Scalable and Dynamic Page Heroes

A page hero is typically the first section on any given page. It often includes the page title but can also feature additional elements like subheadlines, background images, or calls to action. Since page heroes are a key part of every page on your website, it’s worth investing time to get them right.

In this post, I’ll walk you through three different ways to set up page heroes:

1. Basic Page Heroes: A simple, static design.
2. Dynamic Page Heroes: A more scalable solution using dynamic data.
3. Customizable Page Heroes: The ultimate solution with advanced customization options.

I’ll be using GeneratePress and GenerateBlocks for this tutorial, but the concepts can be applied to other page builders as well.

Basic Page Heroes

Let’s start with a simple, static page hero.

Setting Up a Basic Page Hero

1. Create a New Section:
   • Open the editor for your page and add a new container with an inner container.
2. Add the Page Title:
   • Insert a headline block, set it to H1, and type the page title (e.g., “About Us”).
3. Style the Page Hero:
   • Add padding to the outer container.
   • Add a top border to the headline (e.g., 1px solid olive green).
   • Adjust the padding and display settings to make the border match the width of the text.
4. Add a Background Image:
   • Select the outer container and add a background image.
   • Adjust the opacity of the image to create subtle texture (e.g., 0.15).
5. Check Responsiveness:
   • Test the design on tablet and mobile views, adjusting padding as needed.

Limitations of Basic Page Heroes

While this approach works, it has significant drawbacks:

• Manual Updates: You’ll need to copy and paste the hero design onto every page and manually update the title for each one.
• Scalability Issues: If you need to make changes (e.g., update the background color), you’ll have to edit every page individually.

Dynamic Page Heroes

To solve the scalability problem, we can use GeneratePress Pro’s Elements feature to create a dynamic page hero template.

Setting Up a Dynamic Page Hero

1. Copy the Existing Design:
   • Go to the page with your basic hero, copy the outer container, and save it for reuse.
2. Create a New Element:
   • In the WordPress admin, go to Elements and click Add New.
   • Select Block Element and click Create.
3. Configure the Element:
   • Name the element (e.g., “Page Hero”).
   • Paste the copied hero design into the block editor.
   • Set the Element Type to Page Hero and the hook to After Header.
4. Enable Dynamic Data:
   • Select the headline block and enable Dynamic Data.
   • Set the content source to Title. This will dynamically pull the page title for each page.
5. Set Display Rules:
   • Under Display Rules, choose where the hero should appear.
   • For this example, select Entire Site and exclude the homepage (if it has a custom design).
6. Publish and Test:
   • Save the element and check the front end. The hero will now dynamically display the correct title for each page.

Benefits of Dynamic Page Heroes

This approach solves the scalability issue:

• Centralized Updates: Changes to the hero design (e.g., background color) can be made in one place and applied sitewide.
• Dynamic Content: The page title is pulled automatically, reducing manual work.

Customizable Page Heroes

While dynamic page heroes are a big improvement, they still have limitations. For example, using the page title as the H1 might not always be ideal for SEO or conversion purposes. To address this, we can use Advanced Custom Fields (ACF) to create fully customizable page heroes.

Setting Up Customizable Page Heroes

1. Install Advanced Custom Fields:
   • Go to Plugins > Add New and search for Advanced Custom Fields.
   • Install and activate the plugin.
2. Create Custom Fields:
   • In the ACF settings, go to Field Groups and click Add New.
   • Name the field group (e.g., “Page Hero”).
   • Add two fields:
     • Primary Headline (Text Field)
     • Subheadline (Text Field)
   • Set the location rule to Post Type = Page.
   • Save the field group.
3. Add Content to Custom Fields:
   • Edit each page and scroll down to the new Page Hero meta box.
   • Fill in the Primary Headline and Subheadline for each page.
4. Update the Page Hero Element:
   • Go to Elements and edit the Page Hero element.
   • Replace the headline’s dynamic data source:
     • Change the content source from Title to Post Meta.
     • Enter the meta field name (e.g., “primary_headline”).
   • Add a new paragraph block for the subheadline:
     • Enable Dynamic Data and set the content source to Post Meta.
     • Enter the meta field name (e.g., “sub_headline”).
5. Publish and Test:
   • Save the element and check the front end. The hero will now display the custom headlines and subheadlines for each page.

Benefits of Customizable Page Heroes

This approach offers maximum flexibility:

• Custom H1s: You can use SEO-optimized headlines instead of default page titles.
• Additional Elements: Add subheadlines, buttons, or other dynamic content.
• Page-Specific Variations: Leave fields blank for pages that don’t need certain elements, and they won’t appear on the front end.

Why Use a Templating System?

Using a templating system like GeneratePress Elements or ACF offers significant advantages:

• Maintainability: Make changes in one place and apply them across the site.
• Flexibility: Customize page heroes for individual pages without duplicating effort.
• Scalability: Handle large sites with dozens of pages efficiently.

Wrapping Up

Page heroes are an essential part of any website, and setting them up correctly can save you time and effort in the long run. Whether you’re using a basic design, a dynamic template, or a fully customizable system, the key is to choose a method that balances flexibility and maintainability.

If you’re already using a templating system like GeneratePress Elements, you’ve likely experienced the benefits firsthand. If not, I hope this post has demonstrated why it’s worth making the switch.

What’s your preferred method for creating page heroes? Let me know—I’d love to hear your thoughts!