如何使用 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 中使用侧边栏。

我期待在评论中收到您的来信。

干杯!