Create Dynamic Hero Sections with GenerateBlocks & GeneratePress

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.

Prerequisites

Please make sure you have the following installed and activated:

• GeneratePress
• GenerateBlocks
• Advanced Custom Fields

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.

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.

Assigning the Dynamic Hero Section Rules

1. Go to Display Rules.
2. 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.
   
4. Set the location rules to show these fields on all pages.
   

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.
   
3. Add a new headline block for the sub-headline.
4. Set its Dynamic Data source to Post Meta and 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.