什么是视差效应？ 为什么以及如何将其用于 WordPress
视差效果是 WordPress 网站上常用的一种非常流行的设计功能。 这种特殊效果多年来一直在游戏世界中出现，但最近已经跨越到网页设计中。 到目前为止，这种主要趋势似乎没有任何进展，如果有的话，它的使用范围比以往任何时候都更广泛。 那么什么是视差效应，为什么要考虑在 WordPress 网站上使用它？
在本文中，我们将考虑什么是视差效应以及它可以为您的网站和业务带来的好处。 然后，我们将讨论如何使用主题或插件快速轻松地为任何 WordPress 网站、页面或帖子添加视差效果。
什么是视差效应？
视差效应涉及网页的 背景移动的速度比前景慢. 这会为页面创建一种深度错觉，从而在查看者向下滚动时为内容提供 3D 效果。
大多数高级 WordPress 主题现在在其主页上都带有内置的视差效果。 甚至免费的 WordPress 默认主题 27 也带有视差功能。 大多数页面构建器还包含视差效果工具，使您能够将效果添加到任何页面或网站上的帖子。 当然，您可以安装许多 WordPress 插件来为您的网站添加视差效果元素。
使用视差效果有什么好处？
在 WordPress 网站上使用视差效果有很多好处。 第一个也是最明显的，是视差效果的视觉方面。 视差效应是 美观，为您的网站带来清新、时尚和现代的外观和感觉。 这 哇效果 可以使您的内容真正流行，并创造令人兴奋和有趣的浏览器体验。
在您的网站上使用视差效果的另一个关键原因是帮助 拆分页面，尤其是主页，变成可读的块。 使用此效果强调您要展示的不同部分和内容类型。 这可以帮助 促进不同方面 您的网站，阐明重要信息，并鼓励用户浏览您的网站并以您选择的方式访问内容。
视差效果可用于网站的任何页面或帖子，但最常见于主页、登录页面或单页网站。 令人惊叹的视差产生的视觉效果，以及它对用户体验的积极影响，可以使访问者在您的网站上停留更长时间，并有助于提高您网站的转化率目标。
使用视差时的注意事项
虽然有好处，但在向您的网站添加视差部分时，您应该牢记一些关键点。
选择背景图像
仔细考虑您用于每个背景部分的图像。 确保它们与您的网站相关并与您的品牌同步。 如果您要在此背景图像的顶部显示标题或更多内容，请考虑使用块色或微妙的图案，而不是照片或引人注目的图形。 这可以帮助确保您的图像与您的内容一起使用并促进您的内容，而不是分散注意力。
如果您选择使用照片，则图像必须是高质量的。 美丽醒目的图像可以帮助您的网站具有专业和独特的外观。 这些视觉效果会给您的观众留下深刻的印象，进而促使人们记住并返回您的网站。 有各种各样的股票网站，您可以从中下载高质量的图像。 查看我们收集的免费和优质图片网站，您可以在其中快速找到适合您的视差背景的精美照片。
移动视差
虽然视差非常适合增加视觉趣味，但它在移动设备上并不总是有效。 因为手机和平板电脑通常使用滑动导航（而不是像桌面那样滚动）视差效果可能无法正确渲染。 当然，这将取决于您为自己的视差部分使用的方法和动画。 但是为了可用性，您可能需要考虑在设备上禁用视差。
视差和可访问性
除了降低移动设备的可用性外，视差还会带来一些可访问性挑战。 因为视差是基于运动的，它会增加阅读难度，并且可能会出现浏览器或设备兼容性问题（如前所述，尤其是在移动设备上）。 此外，随着图层的移动，它会产生对比度问题，使可读性进一步复杂化。 由于这些原因，您应该特别注意在您的网站上创建视差部分。
选择具有视差效果的主题
对于那些开始新项目的人，您应该选择一个包含视差效果功能的高级主题。 如果您想在网站的各种页面上使用视差效果，而不仅仅是主页，那么您可能需要考虑使用高级页面构建器附带的多功能主题。
来自优雅主题的 Divi、Themify 的 Parallax 以及我们自己的主题 总多用途 WordPress 主题，都包括提供视差效果工具的页面构建器。
使用 Total 添加视差背景
为了让您了解视差如何与主题一起使用，以下是有关如何将视差背景添加到具有 Total 主题的行的指南。 Total 使用 WPBakery 进行前端页面构建，但许多其他 WordPress 页面构建器也包含类似的选项。
首先，您需要插入一行并向其中添加内容。 然后单击铅笔图标以编辑您的行。 因为我们在上面创建的设计没有装箱并且不包括侧边栏，所以我们选择了“拉伸行”选项以确保我们的视差背景完全填充行（注意 – 总计还包括一个全屏选项，如果您可以启用希望您的行和视差背景完全填满浏览器窗口）。
接下来，在视差部分下，您可以轻松添加背景图像并为视差效果设置滚动速度（数字越大，图像移动得越多，可能还需要大图像）。
Total 还提供高级视差选项，其中包含更多设置，用于启用/禁用移动设备上的效果、选择图像样式（覆盖、固定或重复），定义效果的方向，当然还有速度。
您还可以在一个选项卡上使用叠加设置，以确保您的行背景和内容之间有足够的对比度（我们在图像中添加了白色叠加层）。 完成后，请务必保存您的行更改以及您的页面。
使用 Slider Revolution 添加视差滑块
如果您想要具有视差效果的特色滑块，我们的首选是 Slider Revolution 插件。 这个高级插件包括数百个内置选项和功能，用于字体、图层、滑块效果、布局，当然还有视差。
启用滑块旋转视差
首先安装插件，然后导入滑块模板或从头开始构建自己的滑块（您可以阅读我们的完整滑块革命指南了解更多详细信息）。
接下来，编辑幻灯片 主要背景 添加一个 资源 背景图像并选择 视差/3D 选项卡以分配视差级别。 然后在添加图层时，选择 视差/3D 用于视差深度的图层选项可为您的文本、图像、按钮和其他图层添加运动。 就这么容易！
完成后，保存滑块并使用简码将其插入任何帖子或页面。 或者，如果您正在使用像 WPBakery（以前的 Visual Composer）这样的页面构建器，您可以使用页面构建器 Slider Revolution 元素来快速选择并插入您的滑块。
使用免费的高级 WordPress 背景插件添加视差部分
如果您已经有一个主题，并且它不包含内置视差效果选项，那么您应该考虑使用 WordPress 插件来完成这项工作。 高级WordPress背景 （简称 AWB）是一种流行的免费选项，可让您将视差滚动背景图像添加到页面或网站帖子上的不同元素。 使用简单的短代码为单个元素、标题文本或包含任何内容的完整部分添加滚动背景。
因此，现在让我们看看如何安装和开始使用具有视差的高级 WordPress 背景。
安装 AWB
要安装插件，请以管理员身份登录您的 WordPress 仪表板，然后选择 插件 > 添加新的 从菜单中。
搜索 高级WordPress背景，然后选择 立即安装 > 激活.
使用 AWB，如何添加视差背景将取决于您使用的 WordPress 编辑器 – Gutenberg、Classic 或第三方页面构建器，如 WPBakery。 无论您使用哪一种，AWB 都提供了大量简单的选项：
- 颜色、图像或视频媒体背景
- 媒体显示尺寸（封面、包含或图案）
- 背景媒体位置，使用百分比对齐背景（例如：50% 50% 居中）
- 叠加颜色选择器，使用 Alpha 选择器使您的颜色或多或少透明
- 视差滚动、缩放和不透明度以及在移动设备上启用的速度和选项
- 鼠标视差（根据鼠标移动使背景略微移动）
此外，您还会发现 AWB 选项卡已添加到您的 WordPress 设置菜单中。 您可以在此处选择全局可见性设置以禁用移动设备和特定浏览器的视差效果（和视频）。
AWB 古腾堡
高级 WordPress 背景与 Gutenberg 完全兼容，甚至包括自己的自定义块供您使用。
要开始，您需要插入 AWB 块。 然后单击以在 AWB 中为您的内容添加其他块。
完成后，单击 AWB 块，然后单击右侧菜单上的“块”选项卡。 您可以在此处添加和编辑块的背景选项。
AWB 经典编辑器
使用经典编辑器，AWB 使用简码添加视差背景。 因此，您需要首先创建您的内容，然后突出显示您想要作为背景的部分，然后单击编辑器中的 AWB 图标。
选择您的背景图像，然后开始向下滚动以添加其余选项。 例如，添加叠加颜色和视差类型。 完成后单击“插入”。
短代码将如下所示：
[nk_awb awb_type="image" awb_image="1234" awb_image_size="full" awb_image_background_size="cover" awb_image_background_position="50% 50%" awb_parallax="scroll" awb_parallax_speed="0.5"]This is where the content within your parallax background goes.[/nk_awb]
在这种情况下，经典编辑器的用户友好性可能会有所降低。 因为 AWB 是一个简码，所以您无法从编辑器中查看您的背景设置。
带 WPBakery 的 AWB
最后 – 高级 WordPress 背景也适用于 WPBakery 页面构建器。 在这里使用它很简单，因为他们在行设置中添加了一个选项卡。
只需单击“背景 (AWB)”选项卡即可在任何行上创建和自定义您自己的视差背景。
关于视差效果的最终想法
如果您的主题没有内置的视差效果功能，或者您想为主页添加效果，那么请尝试使用插件。 Slider Revolution 或免费的 Advanced WordPress Backgrounds 很棒。 两者都可以让您快速创建视差部分以添加到您的页面或帖子中。
如您所见，为您的网站添加视差效果非常值得。 它不仅可以极大地改善您网站的视觉效果，还有助于吸引您的受众，使他们能够轻松浏览您的网站和访问内容，并增加他们在您网站上花费的时间。 这种改进的用户体验最终会帮助您的网站实现目标转化。 无论您的目标是增加回访者、收集潜在客户，还是销售产品或服务。
您会在主页、登录页面、帖子或其他地方添加视差效果吗？ 请在下面的评论中分享您的想法。
