如何使用 Divi 創建導航主頁
已發表: 2017-11-12您可以在主頁上應用大量方法，但如果您想為您的網站添加一點額外的觸感，選擇導航頁面作為您的主頁可能是您要走的路。 您不會經常看到它，它讓您的訪問者清楚地了解他們對您的網站的期望。 此外，它還可以幫助您的訪問者直觀地瀏覽包含您提供的精彩內容的不同頁面。
為了向您展示如何使用 Divi 以時尚優雅的方式完成它，我們創建了一個設計，我們將在這篇文章中向您展示如何重新創建。 會有兩個版本； 桌面版和適用於平板電腦和手機的版本。 在我們深入學習本教程之前，讓我們先看看最終結果。
桌面上的結果
我們要重新創建的結果在桌面上看起來像這樣： 
手機上的結果
移動端的結果略有不同，如下所示：
如何使用 Divi 創建導航主頁
訂閱我們的 YouTube 頻道
重新創建桌面版本
我們將創建兩個版本的導航頁面； 一個桌面版本和一個平板電腦和手機版本。 這樣，我們將確保導航頁面在所有設備上看起來都不錯。 像往常一樣，我們將從創建桌面版本開始。
添加新部分
首先創建一個新頁面並向其添加常規部分。 在本教程中，我們將只使用一個部分，其中包含我們需要的所有行（桌面版和移動版）。 但是，您也可以選擇將桌面版和移動版分為兩個部分。
重新創建第一個導航行
正如您在上面的結果預覽中所注意到的，每個導航項都有或多或少相同的設計，但有一些不同的細節。 您要創建的每個導航項的大多數設置都是相同的。 這就是為什麼我們將向您展示如何詳細創建第一行，然後向您展示如何對要添加到頁面的其他導航項進行修改。
列結構
首先，為您剛剛添加的行選擇一個全角列。 在向其中添加任何模塊之前，我們將確保行設置到位，因此請繼續並打開行設置。
背景圖片
在內容選項卡上，我們要做的第一件事是向您的行添加背景圖像。 我們建議使用寬度為“1400px”和高度為“934px”的圖像，因為這樣會產生最佳效果。 另外，請確保將圖像放在“不重複”上。
結盟
然後，轉到“設計”選項卡並為您的行添加右對齊。 通過這樣做，您將在屏幕左側創建足夠的空間來添加描述和鏈接。
漿紗
接下來，打開 Sizing 子類別，啟用“使用自定義寬度”選項並使用“100%”的百分比寬度。
間距
繼續，我們想在每個導航項之間添加一點空白，這就是為什麼我們要向行添加“5px”的頂部和底部邊距。
能見度
最後但並非最不重要的一點是，我們希望在手機和平板電腦上禁用此行，因為我們將在本文稍後創建另一行以匹配平板電腦和手機。
頁面描述的文本模塊
文字設置
行設置完成後，您可以將第一個文本模塊添加到行的列，並在“設計”選項卡中為“文本”子類別使用以下設置：
- 文字字體：安迪卡
- 文字字體粗細：常規
- 文字大小：13px
- 文字顏色：#000000
- 文本行高：1.1em
- 文本方向：左
漿紗
向下滾動，打開 Sizing 子類別並添加“18%”的寬度。 一旦我們向它添加負左邊距，這個寬度將確保我們的文本模塊不會穿過我們行的背景圖像。
間距
如上一步所述，我們希望文本模塊位於行的左側，而不與行背景重疊。 我們還希望在行圖像的頂部和文本模塊的開頭之間留出一些空間，這就是我們也使用一些頂部邊距的原因。
- 上邊距：150px
- 左邊距：-20px
- 頂部填充：10px
- 底部填充：10px
分頻器模塊
能見度
接下來，繼續在文本模塊正下方添加一個分隔線模塊。 在可見性子類別中，啟用“顯示分隔線”選項。
顏色
然後，轉到“設計”選項卡並添加“#FFFFFF”作為分隔線顏色。
樣式
繼續，選擇“實心”作為分隔線樣式，選擇“頂部”作為分隔線位置。
漿紗
最後，將以下設置應用於 Sizing 子類別：
- 分隔線重量：5px
- 高度：23px
- 寬度：47%
- 模塊對齊：左
菜單項的文本模塊
內容框中的鏈接文本
完成分隔線模塊後，繼續並在其下方添加另一個文本模塊。 這個文本模塊將是我們的導航項目。 打開設置，輸入文本並添加鏈接。
漸變背景色
仍在“內容”選項卡上時，使用以下漸變背景設置：
- 第一種顏色：#FFFFFF
- 第二種顏色：rgba(12,113,195,0.62)
- 漸變類型：線性
- 梯度方向：108deg
- 起始位置：31%
- 結束位置：21%
鏈接文字設置
然後，轉到“設計”選項卡並將以下設置應用於“文本子類別”的鏈接選項卡：
- 鏈接字體：Andika
- 鏈接字體粗細：粗體
- 鏈接字體樣式：大寫和下劃線
- 鏈接下劃線樣式：純色
- 鏈接文字大小：100px
- 鏈接文字顏色：#000000
- 鏈接線高：1em
間距
這個文本模塊也需要出現在屏幕的左側，這就是我們添加左邊距的原因。 我們還希望分隔器模塊和此文本模塊之間的空間更小，這就是負上邊距的進入位置。 為了創建中央水平對齊，我們還將添加一個底部邊距。 最後，我們希望漸變背景更大，這就是我們使用頂部和底部填充的原因。
- 上邊距：-33px
- 下邊距：250px
- 左邊距：-20px
- 頂部填充：80px
- 底部填充：80px
根據需要多次克隆第一個導航行
導航頁面上的不同導航項或多或少將具有相同的設置。 這就是為什麼我們建議您根據需要多次克隆該行，然後再進行細節修改。 你需要改變三件事，讓我們來看看。
更改行背景
您需要做的第一件事是更改行重複項的背景圖像。 同樣，請確保使用寬度為“1400px”和高度為“943px”的圖像以獲得最佳效果。
更改菜單項的文本模塊
更改鏈接
然後，打開導航項文本模塊並隨鏈接更改文本。
根據文本長度更改漸變背景
最後，您還需要更改此文本模塊的漸變背景。 將第二個漸變顏色更改為 'rgba(224,43,32,0.62)' 並根據新導航項的長度更改起始位置值。 如果您有一個很長的導航項，您需要將起始位置百分比更改為更高的值，直到您看到它落到位。
重新創建移動版本
現在我們已經創建了桌面版本，我們還將創建平板電腦和移動版本。 不同模塊的樣式與桌面版本幾乎相同，但在幕後，我們的行的結構完全不同。 由於如果您要克隆每個模塊，您必須對它們進行許多修改，因此我將向您展示如何從頭開始創建它，而無需從桌面版本克隆任何模塊。
重新創建第一個導航行
首先向我們在本文開頭創建的部分添加另一行。
列結構
與桌面版本一樣，此欄也只需要一欄。
漿紗
該行的大小如下：
- 使這一行全寬：是
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
這些設置將確保我們的行佔據屏幕的整個寬度。
能見度
最後，在桌面上禁用這一行，因為我們還有其他行將顯示在桌面上。
頁面描述的文本模塊
文字設置
繼續將第一個文本模塊添加到行中。 將以下設置應用於文本子類別：
- 文字字體：安迪卡
- 文字字體粗細：常規
- 文字大小：13px
- 文字顏色：#000000
- 文本行高：1.1em
- 文字方向：居中
漿紗
然後，打開 Sizing 子類別，並使用“71%”的寬度和中心模塊對齊。
間距
最後，此文本模塊需要“10px”的頂部和底部填充。 正如您所注意到的，平板電腦和移動版本中不需要邊距值，因為我們選擇了居中對齊。
菜單項的文本模塊
內容框中的鏈接文本
對於移動版本，我們不需要分隔器模塊，因此我們將跳過該步驟。 相反，我們將立即在我們創建的前一個文本模塊的正下方添加導航項文本模塊。 完成此操作後，將帶有鏈接的文本添加到“內容”選項卡中的“內容框”。
漸變背景色
我們將用於此文本模塊的漸變背景與桌面版本一相同：
- 第一種顏色：#FFFFFF
- 第二種顏色：rgba(12,113,195,0.62)
- 漸變類型：線性
- 梯度方向：108deg
- 起始位置：31%
- 結束位置：21%
鏈接文字設置
對文本子類別使用以下設置：
- 鏈接字體：Andika
- 鏈接字體粗細：粗體
- 文字大小：65px
- 文字顏色：#000000
- 文本行高：1em
- 文本方向：左
間距
與桌面版本一樣，此導航項文本模塊需要“80px”的頂部和底部填充以使漸變背景更大。
圖像模塊
上傳圖片
最後，添加一個圖像模塊作為您行中的最後一個模塊並上傳選擇的圖像。
根據需要多次克隆第一個導航行
移動版也同樣重要； 您可以根據需要多次復制剛剛創建的行以添加其他導航項。 每次添加新的導航項時，您需要修改三件事，讓我們來看看。
更改菜單項的文本模塊
更改鏈接
您需要更改的第一件事是導航項文本模塊的內容選項卡的內容框中的文本和鏈接。
根據文本長度更改漸變背景
然後，您還可以將第二個漸變顏色更改為 'rgba(224,43,32,0.62)' 並根據文本的長度更改起始位置值。
更改圖像模塊
最後，您還可以更改該行中圖像模塊的圖像。
結果
創建桌面版和移動版後，您將擁有一個精美的導航頁面，在桌面、平板電腦和手機上看起來都不錯。 讓我們最後看看結果。
桌面上的結果
手機上的結果
最後的想法
創建一個導航頁面作為您的主頁肯定會在您的訪問者身上留下痕跡。 它不僅可以幫助您的訪問者更直觀地導航，而且還可以讓他們看到您網站所提供的內容的更詳細的先睹為快。 如果您有任何問題或建議，請務必在下方評論區留言！
請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！
LanKogal/shutterstock.com 的特色圖片