如何在 Divi 中為全角菜單模塊添加響應式徽標

您是否知道超過 50% 的互聯網流量來自移動設備？ 這意味著您網站的移動版本非常重要，甚至可能是人們訪問您頁面的主要方式。 確保您的網站響應迅速且適合移動設備是設計網站的重要步驟。 在本教程中，我們將向您展示如何使用 Divi 的內置響應選項將響應徽標添加到全角菜單模塊。 這將允許您添加將出現在更大屏幕上的更大或更複雜的徽標，以及將出現在較小屏幕上的更小或更簡單的徽標。

讓我們潛入吧！

訂閱我們的 Youtube 頻道

搶先看

這是我們將設計的預覽。 網站的桌面版將有一個帶有附加文字的擴展標誌，而移動版的標誌將只有基本的標誌標記。

為什麼需要響應式徽標

在開始本教程之前，讓我們回顧一下為什麼您可能需要在您的網站上使用響應式徽標。

首先，什麼是響應式徽標？ 響應式徽標是您的徽標的變體，它可能更小、更簡單、縮寫或重新排列，以便在更小的尺寸下更醒目和易讀。 如果您的徽標有太多詳細的元素，它們可能無法在較小的尺寸下很好地顯示出來。 響應式徽標中的小字體和額外的排版也很難在小屏幕上閱讀。 通過在您的網站上實施針對用戶屏幕尺寸量身定制的響應式徽標，無論如何，您都可以確保清楚地展示您的品牌標識。 有關響應式徽標的一些很好的示例，請查看此網站！

你需要什麼開始

首先，安裝並激活 Divi 主題並確保您的網站上有最新版本的 Divi。 接下來，確保您至少有兩個版本的徽標——一個用於您網站的桌面視圖，一個用於移動視圖。 最後，下載 Divi's High School Layout Pack 的頁眉和頁腳模板。

現在，您可以開始了！

如何在 Divi 中為全角菜單模塊添加響應式徽標

導入頁眉和頁腳佈局

從側邊欄中的 Divi 菜單導航到 Theme Builder。 通過選擇可移植性圖標導入高中頁眉和頁腳佈局。 選擇導入選項卡並選擇佈局文件。 然後選擇導入 Divi 主題生成器模板。

我們將編輯標題並在主題構建器中添加我們的響應式徽標。 單擊鉛筆圖標以編輯標題。

創建全角菜單模塊

添加全角部分

由於原始菜單是使用標準菜單模塊構建的，因此我們需要修改佈局以添加全角菜單模塊。 首先，在現有菜單下方的全局標題中添加一個全角部分。

在全角部分設置中，導航到高級，然後滾動效果。

• 粘性位置：堅持頂部

接下來，添加背景顏色。

• 背景顏色：#f5f0eb

為粘性背景添加不同的顏色。

• 粘性背景顏色：#ffffff

添加全角菜單模塊

現在讓我們添加全角菜單模塊。

打開模塊設置並刪除背景。

為了輕鬆複製原始菜單的外觀，我們可以使用複製樣式功能複制一些自定義設置。 打開原始菜單的設置，然後右鍵單擊菜單文本樣式並選擇複製菜單文本樣式。

複製後，單擊全角菜單模塊的三個點，然後選擇粘貼菜單文本樣式。

現在我們將使用下拉菜單設置重複相同的步驟。 打開原始菜單的設置，然後右鍵單擊下拉菜單樣式並選擇複製下拉菜單樣式。 單擊全角菜單模塊的三個點，然後選擇粘貼下拉菜單樣式。

對圖標樣式重複一次。 打開原始菜單的設置，然後右鍵單擊圖標樣式並選擇複製圖標樣式。 單擊全角菜單模塊的三個點，然後選擇粘貼圖標樣式。

將文本對齊設置為右對齊。

• 文本對齊：右

在 Design 下設置 logo 最大高度，然後在 Sizing 下設置。

• 標誌最大高度：50px

將以下 CSS 添加到自定義 CSS 下的菜單鏈接部分。

padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;

最後，設置頂部和底部填充。

• 上邊距：10px
• 填充-底部：10px

現在刪除原來的菜單部分。

添加響應式徽標

現在我們將添加響應式徽標。 值得慶幸的是，Divi 通過內置的響應選項使這一切變得容易。

在常規下，打開徽標設置並上傳您的徽標的桌面版本。

選擇電話圖標以使用響應式選項，然後將移動設備徽標替換為您的響應式徽標。

使用預製佈局創建新頁面

要查看帶有響應式徽標的全角菜單，讓我們使用 Divi 庫中的預製佈局創建一個新頁面。 對於此設計，我們將使用高中佈局包中的高中主頁來匹配頁眉和頁腳。

向您的網站添加一個新頁面並為其命名，然後選擇使用 Divi Builder 選項。 由於我們將頁眉和頁腳佈局導入為全局頁眉和頁腳，因此請使用此頁面的默認佈局。

在本示例中，我們將使用 Divi 庫中的預製佈局，因此選擇瀏覽佈局。

搜索並選擇高中主頁佈局。

選擇使用此佈局將佈局添加到您的頁面。

最後結果

現在讓我們看看我們的最終設計。

最後的想法

擁有一個適合移動設備且響應迅速的網站比以往任何時候都更加重要。 並且由於 Divi 的內置響應選項，構建一個比以往更容易！ 使用響應式徽標，無論屏幕尺寸如何，您的品牌標識都將始終清晰。 如果您有興趣了解有關 Divi 響應式選項的更多信息，請查看有關響應式推薦內容的教程。 您是如何在您的網站中實施響應式設計的？ 我們很樂意在評論中聽到您的想法！