的 文本阴影字段 elementor的文本阴影控制添加到您的自定义小部件中:水平和垂直偏移,模糊,以及带有不透明度的颜色,应用于您的选择器指向的任何文本。主插件内部 小部件生成器中,它是让编辑器在繁忙的照片上保持标题可读或为显示类型提供微妙提升的最快方法。
与每个 Widget Builder 控件一样,Text Shadow 支持 条件方便仅在启用阴影选项时才显示它,并且跨构建器的令牌输出穿过 Twig-语法模板引擎.指南都涵盖了设置和限制。
Text Shadow 是一个组控件,是包含 Typography 和 Background 的系列中最小的。接线是相同的:您的 CSS 中没有令牌,只是告诉 Elementor 要样式的选择器选项。
文本阴影字段的作用 #
- Renders Elementor 的文本阴影组控制的,从字段标签旁边的铅笔图标打开。
- 水平和垂直偏移 将阴影放在字形周围。
- 模糊 软化它,从坚硬的复制品边缘到宽阔的光芒。
- 颜色 包括用于逼真、低不透明度阴影的 alpha 通道。
- CSS 本身编写 到您提供的选择器;没有模板令牌。
以前从未构建过小部件?从开始 小部件生成器概述 一旦你打开了一张就回来。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- Widget 生成器编辑器中打开的自定义小部件,我们的示例是一个带有 a 的照片横幅小部件
<h2 class="banner-title">坐在图像上前进。
如何添加文本阴影字段 #
在 Widget Builder 编辑器中,滚动左侧的字段面板,直到找到 文本阴影 字段,与其他样式组字段(例如 Typography 和 Box Shadow)一起列出。
将其拖入下面的一个部分 风格 tab,通常就在为同一文本进行样式的typography字段旁边,一旦它落地,字段的选项就会在左侧打开。
文本阴影字段选项已解释 #
- 标签: elementor 中控件旁边显示的文本,例如 “标题 Shadow”。
- 名称: 仅字段、字母、数字和下划线的唯一标识符。
- 选择器: css选择器阴影应用到。这是连接本身,接下来覆盖。
- 排除: 当您想要精简弹出窗口时,从组中删除各个子控件。
- 说明、显示标签、分隔符和条件是您在其他字段上看到的标准显示选项。
将字段指向您的选择器 #
与其他组控制一样, 文本阴影字段没有 {{shortcode}} 为您的 CSS。 影子将偏移、模糊和颜色捆绑到一个属性中,因此 a {{ token }} 对于字段打印没有任何有用。的 选择器 option 承载整个连接。
对于横幅标题,选择器是:
{{WRAPPER}} .banner-title
{{WRAPPER}}stands代表小部件自己的容器,将阴影保留在这个小部件内,组控件按编写的方式应用选择器,所以{{WRAPPER}}是您的键入;它不是为您添加的。.banner-title是您的小部件 HTML 内的文本元素。
小心:跳过 {{WRAPPER}} 选择器风格多样 .banner-title 跨页面,包括其他小部件中的。设置镜像 版式字段 确切地说,因此在那里工作的选择器在这里工作。
Design 调用默认阴影,则将其保留在小部件的 CSS 选项卡中作为后备,一旦编辑器设置值,控件就会覆盖它。
在《元素》中使用文本阴影控件 #
Elementor中添加自定义小部件到页面,或者如果编辑器已经打开,则重新加载该控件显示您的标签和打开阴影弹出窗口的铅笔图标。
Pick一个颜色,然后调整Blur和两个偏移低不透明度下的一个暗影,带有几个像素的模糊,使标题在摄影中清晰可见;零模糊的较大偏移产生复古的显示效果,预览会根据每个更改网站可能使用的最轻的照片调整结果,而不仅仅是演示图像,因为在黑暗背景上拨入的阴影可以在明亮的照片上完全消失。
常见用例 #
- 照片上的标题 在英雄和横幅小部件中,阴影可以反击对比度。
- 视频背景上的文本的,它不断地移动,需要额外的边缘。
- 显示类型效果 如大数字上的硬偏移阴影。
- 光图像上的光文本柔和的深色光环使字幕保持可读性。
- 徽章和标签 坐在梯度或图案区域。
使用文本阴影字段的技巧 #
- 选择器选项是整个连接。 组控件不存在令牌,因此此字段的 CSS 选项卡中没有任何内容。
- 始终启动选择器
{{WRAPPER}}. Raw使用,没有它,阴影会到达页面上的每个匹配元素。 - 将其与同一选择器上的字体排印字段配对。 然后,一个标题的字体和阴影决策一起坐在面板中。
- 喜欢低不透明的颜色。 色阿尔法通道构建的阴影坐落在设计中;纯黑色很少这样做。
- 用排除来简化。 如果小部件只需要模糊和颜色,则修剪组可以使弹出窗口保持较小。
- CSS 选项卡中发货后备 当默认设计取决于影子存在时。
常见问题 #
Master Addons Widget Builder 中的文本阴影字段是什么?
Elementor的文本阴影组控件添加到自定义小部件中,具有水平和垂直偏移、模糊和颜色。您将字段指向 CSS 选择器,例如 {{WRAPPER}} .banner-title并且 Elementor 将阴影写入该文本。
CSS标签的文本阴影短代码在哪里?
没有。Text Shadow 是一个组控件,因此它的值永远不会通过 a 打印 {{token}};一个token for it 输出什么都没有用,改为设置选择器选项,CSS 就是为您生成的。
文本阴影与盒子阴影有何不同?
Text Shadow 从文本本身的字形中绘制阴影,没有扩展或插入设置 Box Shadow 从元素的框中绘制标题和标签使用 Text Shadow,卡片、按钮和容器使用 Box Shadow。
为什么我的影子显示在其他小部件的标题上?
选择器缺少 {{WRAPPER}}(so)上,所以它与页面上处处(sclass)匹配,组控件完全按照写入的方式取选择器,前缀为 {{WRAPPER}} 并保存。
一个文本阴影字段可以覆盖多个文本元素吗?
是。逗号- 将选择器分开,然后以开始 {{WRAPPER}}例如 {{WRAPPER}} .banner-title, {{WRAPPER}} .banner-sub。然后两者遵循相同的控制。
我的小部件 CSS 中的文本阴影规则仍然适用吗?
是的,默认情况下。一旦编辑器配置弹出窗口,控件的输出就会覆盖样式表值,这正是后备状态应有的表现方式。
包裹起来 #
Widget Builder 文本阴影字段是一个小控件,可以解决一个反复出现的问题:无论编辑器掉在后面什么图像,文本都必须保持可读性命名字段,将选择器设置为 {{WRAPPER}} plus文本的类,从此影子就生活在面板中,它与x共享它的选择器模型,它可以用它来进行选择,然后再用它来进行选择,然后再用它来进行选择 版式字段的,反正它通常属于同一个标题,探索其余的 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。