Box Shadow 字段将 Elementor 的盒子阴影控制添加到使用主插件构建的自定义小部件中 小部件生成器。编辑器设置颜色,偏移,模糊,扩散和位置从一个小弹出窗口,阴影被应用到你的CSS选择器指向的元素。它是从页面上提升卡片,软化按钮或给面板按下外观的字段。
Box Shadow是一个Pro字段,免费插件包含一个有限的小部件生成器,全套字段自带 硕士插件专业版.
Box Shadow 字段的作用 #
- 它为小部件的样式选项卡添加了一个控件:您的标签和打开阴影设置的铅笔图标。
- 设置为颜色、水平、垂直、模糊、展开和位置(轮廓或内置)。
- 元素者写道
box-shadowCSS 到选择器中的元素,因此您不需要 HTML 或 CSS 中的令牌。
如果您还没有构建小部件,请阅读 小部件生成器概述 首先。
在开始之前 #
- WordPress 已安装并处于活动状态。
- Elementor 和 Master Addons Pro 的主插件均处于活动状态。 安装指南 盖设置。
- Widget 生成器中打开的一个小部件,本指南中的示例是一个“见证卡”小部件,其卡具有类
quote-card.
如何添加 Box Shadow 字段 #
- 去 主插件 > 小部件生成器 并打开您的小部件。
- 单击 风格 tab并添加一个部分,例如“卡式”。
- 类型
shadow在左侧的字段搜索框中。框阴影和文本阴影出现。 - 拖动 盒子阴影 into the section。its settings open in the left sidebar。
框阴影字段选项已解释 #
- 标签 是 Elementor 中控件旁边的文本,例如 “卡影”。
- 名字 是字段的唯一ID。字母,数字和下划线仅。
- 描述 是建筑商内部的便条。
- 选择器, 默认阴影类型, 默认阴影值 並 默认阴影颜色 description 下出现,在我们的测试中,这些框中键入的更改没有保存,并且构建器记录了错误,所以暂时不要依赖它们。在常用设置中设置选择器,而不是(下一节),并在 CSS 选项卡中给卡片一个起始阴影。
- 默认值 是不是这个领域用的。
设置选择器 #
滚动到侧边栏的底部,然后将元素的类键入到 选择器 control 类下的框。对于见证卡:
.quote-card
你不必打字 {{WRAPPER}}。构建器在选择器前面添加它,因此规则变为 {{WRAPPER}} .quote-card and只影响这个小部件,如果一个阴影应该应用于多个元素,则用逗号分隔几个选择器,如果选择器为空,则阴影会出现在小部件的外包装上。
保存后,侧边栏顶部附近的选择器框显示相同的值。
添加后备阴影 #
CSS 选项卡中放入起始阴影, 它显示直到编辑器打开控件, 之后控件的阴影替换它:
.quote-card {
box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
}
单击 保存设置 当你完成后。
在《元素人》中使用盒子阴影控制 #
将小部件添加到页面,或者如果页面已经打开,则重新加载编辑器。选择小部件并打开 风格 tab。您的标签显示为铅笔图标。
单击铅笔打开弹出窗口。这会打开 Elementor 起始值的阴影:水平 0、垂直 0、模糊 10、展开 0 和黑色,不透明度为 50%。调整它们,卡片在拖动时更新:
- 颜色 设置阴影颜色和不透明度。有色、半透明的颜色看起来比黑色更柔和。
- 水平 並 垂直 将阴影横向移动,向上或向下移动。
- 模糊 软化边缘。 0 给出硬影。
- 传播 yang影或缩小,一个小的负值使一个大的模煳不yu向侧面溢出。
- 位置 outline(盒子外)和 Inset(盒子内)之间切换。
设置位置 插入 对于压入式外观,对于输入字段和安静面板非常有用:
铅笔旁边的圆形箭头重置控制并移除阴影。
常见用例 #
- 推荐卡、定价卡、团队卡和博客卡小部件卡。
- 需要一点深度的按钮,通常搭配悬停风格。
- 硬偏移阴影适用于大胆、扁平的设计。
- 在输入字段、搜索栏和凹进面板上插入阴影。
使用 Box Shadow 字段的技巧 #
- 使用侧边栏底部的选择器,仅键入类。
{{WRAPPER}}是为你添加的。 - 保持后备状态
box-shadowCSS选项卡中,因此新小部件看起来并不平坦。 - 对于软卡片阴影,请尝试大模糊、大约一半模糊的垂直偏移以及小负扩散。
- Give元素一个边框半径,阴影跟随角落,所以圆牌得到圆影。
- 对于文本上的阴影,请使用 文本阴影字段 相反。
常见问题 #
盒子影子场免费吗?
No。Box Shadow 是 Widget Builder 中的 Pro 字段之一,因此 Master Addons Pro 必须处于活动状态才能将其添加到小部件中。
我需要将 {{WRAPPER}} 添加到选择器吗?
号建造者补充道 {{WRAPPER}} box Shadow 选择器前面为您设置,所以 .quote-card 够了。
为什么我的默认阴影类型或默认阴影值不保存?
在我们的测试中,这些框没有保留其更改。将起始阴影设置为 a box-shadow CSS 选项卡中的规则代替,编辑器然后可以用控件更改它。
我的 CSS 的框阴影令牌在哪里?
没有一个可以使用。阴影是一个 CSS 属性中的几个值,因此 Elementor 为您将规则写入选择器。
Box影子跟文字影子有什么区别?
Box Shadow 围绕元素的框进行绘制,并具有扩展和嵌入,文本 Shadow 跟随文本的字母,卡片和按钮使用 Box Shadow,标题使用文本 Shadow。
包裹起来 #
"样式"部分添加"框阴影"字段, 将元素的类键入侧边栏底部的"选择器 ", 并在 CSS 选项卡中保留一个光后备阴影, 然后编辑器从一个弹出窗口控制阴影, 对于卡的其余样式, 请参阅 边境 並 尺寸 字段,然后检查 定价 对于每个计划包含的内容。
