如何使用 Divi 的主題生成器創建自定義頁腳
已發表: 2019-10-26Divi Theme Builder 標誌著一個新時代，並改變了我們設計網站的方式。 此功能最重要的部分之一是能夠為您的頁面和帖子動態添加全局頁腳。 設計完頁腳後，您可以使用 Divi 的 Theme Builder 將其自動添加到您想要的任何類型的頁面或帖子。 現在，在本教程中，我們將逐步指導您完成創建全局頁腳並將其添加到您的網站的過程。 您也可以免費下載模板 JSON 文件！
讓我們開始吧。
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的全局頁腳設計。
桌面
移動的
免費下載自定義全局頁腳
要使用免費的自定義全局頁腳，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
訂閱我們的 YouTube 頻道
1.轉到Divi的主題生成器
首先轉到 Divi 主題選項中的主題生成器。
2. 添加和構建全局頁腳
在那裡，你可以從你的 Divi 庫中添加一個全局頁腳，或者從頭開始構建一個。 在本教程中，我們將從頭開始創建自定義頁腳，因此請繼續選擇第一個選項。
添加第 1 節
背景顏色
是時候開始創作了！ 打開您可以在頁面上找到的部分並更改該部分的背景顏色。
- 背景顏色：#000000
間距
接下來修改節的間距設置。
- 最高利潤率：6vw
- 左邊距：6vw
- 右邊距：6vw
- 左填充：30px
- 右填充：30px
邊界
接下來添加一些左上邊框和右邊框。
- 左上角：20px
- 右上角：20px
盒子陰影
在部分設置中也包含一個框陰影。
- 框陰影模糊強度：rgba(0,0,0,0.18)
- 陰影顏色：rgba(0,0,0,0.18)
向節添加新行
列結構
繼續使用以下列結構向您的部分添加一行：
將文本模塊添加到列
添加 H2 內容
添加帶有一些 H2 內容的文本模塊。
H2 文本設置
轉到模塊的設計選項卡並相應地更改 H2 文本設置：
- 標題 2 字體：Poppins
- 標題 2 字體粗細：半粗體
- 標題 2 文本對齊：居中
- 標題 2 文本顏色：#ffffff
- 標題 2 文字大小：31 像素（桌面）、24 像素（平板電腦）、18 像素（手機）
- 標題 2 行高：1.6em
漿紗
也為模塊添加一些最大寬度。
- 最大寬度：700px
將按鈕模塊添加到列
添加副本
在您的列中的文本模塊正下方添加一個按鈕模塊，然後輸入您選擇的一些副本。
結盟
移至模塊的設計選項卡並將按鈕對齊更改為居中。
- 按鈕對齊：居中
按鈕設置
繼續設置按鈕樣式。
- 為按鈕使用自定義樣式：是
- 按鈕文字大小：12px
- 按鈕文字顏色：#000000
- 按鈕背景顏色：#FFFFFF
- 按鈕邊框寬度：0px
- 按鈕邊框半徑：100px
- 按鈕字母間距：1px
- 按鈕字體： Poppins
- 按鈕字體粗細：半粗體
- 按鈕字體樣式：大寫
間距
添加一些自定義填充值。
- 頂部填充：14px
- 底部填充：14px
- 左填充：40px
- 右填充：58px
添加第 2 節
背景顏色
進入下一個常規部分！ 選擇白色部分的背景顏色。
- 背景顏色：#ffffff
間距
接下來刪除所有頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
邊界
也向該部分添加一些邊框半徑。
- 左上角：20px
- 右上角：20px
盒子陰影
並通過添加一個微妙的框陰影來完成該部分的設置。
- 框陰影模糊強度：135px
- 陰影顏色：rgba(0,0,0,0.18)
向節添加新行
列結構
完成部分設置後，使用以下列結構添加新行：
漿紗
還沒有添加任何模塊，打開行設置並允許行佔據屏幕的整個寬度。
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 均衡柱高：是
- 寬度：100%
- 最大寬度：100%
間距
接下來刪除該行的默認頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
列間距
繼續打開列設置並在不同的屏幕尺寸中添加一些自定義填充值。
- 頂部填充：100 像素（桌面）、50 像素（平板電腦和手機）
- 底部填充：100px（桌面），50px（平板電腦和手機）
- 左填充：50px
- 右填充：50px
將文本模塊 #1 添加到列
添加內容
是時候開始添加模塊了！ 將常規文本模塊添加到第 1 列並插入您選擇的一些內容。
文字設置
轉到模塊的設計選項卡並相應地更改文本設置：
- 文字字體： Poppins
- 文字字體粗細：粗體
- 文字顏色：#000000
- 文字大小：17px
- 文本對齊：居中
間距
接下來添加一些自定義的頂部和底部邊距。
- 上邊距：10px
- 下邊距：30px
將分隔模塊添加到列
能見度
在文本模塊的正下方，添加一個分隔線模塊並確保啟用了“顯示分隔線”選項。
- 顯示分隔線：是
線
將線條顏色更改為黑色。
- 線條顏色：#000000
漿紗
也修改分隔線的大小設置。
- 寬度：15%
- 模塊對齊：居中
將文本模塊 #2 添加到列
添加內容
繼續向該列添加另一個文本模塊。
添加鏈接
添加指向您希望此模塊引用的頁面的鏈接。
文字設置
然後，轉到設計選項卡並按如下方式更改文本設置：
- 文字字體： Poppins
- 文字字體粗細：輕
- 文字顏色：#777777
- 文字大小：15px
- 文本對齊：居中
間距
添加一些頂部和底部邊距。
- 上邊距：10px
- 下邊距：10px
根據需要克隆文本模塊 #2
完成列中的第二個文本模塊後，您可以根據需要多次復制它（取決於您想要包含多少可點擊的頁腳項目）。
更改內容和鏈接
確保為每個副本更改模塊內容和鏈接。
克隆整個列兩次
完成列及其模塊後，您可以克隆整個列兩次。
第 2 列背景顏色
然後，打開第 2 列設置並更改背景顏色。
- 第 2 列背景顏色：#f9f9f9
更改內容和鏈接
確保更改每個重複列中的所有內容和鏈接。
添加新列
然後，向該行添加第四列。
背景顏色
更改新列的背景顏色。
- 背景顏色：#0fffc7
間距
連同列的填充值。
- 頂部填充：70px
- 底部填充：70px
- 左填充：50px
- 右填充：50px
將社交媒體關注模塊添加到第 4 列
添加社交網絡
繼續向第 4 列添加社交媒體關注模塊。
重置社交網絡風格
為您添加的每個社交網絡重置項目樣式。
結盟
然後，轉到設計選項卡並更改模塊對齊方式。
- 模塊對齊：居中
圖標設置
也修改圖標顏色。
- 圖標顏色：#000000
將電子郵件選擇模塊添加到第 4 列
刪除內容
繼續向第 4 列添加電子郵件選項模塊並刪除標題和正文內容。
電子郵件帳戶
接下來添加一個電子郵件帳戶。 如果不添加電子郵件帳戶，一旦您退出構建器，該模塊將不會顯示。
刪除背景顏色
繼續刪除模塊的背景色。
- 使用背景顏色：否
字段設置
轉到設計選項卡並按如下方式更改字段設置：
- 字段背景顏色：rgba(0,0,0,0)
- 字段文本顏色：#000000
- 字段字體：Poppins
- 字段文本大小：13px
- 字段邊框寬度：1px
- 字段邊框顏色：#000000
按鈕設置
也為模塊的按鈕設計樣式。
- 為按鈕使用自定義樣式：是
- 按鈕文字大小：12px
- 按鈕文字顏色：#000000
- 按鈕背景顏色：#FFFFFF
- 按鈕邊框寬度：0px
- 按鈕邊框半徑：100px
- 按鈕字母間距：1px
- 按鈕字體： Poppins
- 按鈕字體粗細：半粗體
- 按鈕字體樣式：大寫
- 頂部填充：15px
- 底部填充：15px
將動態文本模塊添加到第 4 列
動態內容
我們需要完成此設計的下一個也是最後一個模塊是文本模塊。 在內容框中啟用動態內容選項。
然後，選擇“當前日期”選項。
- 動態內容：當前日期
並修改動態內容的設置如下：
- 之前：版權©
- 之後： | 版權所有
- 日期格式：自定義
- 自定義日期格式：20y
文字設置
然後，轉到設計選項卡並相應地更改文本設置：
- 文字字體： Poppins
- 文字顏色：#000000
- 文字大小：16px
間距
通過添加一些上邊距來完成模塊的設置，就大功告成了！
- 上邊距：50px
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在本教程中，我們向您展示了使用 Divi 的新主題生成器創建漂亮的自定義全局頁腳是多麼容易。 Theme Builder 和 Divi 的內置模塊和設計選項可幫助您節省大量時間並立即創建令人驚嘆的網站。 我們希望本教程能激發您為即將到來的 Divi 項目創建漂亮的全局頁腳。 如果您有任何問題或建議，請隨時在下面的評論部分發表評論！
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。