什么是以及如何在 WordPress 中添加视差效果
已发表: 2021-12-12任何曾经查找过 WordPress 主题或探索过主题附带的各种特性和功能的人都可能已经注意到，在顶级主题功能中列出了称为视差滚动的东西。 并不是每个人都熟悉视差滚动的真正含义，即使是那些在网站上看到它时能认出它的人，也可能对它知之甚少。 这就是为什么我们认为最好告诉您更多有关这种流行技术的信息，并向您展示如何通过使用插件或选择视差 WP 主题在您的网站上使用它。 具有视差滚动功能的网站很受欢迎是有充分理由的，如果您想跟上网络世界的最新趋势，您只需了解有关它的所有信息。
如果您不确定是否要为您的网站添加视差效果，我们将尽力帮助您做出正确的决定：
- 什么是视差滚动？
- 如何使用插件添加视差效果
- 最佳 WordPress 视差主题和模板
一个简短的历史
视差这个词实际上来自天文学。 它描述了当从两个不同的有利位置观看时，物体在方向上的明显位移或不一致。 您知道有时太空中的物体会以不同的速度移动，因为其中一个物体离您更近吗？ 前景物体的动态似乎总是比背景中物体的动态更快、更有活力。 在“现实生活”中，这是有道理的，因为现实生活是三维的。 但是设计呢？ 好吧，我们可以让它看起来像现实生活，这实际上是设计师希望通过视差实现的主要效果之一。
众所周知，视差是在电子游戏设计的黄金时代首次引入的，更准确地说，是横向卷轴街机游戏。 它的目的是增加场景的深度和动态，并改善故事讲述，所有这些都希望为游戏玩家提供更具吸引力和身临其境的体验。
这是在 1980 年代初期。 快进到 2010 年代初，您第一次尝试将视差滚动应用于网页设计。 多年后的今天，世界上几乎没有人没有遇到过 WordPress 以一种或另一种形式滚动的视差。
怎么运行的
这听起来可能很复杂，但为您的网站添加视差效果非常简单。 视差滚动实际上遵循一个非常简单的设计理念。 您获取背景和前景，并使用动画使它们以不同的速度移动。 当用户向下滚动页面时，背景只是比前景中的对象显示得慢，其中可能包括图像、画廊、视频、文本或任何其他内容。 结果是一切似乎都漂浮在空间中，而不仅仅是坐在那里，固定在背景上。
请注意，WordPress 视差滚动设计不是单一的通用技术。 目前使用的视差设计风格有多种，但大多数都是基于多层的使用。 每一层都被分配了滚动功能和指定的速度。 在此之后，针对不同浏览器和查看器应用适当的 CSS 或 HTML 修复，确保使用这些资源最新版本的正确语法，否则整个事情将无法正常工作。
为什么好
视差滚动现在变得非常流行，以至于世界上几乎没有任何网站不以某种方式、形状或形式使用它。 这当然不是真的，但事实仍然如此——这种技术被广泛使用，尤其是在 WordPress 网站中。 那么，是什么让视差滚动对网页设计师如此有吸引力呢？
答案可能在于用户体验。 视差滚动创造了一种动态的、令人兴奋的方式来感知网站上的内容。 它通过创造深度和运动的错觉来吸引我们。 视差也是一个很棒的讲故事的工具，因为它可以通过不同的内容元素引导用户。 当然，前提是你用对了。 有很多使用视差的坏例子。 有时感觉就像设计师把它放在那里只是因为他们知道如何做，而实际上并没有什么可说的。
用户喜欢被娱乐。 除了可以使用WordPress 视频背景插件轻松添加的视频背景等经过验证的食谱之外，视差滚动也是一种很好的方法。 对于企业来说，这也是一种很好的方式，可以将观众真正地拖到他们希望他们关注的网站部分。 例如，产品或服务页面。
无论如何，滚动行为肯定会带来惊喜。 如果做得好，它会让用户感到高兴，这对网站来说总是一件好事。
安装插件
首先，您显然需要以通常的方式安装和激活插件。 首先要做的是转到您的后端并查找插件。 单击Plugins然后单击Add New 。 在搜索字段中输入高级 WordPress 背景，找到后点击安装。 安装过程完成后，单击“激活” 。 您的新插件现在应该列在您的插件菜单中。
使用插件通过经典编辑器添加视差
要实际添加视差，请转到您想要添加的页面或帖子。 您会注意到编辑器中有一个新按钮。 将鼠标悬停在它上面会显示高级 WordPress 背景。 单击它并显示一个弹出窗口，您将在其中设置不同的值并更改视差效果的设置。
首先，选择背景类型。 在本例中，我们将使用图像。
接下来要做的是选择要使用的图像。 对于全角图像，请选中显示Stretch的框。
之后，选择视差效果。 我们要去Scroll 。 您也可以在此处设置所需的滚动速度。
除了视差还有值得一提的鼠标效果。 多亏了它，您可以在鼠标光标下的图像上创建慢动作效果。 最棒的是您可以在同一图像上结合视差和鼠标效果。 只需根据您的特定需求和目标，选择更适合您的需求即可。
可以在“样式”选项卡下设置视差图像的尺寸和高度。
最后，点击插入按钮。
以下短代码现在应该出现在您的编辑器中：
[nk_awb awb_type=”image” awb_stretch=”true” awb_image=”22″ awb_image_size=”full” awb_parallax=”scroll” awb_parallax_speed=”0.5″ awb_mouse_parallax=”true” awb_mouse_parallax=”true” awb_mouse”=”0llax0″=”0llax0″=paralluse ”0″1″0″0″1paralluse” 您的内容在这里 [/nk_awb]
您需要将“您的内容”替换为您的实际内容（文本、图像、视频……）。 不要忘记点击Save 。
转到您的网站并检查您刚刚添加视差的帖子或页面，看看是否一切正常。
使用插件通过古腾堡编辑器添加视差
这个插件也是古腾堡友好的。 要使用它，请单击背景 (AWB) 块以开始添加视差效果。
与其他所有块一样，背景 (AWB) 块有自己的选项，与 Classic Editor 中的选项几乎相同。
最重要的是您可以为具有视差效果的部分添加颜色、图像甚至视频。 此外，您可以通过添加填充、速度或视差类型来设置视差的大小。 最后，古腾堡支持我们之前提到的鼠标效果。
时尚主题，尤其是在线商店，是从视差滚动中受益最多的主题。 事实上，很难想象没有它的时尚和服装网站、商店或博客。 集市是似乎恰到好处的主题之一。 这个华丽的主题带有一些令人惊叹的页面，包括制作精美的外观手册。 不对称的商店页面非常适合以一种能让访问者有购物心情的方式展示您的产品。
Bazaar 带有强大的 Select Core 插件、自定义产品短代码、视频背景部分、社交小部件和可自定义的 Google 地图。 当然，主题是完全响应式的，包括强大的 WPBakery 页面构建器。
使 Bazaar 成为最佳视差 WordPress 主题的功能：
- 平滑滚动
- SEO优化
- 翻译就绪
- 免费滑块革命插件
- 一键演示内容导入
这个关于游戏、游戏玩家、电子竞技和工作室的所有事物的令人兴奋的主题是正确完成视差滚动的一个极好的例子。 游戏行业的本质只需要PlayerX带来的那种动态和令人兴奋的用户体验。
除了酷炫的视差卷轴和滑块之外，PlayerX 还包含成功游戏网站所需的所有特性和功能。 自定义元素包括出色的信息图表、丰富的排版、团队演示、推荐、匹配列表以及流框。
总而言之，PlayerX 是一个真正展示视差滚动的主题以及应该如何使用它的主题。
使 PlayerX 成为最佳视差 WordPress 主题的功能：
- 匹配和流媒体的简码
- 团队轮播
- 综合搜索
- 7 个图标字体包
- WooCommerce 兼容
Azalea是一个华丽、复杂的 WordPress 摄影主题，具有一组预制的主页布局，其中一个主要基于视差滚动。 Azalea 是时尚摄影的理想之选，还可以用于其他目的，从生活方式和美容到博客和可以出售照片的商店。 每个主页都令人惊叹，但我们不得不说视差主页有一种特殊的魅力，我们相信大多数时尚摄影师都会欣赏它。
Azalea 非常强大，但这并不是说它很难使用。 即使是完全没有 WordPress 经验的人也应该可以轻松地设置这个主题并运行一个非常成功的时尚、美容和生活方式摄影网站。
使 Azalea 成为最佳视差 WordPress 主题的功能：
- 受保护的打样画廊
- 视差简码
- 客户轮播
- CTA 简码
- 5 种标题样式
关于波士顿的一个非常酷的事情是它允许您在单页网站和多页网站之间进行选择。 除了这种灵活性之外，您还可以获得广泛的自定义选项，当然还有一些令人印象深刻的视差页面。
波士顿是一个视差 WordPress 主题，专为公司、大公司和机构设计。 无论您选择单页浏览器还是多页网站，您都会得到一个非常智能、外观专业的网站，该网站使用视差不是为了炫耀，而是以现代感给访问者留下深刻印象。 该主题是基于移动优先概念开发的，这很重要，因为您的客户和客户很可能在他们的手持设备上进行大部分浏览。 哦，专业用户会很高兴得知有一个专门为他们制作的版本，文件更少，因此更轻。
使波士顿成为最佳视差 WordPress 主题的功能：
- 灯箱预览
- 推特直播
- 无限作品集
- Flexslider 和Revolution Slider
- 工作联系方式和通讯表格
如果您正在寻找功能强大、全面且现代的单页网站，那么Hypnos可能就是适合您的主题。 这个响应式主题确实是一个多用途的主题。 您可以将它用于从中小型企业、代理或工作室到投资组合、博客和商店的任何内容。 它有一个明暗版本，两者看起来都很棒，并且具有出色的视差效果。
最重要的是，Hypnos 非常直观，具有出色的客户支持和众多功能。 您使用此主题获得的页面构建器带有自定义部分，您还可以获得可排序的投资组合、工作联系表、 Revolution Slider和 Google 字体等。
使 Hypnos 成为最佳视差 WordPress 主题的功能：
- WPML 兼容
- SEO优化
- 视网膜就绪
- 自定义预加载器
- 实时聊天支持
综上所述
视差滚动肯定会改善您的 WordPress 网站，但前提是您做得对。 仅仅为了获得视差而添加视差是很愚蠢的。 有这么多网站使用这种效果，我们可能会越来越接近过度饱和以及它变得令人反感、过时和乏味的地步。
其次，视差滚动必须正确完成。 它需要无故障运行，否则您的网站访问者显然会感到恼火。
第三，使用视差滚动为您的单页网站注入活力是非常诱人的，但请确保您确实有话要说，有内容可以让用户滚动浏览。
第四，如果您已经设法通过引人注目的、深思熟虑的视差滚动效果吸引访问者，请不要忘记让它对您有利。 仔细规划您的 CTA 以进一步吸引他们。
当然，当您选择优质的视差 WP 主题时，您不必担心这些事情，因为主题的作者已经为您考虑好了。
最重要的是，视差滚动非常棒。 是的，有办法把它搞砸，是的，可能会有一些过饱和。 尽管如此，它仍然是增加网站流量和优化转化率的强大工具。 另外，它看起来很棒，并为您的网站增添了酷炫的感觉。
您对 WordPress 视差滚动有何看法？ 我们很乐意在下面的评论部分收到您的来信！
我们希望您发现这篇文章对您有所帮助。 如果你喜欢它，请随时查看这些文章中的一些！
- 最酷时尚的 WordPress 主题
- 用于让您的访客微笑的弹出窗口的 WordPress 插件
- 5+ 图片完美的 WordPress YouTube 插件