菜单锚点教程:4种简单方法搞定页面跳转功能

菜单锚点教程:4种简单方法搞定页面跳转功能 – anchor link tutorial

在 WordPress 中创建菜单的锚点功能(即点击菜单项后跳转到页面的指定位置)有多种实现方法,下面介绍4种无代码插件实现页面跳转的方式。

HTML锚点

以Gutenberg编辑器为例,点开想要设置的页面或者文章,在跳转的目的区块(可以是文字,图片,等等)高级设置下面的HTML锚点填写唯一的ID,把ID作为链接插入锚文本里,记得ID前面加个#,这样就可以实现同一页面跳转。

菜单锚点教程:4种简单方法搞定页面跳转功能 – gutenberg menu archor
菜单锚点教程:4种简单方法搞定页面跳转功能 – insert the menu archor id

WordPress菜单锚点

按照上一个设置好锚点和ID,wordpress 后台-外观-菜单,设置自定义链接,把文字和链接(也就是ID,格式为#ID)填入对应的区域,保存,点击后即可跳转到指定位置。

菜单锚点教程:4种简单方法搞定页面跳转功能 – menu anchor link
菜单锚点教程:4种简单方法搞定页面跳转功能 – how to set up menu anchor link

跨页面跳转链接设置

使用HTML制作锚点链接,并在外观菜单中添加自定义链接,格式如https://example.com/page-url/#id,再添加至菜单中。

菜单锚点教程:4种简单方法搞定页面跳转功能 – anchor link redirection
菜单锚点教程:4种简单方法搞定页面跳转功能 – jump to an anchor link

点击实现页面跳转锚点。

菜单锚点教程:4种简单方法搞定页面跳转功能 – click jump to anchor link

使用Elementor锚点小部件

使用elementor编辑对应页面或者文章,点击左边元素栏,添加菜单锚点小部件至想要跳转的位置。

菜单锚点教程:4种简单方法搞定页面跳转功能 – elementor edit page
菜单锚点教程:4种简单方法搞定页面跳转功能 – elementor anchor link

设置好锚文本,链接输入#ID,保存好测试一下是不是正常滚动到页面的指定部分。

菜单锚点教程:4种简单方法搞定页面跳转功能 – anchor text
菜单锚点教程:4种简单方法搞定页面跳转功能 – custom anchor link id
本文对你有帮助吗?

发表评论

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

滚动至顶部