WordPress divi主题

如何将 Divi 画廊嵌入到切换中以创建自定义餐厅菜单

| 5月 14, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧。

之前和之后

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

迪维餐厅菜单

迪维餐厅菜单

迪维餐厅菜单

迪维餐厅菜单

入门

用 Divi Gallery Display 替换 WordPress Gallery Display

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

迪维餐厅菜单

WordPress divi主题

设置主题强调色(可选)

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

主题强调色:#a06d51

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

迪维餐厅菜单

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

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

切换图标大小:32

迪维餐厅菜单

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

对于初学者,您需要创建一个新页面,为页面命名,然后部署 Divi Builder。 选择“选择预制布局”选项。

迪维餐厅菜单

从从库加载弹出窗口中,选择 Bakery Layout Pack,然后单击以使用 Bakery 菜单页面布局。

fiverr建站WordPress程序员

迪维餐厅菜单

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

迪维餐厅菜单

完成后,您就可以开始设计菜单了!

使用 Divi 切换和图像库实现自定义餐厅菜单设计

设计菜单项切换

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

独立站选品工具

迪维餐厅菜单

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

<h5>$8.00</h5>

迪维餐厅菜单

然后开始更新切换设置,如下所示:

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

迪维餐厅菜单

高质量外链购买
  • 标题字体:Patua One
  • 标题字体粗细:粗体
  • 标题字体样式:TT
  • 标题字母间距:1px
  • 标题行高度:4em
  • 自定义填充:0px 顶部,0px 底部

迪维餐厅菜单

为了增加toggle title的可点击区域,增加了标题行的高度,并去掉了顶部和底部的padding。

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

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

迪维餐厅菜单

将图片库添加到切换模块

如前所述,当您在 Divi Theme Options 中启用 Divi Gallery 选项时,嵌入的 WordPress Gallery 将采用 Divi Gallery 的样式。 这允许您将 Divi 样式的图像库嵌入到任何模块中。 对于这个例子,我们想在切换模块内添加一些图像来显示特定餐厅菜单项的一些图像。 为此,请打开切换设置并单击内容框上方的添加媒体按钮。

JasperAI 10000字免费额度试用

迪维餐厅菜单

在媒体库弹出窗口中,选择左侧的创建图库选项卡。 然后选择要用于图库的图像,然后单击“创建新图库”。

迪维餐厅菜单

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

迪维餐厅菜单

WordPress备份工具updrafplus

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

迪维餐厅菜单

调整智能手机的行间距

使用预制布局的当前间距,内容将变得非常紧凑。 我们需要更新行设置以在智能手机上创建更多空间。 为此,请打开包含餐厅菜单切换的行的设置并更新以下内容:

  • 自定义填充(电话):左 0 像素,右 0 像素

迪维餐厅菜单

根据需要复制切换

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

最后结果

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

迪维餐厅菜单

迪维餐厅菜单

迪维餐厅菜单

更改图库中的列数

默认情况下,画廊的布局在所有浏览器宽度和设备上保持三列。 但是,通过灯箱效果,用户在单击图库项目时将能够看到更大的版本。 因此,较小的图像仍然可以工作。 但是,如果您想更改列数,您可以随时添加一小段 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 模块创建一些很棒的餐厅菜单。 作为奖励,您可能已经学会了将一些 Divi 画廊嵌入到您想要的任何模块中的新技巧(不仅仅是切换)。 唯一的限制是自定义您希望在您的图库嵌入中显示的列数。 但是,您可以添加一小段自定义 CSS 来让您走上正轨。

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题