如何将 Divi Gallery 嵌入 Toggles 以创建自定义餐厅菜单

在网页上使用切换是一种以简洁明了的方式组织内容的好方法。 这可以通过减少滚动并让用户更好地控制他们想要在您的页面上看到的内容来帮助提升用户体验。 在线餐厅菜单是一个很好的例子，其中切换可以很好地工作。 用户可以轻松找到他们喜欢的菜单项，然后单击该项目以获取更多信息。

在本教程中，我将向您展示如何使用 Divi 切换为您的餐厅菜单创建一些直观且适合移动设备的切换。 我什至会向您展示如何优化您的移动切换，并将 Divi 图像库嵌入您的切换内容中，以展示特定菜肴的精美照片。

让我们开始吧。

之前和之后

这是我们将要构建的餐厅菜单设计前后的先睹为快。

前

后

入门

用 Divi Gallery Display 替换 WordPress Gallery Display

Divi 允许您用 Divi Gallery 显示替换默认的 WordPress Gallery 显示。 因此，每当您创建一个 WordPress 画廊并将其嵌入到您的页面时，该画廊就会像使用 Divi Gallery Module 的画廊一样显示。 这允许您将 Divi 图像库添加到 Divi Builder 中的任何模块（稍后会详细介绍）。 要实现此更改，请导航到 Divi > 主题选项。 在“常规”选项卡下，单击以启用“Divi Gallery”选项。

设置您的主题强调色（可选）

由于我们将在切换模块中插入一个 Divi 画廊，当您将鼠标悬停在画廊中的图像上时显示的图标颜色将自动继承您为 Divi 主题设置的强调色。 您可以通过导航到 Divi > Theme Customizer > General Settings > Layout Settings 从 WordPress 仪表板设置主题强调色。 在布局设置下，将主题访问颜色更新为以下内容：

主题强调色：#a06d51

这是与我们将在本教程中使用的面包店菜单布局相匹配的颜色。

更新模块定制器中的默认切换图标大小（可选）

对于这个设计，我认为在使用 Divi Toggle 模块时显示一个更大的切换图标会很有帮助。 您可以通过导航到 Divi > Module Customizer 来更改切换模块的默认大小。 然后从列表中选择 Toggle Module 并更新图标大小，如下所示：

切换图标大小：32

使用面包店菜单页面布局设置新页面

首先，您需要创建一个新页面，为页面指定标题，然后部署 Divi Builder。 选择“选择预制布局”选项。

从库加载弹出窗口中，选择 Bakery Layout Pack，然后单击以使用 Bakery Menu Page Layout。

将布局加载到页面后，发布您的页面。 然后单击“在前端构建”按钮。 然后发布您的页面。 然后在前端点击构建。

完成后，您就可以开始设计菜单了！

使用 Divi Toggles 和 Image Gallery 实现自定义餐厅菜单设计

设计菜单项切换

在前端激活 Divi Builder 的情况下，在文本模块下添加一个 Toggle 模块，其副标题为“Sweet Tooth”。

现在，您可以保留用于标题和正文内容的默认模拟内容。 但是，您需要在选项卡的正文内容中为菜单项添加价格。 单击 Text 选项卡（而不是 Visual）并在当前默认文本下添加以下 html。

<h5>$8.00</h5>

然后开始更新切换设置，如下所示：

• 图标颜色：#a06d51
• 打开切换文本颜色：#333333
• 关闭切换文本颜色：#333333
• 关闭切换背景颜色：#ffffff

• 标题字体：Patua One
• 标题字体粗细：粗体
• 标题字体样式：TT
• 标题字母间距：1px
• 标题行高度：4em
• 自定义填充：0px 顶部，0px 底部

为了增加切换标题的可点击区域，增加了标题行高度并去掉了上下内边距。

现在让我们为我们的切换添加一个左边框。

• 左边框宽度：5px
• 左边框颜色：#a06d51

将图片库添加到切换模块

如前所述，当您在 Divi 主题选项中启用 Divi Gallery 选项时，嵌入的 WordPress Gallery 将采用 Divi Gallery 的风格。 这允许您将 Divi 风格的图片库嵌入到任何模块中。 对于此示例，我们希望在切换模块内添加一些图像以显示特定餐厅菜单项的一些图像。 为此，请打开切换设置并单击内容框上方的添加媒体按钮。

在 Media Library 弹出窗口中，选择左侧的 Create Gallery 选项卡。 然后选择要用于图库的图像，然后单击“创建新图库”。

在弹出窗口的 Edit Gallery 部分，忽略画廊设置，因为 Divi Gallery 样式将覆盖这些 WordPress Gallery 设置。 然后单击插入图库按钮。

这会在切换模块内容中放置一个图库短代码。 如果您希望图库显示在当前正文之后，请确保将短代码放在内容之后。

调整智能手机的行填充

内容会随着预制布局的当前间距变得非常紧凑。 我们需要更新行设置以在智能手机上创建更多空间。 为此，请打开包含餐厅菜单开关的行的设置并更新以下内容：

• 自定义填充（电话）：左 0px，右 0px

根据需要复制切换

要添加更多菜单项，只需复制 Toggle 模块并根据需要使用新的文本和图像库更新内容。 之后，您可以删除预制布局附带的原始菜单项。

最后结果

现在让我们看看设计的最终结果。

更改图库中的列数

默认情况下，图库的布局在所有浏览器宽度和设备上保持三列。 但是，借助灯箱效果，用户在单击图库项目时将能够看到更大的版本。 因此，较小的图像仍然可以工作。 但是，如果您想更改列数，您始终可以添加一小段 CSS。 对于此示例，我将更改图库以将图像显示为两列。 为此，首先打开切换设置并添加一个自定义 CSS 类，如下所示：

CSS 类：两col-gal

然后打开页面设置并添加以下自定义 CSS：

.two-col-gal .et_gallery_item {
width: 50%;
padding: 2%;
margin: 0;
clear: none !important;
}

在模块定制器中更改图库覆盖颜色

如果您想在不使用自定义 CSS 的情况下更改图库项目悬停覆盖的颜色，您可以在模块定制器中更改图库模块的默认设置。 为此，请导航到 Divi > Module Customizer。 然后单击图库模块并将悬停覆盖颜色更改为您想要的任何颜色。

最后的想法

希望本教程能为如何使用 Divi Toggle Module 创建一些很棒的餐厅菜单提供一些灵感。 作为奖励，您可能已经学会了将一些 Divi 画廊嵌入到您想要的任何模块中的新技巧（不仅仅是切换）。 唯一的限制是自定义您想要在画廊嵌入中显示的列数。 但是，您可以添加一小段自定义 CSS，让您走上正轨。

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

干杯!