主插件
定价
查看类别

背景

罗伊·杰米
2026年9月17日更新完毕

6 分钟阅读

Background 字段将 Elementor 的后台控制添加到使用主插件构建的自定义小部件中 小部件生成器。编辑器在 Elementor 面板中选择纯色、图像或渐变,样式将转到您的 CSS 选择器指向的元素。它适合横幅、卡片以及任何背景应随页面变化的框。

Background是一个Pro字段,免费插件中包含一个有限的小部件生成器,全套字段自带 硕士插件专业版.

促销横幅小部件采用小部件生成器背景字段构建,显示后备颜色、经典颜色、经典图像和渐变

Background 字段的作用 #

  • 它将 Elementor 的背景类型控制添加到小部件的样式选项卡中,每个背景类型有一个图标。
  • Classic 给出颜色和图像,一旦选择图像,就会进行位置、附件、重复和大小设置。
  • 梯度给出了两种颜色及其位置:线性或径向类型以及角度或位置。
  • Elementor 将 CSS 本身写入选择器选项中的元素,您不需要在 HTML 或 CSS 中使用令牌。

如果您还没有构建小部件,请阅读 小部件生成器概述 首先。

在开始之前 #

  • WordPress 已安装并处于活动状态。
  • Elementor 和 Master Addons Pro 的主插件均处于活动状态。 安装指南 盖设置。
  • Widget 生成器中打开的一个小部件,本指南中的示例是一个“推广旗”小部件,其外盒具有类 promo-banner.

如何添加背景字段 #

  1. 去 主插件 > 小部件生成器 并打开您的小部件。
  2. 单击 风格 tab并添加一个部分,例如“旗帜背景”。
  3. 类型 background 在左侧的字段搜索框中。
  4. 拖动 背景 into the section。其设置在左侧边栏中打开,并且该部分预览显示类型图标。
在主插件小部件生成器中搜索背景并添加到样式选项卡部分中找到的背景字段

解释了背景字段选项 #

背景字段 标签、名称、设置为经典和渐变的类型,包括和排除小部件生成器中的选项
  • 标签 在构建器中命名字段,例如“旗帜背景”。在 Elementor 中,编辑器会看到部分标题和一个名为背景类型的控件。
  • 名字 是字段的唯一ID。字母,数字和下划线仅。
  • 描述 是建筑商内部的便条。
  • 类型 集编辑器可以选择哪些背景类型:经典、渐变、视频和幻灯片。一个新字段显示经典和渐变。
  • 包括 並 不包括 是为了在控件内部添加或隐藏单个设置,在我们的测试中,都没有更改 Elementor 面板,默认情况下排除显示图像,但图像设置仍然出现,因此请保持两者原样。

Keep Types to Classic 和 Gradient。Video 和幻灯片将它们的设置添加到面板中,但是当我们在自定义小部件上测试它们时,视频链接和幻灯片图库在横幅后面没有绘制任何元素,只是构建了这两种类型对自己的部分和容器所需的额外标记。

Selector 滚动到侧边栏底部,其上方的常用设置(显示标签、分隔符、) 条件 和(其余的)工作,就像他们在其他领域所做的那样。

背景字段选择器选项设置为 Widget Builder 中的。promo-banner

设置选择器 #

Selector告诉元素器哪个元素获取背景, 对于横幅它是外框上的类:

.promo-banner

你不必打字 {{WRAPPER}} for this字段。构建器在你的选择器前面添加它,所以 .promo-banner 变成 {{WRAPPER}} .promo-banner and只影响这个小部件,用逗号分隔的列表,每个部分都有它自己的 {{WRAPPER}}。如果选择器为空,则背景将放在小部件的外包装上,而不是您的元素。

CSS 选项卡中给元素一个后备背景, 它显示直到编辑器选择某样东西, 之后控件的样式替换它:

.promo-banner {
  background-color: #1f1147;
  color: #ffffff;
}
促销横幅类上带有后备背景颜色的小部件 CSS 选项卡

单击 保存设置 当你完成后。

使用 Elementor 中的背景控制 #

将小部件添加到页面,或者如果页面已经打开,则重新加载编辑器。选择小部件并打开 风格 tab。your 部分显示背景类型,并为您允许的每种类型都有一个图标。横幅保持其后备颜色,直到您选择一个。

选择背景之前,在元素风格选项卡中使用经典和渐变图标进行背景类型控制

单击刷子图标 经典 并选择一个 颜色。横幅立即更新。

Elementor 样式选项卡中的自定义小部件横幅上设置的经典背景颜色

在颜色下,单击 图像 box 来从媒体库中选择图像,一旦设置了图像,就会出现更多设置:图像分辨率、位置、附件、重复和显示大小。Center Center、No repeat 和 Cover 对大多数横幅都很好。

Elementor 中带有位置、附件、重复和显示大小设置的经典背景图像

单击第二个图标 梯度. 设置第一个 颜色 和它的 地点的,该 第二种颜色 和它的位置,然后选择 线性 与一个 角度 或 径向 有一个位置。

Elementor 中具有两种颜色、位置、类型和角度设置的渐变背景

常见用例 #

  • 英雄和促销横幅为每个活动提供新的图像或渐变。
  • 定价表、团队网格和功能列表中的卡片。
  • 在品牌颜色和照片之间切换的号召性用语条。
  • 通过将选择器指向该元件而不是外盒,形成内面板或覆盖层。

使用背景字段的技巧 #

  • 始终保持后备状态 background-color CSS 选项卡中。它涵盖了新的小部件以及图像加载之前的时刻。
  • 保持照片上的文本可读。示例横幅添加了深色图层 .promo-banner::before 並 isolation: isolate 在盒子上,因此白色文本在明亮的图像上保持清晰可见。
  • 将选择器指向一个元素。不同选择器上的几个背景字段对于编辑器来说比许多部分共享的一个字段更容易。
  • 坚持自定义小部件的经典类型和渐变类型。
  • 对于没有图像或梯度的单一平面颜色, 色域 对于编辑来说更简单。

常见问题 #

背景字段免费吗?

No。Background 是 Widget Builder 中的 Pro 字段之一,因此 Master Addons Pro 必须处于活动状态才能将其添加到小部件中。

我需要将 {{WRAPPER}} 添加到背景选择器吗?

号建造者补充道 {{WRAPPER}} background 字段的选择器前面为您设置,所以 .promo-banner 够了,自己打字也是行得通的。

我的 CSS 的后台令牌在哪里?

没有一个可以用。背景一次涵盖了许多 CSS 属性,因此 Elementor 会为您将规则写入选择器。

Video或幻灯片背景为什么不显示?

Elementor只添加到自己的部分和容器中,那些类型需要额外的标记,在自定义小部件上会出现它们的设置,但不会绘制任何内容。使用经典或渐变。

为什么我的后备颜色在选择梯度后消失了?

A gradient 将背景颜色设置为透明,并在顶部绘制渐变,如果编辑器关闭背景类型,您的后备功能会返回。

包裹起来 #

"样式"部分添加"背景"字段, 将"类型"保留为"经典"和"渐变",并将"选择器"设置为应该更改的元素。在 CSS 选项卡中放入后备颜色, 编辑器可以从那里获取该元素的其余样式, 请参阅 边境 並 盒子阴影 字段,然后检查 定价 对于每个计划包含的内容。

你的感受是什么