动画头条

标题中的移动词会吸引静态线不存在的眼睛。 动画标题 小部件在 Elementor 的主插件 将标题分成固定部分和动画部分,然后将动画部分循环到具有旋转、打字、幻灯片和剪辑等效果的单词列表中。

您编写第一个标题,添加旋转的单词,选择动画预设,然后对两个部分进行样式设计。本指南将浏览小部件中的每个设置。

动画标题小部件的作用 #

该小部件从两块构建一个标题。 第一个标题 留在原地,然后 第二个标题 随您选择的动画旋转单词列表。因此 “Master Addons” 可以坐在从终极插件到独特设计再到无限变化的单词旁边循环。

它有三个选项卡。 内容 保存文本、单词列表、预设和时间。 风格 每个标题的颜色和尺寸。 高级 带有通常的 Elementor 间距和可见性选项。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• 您的固定标题文本和您想要轮换的单词列表。

如何添加动画标题小部件 #

在 Elementor 编辑器中,打开 元素 面板和搜索 动画头条的,(或)滚动到主插件部分(小部件带有紫色MA徽章)。将其拖到您的页面上,它会加载一个准备编辑的示例标题。

设置标题和单词列表 #

打开 内容 选项卡。 第一个标题 是静态文本,并且 第二个标题 是旋转单词的复读器。

• 样式预设: 用于旋转单词的动画。
• 第一个标题: 行固定部分,带有"使用人工智能写入"选项。
• 第二个标题: 每个旋转单词一个项目。使用"添加项目"添加单词,复制图标复制,删除 X。
• 对齐和 HTML 标签: 对齐标题并设置其标题级别(H1 至 H6)。
• 动画延迟: 每个单词在下一个单词之前显示多长时间(以毫秒为单位)。

选择动画预设 #

的 样式预设 dropdown 设置旋转词的进出方式,每一个都给标题不同的感觉。

• 旋转 1、2、3: 将单词翻转或旋转到位。
• 打字: 像打字机一样逐个字符输入单词。
• 加载栏、幻灯片、剪辑: 用条形图、幻灯片或面具揭示单词。
• 缩放、缩放、推送: 缩放或将单词推入和推出。

的 加载栏 例如,预设在下一个加载之前将每个单词擦除在移动条后面。

样式第一个标题 #

的 风格 选项卡分成 第一个标题, 第二个标题、和 图案 (一个专业选项)。打开 第一个标题 为固定文本样式。

• 文本颜色和背景: 固定的单词颜色和背后的可选亮点。
• 版式: 字体、大小和重量。
• 填充、边缘、边框、盒子阴影: 文本周围的框。

风格动画单词 #

打开 第二个标题 zi己对旋转的单词进行风格化。给它一个对比色或高光背景,动画脱颖而出,而不是融入固定的文字中。

它具有与第一个标题相同的控件,因此您可以为移动的部分设置不同的文本颜色、高光背景、排版和边框。

常见用例 #

• 英雄头条 这会旋转穿过您的主要卖点。
• 着陆页 自行车观众或用例(针对博主、商店、代理机构)。
• 功能部分 用几个旋转词突出显示产品的功能。
• 投资组合介绍 对您的角色或技能产生打字影响。
• 公告栏 用一个动画单词吸引眼睛。

使用动画标题小部件的技巧 #

• 保持旋转单词的长度相似。 大长度跳跃使线路在动画化时发生移动。
• 设置延迟以匹配读取速度。 2000到3000毫秒左右,让人们读每个单词。
• 对比动画单词。 不同的颜色或亮点告诉访问者哪个部分移动。
• 将预设与音调相匹配。 打字适合个人网站;旋转和滑动适合大胆的英雄。
• 设置正确的 HTML 标签。 H1用于页面的主标题,这样它对于SEO来说保持正确。

观看视频教程 #

喜欢在屏幕上跟进?下面的视频教程从头到尾浏览动画标题元素,显示每个预设、单词列表和样式选项在 Elementor 编辑器中的工作原理。

常见问题 #

包裹起来 #

动画标题小部件将平坦的标题变成移动的标题:编写固定部分,列出要旋转的单词,选择像打字或旋转这样的预设,然后对两半进行样式。有关更多标题小部件,请参阅 双标题小部件 和 渐变标题小部件,浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。