Merge Header and Page Hero Blocks in GeneratePress for a Compact and Professional Homepage Layout

utilization GeneratePress When building a website with GenerateBlocks, many people want thefooterThis is a great way to seamlessly connect the header to the first block at the top of the page, creating a unified and space-saving visual effect. This article describes how to utilize GeneratePress Premium's "Merge" feature to merge the header with the first block at the top of the page to create a unified and space-saving visual effect.Hero SectionMerge and solve spacing and color matching issues to achieve a beautiful and functional homepage design.

What is the merging of the header with the page hero block?

By default, there is significant spacing between the header and the first content block of the page, resulting in a visual split at the top. The merge feature allows the header to overlay above the page hero block for tightly connected content and a smoother visual flow.

Step 1: Check the inner margins of the page hero block

• In the Page Editor, click the Page Hero container.
• Open the Spacing settings to see the top and bottom inner margins, e.g. 150px by default.

• Record values for subsequent adjustments.

Step 2: Create a new header element and enable merge

• go intoWordPressBackstage menu Appearance > Elements.
• Click "Add New" and select "Header Element".

• Name the element, e.g. "Merge Header".
• Open the Merge option.

• Set display rules, such as Post > All Post Publish.

• Save the release.

Header and page hero block merged, content moved up.

Step 3: Adjust the top inner margin fix spacing of the page hero block

After the merge, the top inner margins of the page are uneven and the top inner margin of the page hero is covered by the header.

Solution:

• Calculates the height of the header, e.g. 60px.
• In the top inner margin of the page hero container, add the original value (e.g., 150px) to the header height to make it 210px.

• Save to refresh the page.

Ensure that the top and bottom inner margins of the page hero are balanced and visually comfortable.

Step 4: Set navigation colors to enhance the merge effect

Adjusting the navigation colors helps to seamlessly merge the visuals.

• Set the navigation background to be transparent.
• Modify site title color andnavigatorText color is white to ensure clarity.

• Adjust the navigation text hover color and the current page color, set to white or high contrast color.

• Save to refresh the view.

Step 5: Sticky Navigation Bar Color Inheritance Customizer

Sticky NavigationColumns are displayed fixedly while scrolling, and the colors inherit the theme customizer settings.

• Go to Customizer.
• Adjust the title and text color in the navigation or header color settings.
• Preview sticky navigation bar color effects to ensure coordination.

Step 6: Upload a different color logo to adapt the merge and sticky status.

Upload two logo Colors to suit different states:

• Customizer uploads dark version of Logo for non-merged or sticky navigation states.

• Upload a white version of the logo for use when merging headers.

• clotureSite TitleDisplay, Logo only.

• Setting a toggle logo in the header element ensures that different states are displayed with the corresponding version.

Refresh the page to see the white logo displayed in the merge header and the dark logo displayed in the sticky navigation.

summarize

The above steps enable header and page hero block merging in GeneratePress theme, eliminating the extra spacing at the top and improving the professional feel and visual unity of the overall page design. Adjust the inner margins, colors and logo Details to create a more perfect page.

Recent Updates

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off