WordPress 视差:您的完整入门指南
已发表: 2022-03-22
即使是最时髦的网站也会在一段时间后变得陈旧。 新趋势出现,某些设计风格很快就会过时。 为了抵消这种情况,您需要不时为您的网站提供一些视觉提升。 您不需要进行全面的重新设计,只需在这里和那里调整一些东西,给人一种全新的感觉。
使用视差效果可以做到这一点。 例如,它可能使您的图形元素流行,同时也打破您的文本重的材料。
今天的教程将解释视差效果,视差效果的优缺点,为什么要使用它们,哪些 WordPress 主题是视差效果的好选择,以及一些您可以学习的最佳案例实践。
所以让我们从头开始:
什么是视差效果?
视差效果意味着网站上的背景图像要么被冻结在适当的位置,要么比页面的其余内容滚动得慢。 这会产生内容在背景图像前面移动的错觉,从而为您的网站提供深度。
视差滚动效果在 2011 年首次出现在网上时,就让 Wave 成为一种新的、令人兴奋的网页设计趋势。当然,从那时起,视差滚动已经巩固了自己作为一项基本设计资产的地位,并将继续存在下去。
视差效应是 WordPress 网站上常见的广为人知的设计元素。 简而言之,这是一种滚动效果,其中背景图像的移动速度比前景元素慢,从而在二维空间中产生了三维的错觉。
它多年来一直在游戏行业流行,但直到最近才进入网页设计。 借助视差滚动效果,您现在可以创建精美的页面设计,其中包含引人注目的元素,使访问您的页面更具吸引力。
您可以在商业网站的登录页面、长篇内容、销售页面或主页上使用视差效果。 这是将注意力吸引到长页面的不同部分的好方法。
许多高级 WordPress 主题在主页上包含视差效果。 此外,大多数 WordPress 页面构建器插件也支持视差效果。 但是,并非所有主题默认都包含视差效果,并且您可能不想使用页面构建器来创建自定义页面布局,以实现视差效果。 但我们稍后会讨论。
为什么在您的 WordPress 网站上使用视差?
让我们从视差滚动的一个更有价值的好处开始:它是一种显示某些网站部分的引人注目的方法。
现在让我们看几个网站,这些网站展示了这种奇妙的新方法还能做什么,以便您自己总结。
1. 大胆的产品展示
通过向您的产品展示视差效果,您可以充分展示该产品的潜力。 此外,视差技术允许用户滚动浏览产品并从各个角度查看它,让他们更好地理解并使其更易于可视化。
以Bagagia 为例。
这个网站是一个很好的例子,让您的访问者以全新的方式体验您的产品。 这是视差效果的一个很好的例子。 您将获得由滚动行为控制的 3D 演示,而不是静态图像。 设计简单明了,有很多空白,并专注于独特的产品:皮革覆盖的热水瓶和包。
2. 增加网站参与度
现代网络用户寻求娱乐和参与。 因此,如果我们被邀请,我们非常乐意与网站互动。 您可以通过视差滚动做很多很酷的事情,以鼓励访问者与您的网站进行交互。
视差滚动为故事的展开创造了一个奇妙的、引人入胜的、身临其境的环境。 视差允许您在用户浏览您为他们创建的叙述过程中动态显示您网站的详细信息。
3. 改善用户体验
根据研究,用户只需 50 毫秒就可以对网站形成意见并决定他们是否喜欢它(Lindgaard、Fernandes、Dudek 和 Brown,2006 年)。
通过使背景图像比前景图像移动得慢,这种滚动技术会在网页上产生深度错觉。 视差滚动的用户声称它改善了用户体验并使用户与网站互动。 研究人员将这种令人愉悦的用户体验归因于以下变量的实现:可用性、满意度、享受、乐趣和视觉吸引力。
4. 降低跳出率
跳出率是在浏览网站上的其他页面之前点击“返回”按钮或关闭标签的网站访问者的百分比。 跳出率会对您的 SEO 排名产生重大影响。 使用视差效果有助于降低该比率。
如果网站使用视差动画有效地讲述故事,您可以打赌客户或读者会在页面上停留更长时间。 例如,如果您在此处查看 Alex Dram 的作品集页面,您会注意到在视差滚动动画期间有多个交互的形状。
整个网站方面讲述了 Alex 可以为客户设计的视觉体验的故事。 这是一种吸引观众注意力并与他们建立联系的方式,而无需简单地在文本中写下您所做的事情。
5.添加动作触发器
为您的用户添加动作触发器可能是视差滚动最关键的方面。 我们会更加警觉并愿意继续与您的网站互动,因为我们会收到即时反馈。 当我们滚动时会发生一些事情。 我们继续滚动,发生了其他事情。 这个承诺非常鼓舞人心,它使人们想要进入您的网站并聆听您的故事。
视差滚动是吸引访问者访问您网站的绝佳方式。
既然我们已经介绍了在您的 WordPress 网站中加入视差效果的明显好处,现在是时候深入研究为您的网站准备好视差的各种类型的 WordPress 主题了!
您可以选择的一流 WordPress 视差主题
为了激发访问者并将潜在客户转化为客户,您最好的网站依赖于引人入胜的内容和令人印象深刻的设计,以及流畅的用户体验。 这就是为什么您应该考虑为您的网站使用视差主题的原因——使用视差滚动浏览网站有一些特别令人敬畏的事情。
以下是一些带有视差效果的 WordPress 主题列表:
ColibriWP
您是否知道 Colibri 是 WordPress.org 上最受欢迎的 WordPress 主题之一,拥有超过 50.000 次活跃安装? 它的创建者还负责流行主题Mesmerize和One Page Express 。
这个主题是多用途的、美观的,并且完全可以根据您的需要进行定制。 您可以使用 Colibri 创建引人入胜的英雄部分,给访问者留下持久的印象。 您可以组合不同的媒体类型,例如图像、视频、拼贴和灯箱。
Colibri 提供了许多自定义选项,并且完全响应所有设备上的工作。 此外,它是一个可以完美运行的翻译就绪主题。 该主题还包括三个预先设计的网站模板、图像和渐变背景、三个标题布局选项、两个导航菜单布局和其他有价值的功能。
迪维
Divi 在幕后有很多事情要做,它提供了许多选项来创建一个灵活、响应迅速、以图像为中心的网站。 例如,主题中包含的 Divi Builder 是使用拖放界面设计布局的绝佳方式。 此外,由于用户友好的主题选项菜单,配置站点的各个部分变得轻而易举。

还有很多演示,包括室内设计、咖啡馆和餐厅、摄影等等! 您还可以从精美的视差演示中进行选择,并且可以通过添加视频背景来进一步增强视差效果。
如果您没有办法让网站的其余部分令人惊叹,那么拥有美丽的视差效果是毫无意义的。 Divi (review) 是一个伟大的、强大的、易于定制的多用途主题,具有几个视差特定的功能。
一页
OnePage 是专为自由职业者和创意专业人士设计的单页 WordPress 主题。 这是一种适应性强且响应迅速的设计,因此您的网站在任何设备上都会看起来很棒。
您可以使用 OnePage 将多个视差背景图像添加到您的网站以增加深度,以及带有箭头导航的美观滑块,使查看者可以轻松浏览您的内容。
OnePage 还具有 CSS3 动画、定价表、推荐、无限的颜色可能性、字体图标、投资组合部分、浮动菜单、动画计数器和团队部分,仅举几例。
视差
讽刺吧? Themify 的 Parallax 设计是他们最受欢迎的设计之一。 它通过将单页布局与视差效果相结合,结合了两种设计趋势,旨在创造卓越的前端用户体验。
Themify Builder 包括超过 60 种完全可定制的预制布局,带有滑块、视差滚动和其他动画。 Parallax 使用 WordPress 自定义帖子类型功能让您自定义网站的每个组件,包括您的投资组合、团队、产品和服务等部分。
您还可以从 11 种不同的布局中进行选择,添加自定义标题图片或滑块,并为您网站上的每个页面提供其菜单。 这样,您可以为每个页面赋予独特的外观,或者让它们都具有相同的风格和感觉。
由于其内置的页面构建器、预先设计的布局和多功能性,Parallax 非常适合网页设计师、音乐教师和分析师等创意专业人士
电子商务
电子商务是由 MyThemeShop 设计的 WordPress 主题。 电子商务具有快速的加载时间、对 SEO 友好的设计以及其他出色的功能作为其他主题。
这个主题是为使用著名的 WooCommerce 插件而构建的,使设置在线商店变得简单。 此外,您可以使用此主题来销售您的产品或附属产品并快速赚钱。
视差滑块、六种标题设计、四种分页选择、主页上的无限类别、简单的结帐流程、三、四或五列的页脚部分、新产品的功能区横幅和固定的浮动导航栏其主要特征。
斯德哥尔摩
就像这座城市本身一样,斯德哥尔摩拥有永恒的经典外观。 主题中包含超过 140 个即用型样本,范围从建筑商业网站到摄影作品集以及介于两者之间的所有内容。 每种设计都充分利用了负空间,营造出轻松优雅的外观。
斯德哥尔摩在定制方面提供了很多东西,所有这些都整齐地排列在“选择选项”选项卡下。 您可以在此处更改您网站的所有内容,包括徽标、页眉和页脚,以及侧边栏、404 页面和视差。
龙内比
Ronneby 是一个多用途的 WordPress 主题,适用于企业、博主、创意专业人士和自由职业者,具有 40 多个现成的演示选项。
该主题编码良好,对 SEO 友好且响应迅速,因此您可以专注于设计而不是网站的性能。
最后,该主题有一个强大的管理面板和大量的简码,在设计时可以很容易地为您的网站定制和添加功能。
内芙
Neve 是一个具有奇妙视差效果的 WordPress 单页主题。 连同网站的完全响应式设计,这些功能可以帮助您构建一个在任何设备上看起来都很棒的成功网站。
Neve 附带的综合主题设置面板将帮助您快速设置站点并根据需要进行修改。
Neve 是任何商业或投资组合网站的绝佳主题。 这些示例包括服务、团队、联系信息、推荐、定价信息、博客以及销售您的产品或服务的商店。
你可能会认为,如果它是如此美妙,几乎好得令人难以置信,那么肯定有一些缺点。 对? 你是对的。 与科技界的其他事物一样,视差效应也有一些缺点和好处。 让我们看看那些是什么。
WordPress视差:优点和缺点
优点 | 缺点 |
1. 它可以产生具有视觉吸引力的动态、交互式用户体验。 | 1. 由于视差滚动使用了大量的动画,它会使页面加载时间更长,并且无法在所有浏览器上正常工作。 |
2. 如果您是只有少数产品或一项特定服务的小企业主,那么您可以将所有内容放在一个页面上,从而使用户不必浏览多个页面或等待他们加载。 | 2.网站应该易于使用和导航,如果没有正确使用视差滚动,这可能会很困难。 在内容繁重的网站上使用效果可能需要过度滚动,这可能会使用户感到沮丧并使阅读变得困难。 |
3. 设计师通常依靠图形和颜色来引导用户浏览网站。 但是,通过视差滚动,您可以将用户引导到设计师或 UX 专家想要的任何方向。 | 3. 如果您的网站采用视差滚动,您应该知道它在移动设备上的显示与在 PC 上的显示不同。 这不是一个重大问题,但设计人员必须了解如何正确地将效果从 PC 转换到移动设备,以避免出现相当大的兼容性问题。 |
如果您决定在您的网站上使用视差效果,尽管它有缺点,请记住以下几点:
网页设计:使用视差时要记住什么
现在您已经了解了视差网站设计的魅力,是时候研究最佳实践了。 我们为此部分选择了一个更谨慎的标题,因为视差网站并不适合所有人,应该谨慎使用。 这是我们的两个提示:
牢记页面加载速度
不用说,将复杂的效果放入您的网站会影响其性能。 这些效果之一是视差滚动。 较长的页面加载时间会损害网站的 SEO 成功。 用户倾向于从一个网站跳转到下一个网站,并准备放弃加载时间过长的页面。
确保视差效果不会过多地降低您网站的性能。 您可以检查您的网站的速度,看看是什么导致它变慢。 有许多在线工具可以帮助您完成这项工作。 其中之一是 Google 的免费 PageSpeed Insights 服务。
适度使用它
在最好的情况下,视差网页设计将专业地吸引对网站所有适当区域的关注。 最坏的情况是会把注意力从核心点上转移开,让观众一头雾水。 在适当的地方使用视差效果和适度将确保您的实例是前者。
创建视差网站时,考虑可访问性至关重要。 占所有网络流量一半以上的移动设备与视差设计不兼容。 此外,过时的浏览器版本可能与视差网站设计不兼容。
交给你
这将我们带到我们视差网站设计指南的结尾。 改进的在线故事讲述、引人入胜的消息、与用户的更多交互以及在网站上花费的时间更长只是视差效果的一小部分优势。
但是,不要过度使用视差设计,因为它可能很容易压倒您的核心信息。 任何网页设计元素的主要目标都是改善网站上的用户体验。 因此,请确保您的设计能够实现这一点。
我们希望这篇文章为您提供了您正在寻找的信息。 祝您网站设计好运!