使用 GenerateBlocks 模板庫構(gòu)建頁面后，很多用戶希望對模塊樣式做統(tǒng)一調(diào)整，例如字體、顏色、間距與容器寬度等內(nèi)容。本教程以實(shí)例展示頁面樣式的來源，以及修改按鈕樣式、標(biāo)題顏色、段落間距和容器寬度的具體方法。

模板樣式結(jié)構(gòu)總覽

頁面中的樣式來自三個層次：

• 主題樣式：如字體族、H1-H2 標(biāo)題格式、段落間距等
• 本地塊樣式（Local Block Style）：僅影響某個特定塊的設(shè)置
• 全局樣式（Global Style）：可復(fù)用于站內(nèi)多個區(qū)域

字體設(shè)置演示

示例頁面中，通過自定義器修改了以下字體：

• 正文字體：Rubik
• 標(biāo)題字體（H1 與 H2）：Roboto Mono

所有使用 H1、H2 的模塊自動繼承字體與字重。比如打開模板庫，選擇 Hero 模塊，H1 會呈現(xiàn)新的字體設(shè)置。

自定義按鈕樣式

頁面中的按鈕使用了名為 gbp-button-primary 的全局樣式。修改方式如下：

• 選中按鈕塊，點(diǎn)擊樣式名 gbp-button-primary

• 進(jìn)入背景設(shè)置，修改按鈕顏色，例如改為調(diào)色板中的深色

• 頁面中所有使用該樣式的按鈕同步更新，包括未來新插入的模板

調(diào)整按鈕懸停顏色

• 點(diǎn)擊按鈕塊，進(jìn)入“hover 狀態(tài)”

• 在背景設(shè)置中修改懸停顏色（例如淺色調(diào)）

• 保存后，懸停效果立即生效

標(biāo)題顏色設(shè)置（以 H1 為例）

統(tǒng)一所有 H1 標(biāo)題的顏色，可按以下步驟操作：

• 找到任一 H1 元素，點(diǎn)擊其全局樣式標(biāo)簽
• 修改字體顏色，例如選用紅棕色或其他亮眼配色

• 再次插入 Hero 模塊，標(biāo)題顏色也已變化

這種方法適用于頁面整體風(fēng)格設(shè)定，不需要重復(fù)手動更改樣式。

控制區(qū)塊上下間距

大部分模板模塊（除 Hero）使用名為 gbp-section 的全局樣式，控制上下內(nèi)邊距與左右間距，例如：

• 上下間距：7rem
• 左右間距：40px

調(diào)整方式如下：

• 打開模塊，如 Features、Gallery、Pricing 等
• 點(diǎn)擊樣式標(biāo)簽 gbp-section

• 修改上下間距為 3rem

• 所有引用該樣式的模塊同步更新，頁面更緊湊清晰

容器最大寬度設(shè)置

GenerateBlocks 支持容器最大寬度設(shè)置。若當(dāng)前主題為 GeneratePress，可在“布局 → 容器”中設(shè)置默認(rèn)寬度（例如 1440px）。

設(shè)置步驟如下：

• 選中模塊中的容器
• 啟用“最大寬度”

• 選擇使用主題或 GenerateBlocks 的最大寬度設(shè)置值

即使不是使用 GeneratePress，也能在 GenerateBlocks 設(shè)置中自行設(shè)定合適的寬度。

添加自定義全局樣式

在現(xiàn)有模板結(jié)構(gòu)中，也可以添加屬于自己的全局樣式。例如在團(tuán)隊模塊中添加一個專屬卡片類名（如 .card），設(shè)置樣式后即可在多個頁面中重復(fù)使用。

總結(jié)

本節(jié)內(nèi)容展示了：

• 模板樣式來自主題、本地塊和全局樣式三個層次
• 全局樣式可統(tǒng)一字體、顏色、按鈕、區(qū)塊間距與寬度
• 調(diào)整一次，全站模塊同步響應(yīng)
• 可根據(jù)頁面需求擴(kuò)展自定義樣式，便于后期統(tǒng)一管理

掌握這些樣式方法，有助于構(gòu)建結(jié)構(gòu)清晰、風(fēng)格一致的頁面布局。歡迎繼續(xù)學(xué)習(xí)更多 GenerateBlocks 教程內(nèi)容。

最近更新

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