Elementor 是一款领先的 WordPress 页面构建器插件,它使网页设计变得前所未有的简单。其突出的功能之一是背景覆盖选项。通过正确利用该功能,您可以将网站的吸引力和美感提升到一个新的水平。

Elementor 为您提供了多种背景叠加选项。在本文中,我们将向您展示每个选项的分步指南。那么,让我们开始了解如何在 Elementor 中添加背景叠加以进行网页设计的文章。

什么是 Elementor 背景覆盖?

背景叠加层是半透明的图层,可添加到现有背景图像、图案或颜色之上。您可以使用不同的颜色、不透明度、渐变甚至图案自定义叠加层,以创建令人惊艳的视觉效果。

背景叠加是 Elementor 插件的一项核心功能,内置于插件中。免费版和付费版均可使用。当使用低质量图像或在任何背景顶部展示文本时,此功能特别有用。

Elementor 背景覆盖的类型

您可以在 Elementor 中添加三种类型的背景覆盖。 它们是:

1. 纯色覆盖:它只是向网页部分或元素添加纯色覆盖。您可以通过选择纯色及其不透明度级别来自定义此覆盖。

2. 渐变色叠加:渐变允许您向任何网页部分或元素的背景添加多色叠加效果。希望您已经知道什么是渐变。或者等一下,我们将在本文后面讨论它。

3. 图像叠加:此功能可让您在图像上应用纯色、纹理或图案叠加,以增强其吸引力。

特别说明关于 Elementor 背景覆盖

Elementor 中的背景覆盖选项允许您仅将覆盖添加到小部件背景,而不是内容背景。

Elementor 背景覆盖到小部件背景

您需要一个额外的插件(例如 HappyAddons)才能将叠加效果直接添加到内容背景

Elementor 背景叠加到内容背景

因此,如果您的网站上同时安装了 Elementor 和 HappyAddons,则可以在需要的地方使用合适的背景覆盖选项。让我们探索这些方法。

方法一:如何在 Elementor 中向小部件背景添加覆盖

正如我们已经说过的,您可以在 Elementor 中添加三种类型的背景覆盖。现在我们将向您展示如何将所有这些类型的背景覆盖添加到 Elementor 小部件。

类型 01:向 Elementor 小部件添加纯色背景覆盖

希望您的部分和内容已准备就绪。单击整个部分的“编辑容器”图标

转到样式选项卡。您将获得两个选项:背景背景覆盖。使用这两个选项,您可以将背景覆盖添加到 Elementor。

转到 Elementor 背景覆盖选项

例如,打开“背景”。选择“画笔”图标。下面,您将看到“颜色”选项,通过它可以为背景添加纯色。

在 Elementor 中添加纯色背景覆盖

您可以看到我们已经为小部件部分的背景覆盖选择了一种颜色。

选择背景覆盖的颜色

类型 02:向 Elementor 小部件添加渐变色背景叠加

再次选择该小部件。转到“样式”选项卡。展开“背景”选项

选择背景类型旁边的渐变选项。您将看到其下方出现更多颜色选项。

现在,选择主色辅色来创建渐变调色板。您将看到颜色作为背景叠加层显示在小部件上。

向 Elementor 小部件添加渐变色背景覆盖

因此,您可以为小部件背景创建渐变色背景叠加层。渐变中还有许多其他选项。希望您可以自己探索和使用它们。

类型 03:向 Elementor 小部件添加图像背景覆盖

对于图像叠加,您可以将图像和纯色领子组合使用。通过使用纯色与图像相结合,您可以创建完美的对比,以便上面的内容更清晰可见。让我们看看如何做到这一点。

转到样式选项卡。展开背景覆盖选项。单击图像选项。您可以从本地驱动器或媒体库中选择和添加图像。

转到 Elementor 背景覆盖中的图像选项

您可以看到我们已将图像添加到背景叠加层。接下来,选择合适的位置,使其与内容完美契合。

图像已添加到 Elementor 背景覆盖选项

展开“背景”选项。接下来,选择与图像相配的合适纯色。您会看到图像上已添加一层。

为图像叠加层添加纯色

转到背景覆盖选项

再次转到背景叠加选项

向下滚动 Elementor 面板进入混合模式。单击右侧的图标。它将打开混合模式列表。

进入混合模式

通过浏览列表中的所有混合风格来选择您喜欢的风格。您将在图像上看到效果。

选择混合模式

您可以看到背景覆盖和文本颜色几乎相似。这就是为什么我们更改了文本颜色以在它们之间形成对比,从而使文本具有高度可读性。

在背景覆盖和文本之间创建对比

因此,您可以将背景覆盖添加到 Elementor 小部件的背景。

方法二:如何在 Elementor 中向内容背景添加覆盖

将内容叠加在背景上的过程与上面的方法完全相同。这是HappyAddons 插件的免费功能。如果你还不太了解该插件,请探索一下HappyAddons 是什么

简而言之,HappyAddons是 Elementor 插件的一个令人兴奋的插件。它带有 120 多个附加小部件和 20 多个功能。使用它们,您可以克服 Elementor 的限制并为您的网站添加更多令人兴奋的功能。

那么,HappyAddons 中的背景覆盖选项在哪里?选择内容小部件。转到高级选项卡。您将在此选项卡下看到背景和背景覆盖选项。

HappyAddons 中的背景叠加选项

可以看到这两个选项的名字和 Elementor 的两个选项的名字一模一样,而且它们的工作流程也是一样的,下面我们来探究一下。

类型 01:为添加的内容添加纯色背景叠加

选择内容小部件。转到Elementor 面板上的“高级”选项卡。展开“背景”选项

选择纯色。您会看到该颜色已应用于内容的背景。

为 Elementor 内容背景添加纯色背景覆盖

类型02:为添加的内容添加渐变色背景叠加

与上述方法类似,在“背景”下选择“渐变”选项设置主色次色。调色板将显示在 Elementor 画布上的内容后面。

为添加的内容添加渐变色背景叠加

类型 03:为添加的内容添加图像背景覆盖

选择内容小部件。转到“高级”选项卡

展开背景覆盖选项。单击图像区域

将图像背景覆盖添加到 Elementor 内容

您将能够按照上述方法从本地驱动器或媒体库添加图像。希望您也可以在这里这样做。

图像背景覆盖已添加到 Elementor 内容中

现在文本颜色已更改,以使文本内容在背景上突出。希望这能让内容变得更好,更易读。

更改文本颜色

因此,您可以在 Elementor 中为您的内容添加图像背景覆盖。

注意: Elementor 插件通常会使网站速度稍微变慢。但有很多方法可以加快此类网站的速度。探索如何优化网站速度

最后的注释!

如今,添加背景覆盖已成为大多数专业网站设计师的常见做法。这是一个简单易用的网页设计功能,但功能强大,可让您的网页部分和内容变得华丽而令人兴奋。

几年前,使用 HTML 和 CSS 语言创建背景覆盖确实非常困难。但 Elementor 使其变得灵活,这一点在 HappyAddons 插件中得到了进一步的提升。希望通过关注这篇博文,您现在能够在您的网站上创建引人入胜的背景和内容覆盖。

0

评论0

请先
23G101-11高清无水印下载-22G101系列图集的答疑图解-替代17G101-11
23G101-11高清无水印下载-22G101系列图集的答疑图解-替代17G101-11
3分钟前 有人购买 去瞅瞅看

社交账号快速登录

微信扫一扫关注
扫码关注后会自动登录网站