如何使用 Divi 創建響應式圖標導航主頁

當您使用 WordPress 構建網站時，您始終可以選擇當人們直接訪問您的網站時首先顯示哪個頁面。 大多數網站創建者立即將訪問者發送到他們的主頁。 但是您也可以選擇另一種方法，通過添加圖標導航頁面作為您的主頁，允許訪問者選擇他們首先訪問您網站上的哪個頁面。 一旦人們點擊進入他們選擇的頁面，他們將再次擁有正常的網站體驗，頁面頂部的菜單欄允許他們導航到其他頁面。 這意味著一旦他們在第一次交互後通過它，他們就不必返回到這個圖標導航頁面。

在本教程中，我們將向您展示如何創建一個現代的 100% 響應式圖標導航主頁，該主頁在所有屏幕尺寸上都看起來不錯。 我們還將幫助您將其設為您網站的主頁，並在第一次交互時刪除主菜單欄和頁腳。

讓我們開始吧！

預覽

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

創建新頁面

訂閱我們的 YouTube 頻道

添加新頁面

首先向您的 WordPress 網站添加一個新頁面。

為您的頁面命名並發布

為您的頁面命名並立即發布頁面。

將頁面設置為主頁

進入網站閱讀設置

然後，轉到您網站的閱讀設置。

將新頁面設置為主頁

在這裡，我們將選擇新的圖標導航頁面作為我們網站的主頁。

隱藏圖標導航頁面上的主菜單欄和頁腳

返回圖標導航頁面並啟用 Divi 的 Visual Builder

現在我們已經選擇了主頁，我們可以開始構建我們的圖標導航頁面。 返回您創建的頁面並切換到 Divi 的 Visual Builder。

一旦你這樣做，你會得到三種可能性。 您可以從頭開始構建，選擇預製佈局或克隆現有頁面。 選擇第一個選項。

添加自定義 CSS 以僅在此頁面上隱藏主菜單欄和頁腳

因為這是一個導航頁面，所以我們希望將焦點放在我們手動創建的菜單項上。 這就是我們將隱藏此頁面上的主菜單欄和頁腳的原因。 一旦人們繼續訪問該網站，他們就會恢復主菜單欄和頁腳。

#main-header, #main-footer {
display: none;}

讓我們開始設計吧！

添加第 1 節

讓我們開始使用 Divi 創建我們的響應式設計！ 添加第一個常規部分。

添加行

列結構

繼續使用以下列結構添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並在大小設置中啟用“使此行全寬”選項。

• 使這一行全寬：是

添加圖像模塊

上傳公司標誌

我們在這一行中需要的第一個模塊是圖像模塊。 上傳您的公司徽標，讓人們知道他們已登陸正確的網站。

結盟

然後，在設計選項卡中更改圖像對齊方式。 確保禁用“在移動設備上始終居中圖像”選項。

• 圖像對齊：左

間距

接下來添加一些自定義底部邊距。

• 底部：10vw（台式機），20vw（平板電腦和手機）

添加文本模塊

添加H1內容

我們需要的下一個模塊是文本模塊。 添加一些您選擇的 H1 內容。

H1 文本設置

繼續修改設計選項卡中的 H1 文本設置。

• 標題字體：Didact Gothic
• 標題字體粗細：粗體
• 標題文本對齊方式：左
• 標題文字顏色：#333333
• 標題文字大小：5vw（桌面）、6vw（平板電腦）、7vw（手機）
• 標題線高度：0.8em

漿紗

接下來修改大小設置。

• 寬度：68%（桌面）、80%（平板）、88%（手機）
• 模塊對齊：左

添加分頻器模塊

能見度

我們在這一行中需要的下一個也是最後一個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

顏色

然後，轉到設計選項卡並更改圖標顏色。

• 顏色：#333333

漿紗

也修改模塊的大小設置。

• 分隔線重量：10px
• 寬度：8%（桌面）、20%（平板電腦）、25%（手機）
• 模塊對齊：左

添加第 1 節

進入下一節！ 在前一個下面添加一個常規部分。

添加行

列結構

繼續向該部分添加新行。

漿紗

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

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

間距

然後，轉到間距設置並在不同的屏幕尺寸上進行一些更改。

• 底部填充：0.2vw
• 左填充：4vw（桌面）、2vw（平板電腦）、1vw（手機）
• 右填充：25vw（桌面）、2vw（平板電腦）、1vw（手機）
• 第 1 列右填充：0.2vw
• 第 2 列左填充：0.1vw
• 第 2 列右填充：0.1vw
• 第 3 列左填充：0.2vw

自定義 CSS

通過向高級選項卡中的主要元素添加一行 CSS 代碼，我們確保所有列都彼此相鄰顯示，即使在平板電腦和手機上也是如此。

display: flex;

將 Blurb 模塊添加到第 1 列

添加標題

現在我們可以開始添加我們的模塊了！ 將新的 Blurb 模塊添加到第一列並輸入標題。

選擇圖標

然後，選擇您選擇的圖標。

關聯

還要添加到模塊的鏈接。 確保使用正確的 URL，將訪問者引向他們想要訪問的頁面。

• 模塊鏈接網址：https://www.yourwebsite.com/homepage

漸變背景

接下來添加漸變背景。

• 顏色 1：#4b42ff
• 顏色 2：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：中心
• 起始位置：60%
• 結束位置：60%

背景圖片

連同背景圖片。 將以下圖像保存到桌面：

並將其與以下背景設置結合使用：

• 背景圖片位置：中心
• 背景圖像重複：不重複

圖標設置

繼續修改設計選項卡中的圖標設置。

• 圖標顏色：#ffffff
• 圖標位置：頂部
• 使用圖標字體大小：是
• 圖標字體大小：4vw（桌面）、6vw（平板電腦）、8vw（手機）

標題文字設置

也更改標題文本設置。

• 標題字體：Didact Gothic
• 標題文本對齊：居中
• 標題文字顏色：#ffffff
• 標題文字大小：2vw（桌面）、3vw（平板電腦）、4vw（手機）
• 標題字母間距：-2px
• 標題行高度：0em

間距

並為不同的屏幕尺寸添加一些自定義的頂部和底部填充值。

• 頂部填充：9vw（台式機和平板電腦），12vw（手機）
• 底部填充：9vw（台式機和平板電腦），12vw（手機）

克隆 Blurb 模塊兩次並在剩餘列中放置重複項

修改完第 1 列中的 Blurb 模塊後，您可以繼續克隆該模塊兩次。 將重複項放在行的其餘列中。

更改模糊內容

當然，您需要更改每個副本的標題。

更改模糊圖標

隨著圖標。

更改模糊鏈接

將新的 Blurb 模塊與指向正確頁面的唯一 URL 匹配。

• 模塊鏈接網址：https://www.yourwebsite.com/about

更改模糊漸變背景

然後，更改兩個副本的漸變背景的第一種顏色。

• 顏色 1：#f9f9f9

• 顏色 1：#ff445d

更改第 2 列中模糊模塊的圖標和文本顏色

並將 Blurb 模塊的圖標和文本顏色與新的漸變背景顏色相匹配。

• 圖標顏色：#000000
• 標題文字顏色：#000000

克隆整行

完成該行後，您可以完全克隆它。

克隆第 2 列中的 Blurb 模塊

克隆第 2 列中的 Blurb 模塊。

將光背景模糊模塊放在第 1 列和第 3 列中

並將淺色背景的 Blurb Modules 放在第 1 列和第 3 列中。

將顏色背景模糊模塊放在第 2 列中

將顏色背景模糊模塊之一移動到第二列。

移除剩餘的模糊模塊

並刪除剩餘的 Blurb 模塊。

更改模糊內容

同樣，您需要更改每個 Blurb 模塊的標題。

更改模糊圖標

隨著圖標。

更改模糊鏈接

還有鏈接。

• 模塊鏈接網址：https://www.yourwebsite.com/shop

更改第 2 列中 Blurb 模塊的漸變背景

最後但並非最不重要的一點是，更改第 2 列中 Blurb 模塊的漸變背景的第一種顏色。

• 顏色 1：#000000

預覽

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

最後的想法

在這篇文章中，我們向您展示瞭如何創建圖標導航頁面並將其用作主頁。 這種方法允許您的訪問者在查看網站內容之前選擇他們導航到的頁面。 一旦有人點擊菜單項，他們將再次體驗通過主菜單欄的正常導航。 如果您有任何問題或建議，請務必在下方評論區留言！