Customizing Hero Blocks with Blocksy Pro Content Blocks: Full Tutorial

exist WordPress The default article header image and information display area (Hero Section) tends to lack personality during the site building process.Blocksy Pro The Content Blocks feature is provided to allow you to create content via the Gutenberg The editor customizes and replaces these default modules to implement dynamically loaded custom post layouts.

This post will show you hands-on how to build a fully personalized Hero block and apply it to all your single post templates, making your website content both beautiful and modular.

I. Creating content blocks (Content Block)

First, log in to the backend and go in order:
Blocksy > Content Blocks > Add New > HookIf you want to create a new content block, name it "Custom Hero Section" or whatever you like.

go into Gutenberg After the editor, start building the page structure.

Building a Custom Hero Structure

1. Add a Group block and set the background

• Insert a Group blocks

• Set the width to Full Width

• Select a background color (e.g. dark gray)

• Customize the class (for example:custom-hero-section)

2. Creating a two-column layout

• stick Columns block(two-column structure)

left column::

• stick Post Featured Image Block: this module will dynamically load the header image of the current article in the foreground.

right-hand column::

• Insert the following dynamic modules to form the information area:
  • Post Author
  • Post Date
  • Post Title
  • Spacer adjusts vision
  • Optional paragraph content or explanatory text

You can also save this section as reusable modulefor subsequent reuse.

Third, add breadcrumb navigation (Breadcrumb)

Breadcrumb navigation can be added to enhance the user navigation experience:

• stick Shortcode block

• Paste the following code:

[bloxy_breadcrumbs]

Blocksy The current location navigation is automatically generated based on the article path.

Fourth, real-time preview of dynamic content

To preview dynamic data (e.g., titles, images, etc.) in the editor, open:
Blocksy Settings > Dynamic Content PreviewSelect any article as the preview source to see how the content loads in real time.

V. Setting the hook position and display conditions

After completing the design, on the right side Blocksy Settings panel:

• Location (Hook Location): Selection Before Content
• Display Conditions: Select "All Single Posts"

Save and publish the content block.

VI. Effectiveness verification

Visit any article and you will see that the custom Hero block has been successfully applied and automatically loads the content information of the current article. No need to write code, neat, beautiful and responsive.

summarize

leverage Blocksy Pro The content block feature that you can:

• Freedom to create reusable article template modules
• Enabling structured presentation of dynamic content
• pass (a bill or inspection etc) Gutenberg The editor does everything, without relying on an external page builder!

Customizing Hero Sections is just one application scenario for Content Blocks. You can also use them to create headers, footers, customized 404 Pageetc., giving the whole site more brand unity and flexibility.

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: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off