Elementor教程-Widget 概述-锚点

前面的几篇教程,已经和大家分享了SectionColumn的功能,今天我们继续Widget的介绍。

如果说Section+Column+Widget是一个样板间,那么Section+Column只是一个毛坯房,我们已经学会了盖毛坯房,那么就让我们来学习一下,使用Widget把毛坯房变成样板间吧。

锚点:是网页制作中超级链接的一种,又叫命名锚记。使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。创建到命名锚记的链接的过程分为两步。首先,创建命名锚记,然后创建到该命名锚记的链接。 关于锚点更多的介绍,请自行google。

https://en.wikipedia.org/wiki/Template:Anchor

首先,我们在Elementor的功能面板,搜索“anchor”,找到“Menu Anchor”的widget,然后拖拽它到需要添加锚点的位置,释放鼠标后,可以看到在编辑页面需要用户设置一个锚点的Anchor ID,这个id是用于点击<A>标签时,跳转后的位置标识。

Widget功能-anchor
Widget功能-anchor

需要注意的地方,Anchor ID必须遵循命名规则,只可以使用A-Z , a-z , 0-9 , _(下划线), -(中横线)。

定义完ID后,我们点击需要出发的元素,比如一个按钮,或者一个图片,为这个元素增加链接,链接格式为:#Anchor ID

然后点击发布,在预览页面,点击增加锚点链接的元素,就可以看到页面会自动平滑滚动到添加锚点Anchor的位置。

Anchor操作演示

Elementor的widget功能很强大,可以说页面的组成,都是由Widget来填充的。

后面还会介绍一些最常用的widget:

发表评论

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