如何在 Elementor 中创建全屏覆盖菜单

全屏覆盖菜单非常适合页面内容较少的小型网站,或者可以用来隐藏和显示更多链接,从而扩展导航功能。使用 PowerPack 高级菜单小部件,你可以在 Elementor 中轻松创建画布外和全屏覆盖菜单,无需编写任何代码。

如何在 Elementor 中创建全屏覆盖菜单

第一步:添加 Elementor 高级菜单小部件

在添加小部件之前,首先决定你希望它出现在什么位置。如果你只想在单个页面(如登录页面)上显示叠加菜单,可以直接将小部件添加到该页面,这样菜单只会在这个页面上显示。

如果你希望覆盖菜单出现在整个网站或每个页面上,可以将小部件添加到使用 Elementor 构建的自定义页眉中,这样菜单就会出现在页眉所在的所有位置,通常是整个网站。

在 Elementor 编辑器中打开页面或页眉,然后将 PowerPack 的高级菜单小部件拖放到适当的位置即可。

如何在 Elementor 中创建全屏覆盖菜单

第二步:设置全屏覆盖菜单

接下来,从 WordPress 菜单列表中选择你想要显示的菜单。

然后,向下滚动选项,直到找到“响应”部分。选择“始终”作为断点,并将菜单类型更改为“全屏”。

如何在 Elementor 中创建全屏覆盖菜单

还可以从给定的设置更改按钮的对齐方式、按钮样式等。在内容选项卡中进行更改后,你的全屏菜单将如下所示:

如何在 Elementor 中创建全屏覆盖菜单

第三步:自定义全屏覆盖菜单的样式

主菜单:在这一部分,你可以设置主菜单项的样式,比如文本颜色、排版、内边距等。

下拉菜单:这里你可以调整下拉菜单项的样式,包括排版、文本颜色、背景颜色、边框、边框半径、内边距和分隔线等。

切换按钮:全屏覆盖菜单通过切换图标或按钮来触发,你可以在这一部分自定义它。你可以更改颜色、背景、大小、厚度、边框和标签(如果在内容选项卡中启用了标签)。这些设置仅适用于切换按钮。

如何在 Elementor 中创建全屏覆盖菜单

响应式:这里可以调整菜单在不同设备上的显示效果。开始调整之前,点击切换按钮以触发菜单,这样你可以实时预览所做的更改。

  1. 对齐方式:将菜单对齐方式更改为居中(Center)。
  2. 背景和链接颜色:更改菜单背景颜色和链接(菜单元素)颜色。
  3. 悬停效果:设置链接悬停时的颜色和背景颜色。对于子菜单,你也可以自定义颜色、内边距等。
  4. 边框:轻松更改边框颜色、宽度等。
  5. 关闭图标:调整关闭图标的颜色和大小。

总结:

如何在 Elementor 中创建全屏覆盖菜单

全屏覆盖菜单是适合小型网站的一种导航解决方案,可以隐藏和显示更多链接,扩展导航功能。使用 PowerPack 高级菜单小部件和 Elementor,你可以创建画布外和全屏覆盖菜单,无需编写任何代码。通过简单的步骤,你可以决定菜单的位置,选择要显示的菜单,并设置菜单的响应方式和样式。自定义选项包括主菜单项、下拉菜单、切换按钮以及响应式设置,确保菜单在不同设备上的良好显示效果。这种灵活而强大的工具让你可以为网站提供专业且美观的导航体验。


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/9940/

(1)
上一篇 2024年 5月 19日 下午1:22
下一篇 2024年 5月 19日 下午1:24

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
购买我们的托管服务器,享受免费运维!