WordPress divi主题

如何使用 Divi 为您的网站创建滑动菜单栏

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

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

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

google广告开户

本周,作为我们正在进行的 Divi 设计计划的一部分,我们将向您展示如何使用 Mortgage Broker Layout Pack 为您的网站创建滑动菜单栏。 这是向您的网站添加交互的好方法。 您将在所有屏幕尺寸上获得相同的用户体验,并且您可以将此技术用于您正在构建的任何类型的网站。

让我们开始吧!

预览

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

桌面

滑动菜单栏

移动的

滑动菜单栏

在 Divi 主题选项中禁用固定导航

转到 Divi 主题选项

让我们开始吧! 您需要做的第一件事是转到 WordPress 网站上的 Divi 主题选项。

滑动菜单栏

禁用固定导航

在这里,我们将禁用固定导航栏。 我们需要禁用此选项,以便在本教程后面的页面上完全摆脱主菜单栏。

  • 固定导航栏:已禁用

滑动菜单栏

WordPress divi主题

隐藏页面上的主菜单栏

在 Mortgage Broker 布局包登陆页面上启用 Visual Builder

继续转到您使用 Mortgage Broker Layout Pack 的登录页面创建的页面并启用 Visual Builder。

滑动菜单栏

打开页面设置

我们将通过添加一些 CSS 代码来隐藏页面上的主菜单栏。 要添加此代码,请打开页面设置。

滑动菜单栏

添加自定义 CSS 代码以隐藏主菜单栏

然后,转到高级选项卡并将以下 CSS 代码行放入自定义 CSS 框中:

#main-header {
display: none;
}

添加此代码将有助于防止主菜单栏显示在页面上。

滑动菜单栏

使用 Divi 创建自定义菜单设计

确保在所有屏幕尺寸的英雄部分都有足够的顶部填充

现在我们已经摆脱了页面上的主菜单栏,我们可以开始添加滑动菜单栏了! 您需要做的第一件事是确保页面顶部有足够的填充,以便滑动菜单栏不会与任何现有内容重叠。 特别是对于 Mortgage Broker Layout Pack 的登录页面,这意味着确保第 1 列自定义填充在所有屏幕尺寸上保持“180 像素”。

滑动菜单栏

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

是时候开始创建自定义滑动菜单栏了! 在页面底部添加一个常规部分。

fiverr建站WordPress程序员

滑动菜单栏

间距

打开部分设置并删除所有默认的顶部和底部填充。

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

滑动菜单栏

添加行

立柱结构

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

滑动菜单栏

独立站选品工具

背景颜色

打开行设置并将行背景颜色更改为白色。

  • 背景颜色:#ffffff

滑动菜单栏

浆纱

然后,打开行设置并更改大小设置以允许行占据屏幕的整个宽度:

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

滑动菜单栏

间距

接下来删除所有顶部和底部填充。

高质量外链购买
  • 顶部填充:0px
  • 底部填充:0px

滑动菜单栏

盒子阴影

为了确保滑动菜单栏和页面本身之间有足够的深度,我们将添加一个盒子阴影。

  • 盒子阴影模糊强度:80px
  • 阴影颜色:rgba(0,0,0,0.55)

滑动菜单栏

添加图像模块

上传公司徽标

是时候开始添加我们想要在滑动菜单栏中显示的所有模块了,从图像模块开始。 使用宽度为 226 像素、高度为 100 像素的图像文件上传您的徽标。

滑动菜单栏

JasperAI 10000字免费额度试用

结盟

然后,转到图像模块的设计选项卡并更改图像对齐方式。

滑动菜单栏

浆纱

接下来更改图像的大小设置。

  • 最大宽度:75%(桌面)、100%(平板电脑和手机)

滑动菜单栏

间距

并为图像添加一些自定义的顶部和底部填充。

WordPress备份工具updrafplus
  • 顶部填充:15 像素(平板电脑)、25 像素(手机)
  • 底部填充:15px(平板电脑),25px(手机)

滑动菜单栏

添加按钮模块

添加副本

我们需要的第二个模块是一个按钮模块。 添加一些您选择的副本。

滑动菜单栏

结盟

然后,转到设计选项卡并更改按钮对齐方式。

滑动菜单栏

按钮设置

接下来修改按钮的外观。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:0.8vw(桌面)、1.4vw(平板电脑)、2.1vw(手机)
  • 按钮文字颜色:#ffffff
  • 按钮背景颜色:#40eccc
  • 按钮边框宽度:0px
  • 按钮边框半径:50px
  • 按钮字母间距:2px
  • 按钮字体:Lato
  • 字体粗细:重
  • 字体样式:大写

滑动菜单栏

滑动菜单栏

间距

并使用自定义边距和填充值创建您想要的形状。

  • 上边距:15px
  • 下边距:15px
  • 上边距:15px
  • 底部填充:15px
  • 左填充:40px
  • 右内边距:40px

滑动菜单栏

添加文本模块 #1

将菜单项添加到内容框

我们在滑动菜单栏中需要的下一个模块是文本模块。 在这里,我们要将页面标题添加到内容框。

滑动菜单栏

添加链接

继续进行链接设置并将正确的链接添加到文本模块。

滑动菜单栏

背景颜色

接下来修改背景颜色。

  • 背景颜色:#f2f2f2

滑动菜单栏

文字设置

然后,更改文本设置。

  • 文字字体:Lato
  • 文字字体粗细:粗体
  • 文字颜色:#000000
  • 文字大小:0.9vw(桌面)、1.9vw(平板电脑)、2.4vw(手机)
  • 文本方向:中心

滑动菜单栏

间距

并为模块添加一些自定义的顶部和底部填充。

  • 上边距:30px
  • 底部填充:30px

滑动菜单栏

克隆文本模块 x5 次

修改完文本模块后,您可以继续克隆它 5 次。

滑动菜单栏

更改副本

确保更改每个重复项中的页面标题。

滑动菜单栏

更改链接

连同链接。

滑动菜单栏

更改背景颜色

接下来修改第二个、第四个和第六个菜单项的背景颜色。

  • 背景颜色:#ffffff

滑动菜单栏

将自定义 CSS 添加到行

主要元素

现在,为了确保滑动菜单栏贴在页面顶部,我们需要在该行的主要元素中添加几行 CSS 代码。

position:fixed;
top: 0px;
z-index: 99;

滑动菜单栏

列主要元素

我们还将列转换为允许我们滚动的网格。 您可以在下面的 CSS 代码中看到的百分比表示每个模块在网格中占用的空间量。 如果您希望您的网格看起来不同,您可以修改这些值。

overflow-x: scroll;
display: grid;
grid-template-columns: 15% 45% 25% 25% 25% 25% 25% 25%;

滑动菜单栏

列 CSS 类

为了摆脱滚动条,我们还要在行中添加一个 CSS 类。

滑动菜单栏

移除滚动条

在页面上

您可以通过打开页面设置并将以下几行 CSS 代码添加到自定义 CSS 框中来移除页面本身的滚动条:

.swipe-menu::-webkit-scrollbar {
display: none;
}

滑动菜单栏

滑动菜单栏

在整个网站上

如果您不想重复在每个页面上单独隐藏滚动条的相同步骤,您还可以转到 Divi 主题选项并通过向下滚动常规选项卡并添加以下行使 CSS 代码适用于整个网站自定义 CSS 框的 CSS 代码:

.swipe-menu::-webkit-scrollbar { display: none; }

滑动菜单栏

滑动菜单栏

将部分另存为全局项目

滑动菜单栏正常运行后,您可以将其作为全局项目保存到 Divi 库中,也可以在其他页面上使用!

滑动菜单栏

预览

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

桌面

滑动菜单栏

移动的

滑动菜单栏

最后的想法

在这篇文章中,我们向您展示了如何为您使用 Divi 创建的任何网站创建滑动菜单栏。 这是为您的网站添加另一个维度的好方法。 本教程是我们正在进行的 Divi 设计计划的一部分,我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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