如果希望為 WordPress 網(wǎng)站中的 Gutenberg 塊提供一致的自定義樣式，Essential Blocks 插件將是一個非常實用的工具。它可以輕松配置全局樣式設(shè)置，不用每次都從頭開始進行自定義，讓網(wǎng)站設(shè)計更加統(tǒng)一和高效。在本文中，我將向你們展示如何通過 Essential Blocks 插件設(shè)置全局樣式，并將其應用到 Gutenberg 塊中。

Essential Blocks 插件介紹

Essential Blocks 插件由 WPDeveloper 開發(fā)，專為 Gutenberg 編輯器設(shè)計的，提供了豐富的塊元素，幫助用戶輕松創(chuàng)建各種布局和設(shè)計。無論是初學者還是專業(yè)開發(fā)者，Essential Blocks 都能讓你感到簡單易用，讓網(wǎng)站內(nèi)容更加豐富和有吸引力。

該插件包含多個高度可自定義的塊元素，如信息框（Info Box）、價格表（Price Table）、進度條（Progress Bar）、圖像畫廊（Image Gallery）等，用戶可以輕松地將這些元素添加到頁面或文章中，從而提升頁面的可視化效果和交互體驗。通過直觀的拖放操作，Essential Blocks 能讓你在幾分鐘內(nèi)完成復雜的頁面設(shè)計，完全不用編寫代碼。

1. 配置 Essential Blocks 全局樣式設(shè)置

需要配置 Essential Blocks 插件的全局樣式，下面這些設(shè)置將幫助你在網(wǎng)站的多個頁面和文章中應用一致的樣式，節(jié)省時間并提升用戶體驗。

步驟一：打開空白頁面

在 WordPress 儀表盤中，創(chuàng)建一個新的空白頁面。我們將在這個頁面上配置 Essential Blocks 插件的全局樣式設(shè)置。

步驟二：進入 Essential Blocks 設(shè)置

• 在頁面編輯器的右上角，點擊 Essential Blocks 圖標。

• 向下滾動并選擇 Block Default Menu，進入全局樣式設(shè)置選項。

步驟三：設(shè)置信息框（Info Box）塊的樣式

• 在全局樣式設(shè)置中，選擇 Info Box（信息框）塊。點擊 Info Box，會彈出一個設(shè)置窗口。

將看到多個樣式選項，可以根據(jù)需求調(diào)整：

• 可點擊設(shè)置：可以選擇是否使信息框成為可點擊項。
• 按鈕設(shè)置：可以保留或刪除按鈕，同時調(diào)整按鈕的樣式。
• 內(nèi)容對齊：在 Alignment 選項中，可以設(shè)置信息框內(nèi)內(nèi)容的位置。
• 媒體樣式：選擇適合的信息框圖標，并自定義其顏色。
• 標題樣式：在 Title Style 中設(shè)置標題的顏色，并選擇所需的字體。
• 副標題樣式：通過 Content Style，你可以設(shè)置副標題的顏色和字體樣式。
• 按鈕樣式：為按鈕文本設(shè)置顏色。
• 背景設(shè)置：調(diào)整信息框的背景顏色，并設(shè)置適當?shù)?Margin（外邊距） 和 Padding（內(nèi)邊距）。

完成所有自定義后，點擊 Save（保存）按鈕，保存當前樣式設(shè)置。

2. 在 Gutenberg 編輯器中使用自定義塊

設(shè)置完成后，自定義樣式將應用到所有 Essential Blocks 塊中。接下來，我們將展示如何將這個自定義樣式應用到 Gutenberg 頁面編輯器中。

步驟一：在 Gutenberg 編輯器中添加信息框塊

• 打開 Gutenberg 編輯器，在想要插入信息框的位置點擊 + 按鈕。

• 在搜索框中輸入 Info Box，選擇已經(jīng)自定義樣式的 Info Box Block。

• 自定義的信息框塊將立刻被插入到頁面中，并展示所設(shè)置的樣式。

步驟二：進一步自定義和保存

如果希望進一步自定義該塊，可以通過 Gutenberg 編輯器側(cè)邊欄進行設(shè)置。根據(jù)需要修改文本、顏色或其他樣式。

完成所有修改后，點擊 Save（保存）按鈕，確保所有設(shè)置都已保存并應用。

3. 全局樣式的優(yōu)勢

使用 Essential Blocks 設(shè)置的全局樣式，不僅幫助你保持整個網(wǎng)站的一致性，還節(jié)省了每次編輯時都需要重新設(shè)置樣式的時間。每次在頁面或文章中插入自定義的 Essential Blocks 塊時，都會自動應用你所配置的全局樣式，保持統(tǒng)一的設(shè)計風格。

結(jié)語

通過本文的教程，已經(jīng)學會了如何使用 Essential Blocks 插件設(shè)置和應用全局樣式。無論是自定義 Gutenberg 塊，還是在不同頁面之間重復使用樣式，都可以輕松管理和優(yōu)化 WordPress 網(wǎng)站的外觀。希望這些技巧能夠幫助你提升網(wǎng)站的設(shè)計效率，并確保每個頁面都有一致的風格。

想了解更多WordPress相關(guān)的教程和資訊，請關(guān)注光子波動網(wǎng)，擁有最全的WordPress教程和最活躍的WordPress交流社區(qū)。

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