WordPress divi主题

如何在 Divi 中创建浮动弹出菜单

by | May 16, 2022 | Divi主题使用教程 | 0 comments

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

向您的网站添加浮动弹出菜单将使访问者可以在整个页面中随时轻松访问您的菜单。 这对于在页面顶部补充您的主要导航的子导航菜单非常有用。 它还允许您显示特定于您的页面内容的菜单。 例如,您可能希望为您的服务页面提供一个自定义子导航菜单,该菜单提供指向所有不同服务的链接。

google广告开户

在本教程中,我将向您展示如何在 Divi 中创建浮动弹出菜单。 基本思想是利用 Divi 的手风琴模块来实现菜单功能,然后将高级自定义添加到一行以将其浮动到页面的左侧,并在悬停在该行的一部分上时将其弹出。

让我们开始吧!

抢先看

以下是我们将在本教程中构建的设计和功能的快速预览:

divi 弹出菜单

你需要什么

对于本教程,您将需要以下内容:

添加页面布局

对于本教程,我将使用 Charity Layout Pack 中的 Charity Donate 页面布局。 要将预制布局添加到您的页面,首先创建一个新页面并为您的页面指定一个标题。 然后部署可视化构建器。 选择“选择预制布局”选项。 从从库加载弹出窗口中,选择 Charity Layout Pack 并单击以使用捐赠页面。

divi 弹出菜单

将布局添加到页面后,您就可以开始了!

WordPress divi主题

为您的弹出菜单添加部分和行

首先,我们需要在页面顶部添加一个新部分。 然后添加具有四分之三四分之一列布局的行。

divi 弹出菜单

在左栏中,添加一个新的手风琴模块。 更新(或创建)总共三个手风琴。 对于每个手风琴的内容,添加一个标题(这将作为您的子导航菜单的类别菜单项。并在内容框中,创建一些链接(每个在单独的行上)作为您的子菜单项。

divi 弹出菜单

divi 弹出菜单

给每个手风琴一个自定义边距:

自定义边距:0px 顶部,0px 底部

要使手风琴与布局设计相匹配,请复制页面上正在使用的切换模块之一并将其粘贴到您的手风琴行中(位置无关紧要,我们只是暂时将其保存在这里)。 现在我们将使用 Divi 的扩展样式功能将切换的样式扩展到我们的新手风琴。 为此,请打开切换设置并右键单击图标类别标题,然后从列表中选择“扩展图标样式”。

divi 弹出菜单

然后选择将图标样式扩展到该部分中的所有手风琴。

fiverr建站WordPress程序员

divi 弹出菜单

接下来,右键单击切换样式并从列表中选择“扩展切换样式”。

divi 弹出菜单

然后选择将切换样式扩展到该部分中的所有手风琴模块。

divi 弹出菜单

独立站选品工具

接下来,右键单击标题文本并从列表中选择“扩展标题文本样式”。

divi 弹出菜单

然后选择将标题文本样式扩展到该部分中的所有手风琴模块。

divi 弹出菜单

现在您已经扩展了样式,您可以删除切换模块。

高质量外链购买

现在转到您的手风琴模块并给它一个白色背景。

divi 弹出菜单

并用以下内容结束手风琴设计:

自定义边距:顶部 20px,底部 20px
底部边框宽度:1px(将所有其他边框宽度设置为 0px)

divi 弹出菜单

JasperAI 10000字免费额度试用

现在你的手风琴模块已经设置好了!

在右栏中,添加一个以“menu”为内容的文本模块。 带有文本的整个列将用作我们的标签,该标签将伸出页面的一侧,因此当您将鼠标悬停在标签上时,将显示该行的其余部分(带有手风琴)。

divi 弹出菜单

然后更新文本设计设置如下:

文字字体粗细:粗体
文字字体样式:TT
文字文字颜色:#ffffff
文字文字大小:16px
文字字母间距:1px
文字方向:居中
禁用:手机、平板电脑

WordPress备份工具updrafplus

此时您将无法看到文本,因为我们尚未将颜色背景添加到行中。 另外,请注意我们禁用了手机和平板电脑上的模块。 这是因为我们将在移动设备上禁用菜单的悬停功能,因此不需要菜单标签。

设置行样式并在悬停时扩展它

现在是时候开始为我们的行设置样式了。 打开行设置并更新以下内容:

背景颜色:#26c699
自定义宽度:320px
天沟宽度:1
均衡柱高:是

自定义边距(桌面):-241px
自定义边距(悬停):0px
自定义边距(平板电脑):左侧 10%,右侧 10%

自定义边距是悬停效果功能的关键。 通过在桌面上将左边距设置为 -241px,在右列上可以看到文本菜单。 悬停时,左边距恢复为 0px,以显示带有菜单手风琴的行的左列。

自定义填充:0px 顶部,0px 底部
圆角:右上角 10px,右下角 10px

我们可以使用一些自定义 CSS 片段将第 2 列的内容垂直居中,而不是使用自定义填充来垂直居中。在高级选项卡下,在第 2 列主元素下添加以下 CSS:

display: flex;
flex-direction: column;
justify-content: center;

divi 弹出菜单

有关此概念的更多信息,请查看如何在 Divi 中垂直对齐内容。

更新部分

该部分将隐藏在桌面上,因为我们最终会给我们的行一个固定的位置。 但是,我们需要为移动设备自定义我们的部分,并在适当的间距上使用匹配的背景颜色:

背景颜色:#f7f9f9
自定义边距:0px 顶部,0px 底部
自定义填充(桌面):0px 顶部,0px 底部
自定义填充(平板电脑):5% 顶部,5% 底部

divi 弹出菜单

使用自定义 CSS 定位行

目前,带有弹出菜单的部分仍保留在页面顶部的部分中。 要浮动菜单以使其在滚动时始终固定在页面上的某个位置,您首先需要为您的行指定一个自定义 CSS ID。 为此,请打开行设置并在“高级”选项卡下添加以下内容:

CSS ID:浮动

divi 弹出菜单

之后,使用页面底部的可视化构建器设置菜单打开页面设置。 然后在您的页面设置中添加以下自定义 CSS:

@media (min-width: 981px){
  #float {
    position: fixed;
    top: 200px;
    left: 0px;
    z-index: 99998;
  }
}

divi 弹出菜单

现在,您的弹出菜单将固定在桌面上,但在移动设备上将恢复为默认样式。

查看最终结果。

divi 弹出菜单

它在移动设备上。

divi 弹出菜单

最后的想法

我们都在寻找不同的方法来让我们的菜单(和子菜单)随时可供访问者使用。 我希望本教程将为您提供一个有价值的选项来创建一个固定的子菜单(使其保持可见)并在悬停时弹出(以便在用户需要之前节省页面空间)。 当然,这种设计不仅限于菜单。 您可以选择任何模块以在弹出行中显示无数变化的内容。 查看这篇文章中的 #5 以获取另一个示例。 我期待在下面的评论中听到您自己的想法。

干杯!

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