如何使用帶有 Divi 佈局塊的全局預設來簡化博客文章設計

為您的博客創建內容已經很困難了，而不必擔心設計。 這就是為什麼讓您的網站隨時可用（或預先設計）的設計元素很重要，這樣您就可以更加專注於創建令人驚嘆的內容。 當然，傳統的 WordPress 子主題可以解決這個問題，但在大多數情況下，您會遇到不容易改變的設計。

使用 Divi，我們可以更好地控制博客文章的設計體驗。 Divi 的全局預設允許您為整個站點的元素創建站點範圍的設計（如子主題），並增加了通過點擊幾下即可調整設計的便利性。 另外，如果您習慣於在默認的 WordPress Block 編輯器中創建內容，您可以利用 Divi Layout Block 的強大功能在帖子內容中動態引入這些全局預設元素。 這將允許您在與模板和網站其餘部分匹配的博客文章中添加全新的設計元素。

在本教程中，我們將向您展示如何使用帶有 Divi 佈局塊的全局預設來簡化設計博客文章的過程。 為此，我們將向您展示如何使用全局預設快速有效地設計新的博客文章內容。 這將有助於創建不會影響網站整體品牌的博客體驗。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

全局預設的快速概覽

Divi 的美妙之處在於，它讓您可以使用各種設計設置來完全控製網站的設計，您可以使用這些設置來自定義任何元素或模塊的外觀。

新的 Divi Presets 系統允許您為 Divi 元素（如按鈕模塊）設計自定義外觀並將其保存為預設。 您所做的所有設計更改都保存在預設中。 當您向頁面添加新模塊時，您可以瀏覽保存的預設并快速應用它們。

應用預設後，模塊的默認設計由預設控制。 如果更新預設的樣式，則使用該預設的所有模塊也會更新。 這使您可以使用一小部分保存的預設來控制整個網站的設計。 此外，它可以在向頁面添加新模塊時節省大量時間，因為您無需從頭開始設計每個新模塊，而是可以從 Divi 預設庫中快速選擇外觀。

全局預設風格指南

可以創建全局預設樣式指南（就像我們將在本教程中使用的那樣），以在設計網站時快速啟動元素設計。 這些樣式指南包含一系列模塊，這些模塊具有與您網站的設計相匹配的不同預設。 在開始時提供預設將簡化設計過程，無需為每個新模塊更新設計設置。 我們甚至為那些想要構建自己的人提供了一個風格指南框架。

Divi 佈局塊的快速概覽

Divi Layout Block 允許用戶在 Gutenberg 編輯器中將任何 Divi 佈局添加到博客文章中。 我們甚至可以像任何其他 WordPress 塊一樣將 Divi 佈局塊轉換為古騰堡中的可重用塊。 這為將一些有用的 Divi 佈局設計簡化為在 Gutenberg 中編寫帖子的正常流程打開了大門。

全局預設和佈局塊如何協同工作

因為全局預設是“全局”的，所以該預設的樣式會影響站點範圍內的所有預設實例。 這意味著您可以在佈局塊編輯器中設計元素時使用全局預設，這些預設也會相應更新。 因此，如果您想使用 Divi 佈局塊將 CTA 添加到您的博客文章內容，您可以通過添加具有全局預設的模塊來構建 CTA，就像您添加普通頁面或帖子一樣。 這使您可以快速有效地在帖子中添加匹配的設計元素。

使用帶有 Divi 佈局塊的全局預設來簡化博客文章設計

上傳全局預設風格指南

在本教程中，我們將通過使用 Web 代理佈局的全局預設樣式指南佈局來快速開始創建全局預設。 上傳樣式指南後，我們將有一些全局預設可供使用 Divi 佈局塊向博客文章添加設計元素時使用。

要下載全局預設，請訪問博客文章。 向下滾動到標題為“下載全局預設樣式指南”的部分。 然後輸入您的電子郵件地址並單擊以接收下載。

將 zip 文件下載到計算機後，解壓縮文件並返回到 WordPress 儀表板。

要將樣式指南 JSON 文件導入 Divi 庫...

1. 導航到 Divi > Divi 庫。
2. 單擊導入和導出按鈕。
3. 在可移植性彈出窗口下，選擇導入選項卡。
4. 選擇 Web 代理全局樣式指南 JSON 文件。
5. 確保選擇導入預設。
6. 然後點擊導入按鈕。

現在所有這些全局預設都可以在 Divi Builder 中使用。

上傳帖子模板

既然樣式指南已經就位，我們將通過導入已經與樣式指南元素匹配的網絡代理博客文章模板，在博客文章模板的設計上進行跳躍。

要下載模板，請轉至博客文章，輸入您的電子郵件地址，然後單擊下載文件。

要導入帖子模板...

1. 導航到 Divi > Theme Builder。
2. 然後單擊便攜性圖標。
3. 在可移植性模式下，選擇導入選項卡。
4. 選擇您下載的帖子模板 JSON 文件。
5. 然後點擊導入按鈕。

使用預設更新/設計帖子模板

設置好自定義帖子模板後，單擊以編輯自定義正文模板。 在那裡，您還可以看到帖子模板設計，並使用導入的樣式指南中提供的全局預設進行調整。 如果您從頭開始構建自己的帖子模板，則可以使用全局預設來幫助將帖子模板設計與網站上的其他元素相匹配。 例如，您可以在帖子標題上使用“WALP-H1-1”預設，如下所示：

或者您可以使用包含動態作者信息的簡介上預設的“WALP – Blurb 2”簡介模塊。

帖子內容模塊是您的博客帖子內容將在頁面上生成的區域。 這就是為什麼將帖子內容模塊的設計設置與整個站點中使用的其他文本元素相匹配很重要的原因。

如果您從頭開始構建帖子模板，您可以通過站點從各種文本模塊複製和粘貼文本設置。 或者，如果您事先為您的站點製作了全局預設樣式指南，您可以從樣式指南中的那些模塊中復制設計元素。

例如，您可以復制為一個文本模塊中的所有文本樣式創建的全局預設的標題文本樣式。

然後將這些標題文本樣式傳遞到帖子模板的帖子內容模塊中。 這將有助於確保用於帖子內容的所有標題都與網站的風格相匹配。

這裡重要的是你有一個與你網站風格相匹配的帖子模板。 如果您從頭開始設計模板，則使用全局預設可以極大地幫助該過程。

將全局預設與 Divi 佈局塊一起使用

設計好模板後，我們就可以開始使用帶有 Divi Layout 塊的全局預設來使用默認的 WordPress 塊編輯器設計其他帖子內容元素。

為此，請編輯（或創建）博客文章。 然後確保你有一些模擬內容（比如一些標題和段落，以及一張特色圖片）。

現在，如果您查看前端的帖子，它將在帖子模板中顯示帖子內容，並且內容（標題、正文等...）繼承了帖子內容模塊設置的樣式。

帖子內容模塊只會處理基本文本內容的樣式。 如果您想使用默認的 WordPress Block 編輯器在整個帖子中添加其他元素，則需要通過子主題中的自定義 CSS 更改這些元素的樣式。 除非您使用 Divi 佈局塊。

要添加要與帖子模板和站點相匹配的其他內容，您可以使用 Divi 佈局塊。 這將允許您添加所需的任何內容並使用 Divi Builder 對其進行樣式設置。 而且，由於我們還可以使用全局預設，因此我們可以進一步即時簡化博客文章內容的設計。

設計 #1：使用全局預設和 Divi 佈局塊構建博客 CTA

在第一個示例中，讓我們創建一個與帖子模板和站點設計相匹配的自定義博客 CTA。

為此，請在帖子內容中添加一個 Divi 佈局塊。

然後單擊構建新佈局。

這將打開佈局塊編輯器，它基本上是像往常一樣的 Divi Builder。 為默認部分提供一列行。

在不同的瀏覽器中打開您的全局預設佈局，確保您單擊以在前端構建，以便您可以看到元素。 這樣你就可以在一個瀏覽器中打開佈局編輯器，在另一個瀏覽器中打開樣式指南。

如果您沒有樣式指南，您可以在您的網站上打開頁面佈局，以便您可以訪問您想要引入的任何設計元素。

從樣式指南複製背景

對於此 CTA，我們將使用樣式指南中的寶藍色背景。 打開文本模塊的設置，複製背景。

然後在佈局編輯器中打開該部分的設置並將背景傳遞到該部分。

添加帶有 H3 預設的文本模塊

接下來，向該行添加一個新的文本模塊。

然後打開設置並更新以下內容：

通過在正文中粘貼以下 HTML 來為 CTA 添加 H3 標題：

<h3>Learn How One Client Increased Revenue by 500%</h3>

打開 Global Presents 下拉菜單並選擇 H3 標題的預設 (WALP – H3 – 1)

更新設計

然後將文本顏色更新為白色並居中對齊。

使用全局預設添加按鈕

在文本模塊下，添加一個新按鈕。

然後更新按鈕文本並選擇全局預設按鈕設計之一。 在這個例子中，讓我們使用“WALP – Button 3”。

保存更改

完成後，單擊保存並退出。

現在您可以看到 WordPress 塊編輯器中顯示的元素。

設計 #2：使用全局預設和 Divi 佈局塊構建博客引用

對於下一個設計元素，我們將在博客文章中添加引用。

添加 Divi 佈局塊

首先，在要顯示報價的位置添加 Divi 佈局塊。

然後單擊構建新佈局。

從樣式指南複製和粘貼背景

從樣式指南中復制深藍色背景。

然後將其粘貼到佈局編輯器的默認部分。

添加行

接下來，向該部分添加一列行。

添加帶有預設的推薦模塊

然後向該列添加推薦模塊。 然後選擇全局預設“WALP – Testimonial 2”。

這將為您設計博客文章的報價提供一個良好的開端。

更新設計

在設計選項卡下，如下調整設計設置：

• 報價圖標顏色：
• 正文字體重量：輕
• 正文字體樣式：斜體
• 正文對齊方式：左
• 正文顏色：#ffffff
• 作者字體：Ubuntu
• 作者文字大小：16px

添加新的全局預設

由於我們對此推薦預設進行了重大更改，因此此時創建一個新預設以用於未來的帖子引用是有意義的。

要創建一個新的，請單擊“從當前樣式創建新預設”按鈕。 然後為新預設命名（“博客文章引用”）並保存。 全局預設現在可以使用了。

保存佈局，您將在帖子內容中看到它。

設計 #1：使用全局預設和 Divi 佈局塊向博客文章添加模糊

對於下一個示例，我們將在帖子中添加一些簡介。

添加新的 Divi 佈局塊

添加另一個 Divi 佈局塊，然後單擊“構建新佈局”按鈕。

在佈局編輯器中，向佈局添加一個兩列的行。

添加帶有預設的 Blurb 模塊

在左欄中，添加一個模糊模塊。

將新的圖標圖像添加到簡介中。 然後打開預設下拉菜單並選擇模糊預設“WALP – Blurb 4”。

添加第二個模糊

然後復制簡介並將其粘貼到第 2 列並更新圖像。

保存佈局，您將在帖子內容中看到它。

最後結果

現在打開前端的帖子，看看最終的結果。

具有全局預設的可重用塊

如果您想利用帶有 Divi 佈局塊的可重用塊，很高興知道它們將與全局預設一起使用。 因此，如果您想將我們之前創建的博客 CTA 保存為可重用塊，您將擁有一個方便的塊，可用於在構建帖子時添加 CTA。 而且，由於 CTA 使用帶有全局預設的按鈕和文本，更新該元素的全局預設也會更新可重用塊中的元素。

最後的想法

全局預設是我們在 Divi 中可用的最強大的設計工具之一。 一旦您花時間將全局預設添加到您在整個站點中使用的模塊，您就可以真正利用使用佈局塊設計博客帖子模板和內容的簡化過程。

我期待在評論中收到您的來信。

乾杯!