使用帶有新 Divi 選項的分頻器模塊的 10 種有趣方法

已發表: 2017-09-26

在今天的 Divi 教程中，我們將與您分享您可以使用先前更新中添加到 Divi 的新選項做什麼。更確切地說; 我們將分享 10 種有趣的方式，您可以使用這些新更改來設置分隔模塊的樣式。可能性確實是無窮無盡的，但這篇文章可能會幫助您找到下一個項目所需的靈感。

搶先看

本教程最好的事情之一是我們不會使用任何額外的 CSS（或任何類型的代碼）。我們將創建的所有示例將僅使用包含在分頻器模塊中的選項。在我向您展示如何逐步創建每個分隔線之前，讓我們快速瀏覽一下我們將構建的分隔線：

分頻器模塊

使用帶有新 Divi 選項的分頻器模塊的 10 種有趣方法

訂閱我們的 YouTube 頻道

創建可重用部分

您需要做的第一件事是創建我們將在所有 10 個示例中使用的部分。當然，您也可以在其他上下文中使用分隔符，但是通過先製作這一部分，您將有機會使用自己的 Divi Builder 並查看您更喜歡哪一個。

創建新頁面

首先在 WordPress 儀表板中創建一個新頁面，啟用 Divi Builder 並打開 Visual Builder。

用三列行創建節

進入新頁面後，創建一個標準部分並在該標準部分中使用三列行。我們使用了“#f4f4f4”作為部分的背景顏色。

分頻器模塊

添加第一個文本模塊

然後，將第一個文本模塊添加到行的第一列。打開設置，鍵入要顯示的文本，然後轉到“設計”選項卡。在“設計”選項卡中，對“文本”子類別進行以下更改：

文字字體：龍蝦
文字字體大小：35
文字顏色：#000000
文本行高：1.7em
文字方向：居中

分頻器模塊

添加第二個文本模塊

添加第一個文本模塊後，您可以在其正下方添加另一個。添加要顯示的文本並轉到“設計”選項卡。在“設計”選項卡中，確保應用以下修改：

文字字體：Roboto
文字字體大小：14
文本行高：1.7em
文字方向：居中

分頻器模塊

克隆文本模塊並放置在其他兩列中

創建這兩個文本模塊後，您也可以將它們放在該行的其他兩列中。

分頻器模塊

開始之前

我們將分享 10 種有趣的方式來設計 Divi 的分隔模塊。每個示例都將具有三個相互協調的分隔符。所有三個模塊的大多數設置都相同。我們將首先向您展示對它們中的每一個都很重要的設置，然後展示您需要對其他兩個分隔器進行的更改。 因此，每次完成第一個分隔符時，將其克隆並將其放置在其他兩列中。 完成後，您可以對其他兩個分隔符進行修改。

注意：對於每一個分隔符，您都需要在“內容”選項卡中啟用“顯示分隔符”選項。

分頻器模塊

1. 模糊三角形

分頻器模塊

第一分頻器模塊設置

內容標籤

在內容選項卡中，我們將使用以下背景設置：

第一種顏色：#e09900
第二種顏色：rgba(255,255,255,0)
漸變類型：線性
梯度方向：176deg
起始位置：13%
結束位置：31%

分頻器模塊

設計選項卡

轉到“設計”選項卡並確保以下設置適用於“大小調整”子類別：

分頻器重量：0
高度：25px
寬度：35%
模塊對齊：居中

分頻器模塊

向下滾動相同的選項卡並在動畫子類別中使用以下動畫設置：

動畫風格：幻燈片
動畫重複：一次
動畫方向：中心
動畫持續時間：1200ms
動畫強度：80%

分頻器模塊

第二分頻器模塊設置

內容標籤

在內容選項卡中，您唯一需要做的就是將第一個漸變顏色更改為“#0c71c3”。

設計選項卡

接下來，您需要向 Animation 子類別添加一些“250ms”的動畫延遲。

分頻器模塊

第三分頻器模塊設置

內容標籤

將最後一個分隔線的第一個漸變顏色更改為“#8300e9”。

分頻器模塊

設計選項卡

您需要添加到最後一個分隔符的動畫子類別的動畫延遲是“500 毫秒”。

分頻器模塊