如何將內聯和動畫 Divi CTA 佈局塊添加到您的古騰堡博客文章
已發表: 2020-02-05當您簡化在網站上創建博客文章的方式時，您很可能希望在文章中的某處包含一個有吸引力的 CTA。 現在，借助 Divi 的新 Gutenberg 佈局塊集成，您可以輕鬆地在 Gutenberg 博客文章中的任何位置添加新的 Divi 構建塊。 這允許您將整個博客文章內容保留在 Gutenberg 環境中，同時仍然使用 Divi-s 內置選項構建自定義 Divi CTA。 兩全其美！ 在本教程中，我們將向您展示如何向您的古騰堡帖子添加內聯和動畫 Divi CTA 佈局塊。 我們也將免費分享 Divi CTA 佈局塊的 JSON 文件！
讓我們開始吧。
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
桌面
移動的
免費下載內聯和動畫 Divi CTA 佈局塊
要了解免費英雄部分，您首先需要使用下面的按鈕下載它們。 要訪問下載，您需要使用下面的表格訂閱我們的 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 博客上發布的第三個主題構建器包相匹配。 轉到帖子並下載此主題構建器包的 JSON 文件。
轉到 Divi 主題生成器
下載第三個主題構建器包後，您可以轉到 Divi Theme Builder。
上傳帖子模板
單擊右上角的圖標上傳主題構建器包的帖子模板。
然後，選擇帖子模板並單擊“導入 Divi 主題生成器模板”。 確保您也保存主題構建器的更改。 此時，我們已將主題構建器包的博客帖子模板分配給我們所有的帖子。
打開現有的古騰堡郵報或創建新郵報
下一步是將 Divi CTA 佈局塊添加到我們的 Gutenberg 帖子中。 為此，請打開現有帖子或創建新帖子。
添加新的內聯 Divi 塊
進入帖子後，您將能夠添加一個新的 Divi 佈局塊。
在 Divi 塊內構建新佈局
然後，您將獲得兩個選擇。 選擇“構建新佈局”選項。
部分設置
間距
進入 Divi 佈局塊編輯器後，您會注意到一個部分。 打開該部分並添加一些自定義邊距值以在部分容器周圍創建空間。
- 上邊距：50px
- 下邊距：50px
- 左邊距：-10%
- 右邊距：-10%
添加第 1 行
列結構
繼續使用以下列結構添加新行：
漿紗
在不添加任何模塊的情況下，打開行設置並增加寬度和最大寬度。
- 寬度：100%
- 最大寬度：100%
將分隔線 #1 添加到列
能見度
是時候添加模塊了，從分隔模塊開始。 確保啟用了“顯示分隔線”選項。
- 顯示分隔線：是
線
轉到模塊的設計選項卡並按如下方式更改線路設置：
- 線條顏色：#fc526e
- 線型：實心
- 線路位置：頂部
漿紗
也修改大小設置。
- 分隔線重量：3px
- 寬度：30%
- 模塊對齊：右
- 高度：3px
動畫片
並相應地修改動畫設置：
- 動畫風格：幻燈片
- 動畫方向：左
- 動畫持續時間：2000ms
- 動畫延遲：500ms
- 動畫強度：100%
- 動畫開始不透明度：100%
將分隔線 #2 添加到列
能見度
進入下一個分頻器模塊。 再次確保“顯示分隔線”選項已啟用。
- 顯示分隔線：是
線
然後，轉到模塊的設計選項卡並按如下方式更改線路設置：
- 線條顏色：#e1e3e8
- 線型：實心
- 線路位置：頂部
漿紗
接下來修改模塊的大小設置。
- 分隔線重量：3px
- 高度：3px
間距
也添加一些自定義間距值。
- 左邊距：10%
- 右邊距：-20%
動畫片
並通過修改動畫設置完成模塊的設置如下：
- 動畫風格：幻燈片
- 動畫方向：左
- 動畫持續時間：2000ms
- 動畫延遲：500ms
- 動畫強度：100%
- 動畫開始不透明度：100%
將分隔線 #3 添加到列
能見度
進入我們在這一行中需要的下一個也是最後一個分頻器模塊。 確保啟用了“顯示分隔線”選項。
- 顯示分隔線：是
線
然後，轉到設計選項卡並按如下方式更改線條設置：
- 線條顏色：#fc526e
- 線型：實心
- 線路位置：頂部
漿紗
也修改模塊的大小。
- 分隔線重量：3px
- 高度：3px
間距
隨著間距設置。
- 下邊距：100px
- 左邊距：-20%
- 右邊距：10%
動畫片
並通過更改動畫設置完成模塊的設置。
- 動畫風格：幻燈片
- 動畫方向：右
- 動畫持續時間：2000ms
- 動畫強度：100%
- 動畫開始不透明度：100%
添加第 2 行
列結構
使用以下列結構向該部分添加另一行：
漿紗
在不添加任何模塊的情況下，打開行設置並按如下方式更改大小設置：
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 寬度：70%
- 行對齊：居中
將文本模塊 #1 添加到列
添加 H2 內容
然後，使用您選擇的一些 H2 內容將第一個文本模塊添加到行的列。
H2 文本設置
轉到設計選項卡並相應地修改 H2 文本設置：
- 標題 2 文本顏色：#fc526e
- 標題 2 文字大小：28px
間距
接下來添加一些自定義填充值。
- 頂部填充：50px
- 底部填充：50px
- 左填充：50px
邊界
我們也在使用左邊框。
- 左邊框寬度：2px
- 左邊框顏色：#fc526e
動畫片
並通過添加自定義動畫來完成模塊的設置。
- 動畫風格：翻轉
- 動畫方向：中心
- 動畫延遲：1500ms
將文本模塊 #2 添加到列
添加內容
在上一個文本模塊的正下方添加另一個文本模塊，其中包含您選擇的一些內容。
間距
移動模塊的設計選項卡並相應地修改填充值：
- 頂部填充：50px
- 底部填充：50px
- 右填充：50px
邊界
接下來添加頂部和右側邊框。
- 頂部和右側邊框：2px
- 頂部和右側邊框顏色：#fc526e
動畫片
並通過修改動畫設置完成模塊的設置如下：
- 動畫風格：翻轉
- 動畫方向：中心
- 動畫延遲：1700ms
將按鈕模塊添加到列
添加副本
我們在這一行中需要的下一個也是最後一個模塊是按鈕模塊。 添加一些您選擇的副本。
按鈕設置
轉到模塊的設計選項卡並按如下方式修改按鈕設置：
- 為按鈕使用自定義樣式：是
- 按鈕文字大小：13px
- 按鈕文字顏色：#ffffff
- 漸變色 1：#ff5b84
- 漸變色 2：#f94857
- 漸變類型：線性
- 漸變方向：165度
- 按鈕邊框寬度：0px
- 按鈕邊框半徑：0px
- 按鈕字母間距：1px
- 按鈕字體：蒙特塞拉特
- 按鈕字體粗細：半粗體
- 按鈕字體樣式：大寫
間距
接下來添加一些自定義的頂部和底部填充。
- 頂部填充：16px
- 底部填充：16px
動畫片
並通過添加以下動畫完成模塊的設置：
- 動畫風格：翻轉
- 動畫延遲：1900ms
克隆第 1 行並放置在部分底部
完成第一行和第二行後，您可以克隆第一行並將副本放置在該部分的底部。
更改分隔順序
交換第一個和最後一個分隔模塊的位置。
更改分隔線 #1 間距
然後，打開您所在行中的第一個分隔器模塊並修改間距設置。
- 上邊距：100px
- 左邊距：10%
- 右邊距：-20%
更改分隔線 #2 間距
也更改第二個分隔模塊的間距設置。
- 左邊距：-20%
- 右邊距：10%
更改分隔線 #3 尺寸
然後，打開第三個分隔器模塊並在大小設置中使用左模塊對齊。
- 模塊對齊：左
刪除分隔線 #3 動畫延遲
刪除第三個分頻器模塊的動畫延遲，你就設置好了！ 完成 Divi CTA 佈局塊後，請確保保存更改並更新帖子。
- 動畫延遲：0ms
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何利用 Divi 的新 Gutenberg 集成並將內聯和動畫 Divi CTA 佈局塊添加到您的 Gutenberg 博客文章中。 這是在訪問者閱讀您的博客文章內容時突出顯示您選擇的 CTA 的好方法。 您還可以免費下載 Divi CTA 佈局塊的 JSON 文件！ 如果您有任何疑問，請隨時在下面的評論部分發表評論！
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。