WordPress divi主题

如何使用 Divi 在悬停/单击页面上创建模糊菜单

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

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

每周,我们都会为您提供新的免费 Divi 布局包,您可以将其用于您的下一个项目。 对于其中一个布局包,我们还分享了一个用例,可帮助您将您的网站提升到一个新的水平。

google广告开户

本周,作为我们正在进行的 Divi 设计计划的一部分,我们将向您展示如何创建一个令人惊叹的模糊菜单,一旦您将鼠标悬停或单击它就会展开。 我们将首先通过一些一般步骤开始。 我们将继续使用 Blurb 模块添加菜单项,最后我们将允许您在悬停或单击效果之间进行选择。

让我们开始吧!

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

悬停模式

桌面

简介菜单

移动的

简介菜单

点击方式

桌面

简介菜单

移动的

简介菜单

1.创建空白页面并上传观光登陆页面

添加新的空白页并启用 Divi Builder

您需要做的第一件事是创建一个新的空白页。 给你的页面一个标题,然后切换到 Divi Builder。

简介菜单

WordPress divi主题

上传观光登陆页面

启用 Divi Builder 后,上传 Sightseeing Layout Pack 的登录页面布局。

简介菜单

2.在页面底部添加新的常规部分

一旦主菜单栏被隐藏,我们就可以开始添加简介菜单。 为此,我们将在页面底部添加一个新的常规部分。

简介菜单

背景颜色

打开部分设置并添加略微透明的白色背景颜色。

  • 背景颜色:rgba(255,255,255,0.98)

简介菜单

间距

转到设计选项卡并删除该部分的所有默认顶部和底部填充。

  • 顶部填充:0px
  • 底部填充:0px

简介菜单

默认框阴影

接下来为该部分添加一个盒子阴影。

  • 盒子阴影模糊强度:18px
  • 阴影颜色:#383838

简介菜单

fiverr建站WordPress程序员

悬停框阴影

并在悬停时更改框阴影模糊强度。

  • 盒子阴影模糊强度:1000px

简介菜单

隐藏部分溢出并增加 Z 指数

我们将使用部分大小设置来使这项技术发挥作用,但为了确保没有超出部分容器,我们需要隐藏溢出。 我们还增加了 Z 索引,以确保该部分位于页面其余部分的顶部。

  • 水平溢出:隐藏
  • 垂直溢出:隐藏
  • Z指数:9999

简介菜单

3. 确保所有部分菜单内容均使用 Vw 创建并适合所有屏幕尺寸的 100 视口高度

添加第 1 行

立柱结构

完成基本部分设置后,就可以添加要在菜单中显示的所有内容了。 您可以使用 Divi 的设计元素和内置选项创建您想要的任何设计,但您必须确保它在所有屏幕尺寸上都适合“100vh”高度。 为了实现这一点,我们将在整个构建过程中使用视口宽度单位,并调整不同屏幕尺寸的值。 首先使用以下列结构向您的部分添加新行:

独立站选品工具

简介菜单

浆纱

在不添加任何模块的情况下,打开行设置并确保它占据了该部分的整个宽度。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

简介菜单

间距

继续进行间距设置并删除所有默认的顶部和底部填充。

  • 顶部填充:0px
  • 底部填充:0px

简介菜单

高质量外链购买

将文本模块添加到列

添加符号

继续向该行的列添加一个文本模块。 将“=”符号添加到内容框或随意使用您选择的任何其他符号。

简介菜单

背景颜色

接下来更改模块的背景颜色。

  • 背景颜色:#000000

简介菜单

文字设置

转到设计选项卡并更改文本设置。

JasperAI 10000字免费额度试用
  • 文字字体:Open Sans
  • 文本对齐:居中
  • 文字颜色:#ffffff
  • 文字大小:3vw(桌面)、5vw(平板电脑)、7vw(手机)
  • 文本行高:1em

简介菜单

间距

我们还使用以下自定义填充值在模块的顶部和底部添加了一些空间:

  • 顶部填充:2.5vw(台式机)、3.5vw(平板电脑)、5vw(手机)
  • 底部填充:2.5vw(桌面)、3.5vw(平板电脑)、5vw(手机)

简介菜单

添加第 2 行

立柱结构

继续使用以下列结构添加第二行:

简介菜单

WordPress备份工具updrafplus

浆纱

在不添加任何模块的情况下,打开行设置并让行占据屏幕的整个宽度。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

简介菜单

间距

继续进行间距设置,然后添加一些自定义的顶部和底部填充。

  • 顶部填充:2vw(桌面)、4vw(平板电脑)、6vw(手机)
  • 底部填充:2vw(桌面)、4vw(平板电脑)、6vw(手机)

简介菜单

展示

为了确保两列在较小的屏幕尺寸上保持相邻,我们将在行的主要元素中添加一行 CSS 代码。

display: flex;

简介菜单

将 Blurb 模块添加到第 1 列

添加内容

是时候开始添加菜单项了! 将新的 Blurb Module 添加到该行的第一列并输入您选择的一些内容。

简介菜单

选择图标

接下来选择一个图标。

简介菜单

添加链接

并输入与菜单项匹配的页面链接。

简介菜单

图标设置

转到设计选项卡并相应地更改图标设置:

  • 图标颜色:#ff3314
  • 图标位置:顶部
  • 使用图标字体大小:是
  • 图标字体大小:2vw(桌面)、3vw(平板电脑)、4vw(手机)

简介菜单

标题文本设置

修改标题文本设置。

  • 标题字体:PT Serif
  • 标题字体样式:下划线
  • 标题下划线颜色:#ff3314
  • 标题文本对齐方式:居中
  • 标题文字大小:1.8vw(桌面)、2.3vw(平板电脑)、3.3vw(手机)

简介菜单

正文文本设置

然后,更改正文文本设置。

  • 正文字体:Lato
  • 正文文本对齐:居中
  • 正文颜色:#c6c6c6
  • 正文文本大小:0.9vw(桌面)、1.7vw(平板电脑)、2.1vw(手机)
  • 车身线高:1.8em

简介菜单

浆纱

并使用以下值更改不同屏幕尺寸的模块宽度:

  • 宽度:60%(台式机)、65%(平板电脑)、80%(手机)

简介菜单

动画片

我们还删除了动画设置中的图标动画。

  • 图标动画:无动画

简介菜单

克隆 Blurb 模块并在第 2 列中放置重复项

完成 Blurb 模块后,您可以克隆它并将副本放在该行的第二列中。

简介菜单

更改副本

确保更改副本。

简介菜单

更改图标

连同图标。

简介菜单

更改链接

以及与新菜单项匹配的页面链接。

简介菜单

克隆行两次

完成行中的两个 Blurb 模块后,您可以克隆整个行两次。

简介菜单

单独更改每个 Blurb 副本的副本、图标和链接

确保单独更改每个简介菜单项的副本、图标和链接。

简介菜单

4.使部分粘性

默认

将要显示的所有元素添加到您的部分后,您可以通过将以下两行 CSS 代码添加到该部分的主要元素,使该部分粘在页面的左上角:

position: fixed;
top: 0;

简介菜单

悬停(重要!)

在该部分的主要元素上启用悬停选项,并确保该部分在此状态下也保持粘性。

position: fixed;

简介菜单

5. 选择一种方法:A) 悬停菜单或 B) 单击菜单

A) 悬停菜单

默认截面尺寸

在本教程的下一部分中,您需要选择一种首选方法; 悬停或单击时的菜单。 悬停菜单的行为类似于较小设备上的单击菜单。 如果您决定选择悬停选项,请再次打开部分设置,转到大小设置并相应地更改菜单的宽度和高度:

  • 宽度:8vw(桌面)、12vw(平板电脑)、20vw(手机)
  • 高度:7.4vw(台式机)、12vw(平板电脑)、16vw(手机)

简介菜单

悬停部分大小

修改悬停时的值以创建扩展菜单。

简介菜单

B)点击菜单

将 CSS 类添加到文本模块

如果您想要一个仅在单击时打开的菜单,则必须打开包含菜单符号的文本模块。 转到高级选项卡并添加自定义 CSS 类。

  • CSS 类:全宽打开

简介菜单

将 CSS 类添加到部分

接下来打开部分设置并添加不同的 CSS 类。

  • CSS 类:平滑变换

简介菜单

截面尺寸

接下来我们将修改部分的宽度和高度。

  • 宽度:8vw(桌面)、12vw(平板电脑)、20vw(手机)
  • 高度:7.4vw(台式机)、12vw(平板电脑)、16vw(手机)

简介菜单

将代码添加到页面

在部分底部添加新行

现在,要创建切换效果,我们需要一些 JQuery 和 CSS 代码。 首先将代码模块添加到部分底部的新行。

简介菜单

将代码模块添加到部分并插入 JQuery 切换代码

复制以下几行 JQuery 代码并将它们粘贴到代码框中:

<script>
jQuery(function($){
$(".fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});

});
</script>

简介菜单

将自定义 CSS 代码添加到页面设置

最后但同样重要的是,接下来打开页面设置并添加以下几行 CSS 代码:

.smooth-transform-active {
height: 100vh;
width: 80%;
}

.smooth-transform {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

简介菜单

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

悬停模式

桌面

简介菜单

移动的

简介菜单

点击方式

桌面

简介菜单

移动的

简介菜单

最后的想法

在这篇文章中,我们向您展示了如何创建一个漂亮的宣传模块,该模块可在点击/悬停时展开(取决于您的偏好)。 这是向菜单添加额外交互性的好方法,同时在所有屏幕尺寸上保持响应式结果。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请确保订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

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