使用 Divi 的新列結構創建引人注目的導航儀表板

正在尋找一種全新且獨特的方式來構建您的主頁？ 創建導航儀表板可能是要走的路。 在本教程中，我們將向您展示如何實現可用於多種用途的令人驚嘆的儀表板頁面。

無論您是想改變人們在您的頁面上導航的方式，還是想突出顯示您公司提供的服務，創建儀表板都將幫助您準確實現您的想法。 我們僅使用 Divi 的內置選項，除此之外，我們還為您提供了可以使用的淺色和深色調色板。 本教程的靈感來自 Edoardo Mercati 的設計之一。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們先看看不同屏幕尺寸的最終結果：

調色板

在開始之前，您可以選擇是要創建淺色儀表板還是深色儀表板。 下面列出了每個調色板所需的顏色。 確保將這些顏色代碼保持緊密，以便在完成本教程後可以使用它們。 當使用特定於調色板的顏色時，我們將參考顏色編號。

光

• 顏色 #1： #f6f6f6（部分背景）
• 顏色 #2： #ffffff（列背景）
• 顏色 #3： #333333（標題文字顏色）
• 顏色 #4： #000000（分隔線顏色）
• 顏色 #5： #6F6B68（正文顏色模糊）
• 顏色 #6： #e5e5e5（列背景 2）
• 顏色 #7： #ffffff（模糊背景色）

黑暗的

• 顏色 #1： #141414
• 顏色 #2： #212121
• 顏色 #3： #ffffff
• 顏色 #4： #ffffff
• 顏色 #5： #dddddd
• 顏色 #6： #212121
• 顏色 #7： #333333

互色

• 顏色 #7： #0457ff
• 顏色 #8： #cc0432
• 顏色 #9： #839e00
• 顏色 #10： #c68e00

讓我們開始創造

添加新標準截面

背景顏色

首先向您的頁面添加一個新部分。 然後，打開部分設置並添加背景顏色：

• 背景顏色：顏色 #1（在調色板中查找）

間距

為了在頂部和底部創建一些額外的空間，我們還將應用一些自定義填充：

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

添加第 1 行

列結構

現在我們已經完成了對部分設置的修改，我們可以開始添加行了。 為第一行選擇以下列結構：

第 1 列背景顏色

尚未添加任何模塊，打開行設置並添加第 1 列背景顏色：

• 第 1 列背景顏色：顏色 #2（在調色板中查找）

漿紗

接下來轉到“設計”選項卡並更改行的大小設置：

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：2
• 均衡柱高：是

間距

最後，向行和第一列添加一些填充：

• 底部填充：100px
• 第 1 列頂部填充：100px
• 第 1 列底部填充：100px
• 第 1 列左填充：50px
• 第 1 列右填充：50px

將標題文本模塊添加到第 1 列

H1 文本設置

是時候開始添加模塊了！ 我們將從添加標題文本模塊開始。 添加 H1 副本後，更改模塊的標題文本設置：

• 標題字體粗細：粗體
• 標題文本對齊方式：左
• 標題文本顏色：顏色 #3（在調色板中查找）
• 標題文字大小：75 像素（桌面）、55 像素（平板電腦）、36 像素（手機）

將分頻器模塊添加到第 1 列

分隔線顏色

在標題文本模塊的正下方，繼續添加一個具有以下顏色的分隔線模塊：

• 分隔線顏色：顏色 #4（在調色板中查找）

漿紗

接下來打開大小設置並調整分隔線的寬度：

• 寬度：27%

間距

在分隔線的頂部添加一些空間：

• 上邊距：50px

將描述文本模塊添加到第 1 列

文字設置

此行中的下一個也是最後一個模塊是描述文本模塊。 添加內容後，在文本設置中更改文本方向：

• 文本方向：對齊

漿紗

還要更改此模塊的大小設置：

• 寬度：80%（桌面），100%（平板電腦和手機）

間距

並使用自定義邊距在模塊頂部添加一些空間：

• 上邊距：50px

將 Blurb 模塊添加到第 2 列

圖標

我們現在可以轉到第二列。 我們將首先創建一個 Blurb 模塊。 之後，我們可以克隆這個模塊並進行相應的更改。 添加 Blurb 模塊並更改內容後，選擇您選擇的圖標。

背景顏色

繼續為您的 Blurb 模塊添加背景顏色：

• 背景顏色：顏色 #7（在調色板中查找）

背景圖案

將以下小圖案保存到您的計算機：

將其上傳為您的背景圖片以及以下設置：

• 背景圖片尺寸：實際尺寸
• 背景圖片位置：中心
• 背景圖像重複：重複

圖標設置

轉到“設計”選項卡，打開“圖像和圖標”設置並相應地更改設置：

• 圖標顏色：顏色 #7（在調色板中查找）
• 圓形圖標：是
• 圓圈顏色：#FFFFFF
• 使用圖標字體大小：33px

文字設置

然後，打開文本設置並進行一些更改：

• 文字方向：居中
• 文字顏色：淺

標題文字設置

我們的 Blurb 模塊的標題也需要一些額外的更改：

• 標題字體粗細：超粗
• 標題字體樣式：大寫

間距

最後但並非最不重要的一點是，添加一些自定義填充來為您的 Blurb 模塊提供您想要的外觀和感覺：

• 頂部填充：75px
• 底部填充：75px
• 左填充：30px
• 右填充：30px

克隆 Blurb 模塊 3 次並將 2 放在剩餘列中

現在我們已經完成了第一個 Blurb 模塊，繼續克隆它 3 次。 在第一列中留下一個重複項，並將另外兩個放在行的剩餘列中。

更改新的模糊模塊

更改圖標

對於每個重複項，您都需要更改正在使用的圖標。

更改背景顏色

同樣，您需要將背景顏色更改為所選顏色或調色板中的一種顏色（顏色 #8、#9 或 #10）。

更改圖標顏色

將圖標顏色更改為與背景相同的顏色。

添加第 2 行

列結構

第二行需要以下列結構：

漿紗

打開行設置，轉到大小設置並增加行的寬度：

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：2

間距

接下來打開間距設置，並在行的頂部和底部添加一些自定義填充：

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

添加文本模塊

H2 文本設置

在該行的列中，您需要的第一個模塊是標題文本模塊。 添加 H2 內容後，更改 H2 文本設置：

• 標題 2 字體粗細：粗體
• 標題 2 文本對齊方式：左
• 標題 2 文本顏色：顏色 #3（在調色板中查找）
• 標題文字大小：32px

添加分頻器模塊

分隔線顏色

在標題文本模塊的正下方，添加一個具有以下顏色的分隔線模塊：

• 顏色：顏色 #4（在調色板中查找）

漿紗

接下來更改分隔線的寬度：

• 寬度：9%

間距

最後，在分隔線的頂部添加一些空間：

• 頂部填充：20px

添加第 3 行

列結構

要共享突出顯示的功能，請為新行選擇以下列結構：

列背景顏色

打開行設置並將以下背景顏色添加到每一列：

• 列背景顏色：顏色 #6（在調色板中查找）

漿紗

接下來增加行的寬度：

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：2
• 均衡柱高：是

間距

並添加一些填充：

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

將 Blurb 模塊添加到第 1 列

圖標

我們現在可以開始添加不同的模塊。 我們將從第一列​​中的 Blurb 模塊開始。 添加內容後，選擇您選擇的圖標。

背景顏色

接下來為您的 Blurb 模塊設置背景顏色：

• 背景顏色：顏色 #7（在調色板中查找）

圖標設置

轉到“設計”選項卡並更改圖標設置：

• 圖標顏色：#ffffff
• 圓形圖標：是
• 圓圈顏色：顏色 #7（在調色板中查找）
• 使用圖標字體大小：是
• 圖標字體大小：33px

文字設置

還要更改 Blurb 模塊的文本方向：

• 文字方向：居中

標題文字設置

接下來轉到標題文本設置並進行一些更改：

• 標題字體粗細：超粗
• 標題字體樣式：大寫
• 標題文本顏色：顏色 #3（在調色板中查找）

正文設置

Blurb 模塊的正文也需要另一種顏色：

• 正文顏色：顏色 #5（在調色板中查找）

間距

最後，向您的 Blurb 模塊添加一些自定義間距設置：

• 頂部填充：50px
• 底部填充：50px
• 左填充：30px
• 右填充：30px

將按鈕模塊添加到第 1 列

按鈕對齊

在 Blurb 模塊的正下方，繼續添加一個按鈕模塊。 打開其設置並更改按鈕對齊方式：

• 按鈕對齊：居中

按鈕設置

接下來更改按鈕的外觀：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：15px
• 按鈕文字顏色：顏色 #3
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px
• 字體粗細：超粗
• 字體樣式：大寫

間距

在按鈕模塊的底部添加一些邊距：

• 下邊距：30px

克隆 Blurb 和按鈕模塊 3 次並放置在剩餘列中

將第一列中的兩個模塊克隆 3 次，並將它們放在行的其餘列中。

更改新的模糊模塊

更改圖標

將每個重複的 Blurb 模塊的圖標更改為選擇的新圖標。

更改圖標顏色

還要更改圖標顏色。 隨意使用調色板的#8、#9 和#10。

克隆行

定位和克隆行

為了顯示所有功能，而不僅僅是突出顯示的功能，我們將克隆包含標題的行。

放置行

然後，我們將把它放在我們創建的最後一行的正下方。

克隆行

定位和克隆行

對包含突出顯示的 Blurb 模塊的行執行相同的操作。

放置行

並將其放在您的新標題下方。

更改列結構

為了在這一行中顯示更多功能，我們將把列結構改為 5 列而不是 4 列：

添加第 5 列的背景色

還將列背景顏色添加到新列中：

• 列背景顏色：顏色 #6（在調色板中查找）

克隆 Blurb 和按鈕模塊並放置在第 5 列中

克隆您所在行中的一個 Blurb 模塊，並通過在第 5 列中放置副本來填充空間。同時更改圖標和圖標顏色。

克隆 5 列行

最後但並非最不重要的一點是，克隆這個 5 列的行以創建兩行，其中包含您想要提供的所有功能，然後就完成了！

預覽

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

最後的想法

儀表板看起來很棒，讓您可以輕鬆地在您的網站上進行用戶導航。 在這篇文章中，我們分享了一個令人驚嘆的儀表板設計，它帶有兩個調色板，您可以僅使用 Divi 的內置選項從頭開始創建。 如果您有任何問題或建議，請務必在下方評論區留言！