在 WordPress 建站過程中，默認的文章頭圖和信息展示區(qū)域（Hero Section）往往缺乏個性。Blocksy Pro 提供的 Content Blocks 功能，支持你通過 Gutenberg 編輯器自定義并替換這些默認模塊，實現(xiàn)動態(tài)加載的自定義文章布局。

這篇文章將手把手教你如何構建一個完全個性化的 Hero 區(qū)塊，并將其應用于所有單篇文章模板，讓你的網站內容既美觀又模塊化。

一、創(chuàng)建內容塊（Content Block）

首先，登錄后臺并依次前往：
Blocksy > Content Blocks > Add New > Hook，新建一個內容塊，命名為“Custom Hero Section”或你喜歡的名稱。

進入 Gutenberg 編輯器后，開始構建頁面結構。

二、構建自定義 Hero 結構

1. 添加 Group 塊并設置背景

• 插入一個 Group 塊

• 設置寬度為 Full Width（全寬）

• 選擇一個背景顏色（如深灰）

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

2. 創(chuàng)建兩欄布局

• 插入 Columns 塊（兩列結構）

左側列：

• 插入 Post Featured Image（特色圖像） 塊：該模塊將在前臺動態(tài)加載當前文章的頭圖。

右側列：

• 插入以下動態(tài)模塊組成信息區(qū)：
  • Post Author（作者）
  • Post Date（發(fā)布日期）
  • Post Title（標題）
  • Spacer（間隔）調整視覺
  • 可選段落內容或說明文字

你也可以將這部分保存為 可重用模塊，以便后續(xù)復用。

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

為了提升用戶導航體驗，可以添加面包屑導航：

• 插入 Shortcode 塊

• 粘貼以下代碼：

[bloxy_breadcrumbs]

Blocksy 會自動根據(jù)文章路徑生成當前位置導航。

四、實時預覽動態(tài)內容

為了在編輯器中預覽動態(tài)數(shù)據(jù)（如標題、圖像等），可打開：
Blocksy 設置 > Dynamic Content Preview，選擇任意一篇文章作為預覽源，即可實時查看內容加載效果。

五、設定掛鉤位置與顯示條件

完成設計后，在右側 Blocksy 設置面板：

• 位置（Hook Location）：選擇 Before Content
• 顯示條件（Display Conditions）：選擇 “All Single Posts”（所有單篇文章）

保存并發(fā)布該內容塊。

六、效果驗證

訪問任意一篇文章，你將看到自定義的 Hero 區(qū)塊已成功應用，并自動加載當前文章的內容信息。無需寫代碼，整潔美觀、響應式良好。

總結

借助 Blocksy Pro 的內容塊功能，你可以：

• 自由創(chuàng)建可重用的文章模板模塊
• 實現(xiàn)動態(tài)內容的結構化呈現(xiàn)
• 通過 Gutenberg 編輯器完成一切，不依賴外部頁面構建器

自定義 Hero Section 只是 Content Blocks 的一個應用場景。你還可以用它創(chuàng)建頁眉、頁腳、自定義 404 頁面等，讓整個網站更具品牌統(tǒng)一性與靈活性。

最近更新

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息