如何使用 Divi 將絕對定位的底部欄添加到您的英雄部分

在英雄部分構建元素的方式有時會變得棘手。 您希望獲得良好的平衡，而不必大幅減少要共享的內容量。 幸運的是，一些簡化的方法已經在整個網絡上證明了它們的價值。 其中一種方法是在您的英雄部分添加一個絕對定位的底部欄。 它不僅在設計方面看起來不錯，而且還可以幫助您添加多個號召性用語，而不會使設計失去平衡。

在本教程中，我們將向您展示如何向 Divi 中的英雄部分添加絕對定位的底部欄。 我們將添加的底部欄將包含四個部分； 三個按鈕和一個聯繫表格。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載絕對定位的底欄英雄部分佈局

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

讓我們開始重建吧！

添加新部分

漸變背景

首先向您正在處理的頁面添加一個新部分。 打開部分設置並應用漸變背景。

• 顏色 1：RGBA(0,0,0,0.62)
• 顏色 2：RGBA(0,0,0,0.97)
• 將漸變放在背景圖像上方：是

背景圖片

接下來上傳您選擇的背景圖片。

間距

轉到該部分的設計選項卡並刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

溢出

我們也隱藏了該部分的溢出。

• 水平溢出：隱藏
• 垂直溢出：隱藏

添加第 1 行

列結構

繼續使用以下列結構向該部分添加新行：

間距

尚未添加任何模塊，打開行設置並應用一些頂部和底部邊距。

• 最高利潤率：20%
• 底邊距：20%

將文本模塊 #1 添加到列

添加H1內容

是時候添加模塊了，從包含您選擇的一些 H1 內容的第一個文本模塊開始。

H1 文本設置

轉到模塊的設計選項卡並按如下方式設置 H1 文本的樣式：

• 標題字體：Work Sans
• 標題文字顏色：#ffffff
• 標題文字大小：
  • 桌面：80px
  • 平板電腦：50px
  • 電話：40px
• 標題字母間距：
  • 桌面：-4px
  • 平板電腦和手機：-2px

將文本模塊 #2 添加到列

添加內容

在上一個文本模塊的正下方添加另一個文本模塊，並包含您選擇的一些描述內容。

文字設置

相應地修改模塊的文本設置：

• 文字字體：Open Sans
• 文字顏色：#a0a0a0

漿紗

還要修改大小設置。

• 寬度：
  • 台式機：68%
  • 平板電腦和手機：100%

將按鈕模塊添加到列

添加副本

我們在這一行中需要的最後一個模塊是按鈕模塊。 包括您選擇的一些副本。

添加鏈接

添加按鈕鏈接。

• 按鈕鏈接網址：#

按鈕設置

轉到模塊的設計選項卡並按如下所示設置按鈕樣式：

• 為按鈕使用自定義樣式：是
• 按鈕文字顏色：#ffffff
• 按鈕邊框寬度：0px

• 按鈕字體：Work Sans
• 顯示按鈕圖標：是
• 按鈕圖標位置：左

添加第 2 行

列結構

是時候創建我們的底部英雄欄了！ 為此，我們將使用以下列結構添加一個新行：

漿紗

在不添加模塊的情況下，打開行設置並修改大小設置。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是
• 寬度：
  • 台式機：100%
  • 平板電腦和手機：80%
• 最大寬度：2560px

間距

接下來刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

盒子陰影

還包括一個框陰影。

• 框陰影模糊強度：80px
• 框陰影傳播強度：50px
• 陰影顏色：rgba(135,135,135,0.08)

位置

然後，轉到高級選項卡並在桌面上重新定位整行。 在較小的屏幕尺寸上將其恢復為默認值。 此行的位置設置將確保該行粘在節容器的底部。

• 位置：
  • 桌面：絕對
  • 平板電腦和手機：默認
• 位置：底部中心

第 1 列設置

間距

繼續打開第 1 列設置並應用一些自定義填充值。

• 頂部填充：3%
• 底部填充：3%
• 左填充：3%
• 右填充：3%

邊界

我們也為此列使用了一些響應式邊框設置。

• 頂部邊框：
  • 頂部邊框寬度：5px
  • 頂部邊框顏色：
    • 默認值：rgba(255,255,255,0)
    • 懸停：#ffffff
• 底部邊框：
  • 底部邊框寬度：
    • 台式機和平板電腦：0px
    • 電話：3px
  • 底部邊框顏色：rgba(255,255,255,0.11)
• 左邊框：
  • 左邊框寬度：
    • 桌面：0px
    • 平板電腦：3px
    • 電話：0px
  • 左邊框顏色：rgba(255,255,255,0.11)

第 2 列設置

間距

進入第二列的設置。 在間距設置中添加一些填充值。

• 頂部填充：3%
• 底部填充：3%
• 左填充：3%
• 右填充：3%

邊界

並包括以下響應式邊框：

• 頂部邊框：
  • 頂部邊框寬度：5px
  • 頂部邊框顏色：
    • 默認值：rgba(255,255,255,0)
    • 懸停：#ffffff
• 底部邊框：
  • 底部邊框寬度：
    • 台式機和平板電腦：0px
    • 電話：3px
  • 底部邊框顏色：rgba(255,255,255,0.11)
• 左邊框：
  • 左邊框寬度：
    • 桌面：3px
    • 平板電腦：3px
    • 電話：0px
  • 左邊框顏色：rgba(255,255,255,0.11)

第 3 列設置

間距

第三列也需要自定義填充值。

• 頂部填充：3%
• 底部填充：3%
• 左填充：3%
• 右填充：3%

邊界

以及以下邊框設置：

• 頂部邊框：
  • 頂部邊框寬度：5px
  • 頂部邊框顏色：
    • 默認值：rgba(255,255,255,0)
    • 懸停：#ffffff
• 左邊框：
  • 左邊框寬度：
    • 桌面：3px
    • 平板電腦：3px
    • 電話：0px
  • 左邊框顏色：rgba(255,255,255,0.11)

第 4 列設置

背景顏色

到最後一欄。 添加白色背景色。

• 背景顏色：#ffffff

間距

應用一些自定義響應填充值。

• 頂部填充
  • 台式機：3%
  • 平板電腦：3%
  • 電話：10%
• 底部填充：
  • 台式機：3%
  • 平板電腦：3%
  • 電話：10%
• 左填充：
  • 台式機：3%
  • 平板電腦：5%
  • 電話：10%
• 右填充：
  • 台式機：3%
  • 平板電腦：5%
  • 電話：10%

位置

並在桌面上重新定位整個列。 這將使列的大小成為絕對大小，並使其粘在行的底部。

• 位置：
  • 桌面：絕對
  • 平板電腦和手機：默認
• 位置：右下角

上一行中的克隆按鈕模塊並在新行的第 1 列中放置重複項

完成行和列設置後，就可以開始添加模塊了。 我們正在重用作為前一行一部分的按鈕模塊。 克隆模塊並將其副本放在新行的第一列中。

更改按鈕對齊方式

打開按鈕模塊副本並更改對齊方式。

• 按鈕對齊：居中

更改副本和鏈接

接下來修改模塊的副本和鏈接。

第 1 列中的克隆按鈕兩次並在第 2 列和第 3 列中放置重複項

修改第 1 列中按鈕模塊的設置後，您可以克隆整個模塊兩次，並將重複項放在第 2 列和第 3 列中。

更改副本和鏈接

更改每個副本的副本和鏈接。

將文本模塊添加到第 4 列

添加 H2 內容

到行的最後一列。 在那裡，我們需要的第一個模塊是帶有一些 H2 內容的文本模塊。

H2 文本設置

轉到模塊的設計選項卡並相應地更改 H2 文本設置：

• 標題 2 字體：Work Sans
• 標題 2 文本顏色：#000000
• 標題 2 字母間距：-2px

間距

也添加一些底部邊距。

• 底邊距：10%

將聯繫表單模塊添加到第 4 列

使字段全寬

接下來，在文本模塊正下方添加一個聯繫表單模塊。 分別打開姓名和電子郵件地址字段，並為兩者啟用“製作全角”選項。

• 製作全角：是

字段設置

轉到模塊的設計選項卡並按如下方式修改字段設置：

• 字段背景顏色：#ffffff
• 字段文本顏色：#000000
• 字段頂部填充：4%
• 字段底部填充：4%
• 字段字體：Work Sans
• 字段文本大小：13px

驗證碼文本設置

然後，對驗證碼文本設置進行一些更改。

• 驗證碼字體：Work Sans
• 驗證碼文本顏色：#000000

按鈕設置

我們也在設計按鈕的樣式。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：17px
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#000000
• 按鈕邊框寬度：0px

• 按鈕邊框半徑：0px
• 按鈕字母間距：-1px
• 按鈕字體：Work Sans

邊界

最後但並非最不重要的是，我們將包括一個底部邊框寬度。 就是這樣！

• 輸入底部邊框寬度：1px
• 輸入底部邊框顏色：#dddddd

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何利用 Divi 中的英雄部分發揮創意。 更具體地說，我們已經向您展示瞭如何包含和設計一個絕對定位的底部欄。 使用底部欄將幫助您在英雄部分分享更多內容，而不會變得過於壓倒性。 使用這種技術，您可以創建任何類型的設計並同時進行多個 CTA！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。