"文本阴影"字段将 Elementor 的文本阴影控制添加到使用主插件构建的自定义小部件中 小部件生成器。编辑器获得颜色,模糊设置和两个偏移,阴影被应用于您的CSS选择器指向的任何文本。当标题必须在照片顶部保持可读性时使用它。
Text Shadow是一个Pro字段,免费插件包含一个有限的小部件生成器,全套字段自带 硕士插件专业版.
文本阴影字段的作用 #
- Elementor中为小部件的面板添加了一个控件:您的标签加上一个打开阴影设置的铅笔图标。
- 这些设置是颜色(不透明)、模糊、水平和垂直。
- 元素者写道
text-shadowCSS 到字段选择器选项中设置的元素,因此您不会在 HTML 或 CSS 中放置令牌。
如果您还没有构建小部件,请阅读 小部件生成器概述 首先,打开小部件回来。
在开始之前 #
- WordPress 已安装并处于活动状态。
- Elementor 和 Master Addons Pro 的主插件均处于活动状态。 安装指南 盖设置。
- Widget Builder 中打开的一个小部件,本指南中的示例是一个“照片横幅”小部件:顶部带有 H2 标题的背景照片,该照片具有类
banner-title填写自名为"文本"字段banner_title.
如何添加文本阴影字段 #
- 去 主插件 > 小部件生成器 并打开您的小部件。
- 单击 风格 tab 在区段上方区域,如果选项卡为空,则添加一个区段,给该区段一个明确的标题,例如“旗帜标题”。
- 类型
shadow在左侧的字段搜索框中。框阴影和文本阴影出现。 - 拖动 文本阴影 into the section。its settings open in the left sidebar。
您还可以将字段放入内容或高级部分,然后控件会显示在该元素器选项卡中。不过,编辑器通常会在样式下查找阴影。
文本阴影字段选项已解释 #
- 标签 是《elementor》中控件旁边的文字,示例使用“标题暗影”。
- 名字 is the field的唯一ID(仅字母、数字和下划线),Elementor将编辑器的值保存在这个名称下,所以设置一次,就不要管它了。
- 描述 是构建器内部给你的注释,元素器在这个控制下不会显示。
- 默认值 isn’t被这个字段使用。一个新的阴影总是从elementor自己的默认值开始,列在更下面。
在侧边栏中向下滚动以到达公共设置和选择器。
- 显示标签 隐藏或显示面板中的标签。
- 分离器 在控件之前或之后绘制分隔线。
- 条件 仅当另一个字段具有一定值时才显示控制,例如 “显示 shadow”切换器。参见 条件.
- 选择器 是接收阴影的CSS选择器,没有它,该字段没有做任何有用的事情,因此它下面有自己的部分。
Label Block、响应式控制、动态支持、前端可用和控制类也出现在列表中,一个文本阴影控制不使用它们,改变它们对这个字段没有影响。
设置选择器 #
Selector 告诉元素器哪个元素获得阴影, 对于横幅标题, 输入:
{{WRAPPER}} .banner-title
{{WRAPPER}}替换为页面上此小部件的唯一类别,它将阴影保留在这个小部件内。.banner-title是小部件 HTML 标题中的类。
该字段完全按照类型使用您的选择器。没有 {{WRAPPER}},规则变为 .banner-title { text-shadow: ... } 对于整个页面,每个带有该类的元素都会将其拾取,包括其他小部件中的标题。如果选择器为空,则阴影将转到 {{WRAPPER}} .elementor-widget-container的,它涵盖了小部件中的所有文本。
一个控件可以对多个元素进行样式设计。用逗号分隔选择器,然后以每个选择器开头 {{WRAPPER}}例如 {{WRAPPER}} .banner-title, {{WRAPPER}} .banner-subtitle.
代码编辑器旁边的文档面板列出了 a {{title_shadow}} token for this字段。将其从您的HTML和CSS中删除。阴影作为数字和颜色存储,因此token没有文本可以打印,并且选择器已经处理输出。
单击 保存设置 当你完成后。
在《元素》中使用文本阴影控件 #
将小部件添加到页面,或者如果页面已经打开,则重新加载编辑器。选择小部件并打开 风格 tab。control 坐落在您创建的部分,显示您的标签和铅笔图标。
单击铅笔打开弹出窗口。它打开阴影,元素师的起始值为:模糊 10、水平 0、垂直 0 和黑色,不透明度为 30%。画布在拖动滑块时更新。
- 模糊 0到100 px运行,在0时你得到字母的锐利副本,更高的值将其软化成辉光。
- 水平 並 垂直 100 px 运行到 100 px,然后向左或向右移动阴影,向上或向下移动阴影。
Color 样本来选择阴影颜色, 挑选器有一个不透明度滑块, 接受 HEXA、RGBA 或 HSLA 值, 因此可以键入诸如 rgba(0, 0, 0, 0.65) 直接。
要删除阴影,请单击铅笔旁边的圆形复位箭头。
常见用例 #
- 英雄和横幅照片的标题,文字后面有明亮的区域。
- 视频背景上的文本,当帧发生变化时,柔和的阴影可以保持单词的可读性。
- Retro显示类型,例如大号或销售徽章上零模糊的硬偏移。
- 深色背景上的发光,采用浅色阴影颜色,模糊度大,无偏移。
使用文本阴影字段的技巧 #
- 启动每个选择器
{{WRAPPER}}.否则阴影可能会泄漏到页面上的其他小部件中。 - Typography字段旁边放一个字段,该字段使用相同的选择器,因此标题的字体和阴影设置位于一个部分。
- 挑半透明的颜色,40～70%不透明度的黑色显得自然,纯黑色则显得沉重。
- Widget 可能得到的最亮图像来检查阴影,在暗照片上工作的阴影可以在光照的照片上消失。
- 如果设计在任何人触摸控件之前需要阴影,请添加 a
text-shadow规则为.banner-titleCSS 选项卡中。一旦编辑器设置了控件的值,控件的值就会替换它。 - 对于卡片、按钮和容器,请使用 盒子阴影场 相反。文本阴影遵循字母的形状。
常见问题 #
文本阴影字段免费吗?
No。Text Shadow 是 Widget Builder 中的 Pro 字段之一,因此 Master Addons Pro 必须处于活动状态才能将其添加到小部件中。
Wo的文字影子怎么不出现?
Selector 先检查一下,它必须匹配你的小部件的 HTML 中的一个元素,例如 {{WRAPPER}} .banner-title 对于与类一起的标题 banner-title。然后保存小部件并重新加载 Elementor 编辑器。
CSS 中可以使用 {{title_shadow}} 令牌吗?
No。token 打印任何对此字段有用的内容。设置选择器选项,Elementor 写入 text-shadow 为你统治。
为什么阴影会显示在其他小部件的标题上?
选择器丢失 {{WRAPPER}}zuo以它整个页面都匹配那个类。添加 {{WRAPPER}} 在班级面前保存。
Text 影子和盒子影子有什么区别?
Text Shadow 围绕字母绘制,没有扩展或插入设置,Box Shadow 围绕元素的矩形绘制,标题和标签使用 Text Shadow,卡片和按钮使用 Box Shadow。
包裹起来 #
将文本阴影字段放入样式部分,为其提供标签和名称,并将选择器设置为 {{WRAPPER}} 加上文本的类。然后编辑器在 Elementor 中获取颜色、模糊和偏移控件,并且阴影保留在该小部件内。将其与。 版式字段 对于标题的其余造型,并进行检查 定价 对于每个计划包含的内容。
