spot_img
HomeDTC品牌出海独立站教程如何将加载动画添加到您的 WordPress 网站

如何将加载动画添加到您的 WordPress 网站

JasperAI 10000字免费额度试用

使用 WordPress,您可以自定义网站的每个方面,包括加载屏幕动画效果。 通常,您需要使用编码来实现此目的。 但是,您也可以使用插件。 我找到了完美的 WP Smart Preloader。

此插件允许您选择加载动画并将其应用于网站。 它还为用户提供了添加自定义 CSS 以自定义任何默认动画的能力。 因此,可能性是无限的。

今天,我将演示如何使用WP Smart Preloader插件自定义加载屏幕。

什么是加载动画?

加载动画是加载内容时可见的小动画。 对于网站,这些动画会在页面加载时间比平时长或某个过程需要额外时间才能完成时出现,例如支付交易。

有许多著名的已成为某些品牌的代名词。

谷歌SEO优化服务

例如,Mac 用户应该对旋转色轮非常熟悉。 在很多情况下,这些加载动画可以变得非常有辨识度。 这真的取决于访问者的观点。

为什么要更改 WordPress 页面加载动画?

实际上,从性能的角度来看,这样做绝对没有优势。 事实上,您甚至可能会为此增加加载时间(几乎可以忽略不计)。 也就是说,让您的网站看起来像您想要的那样对大多数人来说是一个足够好的理由。

许多游客会欣赏这种对细节的关注。

当然,有一个主要优势,那就是定制品牌。 您可以创建自定义图像,而不是使用通用的预加载器图像。 该自定义视觉效果可能包括您的徽标或公司吉祥物。

因此,即使客户正在加载,他们也无法逃避您的品牌。

WordPress divi主题

也就是说,这样做需要更多的编码知识,因此并不适合所有人。

还值得一提的是,加载动画不仅仅适用于页面。 在某些情况下,客户可能需要等待信息在您的网站上进行处理。 这些都是炫耀华丽动画的绝好机会。

如何在 WordPress 中自定义加载动画

第 1 步:安装 WP Smart 预加载器

WP Smart Preloader 插件允许您在网站的 6 种加载动画之间切换。 每一个都可以使用额外的 CSS 进一步定制。 您也可以选择添加自己的自定义动画,但必须完全用代码设计。

总的来说,这个过程再简单不过了,最多只需要几分钟。

让我们首先单击插件并选择左侧管理面板上的添加新选项。

添新

在可用的搜索框中搜索 WP Smart Preloader。 这将拉出您可能会觉得有用的其他插件。

WP 智能预加载器

向下滚动直到找到 WP Smart Preloader 插件并单击“立即安装”按钮并激活插件以供使用。

现在安装

H10的年终大促

第 2 步:选择预加载器图像

在设置方面,没有太多。 实际上,您只需要选择预加载的 gif 并保存您的选择,所有内容都会出现在您的网站上。

在左侧的管理面板上,单击“设置”并选择“WP Smart Preloader”选项。

设置

在顶部,您会看到一个下拉框,您可以使用它来选择网站加载器。 总共有六个,您可以创建自己的。

由于创建您自己的代码涉及使用自定义代码,因此我无法演示如何做到这一点。

相反,选择一个预加载器图像。

预加载器

在下面的框中,您可以看到加载动画的预览。

预习

在此下方有一个复选框,只会在您的主页上显示动画。 实际上,主页是最常看到自定义加载动画的地方,因此您的网站也可以这样做。

高质量外链购买

主页

第 3 步:使用自定义代码(可选)

接下来,您会发现两个文本框,您可以在其中添加自定义代码以创建新的加载动画或更改现有动画。 自定义动画框接受 HTML,而自定义 CSS 框接受 CSS 代码。

即使您喜欢默认加载器,也最好确保它使用您网站的颜色。

自定义动画

请记住,这些框不会检查语法错误。 因此,您可能希望使用实际的 HTML 编辑器来排除故障。

JasperAI 10000字免费额度试用

如果您正在寻找一个免费学习 CSS 的好地方,W3Schools 有一些很棒的教程。

第 4 步:选择动画时间

最后,您将看到另外两个文本框,您可以使用它们来控制动画的持续时间和淡出时间。 在大多数情况下,您可以将它们留空,因为它们具有适合默认加载动画的默认值。

如果您选择自定义这些效果,您可能需要编辑持续时间和淡出时间。 只需输入动画将持续的秒数。

笔记: 1 秒 = 1000,因此如果您希望效果持续 2.5 秒,则应输入 2500。

期间

对所做的所有更改感到满意后,单击“保存更改”按钮。

保存更改

恭喜,您的新加载动画将显示在您的网站上。 您可以随时更改此部分。

附加插件

正如您可能已经猜到的那样,在 WordPress 中加载动画时,有很多插件可供选择。

这里有一些您可能会觉得有用的其他插件。

WordPress花园粉丝福利

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

网站预加载器

网站预加载器

Preloader for Website 插件允许用户在 WordPress 中添加动画加载屏幕。 该插件采用轻量级设计,这意味着对您网站的影响很小。 您可以自定义加载页面上的各种功能,以更好地满足您的需求。

预加载器矩阵

预加载器矩阵

如果您想在 WordPress 中自定义加载屏幕和动画,Preloader Matrix 是另一个绝佳选择。 该插件为用户提供了超过 40 种独特的动画以供选择,并具有多种自定义选项。 您甚至可以设置加载屏幕将持续多长时间。

如果您对 WP Smart Preloader 不满意,我强烈建议您查看此插件提供的动画。

避免长时间加载

可悲的是,一些开发人员可能认为这是延长加载时间的借口,但我向你保证这不是。 加载时间长不仅会破坏用户体验,还会降低您的搜索引擎排名。

因此最好的加载动画是你从未见过的。

但是,有很多页面加载与页面加载不同的情况。 例如,假设您的网站执行允许访问者输入值的计算。 如果公式很复杂,可能会导致等待时间延长。

因此,在他们等待数据加载时在屏幕上播放华丽的动画是有意义的。

这实际上取决于加载类型。

结论

添加自定义加载动画可以帮助您的网站脱颖而出并展示您的创造力。 如果您使动画融入您网站的徽标和颜色,则可以帮助建立品牌知名度。

当然,实际看到这些加载动画的用户越少越好。 毕竟,看到这些动画意味着他们不喜欢您的内容或查看产品。

您是使用默认动画还是创建自定义动画?

5分钟生成10篇英文软文article forge软件试用
siteground

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

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