的 盒子阴影场 elementor的标准阴影控制放在自定义小部件的面板中:水平和垂直偏移,模糊,展开,带有不透明的颜色,以及插入切换。在主插件内 小部件生成器中,它是让编辑器在不触摸样式表的情况下将卡片从页面上抬起、软化按钮或凹进输入的字段。
Box Shadow 控制支持 条件是一种干净的方式,只有当阴影切换打开并且整个构建器上的令牌输出由 the 处理时才能显示它 Twig-语法模板引擎.指南都涵盖了设置和限制。
Box Shadow 是一个组控件,与 Typography 和 Background 属于同一族,与您的小部件的连接是 CSS 选择器,而不是令牌:您告诉字段它为哪个元素样式,Elementor 自己在那里写入阴影。
Box Shadow 字段的作用 #
- Renders Elementor 的盒子阴影组控制的,从字段标签旁边的铅笔图标打开。
- 水平和垂直偏移 将阴影放置在元素周围。
- 模糊和传播 控制柔软度并达到。
- 颜色 包括一个 alpha 通道,这是大多数阴影质量的来源。
- 位置切换 在外阴影和插入之间切换。
- CSS 本身编写 到您提供的选择器;不存在模板令牌。
如果您是新构建小部件的人 小部件生成器概述 是开始的地方。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- Widget 生成器编辑器中打开的自定义小部件。我们的示例是一个见证小部件,其
<article class="quote-card">应携带编辑器控制的阴影。
如何添加 Box Shadow 字段 #
在 Widget Builder 编辑器中,滚动左侧的字段面板,直到找到 盒子阴影 field,与其他样式组字段如背景和文本阴影一起列出。
将其拖入下面的一个部分 风格 tab,通常在卡片样式部分中的边框和维度字段旁边,一旦它着陆,字段的选项会在左侧打开。
框阴影字段选项已解释 #
- 标签: elementor 中控件旁边显示的文本,例如 “卡影”。
- 名称: 仅字段、字母、数字和下划线的唯一标识符。
- 选择器: css选择器阴影应用到。这是连接本身,接下来覆盖。
- 字段选项: 覆盖组内的子控件,例如更改阴影从开始的默认值。
- 描述、显示标签、分离器和条件是常用的显示选项。
将字段指向您的选择器 #
就像每个小组的控制一样, box Shadow 字段没有 {{shortcode}} 为您的 CSS。 影子是滚入一个属性的几个值,并且 a {{ token }} 对于字段打印没有任何有用。的 选择器 选项是整个连接。
对于推荐卡,选择器是:
{{WRAPPER}} .quote-card
{{WRAPPER}}stands 代表小部件自己的容器,并保持阴影作用域到此小部件,组控件使用选择器完全按照您编写它,所以键入{{WRAPPER}}自己。.quote-card是阴影落在您的小部件 HTML 内的元素。
小心:没有选择器 {{WRAPPER}} 每场比赛都匹配 .quote-card page 上,所以一个小部件的阴影设置重新调整了所有的,没有什么警告你;样式简单地传播。
如果设计取决于一个,请在小部件的 CSS 选项卡中保留后备阴影。这是第一滴上的外观,一旦编辑器打开弹出窗口,控件的值就会接管。
在《元素人》中使用盒子阴影控制 #
Elementor 中将小部件放在页面上, 如果页面已经打开, 则重新加载编辑器。控件显示您的标签, 带有铅笔图标; 单击它可打开阴影弹出窗口。
先设置颜色,然后拉动 Blur 并将偏移量保持较小,以获得软卡外观,或者将 Vertical 向上推,零 Blur 以获得硬图形阴影。翻转位置以插入压入的字段和孔。预览跟踪每个更改。一种布局注释:阴影在流程中不占用任何空间,因此大方的展开可以渗入上面的部分和下面的部分,而无需移动任何东西,这值得检查当小部件位于紧行之间时。
常见用例 #
- 卡 在推荐、定价和团队小部件中,柔和的阴影将卡与页面分开。
- 按钮 这需要默认状态下的深度。
- 图像帧(如照片),使照片具有提升的、类似打印的边缘。
- 粘性棒材和面板 其中阴影表示内容的升高。
- Inset 窗体字段的,使用插入式切换进行凹进式外观。
使用 Box Shadow 字段的技巧 #
- 选择器选项是整个连接。 CSS 选项卡没有框阴影令牌;期待一个是组控件最常见的死胡同。
- 始终启动选择器
{{WRAPPER}}. 该字段使用它 raw,将其关闭会将阴影溢出到页面上的每个匹配元素上。 - 用边框和维度将其分组。 这三个字段一起在面板中形成了一个完整的卡片造型部分。
- 靠在阿尔法色上,而不是黑暗。 10%至15%不透明度的黑色阴影读数比纯灰色阴影更好,在您所在领域的描述中值得一提。
- 在小部件 CSS 中保留后备功能。 如果默认设计需要阴影,请将其放入样式表中并让控件覆盖它。
常见问题 #
Master Addons Widget Builder 中的 Box Shadow 字段是什么?
Elementor的框阴影组控件添加到自定义小部件中,涵盖偏移量、模糊、扩展、颜色和插入切换。您将字段指向 CSS 选择器,例如 {{WRAPPER}} .quote-card并且 Elementor 将阴影写入该选择器。
CSS标签的框阴影短代码在哪里?
没有。Box Shadow 是一个组控件,因此它的值永远不会通过 a 打印 {{token}};一个token for it 输出什么都没有用, 改为填写选择器选项, CSS 就是为你生成的。
为什么我的影子也出现在其他小部件上?
选择器丢失 {{WRAPPER}}。组控件完全按照编写的方式应用选择器,因此 .quote-card one 样式页面上的每一条匹配项。将其更改为 {{WRAPPER}} .quote-card 并保存。
我可以制造内心的影子吗?
是的。弹出器的位置切换将阴影切换到插入,将其绘制在元素的边缘内,这是对凹进输入和孔的通常处理。
字段选项设置适合什么?
它覆盖组内的各个子控件,例如为阴影提供预设的起始值,以便控件以可用的阴影而不是空的阴影打开。
我的小部件 CSS 中的阴影与控制冲突吗?
No。stylesheet阴影是默认的样子,一旦编辑器设置值,控件的输出就会覆盖它。在那里保持后备是推荐的设置。
包裹起来 #
Widget 生成器框阴影字段让编辑器对深度有真正的控制:一个字段,一个选择器从开始 {{WRAPPER}}并且整个阴影弹出窗口出现在面板中。它与 的选择器模型相同 版式字段因此,设置在组控件之间直接进行。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。
