如何在您的古騰堡博客文章中添加 Divi 電子郵件選項

Divi Layout Block 為許多方便的方式打開了大門，將 Divi Builder 的強大設計功能引入 WordPress 的默認塊編輯器（Gutenberg）。 這允許您使用熟悉的 Gutenberg 塊界面編寫大部分博客文章內容，然後在需要自定義設計或功能的地方注入 Divi 佈局。 Divi Layout Block 可以包含您可以在 Divi Builder 中構建的任何內容，但它也非常適合包含像 Email Optin 這樣簡單且必不可少的內容。

在本教程中，我們將介紹如何使用 Divi 佈局塊將漂亮的 Divi Email Optin 添加到 Gutenberg 博客文章中。

讓我們開始吧！

搶先看

免費下載佈局

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

下載文件

免費下載

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

下載

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

導入佈局塊 JSON

將佈局上傳到 Divi 庫

要導入您可以在上面下載的 JSON 文件，請轉到 WordPress 儀表板後端的 Divi 庫，然後單擊“導入和導出”。

然後，選擇下載文件夾中的 JSON 文件，然後單擊“導入 Divi Builder 佈局”。

在 Gutenberg Post 內添加新的 Divi Block Block

導入佈局後，您可以轉到 Gutenberg 帖子並添加新的 Divi 佈局塊。

從保存的佈局導入 JSON 文件

然後，單擊“從庫加載”，導航到“您保存的佈局”並選擇佈局以將 Divi CTA 佈局塊導入您的博客文章。 就是這樣！

就是這樣！

讓我們進入教程，好嗎？

在您的古騰堡博客文章中添加 Divi 電子郵件選項

創建或編輯博客文章

首先，我們需要創建一篇新的博客文章或編輯現有的文章。 對於此示例，讓我們使用一些標題和段落塊向帖子標題和正文添加一些模擬內容。 然後添加特色圖像並為Divi頁面設置下的頁面佈局選擇“無側邊欄”。

添加內聯 Divi 佈局塊

一旦您創建了大部分帖子，我們需要做的就是在帖子內容區域內我們想要的任何位置添加一個新的 Divi 佈局塊。 我們可以將其添加到靠近帖子末尾的某個位置，以捕獲明顯對帖子內容感興趣的合格潛在客戶。

要添加它，請將鼠標懸停在要添加電子郵件選項的區域上，然後單擊藍色加號圖標以添加新塊。 在彈出的塊列表中，選擇 Divi 佈局塊。

在 Divi 佈局塊中構建新佈局

一旦選擇了 Divi 佈局塊，我們將可以選擇“構建新佈局”或“從庫加載”。 由於我們需要從頭開始構建電子郵件選項，因此選擇選項“構建新佈局”。

截面設計

在佈局塊編輯器中，我們可以開始設計要包含在我們帖子中的電子郵件選項。 我們在此編輯器中設計的任何內容都將顯示在帖子的 Divi 佈局塊區域中。

首先，打開已經存在的默認部分的部分設置。

背景漸變

然後添加一個背景漸變如下：

• 背景漸變左顏色：#ff9945
• 背景漸變右顏色：#f86a4c

分隔線

接下來，轉到設計選項卡和頂部和底部部分分隔線，如下所示：

• 頂部分隔線樣式：見截圖
• 頂部分隔線顏色：#f86a4c
• 頂部分隔線水平重複：0.8x

• 底部分隔線樣式：見截圖
• 底部分隔線顏色：#ff9945
• 底部分隔線水平重複：0.8x
• 底部分隔線翻轉：水平和垂直

邊距和邊框

分隔線就位後，給該部分上下一點邊距，然後用邊框和動畫完成，如下所示：

• 邊距：頂部 20 像素，底部 20 像素
• 圓角：30px
• 邊框寬度：2px
• 邊框顏色：#ff9945
• 動畫風格：翻轉

添加列並設置行寬

現在該部分已完成，向該行添加一個單列結構。

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

• 寬度：100%
• 最大寬度：100%

建立電子郵件選擇

添加電子郵件選擇模塊

接下來，將電子郵件選擇模塊添加到該行。

電子郵件選擇內容

對於電子郵件選擇內容設置，更新以下內容：

• 標題：“每週獲得免費提示！”
• 正文：[保留默認模擬內容]
• Mailchimp 列表：[添加列表]
• 使用單一名稱字段：是
• 使用背景顏色：否

電子郵件選擇設計

字段

跳轉到設計選項卡並通過更新以下內容來設計電子郵件選擇字段：

• 佈局：身體在右邊，表格在左邊
• 字段背景顏色：#f86a4c
• 字段文本顏色：#ffffff
• 字段字體：IBM Plex Sans
• 字段文本大小：18px
• 字段字母間距：2px
• 字段線高：2em

標題

更新標題文本設置如下：

• 標題字體：IBM Plex Sans Condensed
• 標題字體粗細：半粗體
• 標題文字顏色：#ffffff
• 標題文字大小：60px（桌面），30px（手機）
• 標題行高度：1.2em（桌面），1.6（手機）

按鈕

對於按鈕，更新以下內容：

• 為按鈕使用自定義樣式：是
• 按鈕文字顏色：#ff9945
• 按鈕背景漸變左側顏色：#ff9945
• 按鈕背景漸變右顏色：#ffffff
• 梯度方向：90度
• 結束位置：34%
• 按鈕邊框寬度：0px
• 按鈕字母間距：2px
• 按鈕字體：IBM Plex Sans
• 按鈕字體粗細：粗體
• 按鈕字體樣式：TT
• 按鈕填充：頂部 15px，底部 15px

填充

最後一次觸摸，添加以下填充：

• 填充：左 5%，右 5%

最後結果

一旦我們在 Divi 佈局編輯器中完成佈局設計，請確保並保存佈局。 然後保存帖子，以便您可以在實時頁面上查看電子郵件選擇的預覽。 這是它的樣子。

當您向下滾動帖子時，這是電子郵件選擇的輕微動畫。

最後的想法

使用 Divi Layout Block 在您的 Gutenberg 帖子中添加電子郵件選項變得非常簡單。 您不僅可以在幾秒鐘內添加功能齊全（且易於使用）的電子郵件選項，還可以使用 Divi Builder 添加自定義設計、懸停效果和動畫。 所有這一切都無需使用插件！

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

乾杯!