如何構建可重用的圖像佈局塊以將 Divi 樣式的圖像添加到 Gutenberg 帖子

Divi 的佈局塊可用作可重用的圖像佈局塊，用於將 Divi 風格的圖像添加到 Gutenberg 博客文章中。 這結合了 Divi（用於創建精美圖像）的強大設計選項和功能以及使用 Gutenberg 編寫帖子（和添加塊）的便利性。

在本教程中，我們將演示如何使用 Divi Layout Block 來設計一些令人驚嘆的圖像佈局。 然後我們將這些佈局添加為 Gutenberg 中的可重用塊。 使用這種技術，我們將能夠為我們的圖像添加幾乎任何 Divi 設計功能（背景、燈箱、過濾器、動畫、滾動效果等等）。 然後我們可以使用這個絕妙的設計作為一個方便的圖像模板，將圖像添加到使用古騰堡創建的未來帖子中。

讓我們開始吧！

搶先看

免費下載可重用的圖像佈局塊

要了解本教程中的佈局塊，您首先需要使用下面的按鈕下載它們。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

如何使用下載在您的站點上導入這些佈局塊

要將這些可重用的 Divi 圖像佈局塊導入您的站點，首先，您需要解壓縮下載文件。 在那裡，您將找到需要導入站點的三個 JSON 文件。

使用默認編輯器 (Gutenberg) 編輯帖子。 打開頁面右上角的“更多工具和選項”菜單，選擇“管理所有可重用塊”。

然後單擊從 JSON 導入按鈕。 從下載文件夾中選擇 JSON 文件之一，然後單擊導入按鈕。

重複此過程以導入所有三個 JSON 文件。

完成後，在 Gutenberg 中添加一個新塊。 我們將能夠在 Reusable 選項切換下找到導入的 Reusable 佈局塊。 只需單擊您想要將其添加到帖子中的那個。

就是這樣！

讓我們進入教程，好嗎？

我們需要開始做什麼

首先，我們需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在 WordPress 中創建一個新帖子並使用默認編輯器（Gutenberg）添加一些模擬內容（標題、標題、段落、特色圖片等）。 基本上我們需要一個測試帖子來構建 Divi 風格的圖像佈局塊。

之後，我們就可以開始了。

第 1 部分：使用標題可重複使用的 Divi 佈局塊創建全寬圖像

添加 Divi 佈局塊

首先，在您的帖子中添加一個 Divi 佈局塊。

然後單擊“構建新佈局”。

設計 Divi 圖像佈局

在佈局塊編輯器中，通過添加一列行開始設計佈局。

圖像模塊

將圖像模塊添加到該行。

然後按如下方式更新設置：

• 在燈箱中打開：是

這將允許我們的圖像在點擊時顯示在燈箱中。

• 圖像疊加：開
• 疊加圖標顏色：#ffffff
• 懸停疊加顏色：rgba(120,47,130,0.57)

要在我們的圖像周圍創建一些空間，請按如下方式更新行設置：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：90%
• 最大寬度：90%
• 填充：頂部 5%，底部 5%

這將為我們提供圖像周圍 5% 的間距。 這也將是顯示我們將添加到該部分的背景漸變的空間。

打開部分設置並使用背景漸變更新設計，如下所示：

• 漸變背景左顏色：#782f82
• 漸變背景右顏色：#fe756b
• 梯度方向：90度

為了使圖像稍微超出博客文章內容容器，我們可以為該部分提供自定義寬度，如下所示：

• 寬度：110%
• 最大寬度：100%
• 邊距：-5%
• 填充：0px 頂部，0px 底部

最後，通過添加一個內部 box-shadow 給這個部分一個創造性的感覺，如下所示：

• 盒子陰影：見截圖
• 框陰影水平位置：5vw
• 框陰影垂直位置：5vw
• 陰影顏色：rgba(255,255,255,0.7)

如果我們想要一個沒有標題的圖像佈局，我們可以停在這裡，但是要為圖像佈局添加標題，請在圖像下方添加一個文本模塊。

然後添加一些填充內容作為標題文本。

然後更新以下文本設置：

• 文字字體：蒙特塞拉特
• 文字字體粗細：半粗體
• 文字文字顏色：#ffffff
• 寬度：80%
• 模塊對齊：右
• 保證金：最高 5%

完成後，請確保使用 Ctrl + S 保存佈局或打開底部的設置欄並單擊“保存並退出”。

將圖像佈局添加到可重用塊

要將佈局添加到可重用塊，請單擊塊上方的“更多選項”菜單，然後選擇“添加到可重用塊”。

為可重用塊命名，然後單擊“保存”。

現在，帶有標題佈局的全角圖像已添加到可重複使用的塊中，並可在構建帖子時從塊列表中使用。

不要忘記更新/保存帖子以保存更改。

第 2 部分：使用 Caption Reusable Divi Layout Block 創建左圖

現在帶有標題佈局的全角圖像已添加到可重用塊中，我們可以使用該塊創建帶有標題佈局的左圖像。

將可重用塊轉換為常規塊

首先，打開包含全角圖像佈局的可重用塊頂部的“更多選項”菜單。 然後選擇“轉換為常規塊”。

別擔心，這不會刪除我們剛剛從可重用塊中創建的佈局塊（儘管有一個選項）。 這只會使可重用塊成為常規塊，以便我們可以為單個實例編輯和使用該塊。

更新佈局

一旦塊是常規的，單擊塊上方的編輯佈局按鈕。

在佈局編輯器中，打開部分設置並更新寬度，如下所示：

• 寬度：自動
• 最大寬度：500px

這就是我們在佈局編輯器中需要做的所有事情。 確保保存並退出佈局。

選擇塊後，打開主設置側欄並選擇塊選項卡以顯示塊設置。 在高級切換下，添加以下類：

• 添加 CSS 類：alignleft

這個類是 WordPress 原生的，它會將塊浮動到左側，這也會將我們的圖像浮動到我們帖子中內容的左側。

添加類後，打開塊的“更多選項”菜單，然後單擊“添加到可重用塊”。

為 Reusable 塊命名（即“Left Image with Caption”）並單擊保存。

現在，Left Image with Caption 佈局塊已添加到可重用塊列表中，以便於訪問。

第 3 部分：創建“帶有標題的正確圖像”可重用的 Divi 佈局塊

到目前為止，我們有一個帶有標題佈局塊的全角圖像和一個帶有標題佈局塊的左圖像。 現在我們可以使用標題佈局塊添加正確的圖像。

將可重用塊轉換為常規塊

為此，請打開帶有標題可重用塊的左側圖像上的“更多選項”菜單。 然後選擇“轉換為常規塊”。

更新佈局

一旦塊是常規佈局塊，單擊以編輯佈局。

然後打開section設置，取出左邊距。

保存並退出佈局編輯器。

然後使用以下內容更新塊的附加 CSS 類：

• 附加 CSS 類：alignright

添加類後，將佈局塊添加到可重用塊。

並為可重用塊命名（即“帶有標題的正確圖像”）並保存它。

現在單擊帖子中一個塊下的藍色加號圖標之一以添加一個新塊。 然後在阻止列表彈出窗口中，打開可重用切換。 我們現在已經準備好使用三個可重用的圖像佈局塊。

第 4 部分：在帖子上使用可重用的圖像佈局塊。

儘管我們創建了圖像佈局塊，但它們（出於我們的目的）僅作為模板存在，以快速啟動將圖像添加到帖子的過程。 因此，每次我們想要使用這些佈局塊將實際圖像添加到帖子中時，我們都需要先將其轉換為常規塊，然後再將圖像和標題添加到佈局中。

這是如何做到的。

步驟 1：添加可重用佈局塊

將可重用的 Divi 圖像佈局塊之一添加到帖子中。

第 2 步：將其轉換為常規塊

打開“更多選項”菜單並選擇“轉換為常規塊”。

第 3 步：使用新圖像和標題編輯佈局塊

塊規則後，單擊以編輯佈局。

使用您選擇的圖像更新佈局。

然後更新文本模塊中的標題文本。

步驟 4：保存佈局塊

完成後，保存並退出佈局編輯器。

繼續相同的過程，將其他兩個圖像佈局添加到帖子中。

最後結果

最後的想法

一旦我們掌握了使用 Divi 佈局塊的竅門，它對我們的博客生活的價值就變得顯而易見了。 在這篇文章中，我們介紹瞭如何使用佈局塊將一些非常酷的 Divi 風格的圖像添加到 Gutenberg 博客文章中。 訣竅是首先將佈局保存為可重用的塊。 然後，當我們準備將圖像添加到博客文章時，我們可以輕鬆地將可重用塊轉換為常規塊，以便我們可以添加圖像和標題。

希望這將提供一些靈感，將您的博客圖片提升到一個全新的水平。

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

乾杯!