默认按钮会受到点击;一个稍微运动的按钮会得到更多。免费的 创意按钮小部件 在 Elementor 的主插件 附带悬停效果预设库,从微妙的背景扫描到文本交换动画,因此无需编写 CSS 行即可发出行动号召。
您选择预设、键入文本、如果需要添加图标以及设置正常状态和悬停状态。本指南涵盖整个小部件,拖入完成按钮。
创意按钮小部件的作用 #
Widget 渲染一个带有预构建悬停动画的号召性用语按钮,动画有 21 个命名预设,6 个免费,15 个带有 Master Addons Pro,每个预设都有自己的移动:滑入的背景、自己绘制的边框、翻转到备用消息的文本。其他一切都像普通的 Elementor 按钮一样工作:文本、链接、图标、对齐和每个状态的全彩控制。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- "基本小部件"下的"主插件"选项面板中启用了"创意按钮"小部件。
如何添加创意按钮小部件 #
在 Elementor 编辑器中,搜索 元素 面板为 创意按钮 并将小部件拖到页面上。出现一个深色按钮,读取 “添加您的 CTA 内容”, 已与默认效果连接。
选择预设的按钮效果 #
打开 按钮预设和控制 在"内容"选项卡中。 按钮效果 dropdown是小部件的核心:默认,薇诺娜,乌贾拉克,韦拉,塔玛亚,拉延是免费的,皮帕鲁克,莫玛,伊西,艾伦,萨基,瓦帕夏,尼娜,纳努克,努卡,安蒂曼,伊策尔,奈拉,奎德尔,萨克尼特,希科巴需要 硕士插件专业版.
每个名字都是不同的悬停动画,每次选择后将按钮悬停在画布上,编辑器现场播放效果,因此试镜预设需要几秒钟,名字不会暗示他们做了什么,所以尝试四五个是找到正确方法的最快方法。 按钮对齐 並 按钮文本对齐 就在下面,每个设备都有一个响应式切换来进行每台设备的设置。
设置文本、链接和替代文本 #
的 按钮控制 群涵盖内容。 按钮文本 是标签,并且 链接网址 将按钮指向某个位置,并带有新选项卡和无关注选项的齿轮图标。
预设可以在悬停时将标签交换为第二条消息。选择除默认和 an 之外的任何效果 替代按钮文本 出现字段;演示将其设置为 “立即点击!”,因此按钮上写着 “在静止时添加您的 CTA 内容”,并在悬停时翻转。
添加图标 #
的 图标 控件打开 Elementor 图标库,其中包含 Font Awesome 和您安装的每个图标集。
挑选一个后, 图标位置 将其放在标签之前或之后,并且 图标间距 设置间隙;演示将其碰撞到 12 个像素,以便图标和文本呼吸。
样式按钮 #
切换到 风格 选项卡并打开 按钮样式.顶组处理形状: 宽度, 版式, 按钮填充, 边框类型, 边界半径 (演示中的8, 对于柔和的圆角), 盒子阴影、和 图标尺寸.
在那之下, 正常 並 悬停 每个选项卡都有三种颜色: 文本颜色, 背景颜色、和 图标颜色。demo给出了正常状态的白色文字在蓝色上:
然后将悬停状态翻转为绿色上的深色文本,因此该效果在两种明显不同的外观之间产生动画效果:
甲 图案 底部部分来自免费图案扩展并添加装饰性背景图案。
页面上的结果 #
Live页面上,按钮以正常颜色坐着,直到光标到达。然后预设播放:背景扫到悬停颜色,图标和文本移位,如果预设使用替代文本,则会出现替代文本。
常见用例 #
- 英雄部分 CTA 动画吸引人们关注主要动作的地方。
- 定价页面按钮 通过像 “开始” 到 “免费!” 等文本交换悬停。
- 下载和注册按钮 与图标配对以进行即时识别。
- 着陆页部分 that 需要一个按钮才能与主题的默认值分开。
获得更好创意按钮的提示 #
- 试镜预设在画布上。 每个效果选择后悬停按钮;动画在编辑器中播放,无需预览。
- 使悬停状态形成对比。 当正常颜色和悬停颜色明显不同时,动画读数最好,例如蓝到绿的演示。
- 保持替代文本简短。 当两条消息长度大致相同时,文本交换预设看起来很干净。
- 每个部分一个创意按钮。 动作赢得关注;连续三个移动按钮相互竞争。
- 检查移动设备上的点击行为。 触摸屏没有悬停,因此请确保正常状态本身读取为可点击状态。
视频教程 #
如果您想查看创意按钮的操作,您还可以观看下面的视频,从选择预设的效果到实时页面上完成的悬停动画。
常见问题 #
Master Addons 中的创意按钮小部件是什么?
它是一个用于预先构建悬停动画的号召性用语按钮的 Elementor 小部件。您从 21 个命名效果预设(6 个免费,15 个带有 Pro)中进行选择,设置文本、链接和图标,并将正常状态和悬停状态与 Elementor 面板分开设置。
包括多少个按钮效果?
Button Effects 下拉列出 21 个预设,默认、薇诺娜、乌贾拉克、韦拉、塔玛亚和雷恩免费,其余需要 Master Addons Pro,包括薇诺娜、乌贾拉克、韦拉、塔玛亚、雷恩、莫玛、奈拉、希科巴,各自应用不同的悬停动画,当你悬停按钮时,编辑画布现场播放效果。
什么是替代按钮文本字段?
Effects可以在悬停时将按钮标签交换为第二条消息,当您选择默认值以外的任何效果时,会出现替代按钮文本字段,以便您可以设置悬停消息,例如将“开始启动”切换为“免费!”。
我可以在创意按钮上添加图标吗?
是图标控件打开Elementor图标库,选择图标后,图标位置将其放置在文本之前或之后,图标间距设置间隙,图标大小和图标颜色在样式选项卡中实时显示。
我可以单独设置悬停状态吗?
是按钮样式有普通和悬停选项卡,每个选项卡都有自己的文本颜色、背景颜色和图标颜色,预设的动画在两种状态之间进行,因此对比色使效果更加明显。
包裹起来 #
Creative Buttons 小部件将一个普通的 CTA 变成一个没有自定义代码的动画:从效果下拉中选择一个预设,设置文本和图标,并给出值得在两者之间进行动画的正常和悬停状态颜色,它与 Creative Links 小部件很好地搭配动画文本链接,浏览全套 主插件小部件和扩展,并看到 创意按钮小部件页面 用于演示以及与 Elementor 按钮小部件的比较。
