如何使用 Divi Theme Builder 在移動設備上優化側邊欄

在某些情況下，在移動設備上保留側邊欄可能有點矯枉過正。 用戶很樂意在他們的平板電腦和手機上滾動瀏覽相關信息（一定程度上）。 但是，當您在頁面的主要內容之後有大量側邊欄內容時，用戶可能永遠無法到達頁腳，頁腳通常包含一些重要的號召性用語。 這就是為什麼在移動設備上優化側邊欄很重要的原因。

在本教程中，我們將介紹使用 Divi Theme Builder 優化移動顯示側邊欄的方法。 以下是我們將在本文中介紹的一些內容：

• 如何創建帶有側邊欄的模板
• 使用 Divi 模塊和 WordPress 小部件創建側邊欄內容
• 使用多個小部件區域在移動設備上隱藏/顯示某些小部件
• 控制移動側邊欄內容之間的間距
• 在移動設備上完全隱藏側邊欄內容
• 在移動設備上隱藏一些側邊欄內容
• 隱藏模塊中的元素以最小化移動設備上的內容
• 通過調整文本大小和間距使側邊欄內容具有響應性
• 如何更改移動側邊欄的堆疊順序

讓我們開始吧。

搶先看

下面是對桌面側邊欄佈局的快速瀏覽，以及它是如何針對移動顯示進行優化的。

在移動設備上下載帶有優化側邊欄的免費模板

要使用本教程中的模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被取消訂閱或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

訂閱我們的 YouTube 頻道

要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。

讓我們開始教程吧？

你需要什麼開始

首先，您需要安裝並激活 Divi 主題。 確保您擁有最新版本的 Divi。

您還需要為測試目的創建一些帖子/頁面，以便頁面內容實際顯示結果。

之後，您就可以開始了。

如何在移動設備上優化 Divi 模板的側邊欄

在我們開始在移動設備上優化側邊欄之前，我們需要先啟動並運行一個工作模型。 我們將使用 Divi Theme Builder 在頁面模板上構建側邊欄。 這將幫助我們更好地了解在 Divi 中構建側邊欄所涉及的內容，以便我們更好地了解如何在移動設備上對其進行優化。

使用側邊欄創建模板

導入 Divi Theme Builder Pack #3

首先，我們將使用 Divi Theme Builder Pack #3 來快速啟動我們的網站設計。 然後，我們將使用其中一個模板來添加我們將針對移動設備優化的側邊欄。

下載包後，解壓縮文件夾。

從 WordPress 儀表板，導航到 Divi > Theme Builder。 然後單擊頁面右上角菜單中的便攜性圖標。 從可移植性模式中，選擇導入選項卡，然後從您之前下載的文件夾中選擇 divi-theme-builder-pack-3-all.json 文件。 然後點擊導入按鈕。

重要提示：請使用全新安裝 Divi 的測試站點，以免覆蓋網站上的實時內容或破壞某些內容。

您將看到所有模板都已導入主題構建器。

在類別頁面模板中構建側邊欄佈局

找到所有類別頁面模板並單擊以編輯自定義正文佈局。

頁面的當前佈局使用一列行作為頁面的主要內容區域。 我們需要將其更改為側邊欄佈局結構。 為此，請單擊第二行行菜單上的“選擇佈局”圖標，然後選擇三分之二三分之一列的佈局結構。

現在，您的側邊欄將在右側有一個區域。

注意：我沒有使用此側邊欄佈局的專業部分。 為您的頁面創建側邊欄佈局時不需要特殊部分，但是，如果您想為主要內容區域保留單獨的行功能，則需要使用特殊部分。

我們不會過多地專注於重新創建本教程中模塊的確切設計。 相反，我們將專注於那些有助於優化移動側邊欄的元素。

也就是說，我們確實需要向側邊欄列添加背景顏色和填充。

側邊欄欄設置

打開為側邊欄指定的列的設置並更新以下內容：

• 背景色：#f2f5f9
• 填充：頂部 25 像素，底部 25 像素，左側 25 像素，右側 25 像素

使用 Divi 模塊和 WordPress 小部件創建側邊欄內容

側邊欄內容將根據網站的需要而有所不同。 但是，如果我們談論的是博客站點，通常您會發現以下側邊欄內容元素的某種組合：

• 作者信息（姓名，圖片，生物）
• 社交媒體關注按鈕
• 電子郵件選擇加入
• 產品和/或服務的鏈接
• 廣告
• 類別
• 最近/熱門帖子

在 Divi 中創建這些元素可以使用 Divi 模塊的組合來完成。 對於此示例，我們將添加以下 Divi 模塊來構建我們的側邊欄內容。

1. 搜索模塊 - 這將用作搜索表單。
2. 電子郵件選擇模塊 - 這將用作電子郵件選擇表單。
3. 文本模塊 - 這將是社交媒體關注按鈕的標題
4. 社交媒體關注模塊 - 這將展示社交媒體關注按鈕。
5. 文本模塊（帶有 bg 圖像）– 這將用作側邊欄的示例廣告。
6. 模糊模塊（帶有作者內容）——這將作為側邊欄的作者信息區域。
7. 文本模塊 - 這將作為其下方博客模塊的標題。
8. 博客模塊 - 這將作為側邊欄上最近/精選的帖子內容。

使用側邊欄模塊拉入 WordPress 小部件

如果您還不熟悉，Divi 有一個側邊欄模塊，允許您將小部件區域內容（或小部件）拉入您的 Divi 側邊欄區域。 事實上，這個模板已經在我們正在處理的那一行的正下方使用了側邊欄小部件。

從行中拖動側邊欄模塊並將其放在電子郵件選擇模塊的正下方。

然後打開側邊欄模塊設置。 如果您在 WordPress 中有默認設置，您將看到該模塊正在拉入側邊欄小部件區域，該區域應如下所示。

使用多個小部件區域

現在“側邊欄”小部件區域顯示多個小部件，因為側邊欄小部件區域內有多個小部件。 但是，您實際上可以通過使用包含單個小部件的多個小部件區域來更好地控制 Divi 的側邊欄設計。 使用多個小部件區域將使您更好地控制小部件的設計以及小部件在移動設備上的可見性。

要創建多個小部件，請打開一個新選項卡並轉到 WordPress 儀表板。 導航到外觀 > 小部件。

通過輸入名稱並單擊“創建”按鈕來創建一個新的小部件區域。 由於這個小部件區域將是我們添加類別小部件的地方，讓我們將該區域命名為“類別”。 刷新頁面以查看小部件區域。 然後將類別小部件拖到類別小部件區域。

重複該過程以創建一個名為“Archives”的新小部件區域。 然後將檔案小部件拖到檔案小部件區域。

使用側邊欄佈局返回類別頁面模板並更新側邊欄模塊內容以顯示類別小部件區域。

複製側邊欄模塊（以保持設計）

更新重複的側邊欄模塊以拉入檔案小部件區域。

控制側邊欄模塊之間的間距

目前，包含側邊欄的行的裝訂線寬度值為 2。這意味著側邊欄內的每個模塊之間將有默認的底部邊距/間距。 為了更好地控制這個間距，我們可以刪除側邊欄列中所有模塊的底部邊距。 為此，請打開搜索模塊設置並更新以下內容：

• 下邊距：0px（桌面），15px（平板）

然後單擊邊距選項上的更多設置圖標（或右鍵單擊菜單）。 然後選擇“擴展保證金”。

在擴展樣式模塊中，更新選項以將邊距擴展到“此列”中的“所有模塊”。

然後我們可以使用分隔模塊在模塊之間添加間距。

優化手機側邊欄

在移動設備上隱藏側邊欄

有時，您可能希望在移動設備上完全隱藏側邊欄。 為此，您需要在平板電腦和手機上禁用包含側邊欄的列的可見性。

打開行設置並打開為側邊欄指定的列的設置。 然後按如下方式更新可見性：

• 禁用：平板電腦、手機

這將隱藏平板電腦和移動顯示器上的整個側邊欄。

在移動設備上隱藏一些側邊欄內容

在桌面上，您可能有空間保留大部分（或全部）側邊欄內容，而不會過多地分散內容的注意力。 但是在移動設備上，用戶將需要滾動瀏覽他或她可能不太感興趣的大量側邊欄內容。 因此，在 Divi Theme Builder 中構建側邊欄時，請利用可見性選項禁用移動顯示上的某些側邊欄元素。 而且，如果您將 WordPress 小部件用於側邊欄內容，請創建多個小部件區域以幫助設計和隱藏移動設備上的某些小部件。

要在移動設備上隱藏模塊，請打開線框視圖模塊，然後使用 Divi 的多選功能選擇要在平板電腦和手機上隱藏/禁用的所有模塊。 然後打開所選模塊之一的設置並更新以下內容：

• 禁用：手機、平板電腦

在這個插圖中，除了平板電腦和手機顯示屏上的兩個側邊欄模塊（包含類別和檔案小部件）和文本模塊（包含廣告）之外，我們隱藏了所有模塊（包括分隔線）。 換句話說，只有類別、檔案和廣告會顯示在移動設備上。

在博客頁面上預覽結果

在我們在直播頁面看到結果之前，我們先將其分配到站點的博客頁面。 為此，請單擊模板上方的齒輪圖標，從列表中選擇博客並保存。

確保在外觀 > 閱讀下選擇了一個帖子頁面。

結果

這是桌面側邊欄和移動側邊欄之間的區別。 請注意移動側邊欄如何包含課程內容。

避免移動設備上重複的側邊欄和頁腳內容

在桌面上，您可以避免在側邊欄和頁腳中添加重複的內容。 事實上，這是提高轉化率的好方法。 例如，在桌面上，在側邊欄頂部和頁腳內包含一個電子郵件選擇模塊是有意義的，這樣用戶就可以在閱讀帖子內容時以及在帖子末尾看到電子郵件選擇。 但是，在移動設備上，沒有側邊欄佈局。 一切都顯示在一列（可能是兩列）中。 右側邊欄堆疊在帖子/頁面內容下方，左側邊欄堆疊在帖子/頁面內容頂部。 因此，如果側邊欄電子郵件選擇模塊堆疊在帖子/頁面內容下，用戶可以滾動瀏覽多個電子郵件選擇模塊（一個在側邊欄中，一個在頁腳中）。 此外，如果右側邊欄底部有電子郵件選項，頁腳頂部有一個選項，用戶將在移動設備上滾動瀏覽兩個連續的電子郵件選項。

隱藏模塊中的元素以最小化移動設備上的內容

您可能認為不需要在移動設備上隱藏整個模塊。 相反，您可以通過僅在移動顯示上隱藏某些元素來最小化模塊內容。

例如，您可能希望在桌面側邊欄上顯示精選圖片和精選帖子。 但是，在移動設備上，您可以隱藏特色圖片和摘錄以創建內容的最小化版本。

使側邊欄內容具有響應性

您可以決定在移動顯示上保留所有側邊欄內容。 為什麼不？ 如果您知道用戶會欣賞有價值的信息，請務必保留它。 但是，您需要採取措施確保側邊欄內容具有響應性。 這意味著，您需要調整元素的大小和間距以適應較小的屏幕。 這將減少頁面的滾動距離並使內容更易於閱讀。

在移動設備上調整文本大小

最小化垂直間距並提高移動設備可讀性的一種簡單方法是調整側欄中模塊內容的文本大小。 例如，您可以將標題文本從桌面上的 24 像素調整為移動設備上的 14 像素。

在移動設備上調整間距/分隔線

在這個例子中，我們在模塊之間添加了分隔線來創造空間。 但是，我們可以使用 Divi 的分隔線設置來調整移動設備上這些分隔線的間距。 這將減少滾動時浪費的空間。

例如，您可以在平板電腦和手機上將分隔線的頂部和底部邊距從 30 像素更改為 15 像素。

更改移動側邊欄的堆疊順序

堆疊順序是側邊欄的常見問題。 對於左側邊欄尤其如此。 正如我之前提到的，右側邊欄堆疊在帖子/頁面內容之下（或之後），左側邊欄堆疊在帖子/頁面內容之上（或之前）。 這意味著當您在移動設備上查看帶有左側邊欄的頁面時，用戶首先看到的是側邊欄內容，而不是帖子/頁面的主要內容。 這對用戶體驗不利。 要解決此問題，您可以完全隱藏側邊欄，也可以更改堆疊順序，使左側邊欄位於移動設備上的帖子/頁面內容下方。

要將左側邊欄的堆疊順序更改為在移動設備上的頁面內容下方（或之後）堆疊，請打開包含側邊欄佈局的行的行設置。 然後將以下自定義 CSS 添加到主元素：

 display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

然後打開指定為側邊欄的列的列設置，並將以下自定義 CSS 添加到 Main Element Tablet 顯示：

order: 2;

如果您沒有猜到，這個小片段將順序從默認值（“1”）更改為值“2”，這會導致整個列/側邊欄堆疊在包含主要內容的列的下方/之後。

最後的想法

側邊欄仍然是用戶熟悉的空間，在他們與頁面的主要內容互動時提供有用的次要內容。 但是，移動設備上相同的側邊欄內容可能會分散注意力。 希望這篇文章能激勵您在平板電腦和手機上給予側邊欄應有的關注。 這可能意味著您完全隱藏側邊欄，僅顯示部分側邊欄內容，或專門針對移動顯示簡單優化現有內容。

本教程中為模板構建的側邊欄是使用主題構建器佈局包 #3 中的現有設計元素設計的。 如果您喜歡帶有側邊欄的此模板的設計，請隨時在上方下載以仔細查看。

有關更多信息，請查看此指南以在 Divi Theme Builder 中使用側邊欄。

我期待在評論中收到您的來信。

乾杯!