October 24, 2023

Create Dynamic Hero Sections with GenerateBlocks & GeneratePress

Play Video

Dynamic Hero Sections are an essential part of any modern website, offering a visually appealing introduction to your content. This tutorial will show you how to create Dynamic Hero Sections using GenerateBlocks and GeneratePress, focusing on three different methods for varying levels of customization and scalability.
Dynamic Hero Sections with GenerateBlocks & GeneratePress Outcome


Please make sure you have the following installed and activated:

Basic Header Setup

  1. Navigate to Pages > About Us and click on Edit.
  2. Scroll to the editor and press Enter to create a new block.
  3. Insert a Container block with an inner container inside it.
  4. Adjust the padding of the outer container for visual appeal.
  5. Add a Headline block inside the inner container.
  6. Change the headline to H1 and type “About Us”.

Styling the Basic Hero Section

  1. Go to Borders settings and add a 1px top border.
  2. Adjust the border color to a shade of green.
  3. Modify the top padding value to 16 pixels.
  4. Change the display options to inline-flex.

Adding Background Image

  1. Select the outermost container.
  2. Navigate to Backgrounds and choose an image URL.
  3. Adjust the opacity to 0.15 for better text visibility.

Basic Page Hero Setup

Creating a Dynamic Hero Section with GeneratePress Elements for Other Pages

  1. Navigate to Dashboard > Elements and click Add New.
  2. Select Block Element and name it “Page Hero”.
  3. Paste the previously created hero container.
  4. Change the element type to Page Hero.
  5. Set the hook to After Header.
  6. Enable Dynamic Data for the headline and set the content source to Title.

Enable Dynamic Data for the headline

Assigning the Dynamic Hero Section Rules

  1. Go to Display Rules.
  2. Select Entire Site and exclude the Front Page.

Select Entire Site and exclude the Front Page

Advanced Dynamic Hero Section with Custom Fields

  1. Install and activate the Advanced Custom Fields plugin.
  2. Navigate to Custom Fields > Field Groups and create a new group called “Page Hero”.
  3. Add two text fields: Primary Headline and Sub Headline.
    Create a new group called Page Hero
  4. Set the location rules to show these fields on all pages.
    Set the location rules

Connecting Custom Fields to the Hero Section

  1. Go back to Dashboard > Elements and edit the “Page Hero” element.
  2. Change the Dynamic Data source for the headline to Post Meta and enter primary_headline.
    Enter primary_headline
  3. Add a new headline block for the sub-headline.
  4. Set its Dynamic Data source to Post Meta and enter sub_headline.
    Enter sub_headline

Dynamic Hero Sections – Conclusion

Creating Dynamic Hero Sections with GenerateBlocks and GeneratePress offers a scalable and maintainable approach. By utilizing GeneratePress Elements and Advanced Custom Fields, you can achieve a high level of customization without sacrificing ease of use.

Required Resources

GeneratePress Logo
Free Options
GenerateBlocks Logo
Free Options
Credit to The Admin Bar
The Admin Bar is a resourceful platform dedicated to WordPress. From insightful videos on optimizing your WordPress tech stack to creative hacks for faster web page creation, the channel is a treasure trove for both beginners and advanced WordPress users.
Create Dynamic Hero Sections with GenerateBlocks & GeneratePress
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.