17713433920 info@mac163.com

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

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

什么是视差效果?

视差效果涉及到网页的背景移动速度低于前景的移动速度。这给页面带来了深度的错觉,当观众向下滚动时,为内容提供了3D效果。

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

如何在您的wordpress网站上使用视差效果
如何在您的wordpress网站上使用视差效果

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

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

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

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

手机视差

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

选择具有视差效果的主题

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

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

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

启用滑块旋转视差

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

接下来,编辑幻灯片“ 主要背景”以添加背景图像,然后选择“ 视差/ 3D”选项卡以指定视差级别。然后,在添加图层时,为视差深度选择“ 视差/ 3D图层”选项,以向文本,图像,按钮和其他图层添加移动。就这么简单!

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

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

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

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

安装视差滚动

要安装Parallax Scroll,请以admin身份登录WordPress仪表板,然后从菜单中选择Plugins> Add New

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

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

添加视差滚动部分

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

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

设置滚动视差背景图像

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

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

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

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

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

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

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

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

自定义视差滚动设置

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

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

您还可以更改标题在视差背景上的水平和垂直位置。如果您想隐藏帖子标题,可以在此处输入display来隐藏头样式

视差设置可让您自定义视差滚动的行为。这包括更改视差背景的速度。尝试不同的速度,看看哪种方法适合您的网站和受众。

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

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

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

接下来,您需要将视差部分插入网站上的帖子或页面中。从WordPress菜单中选择“视差滚动”。

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

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

最后的想法

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

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


微信二维码

微信扫描二维码联系我们!
我们在微信上24小时期待你的声音
提供外贸路由器设备产品,轻松翻墙,解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建等!


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
回到顶部