海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

每个人总是很匆忙,加载时间超过 2 或 3 秒的网站被认为“太慢了”。 值得庆幸的是,有一种方法可以暂时绕过这种恐慌并使用户在网站上停留足够长的时间以加载内容。 我说的是完美的催眠加载动画。

在这篇文章中,我们将了解加载动画究竟是什么,它们的目的是什么,以及如何将一个加载动画添加到任何 WordPress 网站——包括你的 Divi 网站。

什么是加载动画?

加载动画,也称为预加载器,是一种引人注目的动画,它在网站上显示的时间足以加载所有元素。 一些加载动画很短,不需要长时间吸引用户的注意力。 但在某些情况下,如果网站非常大,加载动画需要真正吸引用户才能留下来。

如果您接触过足够长的时间,您就会知道加载动画自 90 年代以来就一直在出现。 即使在互联网时代的初期,我们也有加载动画。 当然,在那个时候,它们可以持续比现在更长的时间。 此外,我们已经学会了如何让用户更享受它们,而不会让它们感到无聊和导航。

熟悉加载动画

最常见的加载动画样式是旋转圆圈。 不要与苹果电脑的“死亡彩虹圈”相混淆。 旋转圆加载动画具有交错的渐变运动。 第一个旋转式预加载器有很多不同的版本,从花朵到圆圈到雪花,甚至旋转迎阳。 如今,旋转加载动画更加动态且更美观。

旋转加载动画仅在等待时间很短时才有效。 超过5秒已经太多了。 那是开发人员需要使用更具创意的预加载器的时候。 无论需要多长时间,有趣和有趣的加载动画都会让用户留在网站上。

更好地加载动画的技巧

您可以将一些内容添加到加载动画中,使其比移动图像更有趣。 这里有一些提示,可以使它们更好、更有效。

海外社媒SNS代运营Tiktok代运营公司
  • 包括百分比栏
  • 显示用户还需要等待多少时间
  • 解释幕后发生的事情(使用幽默的道具)
  • 使用有趣的动画,不一定重复相同的动作

品牌加载动画的好处

如果您有机会创建自己的加载动画或使用带有自定义选项的插件,请确保预加载器带有品牌标识。 这可能就像使用品牌的网站颜色实际使用公司插图一样简单。 加载动画品牌背后的想法是它看起来属于该站点,而不仅仅是一个附加组件。 Awwwards 网站上的这一综述可以激发您自己的创作。

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

添加加载动画比您想象的要容易。 关于如何将一个添加到 WordPress 网站,有多种选择。 从易于使用的插件到向站点添加自定义代码。 由于有很多不同的选择,我将在此处列出它们,以便您环顾四周并找到最适合您的选择。

使用插件添加加载动画

插件是添加加载动画的最简单、最直接的方法。 如果您不喜欢弄乱代码或没有时间,这些特别有用。 这里列出了一些用于加载动画的最通用的插件。 其中一些是免费的,而另一些则是收费的。 在某些情况下,同一个插件有更简单的免费版本和更强大的专业版。

放样机

Loftloader 有免费版和专业版。 在免费版本中,您可以试用一些 proloader 并进行自定义以匹配站点和品牌。 专业版有更多选项和更精细的控制。

平板预加载器

Flat Preloader 是一个简单的免费插件,带有一组有限的彩色加载动画。 如果您需要快速修复预加载器并且不需要自定义颜色或图像,则此插件是完美的选择。

最佳预加载器

Best Preloader 是一款免费的单选项加载动画插件,适合任何网站风格。 我附带了一个带有一些自定义控件的动画。

页面加载器

Page Loader 是一个高级加载动画插件,具有许多自定义和品牌选项。 它是市场上最受欢迎的预加载器插件之一。

WP 智能预加载器

WP Smart Preloader 是一个免费的开源插件,具有完整的自定义选项。 动画不是很精致,但可以匹配任何风格的网站。 您可以轻松自定义颜色和设置。

添加没有插件的加载动画

如果您想避免使用插件,可以使用大量免费且随时可用的加载动画。 以及一些提供您需要添加的代码片段的高级教程。

PixelBuddha 与多媒体:

Multimedia 的人发布了一个简单的教程,其中包含来自 PixelBuddha 的两套免费加载动画以及在您的网站上设置它们所需的代码。

代码笔:

UX Planet 的这篇 Medium 文章,作者总结了很多不同风格的加载动画。 有简单的和更复杂的。 它们中的大多数是从 CodePen 嵌入的,您可以从小部件本身获取 HTML 和 CSS 片段。 您需要将这些插入到用于加载动画设置的完整代码集中。

旋转套件:

Tobias Ashli​​nk 有一个 SpinKit,里面有一个很好的加载动画集合,代码可以通过 GitHub 获得。 这些还需要添加到预安装设置的完整代码集中。

Loading.io:

Loading.io 是具有许多不同选项的加载动画的集合。 有 CSS 预加载器、GIF 预加载器、按钮等等。 浏览他们的网站以找到所有选项以及有关如何将它们添加到您的网站的说明。

像素变量:

这些家伙是 Pixelvars 编写了一个方便的教程,其中包含设置自己的加载动画所需的所有代码。 您甚至可以将他们的代码与上面的 CodePen 或 GitHub 动画一起使用。 对于某些人来说,这个选项似乎更高级一些。 如果您是具有良好编码知识的开发人员,请选择此方法。

有这么多选择,你会选择哪个?

向 WordPress 网站添加加载动画很容易。 有这么多不同的选项可供选择,只需选择一个即可。

在这篇文章中,我们向您展示了许多不同的方法来向您的网站添加加载动画。 你更喜欢哪一种方法? 自定义设计并添加代码到子主题? 一个可定制的插件? 一个简单的、没有多余装饰的选项? 请在评论中告诉我们,以便我们查看您自己的加载动画。

精选图片来自 muchomoros/shutterstock.com

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts