如何創造性地使用 Divi 的新行對齊選項

在今天的 Divi 教程中，我們將向您展示如何使用 Divi 中的新行對齊選項來發揮您的優勢。 我們將行對齊選項與其他內置設計選項相結合，讓您了解 Divi 的高級設計選項的可能性。 我們將向您展示如何重新創建的示例完全不包含額外的代碼，這意味著任何技能水平的人都可以實現此設計。

讓我們開始吧！

設計預覽

快速瀏覽一下我們今天將要創建的內容（在桌面上）：

這是設計在移動設備上的外觀：

如何創造性地使用 Divi 的新行對齊選項

訂閱我們的 YouTube 頻道

主題定制器設置

主菜單欄

如您所見，我們還將主菜單與佈局相匹配。 要修改您的主菜單欄，請轉到您的WordPress 儀表板 > 外觀 > 自定義 > 標題和導航 > 主菜單欄 > 並進行以下更改：

• 隱藏徽標圖像：啟用
• 菜單高度：30
• 文字大小：17
• 字母間距：-1
• 字體樣式：大寫
• 文字顏色：#FFFFFF
• 活動鏈接顏色：#FFFFFF
• 背景顏色：rgba(255, 255, 255, 0)
• 下拉背景色：rgba(255, 255, 255, 0)

英雄部分

修改主菜單後，就可以開始佈局了。 您需要做的第一件事是添加一個新頁面，切換到 Visual Builder 並添加一個新的標準部分。 第一部分將成為我們的英雄部分，如下所示：

部分設置

漸變背景

添加標準部分後，您可以為其添加漸變背景：

• 第一種顏色：#9e5555
• 第二種顏色：#000000
• 漸變類型：線性
• 梯度方向：180度
• 起始位置：50%
• 結束位置：50%

行設置

顏色疊加

然後，向該部分添加一列行並打開其設置。 我們需要做的第一件事是添加顏色疊加。 您可以通過選擇深灰色來選擇圖像的暗度。 在本例中，我們使用了“#595959”。

背景圖片

我們需要做的下一件事是將背景圖像添加到一列行並應用顏色疊加。 要混合顏色疊加和背景圖像，請選擇“正片疊底”作為背景圖像混合。

中心行對齊

像大多數網站一樣，我們將為英雄部分選擇中心行對齊方式。

使行全寬

我們還希望我們的行是全角的，因此我們將在“設計”選項卡的“大小調整”子類別中啟用該選項。

自定義填充

我們需要在行設置中做的最後一件事是在頂部和底部添加“300px”的自定義填充。

第一個文本模塊

完成所有設置後，我們將向行中添加第一個文本模塊。 選擇要在“內容”選項卡中顯示的文本，然後轉到“設計”選項卡。 在“設計”選項卡中，確保以下設置適用於“文本”子類別：

• 文字字體：Arvo
• 文本字體大小：64（桌面）、47（平板）、33（手機）
• 文字顏色：#FFFFFF
• 文本行高：1em
• 文字方向：居中

第二個文本模塊

然後，添加另一個文本模塊。 相反，第二個文本模塊包含以下設置：

• 文字字體：Lato
• 文本字體大小：25（桌面）、18（平板）、16（手機）
• 文字顏色：#FFFFFF
• 文本行高：1.7em
• 文字方向：居中

第二節

英雄部分完成後，我們可以轉到第二部分。 在本節中，我們將使用右行對齊而不是居中對齊，結合自定義邊距和列背景來創建漂亮的效果。 我們需要在本節中創建兩個行版本：桌面版本和平板電腦/手機版本。 這將確保設計在各種屏幕上看起來都很棒。

部分設置

漸變背景

添加第二個部分後，向其添加以下漸變背景：

• 第一種顏色：#000000
• 第二種顏色：#d6d6d6
• 漸變類型：線性
• 梯度方向：184度
• 起始位置：20%
• 結束位置：20%

添加桌面行

然後，您可以繼續向其中添加前兩列行； 這一行將是桌面版本。 幸運的是，我們也可以將其中的大部分內容重用於平板電腦/手機版本。

行設置

列背景

在內容選項卡中，添加“#FFFFFF”作為第二列的背景顏色。

右行對齊

移至“設計”選項卡並選擇右行對齊方式。

使行全寬

接下來，打開 Sizing 子類別並啟用“Make This Row Fullwidth”選項。

自定義填充

您需要在行設置中做的最後一件事是向該行添加一個 '300px' 的頂部填充，並將以下填充添加到第二列：

• 頂部：35px
• 右：35px
• 底部：150px
• 左：35px

第 1 欄

第一分頻器模塊

對於第一列，我們將首先添加一個分隔模塊。 在“內容”選項卡的“可見性”子類別中，啟用“顯示分隔線”選項。

轉到“設計”選項卡並選擇“#FFFFFF”作為分隔線顏色。

然後，在樣式子類別中選擇“實心”作為分隔線樣式和“頂部”作為分隔線位置。

您需要在分頻器模塊的設計選項卡中做的最後一件事是對大小調整子類別進行以下調整：

• 分頻器重量：3
• 高度：0px
• 寬度：20%
• 模塊對齊：右

第一個文本模塊

在分隔模塊的正下方，添加第一個文本模塊，並在“設計”選項卡的“文本”子類別中使用以下設置：

• 文字字體：Arvo
• 文字字體大小：30px
• 文字顏色：#000000
• 文本行高：1.6em
• 文字方向：居中

克隆第一個分頻器模塊並更改對齊方式

克隆我們創建的分隔線模塊並將其放置在第一個文本模塊的正下方。 唯一需要更改的是 Sizing 子類別中的 Module Alignment。 與其在右側，不如選擇左側。

第二個文本模塊

您需要添加到第一列的最後一件事是另一個具有以下設置的文本模塊：

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

第 2 欄

圖像模塊

您需要添加到第二列的第一件事是在“設計”選項卡的“間距”子類別中具有以下設置的圖像模塊：

• 在圖像下方顯示空間：是
• 上邊距：-300px
• 左：-80px

文本模塊

然後，在圖像模塊正下方添加一個文本模塊，並在“設計”選項卡的“文本”子類別中選擇以下設置：

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

社交媒體關注模塊

您需要添加到第二列的最後一件事是社交媒體關注模塊。 添加任意數量的社交圖標，並確保在“設計”選項卡中選擇“居中”作為項目對齊方式。

在平板電腦和手機上禁用

完成所有操作後，您可以繼續禁用手機和平板電腦上的行。

添加移動行

克隆桌面行

現在我們已經製作了桌面版，製作移動版會快很多。 克隆桌面行並按照以下步驟操作。

切換列

首先切換位於兩列中的模塊。

列背景顏色

之後，刪除第二列的背景色並將其放置在第一列中。

列填充

我們不需要在第二列中使用自定義填充，而是需要在第一列中使用它。 此外，底部填充不是“150px”而是“35px”，就像頂部、右側和左側填充一樣。

使用中心行對齊

然後，我們還必須將行對齊方式更改為“居中”。

在桌面上禁用

最後但並非最不重要的一點是，確保在桌面上禁用該行。

第三節

第三部分將與第二部分非常相似。 創建此部分將很容易，因為我們可以接管第二部分的大部分設置並進行一些調整。 完成所有步驟後，您將能夠見證以下結果：

部分設置

漸變背景

添加一個新的標準部分並使用以下漸變背景：

• 第一種顏色：#d6d6d6
• 第二種顏色：#9e5555
• 漸變類型：線性
• 梯度方向：184度
• 起始位置：30%
• 結束位置：30%

自定義保證金

然後，添加一個“-200px”的自定義邊距。

桌面行

第三部分的工作方式相同； 我們將製作桌面和平板電腦/手機版本。

克隆第二部分的桌面行

首先克隆上一節的桌面行。 大多數設置都是相同的，我們將討論需要進行的更改。

切換列

我們需要進行的更改之一是切換位於兩列中的模塊。

列背景顏色

然後，我們還需要刪除第二列的背景色並添加“#000000”作為第一列的背景色。

列填充

刪除第 2 列自定義填充並使用“35px”作為第一列的頂部、右側、底部和左側自定義填充。

使用左行對齊

此外，將行對齊方式從右更改為左。

圖像模塊自定義邊距

圖像模塊的間距子類別也需要一些更改：

• 頂部：-150px
• 右：-80px

第一分頻器模塊自定義保證金

接下來，將“200px”的頂部邊距添加到第二列中的第一個分隔線模塊。

使用相反的顏色

正如你所注意到的； 顏色的使用與第二部分相反。 繼續將所有字體顏色更改為“#FFFFFF”，將分隔線顏色更改為“#000000”。

在平板電腦和手機上禁用

儘管該行已在平板電腦和手機上禁用（由於克隆），但如果您想確定，可以轉到可見性子類別。

移動排

克隆上一個桌面行

對於移動版本，克隆您剛剛創建的桌面行並進行本文下一部分中的更改。

使用中心行對齊

打開行設置並將行對齊更改為居中。

圖像模塊自定義邊距

您需要做的另一件事是將圖像模塊的上邊距更改為“-20%”。

在桌面上禁用

最後但並非最不重要的一點是，確保在桌面上禁用最後一行。

結果

按照本教程的逐步操作，您應該能夠在桌面上獲得以下結果：

移動端的結果如下：

最後的想法

在這篇文章中，我們向您展示瞭如何在 Divi Builder 中創造性地使用行的不同對齊選項。 人們在實踐中學到的東西最多，這就是為什麼我們為您提供了一個示例，我們向您展示瞭如何一步一步地創建。 如果您有任何問題或建議； 隨時在下面的評論部分發表評論。

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！