如何使用 Elementor 免费版和专业版创建视差效果

alibaba011

我们都见过那些令人难以置信的网站，它们充分利用了视差滚动，背景移动的速度比前景元素慢，以传达深度。您可以在各种网站上找到视差，从牙科诊所和营销机构到创意作品集和游戏网站。 视差无疑是一种引人注目的效果，它确实可以让您的网站脱颖而出，并赋予其专业的外观。但是，您是否可以在没有大量技术知识的情况下使用Elementor将其添加到您的 WordPress 网站？ 答案是肯定的！ 视差实际上是Elementor Pro中的内置功能，但您仍然可以在 Elementor 的免费版本中创建视差效果。请继续阅读以了解它是如何完成的！ 目录 行动中的视差 可以使用 Elementor Free 创建视差效果吗？ 如何使用 Elementor Pro 创建视差 视差的好处 结论 行动中的视差 首先，为什么要采用视差效果？好吧，你自己看看： 这是一款名为 Firewatch 的流行视频游戏的网站。在其网站上，游戏开发商利用了英雄部分的视差来达到美丽的效果。如果做得好，视差可以极大地提高您网站的“哇”度。 这是您可能听说过的一家公司的另一个示例： 请注意，所有这些元素的进出都使页面变得多么光滑。

显然，苹果还有更多的伎俩来让访问者眼花缭乱，但视差是其产品页面如此华丽的一个重要原因！ 可以使用 Elementor Free 创建视差效果吗？ 如果您当前正在使用 Elementor Free并且想要视差效果，我有个好消息 - 它比您想象的要容易。您可以使  危地马拉手机号码列表  用视差插件或使用一些简单的代码做一些工作。 让我们一起快速完成整个过程。 如何使用 Elementor Free 创建视差 要使用Elementor Free创建视差，请首先登录您的 WordPress 仪表板。如果您尚未安装 Elementor，您可以前往Elementor 的主页获取免费插件 ZIP 文件，以换取您的电子邮件地址。 安装完成后，就可以使用 Elementor 创建编辑页面或帖子。只需进入侧边栏并单击“添加新项”，然后确保单击“使用 Elementor 编辑”按钮。” 使用 Elementor 按钮编辑 准备好新的空白页面后，我将获取现有模板作为视差效果的起点。您可以跟着我一起按 control-shift-L（在 Mac 上按 command-shift-L）来调出Elementor 的模板库。 元素库集 我从 Elementor 库中选择了“主页 – 研究”选项。只需将鼠标悬停在其上并单击“插入”即可将整个模板添加到空白页上。



当您开始向下滚动时，您会注意到已经存在视差效果。这是因为英雄部分的背景图像设置为固定。 即使在 Elementor 的免费版本中，您也应该能够调整一些像这样的基本设置来模仿视差效果。您也可以使用粘性标题来获得类似的结果。请参阅本文以了解有关创建粘性标头的更多信息。但是，如果您想通过页面上的元素以不同的速度滚动来获得真正的视差效果，那么您将需要一些额外的控制。 要在 Elementor Free 中创建您自己的视差效果，您需要使用代码或单独的插件。这些选项都没有 Elementor Pro 那样有效，但希望它们足以满足您的需要！ 视差代码 在采取下一步之前，您应该确定自己想要什么样的外观。最基本的视差方法是对页面的一些图像或部分设置两种不同的滚动速率，以便它们重叠。 但是，您可以通过在具有“固定”附件属性的部分中分配背景图像来进一步简化它，以便页面的其余部分在其周围滚动。 如果您想真正自定义视差效果，那么了解一些代码背景会有所帮助。不过，此页面的代码可以用作 Elementor 中视差部分的良好起点。 说明非常简单：任何 CSS 代码都可以进入“仪表板”>“外观”>“自定义”>“附加 CSS”，然后您需要在“高级”选项卡中为您想要在网页上具有视差效果的部分添加视差类。