Elementor设计单页网站教程

在网页设计中,除了常规的网站类型外,单页网站也是一种比较流行风格,尤其是在产品销售、个人简历等用途很广,那么在WordPress中该如何快速创建单页网站呢?在本教程中,我们将带大家使用Elementor制作一个单页网站

需要准备什么

因为需要用到固定导航栏功能,所以你需要有Elementor Pro,或者你也可以使用支持固定导航的WordPress主题,比如GeneratePress、Astra等都是可以的,在本文中我们将使用Elementor Pro进行制作

创建网站导航菜单

在设计网页之前,我们需要先准备好对应的导航菜单,这样在页面的设计中才能做到适合

打开WordPress菜单管理,新建一个菜单,如果你还不熟悉,可以查看WordPress菜单设置教程

1589198697-d06e44ba82da9af

这里和常规的菜单最大的不同就是全部采用锚链接格式,像 #intro、#work 这样前边用#号开头的地址,这些按钮对应相应的模块

使用Elementor创建吸顶导航

在导航创建好以后,就可以使用Elementor创建页面了

先将模版调整为 Elementor 画布,在空白页面中进行设计

添加一个导航菜单,并选择对应菜单为我们刚刚创建的单页导航菜单

1589198698-340af20382f5080

然后在高级设置中,开启 Scrolling Effect,选项为Top

1589198700-5fb73f1901651f3

你会发现导航会跟随网页滚动而保持在顶端,这样,Elementor的吸顶导航就创建完毕了

Elementor设计各个模块

接下来你就根据自己的菜单进行页面的设计,需要注意的就是因为我们在做单页网站,所以每个菜单按钮对应一个网页模块,在Elementor中就是一个Section

那么我们要如何将Section和导航中的锚链接互相关联起来呢?

编辑Elementor的Section,可以看到一个叫做CSS ID的字段,这个就是锚链接指向的位置,这个和菜单的链接是相对应的,比如菜单的链接是 #intro,那么点击它就会跳转到 CSS ID为intro的Elementor模块

1589198701-84d4cc29523e1e5

将所有的导航对应到相应的Section之后,页面就算完成了

把WordPress变成单页网站

虽然说我们的单页已经做完了,但是这个时候打开域名却还是默认的WordPress页面,接下来我们将单页面应用到网站首页

打开WordPress后台,选择设置 – 阅读,将主页设置为刚刚创建的单页面,保存就可以了

1589198703-06025a18c097126

这样我们的单页网站就完成了,后期你只需要维护这一个页面,非常的简单方便

免责申明:
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流,可进群讨论!
2. 如有无法查看或链接失效,烦请报告联系管理员处理!
3. 本站无法保证资源或其时效性,恕不接受任何提问。
4. 欢迎大家帮助本站出力,赞助费用仅维持本站的日常运营所需!故不接受任何形式的退款。
5. 搜5G网无法保证文章教程或资源的完善与安全,请自行检测解决。
6. 在本站下载的源码严禁杜绝任何形式的正式商业用途,请去程序官方购买。
本站资源素材仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本作品采用BY-NC-SA 4.0 《国际知识共享署名许可协议4.0》 进行许可 。
本站所有图片素材均享自由版权下创作共用CC0协议。
搜5G资源网,5G资源网 » Elementor设计单页网站教程

发表评论

搜5G网永久会员限时优惠中,不限下载,免费更新

立即查看 了解详情