背景

的 背景字段 hands your customed widget相同的背景面板 Elementor的部分使用:一个用于纯色和图像的经典选项卡,一个带有两个颜色停止的渐变选项卡,以及一个用于运动背景的视频选项卡。在主插件内部 小部件生成器、你添加一次字段,将其指向一个 CSS 选择器,然后每个后台决策都会进入 Elementor 面板。

与每个小部件生成器控件一样,背景支持 条件 为了面板可见性,整个构建器的令牌输出贯穿于 Twig-语法模板引擎.两份指南都解释了设置和限制。

Background 是一个组控件,与 Typography 和 Border 属于同一族,这意味着连接模型不同于文本或颜色字段:没有令牌可以粘贴到您的 CSS 中。您填写选择器选项,Elementor 将背景样式写入该选择器本身。

Background 字段的作用 #

• 渲染 Elementor 的背景组控制 widget 的面板中, 带有您允许的每种背景类型的选项卡。
• 经典选项卡: 纯色,或具有通常位置、尺寸和重复设置的图像。
• 渐变选项卡: 两个颜色停止,带有位置、角度和类型控制。
• 视频选项卡: 所选元素后面的运动背景。
• CSS 本身编写 到您提供的选择器,不涉及模板令牌。

第一个小部件?从开始 小部件生成器概述 接线组控制之前。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Widget Builder 编辑器中打开的自定义小部件。我们的示例是一个英雄小部件,其 <div class="hero-box"> container 应该采用编辑器选择的背景。

如何添加背景字段 #

在 Widget Builder 编辑器中,滚动左侧的字段面板,直到找到 背景 字段,与其他样式组字段(例如 Typography 和 Box Shadow)一起列出。

将其拖入下面的一个部分 风格 tab,它的自然家园,一旦它落地,场地的选项在左边打开。

解释了背景字段选项 #

• 标签: elementor 中控制上方显示的文本,例如 “英雄背景”。
• 名称: 仅字段、字母、数字和下划线的唯一标识符。
• 选择器: css选择器后台应用到。这是连接本身,在下一节中涵盖。
• 类型: control 显示的是哪个选项卡,从经典、渐变和视频。修剪列表可以使面板保持对焦;卡片小部件很少需要视频选项卡。
• 排除: 当您想要面板的简化版本时,从组中删除各个子控件。
• 描述、显示标签、分离器和条件在每个字段上的表现都与它们相同。

将字段指向您的选择器 #

以下是如果人们习惯了令牌字段,就会绊倒他们的部分: 背景字段没有 {{shortcode}} 为您的 CSS。 背景是一组属性,因此它无法通过一个令牌打印; A {{ token }} 对于此字段,输出没有任何有用。相反,您填写 选择器 option 和 Elementor 生成样式。

Hero容器,选择器为:

{{WRAPPER}} .hero-box

• {{WRAPPER}} stands 代表小部件自己的容器,将后台单独作用到这个小部件,组控件完全按照编写的方式使用选择器,所以你键入 {{WRAPPER}} 自己;没有什么可以为你准备的。
• .hero-box 是小部件 HTML 中接收后台的元素。

小心:离开 {{WRAPPER}} 关闭,选择器匹配每个 .hero-box page 上,所以一个小部件的背景落在所有的。组控件将选择器取为 raw,使这成为最容易发货的错误。

Widget的CSS选项卡中保留一个后备背景,它是widget在新鲜的drop上显示的内容,一旦编辑器选择了某些内容,控件的值就会覆盖它。坚固的后备颜色可以获得两次保留,因为它还涵盖了重背景图像完成加载之前的时刻,否则在缓慢连接时会闪烁白色。

使用 Elementor 中的背景控制 #

Elementor 中将小部件添加到页面, 如果页面已经打开, 则重新加载编辑器。控件显示在您的标签下, 每个允许的类型都有一个选项卡。

Classic tab上,从具有位置、大小和重复设置的媒体库中选择颜色或选择图像,切换到渐变选项卡,用于两个颜色停止,具有角度和位置,或者切换到视频选项卡,用于运动背景,预览随行更新。

常见用例 #

• 英雄和横幅小部件 每个网站都希望标题后面有自己的图像或梯度。
• 卡片背景 在定价表、团队网格和功能列表中。
• 呼叫行动条 每个活动都会在品牌颜色和照片之间切换。
• 视频标头(widgets) 上,仅在其构建的小部件上启用视频选项卡。
• 覆盖面板(图),将选择器指向介质上方的内层。

使用背景字段的技巧 #

• 选择器选项是整个连接。 CSS 选项卡中不要寻找背景令牌;没有。
• 始终启动选择器 {{WRAPPER}}. Group控件使用它raw,因此一个裸类的选择器会泄漏到页面上的每个匹配项。
• 修剪类型列表。 仅提供经典和渐变功能可以使卡片小部件变得简单,并阻止编辑器将视频丢弃到不属于它们的地方。
• 在小部件 CSS 中保留后备样式。 样式表中的默认背景颜色使小部件在任何人打开控件之前就可呈现。
• 心灵文本对比。 当编辑器控制背景时,将小部件与位于其顶部的文本的颜色控件配对。

常见问题 #

包裹起来 #

Widget Builder 后台字段将部分级后台编辑带到自定义小部件的任何元素:命名该字段,将选择器设置为 {{WRAPPER}} plus你的类,并选择编辑器看到的类型,它遵循与the相同的选择器模型 版式字段因此,一旦一个组控件点击,其余的也会点击。探索其余的 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。