如何制作一个单页滚动的页面-wordpress区块主题教程

WordPress区块主题教程

单页滚动模式的页面-一个页面展示完整内容,点击导航菜单切换到对应的位置

单页滚动模式我们在很多的品牌官网都可以看到,一些企业的营销推广页或者是企业官网首页,一个页面将需要展示的内容全部,点击导航可以实现自动滚动到指定的位置。

这种单页的模式适合于内容不多,可以集中在一个页面展示的企业官网,也适用于专门用于展示营销的页面。

这一次超级区块WordPress主题-标准版的1.45版本更新了这个模式的内容,并且我们使用这个更新制作了一个物流风格的单页企业品牌官网:物流运输-清关通关行业-单页滚动-WordPress区块企业主题

可进入演示查看单页的效果。

 

在区块主题中,如何制作一个单页呢?

1.创建一个专门用于单页滚动的导航菜单

点击导航滚动,需要单独编辑一个菜单用于滚动模式的页面,这样我们可以让其他的文章、分类和其他页面不共用这个点击滚动的菜单。

创建好了菜单之后,菜单内的所有的内容均使用自定义链接:

如何制作一个单页滚动的页面-wordpress区块主题教程

可见上图,所有的一级菜单均为“自定义链接”

自定义链接的url为锚文本

锚文本的输入结构为井号加id号,如 回到首页我们会填写 #home

如何制作一个单页滚动的页面-wordpress区块主题教程

 

导航上有多少个需要跳转到的内容 ,我们就添加多少个自定义链接,加入锚文本

注意,锚文本你可以用英文单词、可以使用拼音自己自定义任意组合,不要有特殊字符

逐个添加完成之后保存菜单。

 

2.让菜单单独挂载到某页面中

现在1.45版本之后,你可以单独指定某个页面的导航菜单了,从而不和其他的内容公用一个导航

进入想要编辑的页面,切换到页面-最下面

如何制作一个单页滚动的页面-wordpress区块主题教程

指定这个菜单。

这样这个页面的导航就单独使用这个指定的菜单了。

 

3.锚文本设置点击对应跳转的模块

最后,我们需要将锚文本点击设置跳转到的位置模块中,

如首页,那么我们点击他需要他滚动到网站的最顶部,那么我们就需要找到网站最顶部的模块,这里演示中是 幻灯片模块

如何制作一个单页滚动的页面-wordpress区块主题教程

几乎每一个区块都有“高级”这个选项,展开之后输入锚文本的名称,注意 ,菜单设置的是#home  那么高级设置的则是 home

其余的内容都可以通过这样的方式去设置锚文本,这样我们就可以轻松地制作一个独立的滚动单页页面了。

 

下一篇:

文章评论

您好!请登录

取消回复
    展开更多