什么是视差效果?为什么以及如何在您的WordPress网站上使用它

什么是视差效果?为什么以及如何在您的WordPress网站上使用它

视差效果是一种非常流行的设计功能,通常在WordPress网站上使用。这种特殊效果已经在游戏世界中流行了很多年,但最近已经涉及到网页设计中。到目前为止,这种主要趋势似乎并没有发生,即使有什么用途,它的使用比以往任何时候都更加广泛。那么什么是视差效果,为什么要考虑在WordPress网站上使用它呢??


在本文中,我们将考虑什么是视差效果以及它可以为您的站点和企业带来的好处。然后,我们将讨论如何使用免费的插件Parallax Scroll快速轻松地向任何WordPress网站,页面或帖子添加视差效果。.

什么是视差效果?

二十七

视差效果涉及网页的 背景移动速度比前景慢. 这会产生页面深度的错觉,当观众向下滚动时,可以使内容具有3D效果.

现在,大多数高级WordPress主题在其主页上均内置了视差效果。甚至免费的WordPress默认主题二十一十七也带有视差功能。大多数页面构建器还集成了视差效果工具,使您可以将效果添加到任何页面或发布到您的网站上。当然,您可以安装许多WordPress插件来向您的网站添加视差效果元素.

使用视差效果有什么好处?

在WordPress网站上使用视差效果有很多好处。第一个也是最明显的是视差效果的视觉效果。视差效果是 美观, 为您的网站提供新鲜,时尚和现代的外观。这个 哇效果 可以使您的内容真正流行,并创造令人兴奋和有趣的浏览器体验.

在您的网站上使用视差效果的另一个关键原因是为了帮助 分页, 尤其是主页,分成可读的块。使用此效果可以强调要展示的内容的不同部分和类型。这可以帮助您推广网站的各个方面,阐明重要信息,并鼓励用户以您选择的方式浏览您的网站并访问内容.

视差效果可以在网站的任何页面或帖子上使用,但在主页,登录页面或一页网站上尤其明显。令人惊叹的视觉视差产生的效果及其对用户体验的积极影响,可以使访问者在您的网站上停留更长的时间,并有助于提高网站的转化率,从而达到目标.

手机视差

尽管视差可以很好地增加视觉趣味,但它并不总是能在移动设备上正常工作。由于手机和平板电脑通常使用滑动导航(而不是像台式机一样滚动),因此视差效果可能无法正确呈现。当然,这将取决于您自己的视差部分使用的方法和动画,但是为了获得良好的可用性,您可能需要考虑在设备上禁用视差.

选择具有视差效果的主题

总

对于那些开始新项目的人,应该选择一个包含视差效果功能的高级主题。而且,如果您想在网站的各个页面上而不只是首页上使用视差效果,那么您可能需要考虑高级页面构建器随附的多用途主题。诸如典雅主题的Divi,Themify的Parallax和我们自己的主题Total之类的主题都包括提供视差效果工具的页面构建器.

使用Slider Revolution WordPress插件添加视差滑块

滑块旋转视差

如果您想要具有视差效果的特色滑块,我们的首选是Slider Revolution插件。这个高级插件包括数百种内置选项和功能,用于字体,图层,滑块效果,布局以及视差.

启用滑块旋转视差

首先安装插件,然后导入滑块模板或开始从头开始构建自己的滑块(您可以阅读我们的完整Slider Revolution指南以了解更多详细信息).

滑块旋转视差设置

接下来,编辑幻灯片 主要背景 添加一个 资源 背景图片,然后选择 视差/ 3D 标签以分配视差等级。然后在添加图层时,选择 视差/ 3D 视差深度的图层选项可将移动添加到文本,图像,按钮和其他图层。就这么简单!

完成后,保存滑块并使用简码将其插入到任何帖子或页面中。或者,如果您使用的是诸如Visual Composer之类的页面构建器,则可以使用页面构建器的Slider Revolution元素快速选择并插入您的滑块.

使用Parallax Scroll WordPress插件添加视差部分

视差滚动

如果您已经有一个主题,并且其中不包含内置的视差效果选项,那么您应该考虑使用WordPress插件来完成此工作. 视差滚动 是一种流行的免费选项,使您可以将视差滚动背景图像添加到网站页面或帖子中的不同元素。通过使用简单的简码将滚动背景添加到单个元素,标题文本或包含任何内容的完整部分中.

现在,让我们看一下如何安装和开始使用Parallax Scroll…

安装视差滚动

要安装Parallax Scroll,请以管理员身份登录WordPress仪表板,然后选择 插件>添加新 从菜单.

添加新插件

搜索 视差滚动, 然后选择 立即安装>激活.

视差滚动激活

现在,您会发现“视差滚动”选项卡已添加到WordPress菜单中.

添加视差滚动部分

要开始使用Parallax Scroll,您必须首先创建一个新的视差部分。为此,请选择 视差滚动>添加新 从您的WordPress菜单中.

视差滚动添加新

现在,您可以在此处创建新的视差部分…

添加新的视差

设置滚动视差背景图像

首先,您需要为滚动视差背景设置图像。为此,请单击 设置特色图片 并将图像添加到“特色图像”部分.

特色图片

请仔细考虑您用于每个背景部分的图像。确保它们与您的网站相关,并与您的品牌同步。如果要在此背景图像的顶部显示标题或其他内容,请考虑使用块状颜色或细微图案,而不是照片或引人注目的图形。这可以帮助确保您的图片可以与您的内容一起使用并对其进行宣传,而不会分散您的注意力.

如果您选择使用照片,则图像必须是高质量的。精美醒目的图像可以帮助您的网站呈现专业且独特的外观。这些视觉效果将给您的听众留下深刻的印象,从而促使人们记住并回到您的网站。您可以从各种各样的股票网站下载高质量的图像。查看我们的免费和高级库存图片网站集合,您将在其中快速找到适合您的视差背景的精美照片.

在视差背景上创建标题文本

添加标题

如果要创建具有视差背景的标题文本,则必须接下来输入帖子标题。然后,该标题将作为标题标题出现在所选视差背景图像的顶部.

您可能不需要视差部分中的标题。在这种情况下,您仍应为每个视差赋予一个标题,以便您轻松识别所创建的每个部分。然后,您需要选择将标题隐藏在 视差滚动选项 (将在本文中进一步介绍),因此网站的正面不会显示标题.

显示具有视差滚动背景的任何内容

您可能希望视差部分在背景图像上显示其他内容。这可能包括您的网站所需的所有内容,从文本和图像到简码。确定您要显示的内容,然后在信箱中输入此内容.

自定义视差滚动设置

对内容满意后,您需要自定义视差部分的设置以适合您的页面.

视差滚动选项

向下滚动到 视差滚动选项. 在“样式”下,您可以更改视差高度和图像大小,还可以选择“全宽”以强制主题在背景的整个宽度上显示背景图像(如果尚未显示).

您还可以更改标题在视差背景上的水平和垂直位置。如果您想隐藏帖子标题,可以在此处键入 显示:无;标题样式.

视差设置 将让您自定义视差滚动的行为。这包括更改视差背景的速度。尝试不同的速度,看看哪种对您的网站和受众有效.

还有一个 行动设定 选项,如果您认为视差部分在移动设备上无法正常工作,则可以禁用手机上的视差背景图像和/或内容.

调整设置并完成创建视差部分后,请单击发布。.

将视差节插入帖子或页面中

接下来,您需要将视差部分插入网站上的帖子或页面中。从WordPress菜单中选择Para​​llax Scroll.

视差滚动简码

在显示的表格中,您现在将看到刚创建的视差部分的简码。复制代码,然后打开相应的页面或发布。将代码粘贴到页面内容中的适当位置.

插入简码

预览更改,如果对新的视差部分满意,请单击发布。现在,您可以创建其他部分来赋予页面或发布完整的视差效果。如果您需要进行更改,只需重新打开视差部分的页面并进行必要的更改.

最后的想法

如果您的主题没有内置的视差效果功能,或者您想将效果添加到不仅仅是首页上,那么Parallax Scroll将使您能够快速创建视差部分以添加到页面或帖子中.

如您所见,向您的网站添加视差效果可能非常值得。它不仅可以极大地改善网站的视觉效果,还可以吸引观众,使他们轻松浏览您的网站并访问内容,并增加他们在网站上花费的时间。改善的用户体验最终将帮助您的网站实现其目标转化,无论是增加回头客,收集潜在客户还是销售产品或服务.

您会在首页,目标网页,信息或其他地方添加视差效果吗?请在下面的评论中分享您的想法…

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map