WordPress divi主题

如何在 Divi 中创建滑动下拉菜单

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

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

带有大量导航链接的大标题可能会占用您网站上大量宝贵的空间(尤其是首屏)。 这就是为什么弹出式和滑入式菜单变得越来越流行的原因。 大多数时候,滑入查看的菜单停留在页面内容之上,隐藏了某些元素。 但是,滑动推送菜单的工作方式略有不同。 滑动推送效果的独特之处在于菜单从页面顶部滑入,同时将页面内容向下推送,因此没有任何内容被隐藏。

google广告开户

在本教程中,我们将向您展示如何使用 Divi Theme Builder 从头开始​​构建滑动推送菜单。 构建菜单后,它将成为适用于所有类型应用程序的多功能工具,因为您将能够使用 Divi Builder 用您想要的任何内容填充该部分。

让我们开始吧!

抢先看

这是我们将在本教程中构建的滑动推送菜单的快速浏览。

免费下载布局

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

要将部分布局导入 Divi Theme Builder,请导航到 Divi Theme Builder。

单击可移植性图标。

在可移植性弹出窗口中,选择导入选项卡并从您的计算机中选择下载文件。

然后单击导入按钮。

完成后,部分模板将出现在 Divi Theme Builder 中。

WordPress divi主题

分割滑动按钮菜单

让我们进入教程,好吗?

使用 Divi Theme Builder 构建滑动推送菜单

创建新的全局菜单

要创建菜单,我们将在 Divi Theme Builder 中构建一个新的全局标题。

导航到 Divi > 主题生成器。

然后单击默认网站模板中的“添加全局标题”区域。 从下拉列表中,选择“构建全局标题”。

分割滑动按钮菜单

这将带您进入全局标题布局编辑器。

进入全局页眉布局编辑器后,选择“从头开始构建”选项。

分割滑动按钮菜单

创建推送菜单

我们将一起构建的第一个元素是推送菜单部分。 此部分将包含在单击菜单切换按钮时将向下和向上切换的菜单项。

fiverr建站WordPress程序员

部分设置

打开默认部分的设置,更新设置如下:

背景
  • 背景颜色:#1a1e36

分割滑动按钮菜单

填充
  • 内边距:0px 顶部,0px 底部

分割滑动按钮菜单

CSS 类

在高级选项卡下,添加以下 CSS 类,稍后将在我们的 JS 代码中使用。

分割滑动按钮菜单

独立站选品工具
自定义 CSS(平板电脑)

接下来,我们需要使用计算出的高度来调整移动部分的高度,以适应我们将添加的主标题栏。 当用户切换菜单打开时,这将实质上使该部分跨越移动窗口的整个高度。

仅将以下自定义 CSS 添加到平板电脑上的主元素:

height: calc(100vh - 70px);
overflow:scroll !important;
overscroll-behavior: contain;

分割滑动按钮菜单

添加第 1 行

完成部分设置后,在该部分中创建一个单列行。

分割滑动按钮菜单

高质量外链购买

第 1 行设置

然后按如下方式更新行设置:

设计
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:1280px
  • 填充:3vh 顶部,3vh 底部
  • 底部边框宽度:1px
  • 底部边框颜色:rgba(255,255,255,0.2)

分割滑动按钮菜单

自定义 CSS

在高级选项卡下,将以下自定义 CSS 添加到主元素:

在桌面…

display:flex;
justify-content:center;
align-items:center;

在平板电脑下…

JasperAI 10000字免费额度试用
display:flex;
flex-direction:column;
align-items:center;

分割滑动按钮菜单

列设置

行设置完成后,打开列的设置并将自定义 CSS 片段添加到主元素:

display:flex;
align-items:center;
justify-content:center;

这将使列的内容在垂直和水平方向居中。

分割滑动按钮菜单

添加按钮

现在我们准备开始使用按钮模块添加我们的菜单项。 首先在列中添加一个新按钮。

WordPress备份工具updrafplus

分割滑动按钮菜单

按钮设置

然后更新按钮设置如下:

内容
  • 按钮文字:设计
  • 按钮链接 URL:#(稍后将其替换为您自己的自定义 URL)

分割滑动按钮菜单

设计
  • 按钮文字颜色:#ffffff
  • 按钮边框宽度:0px
  • 按钮字体:蒙特塞拉特
  • 按钮字体粗细:重
  • 按钮图标: [your choice]
  • 按钮图标位置:左

分割滑动按钮菜单

复制列

现在要为菜单创建附加按钮,我们可以复制该列。 对于这个设计,让我们将列复制 4 次,总共有 5 个菜单项/按钮。 在一个五列的行中。

分割滑动按钮菜单

添加第 2 行

第一行完成后,我们准备添加另一行按钮,可用于一组不同的菜单项。

要创建下一行,请复制第 1 行。

分割滑动按钮菜单

删除除一之外的所有列

然后删除重复行中除一列之外的所有列。

分割滑动按钮菜单

第 2 行设置

如下更新第 2 行的设置:

  • 最大宽度:1080px
  • 底部边框宽度:0px

分割滑动按钮菜单

列设置

然后为列添加边框,如下所示:

  • 右边框宽度:1px
  • 右边框颜色:rgba(255,255,255,0.2)

分割滑动按钮菜单

更新按钮设置

在列具有右边框后,打开按钮的设置并更新以下内容:

  • 按钮文字大小:14px
  • 按钮字母间距:2px
  • 按钮字体粗细:半粗体
  • 按钮字体样式:TT
  • 显示按钮图标:否

分割滑动按钮菜单

复制列

就像我们之前做的那样,让我们​​复制列来创建额外的按钮和列。 对于这个设计,让我们将列复制 3 次,以在 4 列的行中为我们提供总共 4 个按钮。

分割滑动按钮菜单

删除最后一列边框

由于我们不希望最后一列有右边框,因此打开第 4 列的设置并更新边框宽度:

分割滑动按钮菜单

创建主标题栏

接下来,我们将为主标题栏创建部分。 这个标题栏将始终保持可见,并将成为我们的网站徽标、CTA 和我们的菜单切换按钮。

添加部分

在我们添加新部分之前,最好将前一部分的标签更新为“Push Menu Section”。

然后在第一部分下方创建一个新部分。

分割滑动按钮菜单

部分设置

现在将新部分上的标签更新为“标题部分”。 然后打开部分设置并更新以下内容:

填充
  • 内边距:0px 顶部,0px 底部

分割滑动按钮菜单

添加行

添加部分填充后,向该部分添加一个三列行。

分割滑动按钮菜单

行设置

打开行设置并更新以下内容:

浆纱
  • 天沟宽度:1
  • 宽度:90%
  • 高度:70 像素

分割滑动按钮菜单

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

分割滑动按钮菜单

自定义 CSS

在高级选项卡下,将以下自定义 CSS 添加到主元素:

display:flex;
align-items:center;

这将使行内的列垂直居中。

分割滑动按钮菜单

添加按钮

要在标题部分创建主 CTA,我们可以使用顶部第二行的按钮。 复制顶部第 2 行第 1 列的按钮,并将其粘贴到标题部分行的第 1 列。

分割滑动按钮菜单

更新按钮设置

然后打开复制按钮的按钮设置并更新以下内容:

  • 按钮文本:注册
  • 按钮文字大小:14px
  • 按钮文字颜色:#1a1e36
  • 显示按钮图标:是
  • 按钮图标:右箭头(见截图)

分割滑动按钮菜单

添加徽标

在中间列中,添加一个图像模块。 这将是我们动态添加站点徽标的方式。

分割滑动按钮菜单

将鼠标悬停在图像框上,然后单击“使用动态内容”图标。 从下拉列表中选择“站点徽标”。

分割滑动按钮菜单

图像设置

然后,在设计选项卡下,更新以下内容:

  • 图像对齐:居中
  • 最大高度:55px

分割滑动按钮菜单

添加自定义汉堡图标

我们可以通过简介模块使用常规图标作为我们的菜单切换,但对于本教程,我认为我们将添加一个具有酷炫过渡效果的自定义菜单切换。

添加文本模块

为了创建菜单图标,我们将使用带有一些自定义 HTML 的文本模块,这些 HTML 将使用外部 CSS 进行样式设置。

继续在第 3 列添加一个文本模块。

分割滑动按钮菜单

添加文本模块 HTML

然后将以下 HTML 添加到文本模块的内容中:

<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>

分割滑动按钮菜单

背景

给文本模块一个背景颜色:

  • 背景颜色:#1a1e36

分割滑动按钮菜单

文字设计

然后更新设计设置如下:

  • 宽度:70 像素
  • 模块对齐:右
  • 高度:70 像素
  • 内边距:顶部 20 像素,底部 20 像素,左侧 16 像素,右侧 16 像素

分割滑动按钮菜单

CSS 类

在高级选项卡下,添加以下 CSS 类:

  • CSS 类:et-push-menu-toggle

分割滑动按钮菜单

添加代码

为了将我们需要的滑动推送菜单功能带回家,我们将自定义 CSS 和 jQuery 添加到代码模块中。

继续在文本模块下的第 3 列中添加一个代码模块。

分割滑动按钮菜单

然后粘贴以下代码(重要:将此代码包装在样式标签中以使其正常工作):

  .line {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #ffffff;
    opacity: 1;
    -webkit-transition: .1s ease-in-out;
    -moz-transition: .1s ease-in-out;
    -o-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
  }
  .line-2 {
    top: 10px;
  }
  .line-3 {
    top: 20px;
  }
  .et-push-menu-toggle.open .line-1 {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .et-push-menu-toggle.open .line-2 {
    display: none;
  }
  .et-push-menu-toggle.open .line-3 {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .et-push-menu {
    display:none;
  }
  .et-fb .et-push-menu {
    display:block;
  }
  .et-push-menu-toggle {
    cursor:pointer;
  }

接下来,将这段代码复制并粘贴到它的正下方(重要:将此代码包装在脚本标签中以使其正常工作):

(function($) {
  $(document).ready(function(){
    $('.et-push-menu-toggle').click(function(){
      $(this).toggleClass('open');
      $('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
    });
  });  
})( jQuery );

分割滑动按钮菜单

更新按钮文本和链接

最后,我们可以使用必要的按钮文本和链接 URL 更新所有按钮。

分割滑动按钮菜单

就是这样!

保存设置

不要忘记保存布局和主题生成器设置。

分割滑动按钮菜单

最后结果

要查看最终结果,请查看您网站上的实时页面。

使其具有粘性

如果您想要“粘性”版本的菜单,您只需将以下 CSS 片段添加到代码模块(在 风格 标签):

  header {
    position: sticky;
    top:0;
    z-index:9999;
  }
  #page-container {
    overflow-y: visible !important;
  }

这是结果。

最后的想法

我希望你喜欢这个滑动推送菜单。 效果是独一无二的,它为更多创意标题打开了大门。

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

干杯!

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