如何为任何WordPress主题添加视差效果

2020-07-14
WordPress

最近，一位读者问我们如何为任何WordPress主题添加视差效果？视差效果是一种网页设计趋势，其中背景图像滚动速度比前景内容慢。在本文中，我们将向您展示如何轻松地向任何WordPress主题添加视差效果。

什么是视差效果？

视差效果是一种现代的Web设计技术，其中背景元素的滚动速度比前景内容慢。这种效果增加了背景图像的深度，并使其具有交互性。

视差效果可用于企业网站的登录页面，长篇内容，销售页面或主页上。这是在冗长的页面上突出显示不同部分的一种好方法。

许多高级WordPress主题在其首页上都带有内置的视差效果。您还可以在大多数WordPress页面构建器插件中使用视差效果。

但是，并非所有主题都具有内置的视差效果，并且您可能不希望使用页面构建器来仅为视差效果创建自定义页面布局。

让我们看一下如何轻松地向任何WordPress主题添加视差背景效果。

方法1：使用插件向任何WordPress主题添加视差效果

此方法不需要您向WordPress主题添加任何代码。它更容易，建议大多数用户使用。

您需要做的第一件事是安装并激活高级WordPress背景插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，您需要编辑页面或发布要添加视差效果的位置。您会在视觉编辑器中注意到新的“高级WordPress背景”按钮。

单击它会弹出一个弹出窗口，您可以在其中更改要添加的背景的不同设置。

首先，您需要选择一张图片作为背景类型，然后选中“拉伸”选项。

接下来，您需要单击“选择图像”按钮以上传或选择要使用的图像。确保您使用的是大图像，否则它将显得像素化。

之后，您需要通过选择视差类型来启用视差。您可以尝试使用多种样式。最常用的视差效果是滚动。

单击插入按钮以继续。

现在，该插件将在您的WordPress帖子编辑器中添加一个简码。它看起来像这样：

[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_parallaxb_size =] 10000

您的内容在这里
[/ nk_awb]

用您自己的内容替换“此处的内容”，然后保存页面。

现在，您可以访问您的网站以查看其运行情况。

方法2：使用CSS将视差效果添加到任何WordPress主题

此方法要求您对HTML / CSS以及WordPress主题的工作原理有一定的了解。

首先，您需要访问媒体»添加新页面，将要用于视差效果的图像上传到WordPress媒体库。

上载图像后，您需要通过在WordPress媒体库中编辑图像来复制图像URL。

接下来，您需要将以下HTML添加到要显示视差效果的页面或页面中。您还可以将此HTML添加到WordPress主题或子主题中。

<divclass="parallax"><divclass="parallax-content">
Your content goes here...
</div></div>

接下来，您需要将以下自定义CSS添加到WordPress主题中。

.parallax { background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");height: 100%; background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;margin-left:-410px;margin-right:-410px;}
.parallax-content { width:50%;margin:0auto;color:#FFF;padding-top:50px; }