大多数文本链接在悬停上做一件事:更改颜色。 Elementor 创意链接小部件 从主插件给你更多的玩,括号滑入单词,一个填充扫过文本,一个3D翻转,十几个其他悬停效果,你可以掉在任何链接,而无需打开一个CSS文件。
下面,我们将添加小部件,浏览每个内容控件,覆盖样式选项,并按下效果列表。编辑器的屏幕截图随附每个步骤。首先,这是面板中小部件的位置。
创意链接小部件的作用 #
它需要一个简单的内联链接并使其移动。 创意按钮小部件 styles一个坚实的, 带衬垫的按钮。创意链接是文本链接版本:一个“阅读更多”, 一个导航式号召性用语, 或者一个你想在句子内部脱颖而出的单个短语。动画在悬停时开火, 你从一个下拉中选择它。
您还可以获得一个可选图标、一个某些效果显示的替代标签、对齐控件以及一个带有排版、边框和围绕链接动画构建的一组颜色选项的样式选项卡。它位于免费的 Master Addons 系列中,因此它在任何 Elementor 网站上运行。完整的 小部件和扩展 列表有其余部分。
宁是在阅读每个设置之前看到它?这是正在执行的小部件。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。新到?从开始 安装指南.
- Elementor 编辑器中打开的页面或模板。
如何添加创意链接小部件 #
这部分很快:
- Elementor打开一个页面,然后点击左上角的小部件面板图标(网格)。
- 类型 创意链接 在搜索框中,或向下滚动到 主插件 类。
- 拖动 创意链接 小部件到画布上。
它以占位符 “点击此处”文本降落,可供您编辑。
内容设置已解释 #
选择链接并打开 内容 tab。this是你设置文本的地方,效果,链接指向的地方。
效果 #
的 效果 dropdown 是使用这个小部件的全部原因, 选择一个, 链接在悬停时动画化, 列表运行过去 20 个选项:
括号、3D 效果、底线幻灯片、底边放大、滑入、边框向下滑动、第二边框向上滑动、边框翻译、第二文本和边框、显示推出、文本填充、圆形、三个点、边框开关、缩放、向下滑动、向上移动、交叉、3D 幻灯片、3D 幻灯片向下滑动等等。
名字并没有太多赠送,所以在直播预览中悬停链接,看看每个都做什么,括号和文本填充在身体副本中效果很好,3D选项声音更大,适合标题或英雄链接。
项目对齐、链接对齐和后文本对齐 #
项目对齐 定位整个小部件(左、中、右)。 链接对齐 並 背面文本对齐 处理某些效果带来的链接文本和备用标签。这三个都是响应式的,因此您可以使用切换设置每个设备。
链接文本和替代链接文本 #
的 链接文本 是可见标签,比如说“点击这里”。的 替代链接文本 (“Go!”在截图中)是第二个标签,它可以交换显示效果。保持简短,因为它只获得了动画留下的空间。
图标和图标间距 #
您可以将图标放在文本旁边,然后设置间隙 图标间距。主插件捆绑八个高级 图标库elementor 内部有很多可供选择的内容。
链接网址 #
将目的地放入 链接网址。旁边的齿轮图标中保存通常的选项:在新选项卡中打开,添加nofollow。in站点链接,粘贴您自己站点的任何页面。
样式设置已解释 #
切换到 风格 选项卡并打开 链接样式。动画前后链接是这样看的。
- 宽度 並 图标尺寸:自行大小链接框和图标。
- 版式:字体系列、大小、重量和标签的字母间距。
- 链接填充:链接区域内部的间距。它还给出了一些效果空间来动画。
- 边框类型、宽度、颜色和半径:边界上骑行了很多效果(括号、边界滑下和其他),因此这些在这里比正常链接更重要。
- 盒子阴影:如果您愿意,链接框上的深度。
正常颜色和悬停颜色 #
颜色控制分为 正常 並 悬停 州。与通常的 文本颜色 並 背景颜色的, 你会看到的 前BG颜色, BG颜色之前、和 BG颜色之后。那些额外的图层是幻灯片和填充效果之间的动画,因此当您想要控制显示动画中期的颜色时,请设置它们。
看到作用中的效果 #
Brackets效果在画布上,将链接悬停,每边都滑入一个括号,所以“点击这里”读作“[点击这里]”, 每一个效果在直播预览中都表现得如此,这使得在提交之前很容易尝试几个。
使用创意链接的技巧 #
- 将效果与现场相匹配。 Text Fill 或底线幻灯片之类的微妙的可以很好地坐落在段落中。保存 3D 幻灯片和十字架的标题和英雄区域。
- 观看 BG 颜色。 前面、之前和之后背景可以在动画中冲洗文本,因此请检查链接在整个效果中保持可读性。
- 保持备用标签短。 长长的替代链接文本在动画留下的空间中变得局促。
- 别忘了触摸。 Hover不会在手机上开火,所以休息状态必须自己看完。
需要一个完整的实体按钮而不是文本链接?就是这样 创意按钮小部件。想要一个标题,描述,和按钮在一起吗?看 行动号召小部件.
常见问题 #
什么是 Elementor Creative Links 小部件?
Elementor上添加动画文本链接的主插件小部件,链接不是简单的颜色更改,而是获得括号,文本填充,圆圈和3D幻灯片等悬停效果,所有这些都从下拉设置,没有自定义CSS。
包含多少个链接效果?
Widget包含20多个效果,包括括号,3D效果,底线幻灯片,幻灯片输入,文本填充,圆圈,三点,边界开关,交叉,3D幻灯片。您在发布之前在Elementor编辑器中预览每个。
创意链接小部件免费吗?
是的。Creative Links 是 Elementor 插件免费主插件的一部分。Pro 计划添加更多小部件和扩展。请参阅 定价页面 为全面比较。
创意链接和创意按钮有什么区别?
Creative Links 将内联文本链接动画化,例如 “Read more” 或句子中的短语。 Creative Buttons 风格为坚固的带衬垫按钮。选择文本风格的号召性用语的链接和块风格的按钮。
链接悬停效果在移动设备上有效吗?
Hover效果需要鼠标,所以触摸屏上不会触发,设计静止状态看起来完整,链接在手机和平板电脑上仍然工作和读取良好。
包裹起来 #
Elementor Creative Links小部件为您的文本链接提供了真实的移动:20多个悬停效果,一个图标,调谐到动画的颜色控件,其中没有一个需要代码选择一个效果,设置颜色,您的链接停止只是坐在那里,从这里开始,其余的 主插件小部件库 是值得一看。
