如何在您的古騰堡帖子中添加分工打造的高亮行情
已發表: 2020-02-14在撰寫博客文章時，您經常會發現自己想要引用某人或突出顯示常規段落中使用的句子。 現在，在 Gutenberg 編輯器中，您可以立即添加引用塊，但它不會為您提供您可能想要的設計自由度。 使用 Divi 的佈局塊，這不再是問題。 您可以使用 Divi 輕鬆構建特定塊，同時在其他地方仍保持 Gutenberg 環境。 在本教程中，我們將向您展示如何使用 Divi 在您的博客文章中添加內嵌突出顯示的引號。 您也可以免費下載 JSON 文件！
讓我們開始吧。
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
示例#1
桌面
移動的
示例#2
桌面
移動的
免費下載 Divi-Built 高亮行情佈局
要使用 Divi 構建的免費高亮報價佈局，您首先需要使用下面的按鈕下載它們。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
https://youtu.be/zScpa4-I7-8
訂閱我們的 YouTube 頻道
導入佈局塊 JSON
將佈局上傳到 Divi 庫
要導入您可以在上面下載的 JSON 文件，請轉到 WordPress 儀表板後端的 Divi 庫，然後單擊“導入和導出”。
然後，選擇下載文件夾中的 JSON 文件，然後單擊“導入 Divi Builder 佈局”。
在 Gutenberg Post 內添加新的 Divi Block Block
導入佈局後，您可以轉到 Gutenberg 帖子並添加新的 Divi 佈局塊。
從保存的佈局導入 JSON 文件
然後，單擊“從庫加載”，導航到“您保存的佈局”並選擇佈局以將突出顯示的報價佈局導入到您的博客文章中。 就是這樣！
一般步驟
使用簡單且用戶體驗友好的博客帖子模板
下載模板
為了定義本教程的風格，我們將使用以前帖子的帖子模板。 轉到該帖子並下載模板。
轉到 Divi 主題生成器
然後，轉到Divi Theme Builder。
上傳帖子模板
單擊右上角的圖標，轉到導入選項卡並導入您在本教程第一步中下載的帖子模板。
打開現有的古騰堡郵報或創建新郵報
設置帖子模板後，您可以創建新的古騰堡帖子或打開現有帖子。
添加新的內聯 Divi 塊
在帖子中的某處添加一個新的 Divi 塊。
在 Divi 塊內構建新佈局
添加塊後，您將獲得兩個選項。 選擇寫著“構建新佈局”的那個。
重新創建示例 #1
部分設置
間距
進入 Divi 佈局塊編輯器後，您會注意到一個部分。 要重新創建第一個示例設計，請打開截面設置並相應地修改邊距值：
- 上邊距：50px
- 下邊距：50px
- 左邊距：-5%
- 右邊距：-5%
邊界
為下一節添加左邊框。
- 左邊框寬度：2px
- 左邊框顏色：#000000
動畫片
並使用以下動畫設置：
- 動畫風格：幻燈片
- 動畫方向：下
- 動畫持續時間：1500ms
- 動畫強度：200%
- 動畫開始不透明度：100%
- 動畫速度曲線：漸入漸出
添加新行
列結構
繼續使用以下列結構向該部分添加新行：
漿紗
打開行設置並相應地更改大小設置：
- 寬度：90%
- 最大寬度：100%
動畫片
通過如下更改動畫設置來完成行設置：
- 動畫風格：淡入淡出
- 動畫延遲：1500ms
- 動畫速度曲線：漸入漸出
將文本模塊添加到列
插入 H3 內容
我們唯一需要的模塊是文本模塊。 插入 H3 突出顯示的引用內容。
H3 文本設置
通過修改H3文本設置完成模塊設置如下：
- H3 字體樣式：斜體
- H3 文字大小：2.1rem（桌面）、1.5rem（平板電腦）、1.3rem（手機）
- H3 線高：1.5em
重新創建示例 #2
部分設置
間距
想要重新創建第二個設計示例嗎？ 打開截面設置，修改間距值如下：
- 上邊距：50px
- 下邊距：50px
- 左邊距：-5%
- 右邊距：-5%
- 頂部填充：0px
- 底部填充：0px
添加新行
列結構
然後，使用以下列結構添加新行：
漿紗
在不添加任何模塊的情況下，打開行設置並允許行佔據整個部分容器的寬度。
- 寬度：100%
- 最大寬度：100%
將文本模塊 #1 添加到列
添加內容
是時候添加模塊了，從第一個文本模塊開始。 在內容框中添加引用。
文字設置
移至設計選項卡並按如下方式更改文本設置：
- 文字字體：Playfair Display
- 文字顏色：#eaeaea
- 文字大小：500px
- 文本行高：0em
間距
我們也增加了一些上邊距。
- 上邊距：150px
動畫片
然後，我們將更改動畫設置。
- 動畫風格：翻轉
- 動畫方向：中心
- 動畫延遲：500ms
- 動畫強度：200%
- 動畫速度曲線：漸入漸出
位置
我們還將通過修改位置設置來確保將引號放置在行容器的左上角。
- 位置：絕對
- 位置：左上角
將文本模塊 #2 添加到列
添加H3內容
進入下一個文本模塊。 將 H3 突出顯示的引用內容添加到內容框中。
H3 文本設置
轉到模塊的設計選項卡並按如下方式更改 H3 文本設置：
- 標題 3 字體樣式：斜體
- 標題 3 文字大小：2.6rem（桌面）、1.7rem（平板電腦）、1.3rem（手機）
- 標題 3 行高：1.4em
間距
也可以在不同的屏幕尺寸上添加一些自定義邊距值。
- 上邊距：150px
- 下邊距：150px
- 左邊距：150px（桌面）、70px（平板）、30px（手機）
- 右邊距：150px（桌面）、70px（平板）、30px（手機）
動畫片
並通過更改動畫設置完成模塊設置，如下所示：
- 動畫風格：淡入淡出
- 動畫延遲：2000ms
- 動畫速度曲線：漸入漸出
將文本模塊 #3 添加到列
添加內容
進入下一個也是最後一個模塊，這是另一個文本模塊。 向內容框添加引號。
文字設置
轉到模塊的設計選項卡並更改文本設置。
- 文字字體：Playfair Display
- 文字顏色：#eaeaea
- 文字大小：500px
- 文本行高：0em
- 文本對齊：右
動畫片
接下來使用以下動畫設置：
- 動畫風格：翻轉
- 動畫方向：中心
- 動畫延遲：1000ms
- 動畫強度：200%
- 動畫速度曲線：漸入漸出
位置
並確保報價位於行容器的右下角。
- 位置：絕對
- 位置：右下角
將報價佈局保存到 Divi 庫以供重複使用
完成您選擇的報價佈局後，請確保將其保存到您的 Divi 庫中，以便您也可以將其用於以後的帖子！
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
示例#1
桌面
移動的
示例#2
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何使用 Divi 的佈局塊發揮創意。 更具體地說，我們已經向您展示瞭如何在您的古騰堡博客文章中添加動畫突出顯示的引號。 設計的可能性是無窮無盡的，但我們為您提供了兩個可以開始使用的示例。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。