spot_img
HomeDTC品牌出海独立站教程如何使用 Shortcodes Ultimate 在 WordPress 中为文本添加动画效果

如何使用 Shortcodes Ultimate 在 WordPress 中为文本添加动画效果

JasperAI 10000字免费额度试用

动画文本位是吸引访问者注意力的有效方式。 如果您为这项工作选择了正确的插件,那么在 WordPress 中为文本制作动画很容易。 如果您想使用简单的短代码避免复杂的 CSS 编码和动画文本,我们已经涵盖了它。

我们将使用 Shortcodes Ultimate 插件在 WordPress 中制作文本动画。 凭借令人印象深刻的 60 个动画选项,该插件一定会为您的应用程序提供恰到好处的东西。

值得一提的是,Shortcodes Ultimate 的功能远不止动画文本。 进度条、引述、工具提示、滑块、旋转木马、表格——这只是一个示例。

我们对本教程中的文本动画感兴趣,但需要一些时间来了解该插件。 它可以涵盖很多基础(并替换很多其他插件)。

安装 Shortcodes Ultimate 插件

登录到您的 WordPress 管理面板。

WordPress divi主题

在左侧栏导航中,将鼠标悬停在“插件”链接上,然后单击“添加新”链接。

鼠标悬停在

在“搜索插件……”框中,输入“Shortcodes Ultimate”。

搜索 WordPress Shortcodes Ultimate 插件

找到插件后,单击“立即安装”按钮。

点击安装 WordPress Shortcodes Ultimate 插件

最后,单击“激活”按钮。

单击以激活 WordPress Shortcodes Ultimate 插件

配置 Shortcodes Ultimate

在左侧栏导航中,将鼠标悬停在“简码”链接上,然后单击“设置”链接。

点击

谷歌SEO优化服务

大多数可用设置可以保留插件分配的默认值。 您可能想要在此处更改的唯一一件事是在“启用短代码”部分中启用“文本小部件”。

启用文本小部件的复选框

如果您只想为帖子或页面中的文本设置动画,请取消选中该框并跳过所有设置。

持续时间和延迟时间等动画选项是使用各个简码中的变量设置的。 我们会在一分钟内解决这个问题。

好的,让我们在 WordPress 中为一些文本设置动画

首先,我们将为现有页面上的一行文本添加动画效果。

H10的年终大促

在 WordPress 编辑器中打开一个页面,找到您想要制作动画的文本。

由于我们正在对现有块中的一行文本进行动画处理,因此我们不会使用简码块。 我们将把短代码添加到现有的段落块中。

如果您使用“经典”WordPress 编辑器,您将使用我们在这里展示的相同过程。

简码是 苏动画. 只需要一个变量,“类型”。 所以一个完整的简单短代码看起来像这样:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][su_animate type=”bounceIn”]要设置动画的文本行。[/su_animate][/ht_message]

查看可用类型列表以查看不同的“类型”选项。

因此,用短代码围绕您想要设置动画的文本。 地方 [su_animate type=”bounceIn”] 在文本的开头,以及 [/su_animate] 在最后。

将简码添加到文本行

现在保存或发布该页面,您将看到您的动画文本在起作用。

页面上的动画

高质量外链购买

我知道,那是一张静止图像,我能说什么呢? 它不捕获文本移动。

如果您在家里关注这个 WordPress 动画,您可以在自己的网站上看到它。

配置动画文本持续时间

这就是能够在不知道 CSS 的情况下对文本进行动画处理的地方。 配置持续时间和延迟时间所需的代码被简单的短代码变量取代。 (CSS 实际上并没有被替换,当然,我们只是不必处理它。)

好的,我们将从 期间. 正如您可能猜到的那样,这是动画运行所花费的时间。 我们将在几秒钟内使用一个值。 所以为了让我们的文本反弹持续五秒钟,我们设置 持续时间=“5”.

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][su_animate type=”bounceIn” duration=”5″]要设置动画的文本行。[/su_animate][/ht_message]

writesonic

确保添加“持续时间”变量 “类型”变量。

添加简码持续时间变量

当您保存或发布页面时,您可以看到动画效果需要更长的时间才能播放出来。 因此,增加持续时间不会使我们在第一个示例中看到的快速效果持续更长时间。 相反,效果以慢动作发生。

增加持续时间值可用于创建不同的效果。 您是否喜欢这些效果取决于您想要产生的影响类型。

持续时间变量适用于 0 到 20 之间的任何数字。

配置动画文本延迟时间

改变 延迟 值控制动画何时开始。 默认情况下,当没有设置延迟值时,动画会在页面加载时开始。

延迟值让您在动画开始之前创建一个暂停。 就像持续时间变量一样,延迟使用以秒为单位的值。 所以为了让我们的文本在页面加载五秒后弹跳,我们设置 延迟=“5”.

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][su_animate type=”bounceIn” delay=”5″]要设置动画的文本行。[/su_animate][/ht_message]

再一次,我们添加“延迟”变量 “类型”变量。

添加简码延迟变量

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱?可以免费试用Shopline智能建站工具,一个月都不要一顿火锅的钱!(这里就可以在线申请!) 或者扫描下方二维码
shopline

需要注意的重要一点是 设置延迟时间会使您正在设置动画的文本在该时间过去之前不可见.

因此在我们的示例中,文本直到页面加载五秒后才显示在页面上。 让访问者等待您希望他们看到的文本需要很长时间。

与持续时间变量一样,延迟适用于 0 到 20 之间的任何数字。

在 WordPress 中为文本设置动画时如何同时使用持续时间和延迟

如果你想同时使用 期间延迟 在一起,你可以。 只需将这两个值添加到短代码中:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][su_animate type=”bounceIn” duration=”5″ delay=”5″]要设置动画的文本行。[/su_animate][/ht_message]

我们可以动画段落中的一行文本吗?

有点儿。

Shortcodes Ultimate 插件将简码文本放入

默认。 因此,使用短代码将在文本上方和下方插入空格。

但是有一个变量叫做 排队 将简码放在 标签而不是

标签。

要使用它,请插入一个 内联=“是” 多变的。

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][su_animate type=”bounceIn” inline=”yes”]要设置动画的文本行。[/su_animate][/ht_message]

添加

您可能必须尝试不同的“类型”值,因为在 改变某些事物的外观。

隐藏的奖励动画

到目前为止,我们只讨论了动画文本。 但是短代码可用于为页面上的几乎任何元素设置动画。

这里我把短代码的开头放在一张图片前面,然后在图片后面关闭它。

在图像上使用简码

这使得图像非常显着地俯冲和反弹到位。 效果很不错,试试吧。

添加 10 秒的持续时间会使其漂浮到位时更加诡异。

在图像上使用短代码持续时间变量

看看,现在我终于可以得到效果的截图了。

图像漂浮到位

仍然是静态图像,我知道,但你明白了。

如果卸载 Shortcodes Ultimate 插件会发生什么

如果您卸载该插件,使用该插件的页面和帖子将受到影响。 插件简码将停止工作,因此简码本身将显示在使用它们的任何地方。

任何场合都没有说服力的动画!

我们已经看到使用 Shortcodes Ultimate 在 WordPress 中为文本设置动画是多么容易。 这是一种很酷的效果,就像很多很酷的效果一样,我们应该谨慎使用。 但是,要将注意力吸引到一行文本上,这是无可比拟的。

tiktok siteground

当您在图像上使用动画短代码时,您可以创建一些不寻常且引人注目的效果。 尝试将动画短代码应用于其他页面元素也很有趣。 但请记住,请谨慎使用该效果。 太多的好事会开始变得烦人和分心。

您是否尝试过手动向您的站点添加 CSS 动画类? 既然您知道这样做更容易,您是否认为您可能会尝试在您的网站中使用动画?

在评论中让我知道。

5分钟生成10篇英文软文article forge软件试用
跨境电商独立站代运营服务综合套餐项目合作请联系客服微信 13564054264
服务项目服务模块服务效果服务周期服务费用 RMB
海外市场调研
与品牌诊断
目标市场调研1份调研报告按次(5-7个工作日)5000
消费受众分析
市场准入条件
竞品发展轨迹
市场销售策略
品牌商业化诊断
TikTok
账号代运营
TikTok账号定位3个账号运营
500条视频内容发布
按季度(50-65个工作日)30000
TikTok内容策划
TikTok视频制作
TikTok账号涨粉
TikTok数据分析
TikTok
直播代运营
TikTok直播策划20-24场直播按月度(20-24个工作日)15000
TikTok网络搭建
TikTok选品分析
TikTok话术提炼
TikTok直播开展
TikTok直播数据分析
TikTok
KOL/KOC营销
TikTok行业达人匹配500-1000个达人邀约/天按月度(20-24个工作日)10000
TikTok行业达人邀约
TikTok行业达人签约
TikTok达人合作跟进
TikTok达人合作完成
海外社媒
代运营
海外社媒运营需求确认insgarm
Facebook
Pinterest
Linkedln
海外社媒运营(4选2)
按季度(50-65个工作日)30000
海外社媒运营方案制订
海外社媒代运营开展
海外社媒活动策划&开展
海外社媒账户涨粉&数据分析
海外线下
代理商拓展
渠道代理目标市场确认主要服务地区为欧美/东南亚
限定1-3个国家
按季度(50-65个工作日)35000
渠道代理商信息抓取
渠道代理商邮件邀约
渠道代理商洽谈准备
渠道代理商签约合作
渠道代理商完成合作
海外广告代投放海外广告账户开户TikTok
Google
Facebook
海外广告代投
(电商/游戏)
按季度(50-65个工作日)开户首充1000美金
10%广告投放佣金
海外广告产品分析
海外广告代投计划制订
海外广告代投内容制作
海外广告代投放开展
海外广告代投效果优化项目合作请联系客服微信 13564054264
siteground

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES