如何在WordPress中添加全屏响应菜单

05/31/2024

为何要在WordPress中添加全屏响应菜单?

设计良好的菜单有助于访问者在您的WordPress网站或WooCommerce商店中找到方向。但在使用智能手机的小屏幕时,点击标准的头部菜单可能会很困难。移动用户已经超过了许多网站的桌面用户。因此,我们建议您预览WordPress网站的移动版本,以查看您的网站在移动设备上的外观。

全屏响应移动菜单会自动适应不同的屏幕尺寸。由于菜单占用了所有可用空间,因此在智能手机和平板电脑上更容易导航。

如何在WordPress中添加全屏响应菜单

第一步:安装并激活FullScreen Menu插件

首先,您需要安装并激活FullScreen Menu插件。激活后,进入WordPress后台菜单中的FullScreen Menu Options页面配置插件设置。将自动跳转到‘设置’选项卡。

第二步:启用动画全屏菜单

勾选‘启用动画全屏菜单’复选框以启用菜单。一开始最好选中‘仅对管理员用户显示菜单’框,这样您可以在配置菜单时看到更改,但访客不能看到,直到您完成配置。完成后不要忘记取消选中该框。

第三步:设置全屏菜单的设计和外观

颜色设置

在‘设计/外观’选项卡下,可以选择菜单的颜色、字体和动画设置。顶部有两种颜色设置:汉堡菜单图标颜色和菜单背景颜色。选择颜色或输入其十六进制代码。

字体设置

在字体/外观部分选择菜单文字的颜色、字体和大小。建议使用主题的默认设置,因为这样可以匹配网站设计。另外,加载额外的字体可能会影响网站的性能和速度。

动画设置

‘动画类型’设置让您选择菜单激活时的动画方向。可选择从上到下、从左到右和从右到左。悬停效果设置有填充线、背景颜色和带圆角边框的背景颜色。

第四步:设置全屏菜单内容

在‘菜单内容’选项卡中,选择将在全屏菜单中显示的WordPress菜单。如果还没有创建导航菜单,请参阅有关如何在WordPress中添加导航菜单的指南。您还可以在‘Free HTML / Shortcodes’部分添加额外内容,这些内容将显示在菜单下方。

可以通过勾选复选框来添加隐私政策页面链接。还可以在‘社交图标’部分添加社交图标作为菜单项。最后,可以在菜单顶部添加原生WordPress搜索栏。单击‘保存更改’按钮以存储设置。

现在,访问您的网站查看全屏响应菜单效果。我们建议调整浏览器大小,以查看菜单在不同屏幕尺寸下的表现。完成后,不要忘记返回Fullscreen Menu Options取消选中‘仅对管理员用户显示菜单’选项。保存更改后,访问者即可访问菜单。



Related Posts

  • 2024-12-14
  • WordPress 插件

在WordPress中嵌入Google幻灯片演示是分享互动且视觉上吸引人内容的好方法。您可以展示详细的产品展示或最新报告的幻灯片,从而帮助您向听众传达信息或说服他们。我们经过研究发现了一些可靠的方法来完成这项工作,而且您无需成为技术专家即可实现。本文将向您展示两种轻松的方法来将Google幻灯片演示文稿添加到您的WordPress网站。

閱讀更多
  • 2024-11-16
  • WordPress 插件

在保护您的WordPress网站免受攻击时,使用正确的防火墙插件是至关重要的。在多年的发展中,我们的需求也在不断增长。因此,我们转向使用Cloudflare以提供更强的保护。本文详细比较了六个优秀的WordPress防火墙插件,以帮助您选择最适合的解决方案。

閱讀更多
  • 2024-11-15
  • WordPress 插件

您不希望访客单击其他网站的链接后就此离开您的网站。这就是为什么在新窗口或标签中打开外部链接对于提供流畅用户体验至关重要。在WPressize Me,我们认真对待读者的参与度。我们确保网站上的所有外部链接都在新标签页中打开,这样读者可以在不丢失原位的情况下浏览内容。这篇初学者指南将教您如何轻松在WordPress中设置外部链接在新标签中打开,从而提升用户参与度并令读者满意。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>