How to Create a Dynamic Page Hero Design in GeneratePress & GenerateBlocks

If you’re working with GeneratePress and want to add some flexibility to your page hero sections by making background images dynamic, I’ve got a solution for you. This allows you to maintain a consistent design across your site while giving you the ability to change background images on a page-by-page basis. Here’s how to do it.

Step 1: Set Up Your Global Page Hero

1. Go to Appearance > Elements in your WordPress dashboard.
2. Select your Page Hero Element: If you already have a global page hero set up, find it and edit it. If you don’t, you can create a new one by choosing Header as the element type.
3. Insert a Background Image: In the background settings of your page hero, add a static image that will act as your default. Adjust the opacity or other settings as needed.

Step 2: Make the Background Image Dynamic

1. Select the Container Holding the Background Image:
   • Make sure you’re editing the container that contains the background image.
2. Enable Dynamic Background Image:
   • Click on the dynamic data icon (it looks like a cylinder with a lightning bolt).
   • Choose Featured Image from the dropdown menu. This will allow you to pull the featured image from individual pages.
3. Set a Fallback Image (Optional):
   • If you want to ensure there’s always an image, even if a specific page doesn’t have a featured image, enable the fallback option. This will use the global image you set earlier as the default.

Step 3: Assign Featured Images to Individual Pages

1. Go to the Page You Want to Customize:
   • Edit the page where you want a different background image.
2. Set a Featured Image:
   • In the page editor, find the Featured Image option in the right-hand column.
   • Upload or select the image you want to use for that specific page and hit Update.
3. View Your Changes:
   • Refresh the page on the front end, and you’ll see that the background image in your page hero has updated to the featured image you selected.

Step 4: Hide Featured Images from the Page Content

By default, when you set a featured image, it may appear at the top of the page content. To prevent this:

1. Create or Edit a Site Layout Element:
   • Go back to Appearance > Elements and either create a new Layout Element or edit an existing one.
2. Disable Featured Image Display:
   • In the Disable Elements section, check the box for Disable Featured Image.
   • Update the element, and now the featured image will only be used as a background in your page hero and not displayed within the page content.

Step 5: Exclude Featured Image Disabling on Posts (Optional)

If disabling the featured image globally affects your blog posts or other content types where you still want the featured image to show, you can exclude those sections:

1. Set Display Rules:
   • In the Display Rules section of your layout element, exclude blog posts or any other specific content types where you still want the featured image to appear.

Final Thoughts

With this method, you can maintain a consistent design across your site while adding flexibility with dynamic background images on individual pages. This is particularly useful for adding visual interest to specific pages without needing to create separate page heroes for each one.

By using GeneratePress’s powerful elements and dynamic data features, you can streamline your workflow and make your site more dynamic and engaging.