使用 Blocksy Pro 内容块自定义 Hero 区块：完整教程

在 WordPress 建站过程中，默认的文章头图和信息展示区域（Hero Section）往往缺乏个性。Blocksy Pro 提供的 Content Blocks 功能，支持你通过 Gutenberg 编辑器自定义并替换这些默认模块，实现动态加载的自定义文章布局。

这篇文章将手把手教你如何构建一个完全个性化的 Hero 区块，并将其应用于所有单篇文章模板，让你的网站内容既美观又模块化。

一、创建内容块（Content Block）

首先，登录后台并依次前往：
Blocksy > Content Blocks > Add New > Hook，新建一个内容块，命名为“Custom Hero Section”或你喜欢的名称。

进入 Gutenberg 编辑器后，开始构建页面结构。

二、构建自定义 Hero 结构

1. 添加 Group 块并设置背景

• 插入一个 Group 块

• 设置宽度为 Full Width（全宽）

• 选择一个背景颜色（如深灰）

• 自定义 class（例如：custom-hero-section）

2. 创建两栏布局

• 插入 Columns 块（两列结构）

左侧列：

• 插入 Post Featured Image（特色图像） 块：该模块将在前台动态加载当前文章的头图。

右侧列：

• 插入以下动态模块组成信息区：
  • Post Author（作者）
  • Post Date（发布日期）
  • Post Title（标题）
  • Spacer（间隔）调整视觉
  • 可选段落内容或说明文字

你也可以将这部分保存为 可重用模块，以便后续复用。

三、添加面包屑导航（Breadcrumb）

为了提升用户导航体验，可以添加面包屑导航：

• 插入 Shortcode 块

• 粘贴以下代码：

[bloxy_breadcrumbs]

Blocksy 会自动根据文章路径生成当前位置导航。

四、实时预览动态内容

为了在编辑器中预览动态数据（如标题、图像等），可打开：
Blocksy 设置 > Dynamic Content Preview，选择任意一篇文章作为预览源，即可实时查看内容加载效果。

五、设定挂钩位置与显示条件

完成设计后，在右侧 Blocksy 设置面板：

• 位置（Hook Location）：选择 Before Content
• 显示条件（Display Conditions）：选择 “All Single Posts”（所有单篇文章）

保存并发布该内容块。

六、效果验证

访问任意一篇文章，你将看到自定义的 Hero 区块已成功应用，并自动加载当前文章的内容信息。无需写代码，整洁美观、响应式良好。

总结

借助 Blocksy Pro 的内容块功能，你可以：

• 自由创建可重用的文章模板模块
• 实现动态内容的结构化呈现
• 通过 Gutenberg 编辑器完成一切，不依赖外部页面构建器

自定义 Hero Section 只是 Content Blocks 的一个应用场景。你还可以用它创建页眉、页脚、自定义 404 页面等，让整个网站更具品牌统一性与灵活性。

最近更新