的 边境领域 一次性为自定义小部件提供全套边框控制:边框类型下拉、每侧边框宽度输入和边框颜色选择器。主插件内部 小部件生成器、你添加一次字段,将其短代码放入你的CSS中,任何在Elementor中编辑小部件的人都可以重新调整边框,而无需触摸代码。
边境管制支持 条件 与每个字段一样,它可以保持隐藏状态,直到打开边界切换,并且整个构建器的令牌输出由 渲染 Twig-语法模板引擎.两份指南都涵盖了细节。
该字段直接映射到 CSS border shorthand。in 面板中用户选择的任何类型, 宽度和颜色打印到您的样式表, 无论您将令牌放在哪里。
Border 字段的作用 #
Border 字段在您的小部件的选项面板中渲染 Elementor 熟悉的边框组控制。选择小部件, 显示三个相关控件:
- 边框类型: 默认、无、实、双、虚、虚和凹槽的下拉。
- 边框宽度: Top、Right、Bottom 和 Left 输入,带有链接切换功能,可同时设置所有四个,以及用于响应值的设备图标。
- 边框颜色: 能够访问全球颜色的颜色选择器。
Width 和 Color 控件一直隐藏,直到用户选择默认或无以外的边框类型,这可以在没有边框使用时保持面板清洁,这与 的模式相同 文本字段 以及其他 Widget Builder 字段:删除该字段,命名它,使用令牌。如果您是新构建小部件的人,请从 小部件生成器概述 首先。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- Widget 生成器编辑器中打开的自定义小部件,我们的示例是一个带有 a 的标题小部件
<h2 class="border-title">在其 HTML 中。
如何添加边框字段 #
在 Widget Builder 编辑器中,滚动左侧的字段面板,直到找到 边境 field。it 坐落在列表的底部附近,介于背景和文本阴影之间。
将边界字段拖入下面的部分 内容, 风格、或者 高级 tab。style是它的天然家园,尽管它可以在任何地方工作,一旦它降落,字段的选项在左侧打开,其短代码显示在 文档 代码编辑器旁边的侧边栏。
边框字段选项已解释 #
择边框字段来打开其设置,它们遵循与其他所有 Widget Builder 字段相同的布局。
- 标签: 默认情况下,ementor 中的控件上方显示的文本 “Border”。
- 名称: 域(field)的唯一标识符,它必须只包含字母、数字、下划线。命名的字段
border给你的{{border}}短代码。 - 描述: 可选的帮助者文本显示在控件下方。
- 默认值: 小部件以 开始的边框,例如写为 CSS 速记
1px solid #333。将其留空,并且小部件没有边界,直到用户设置一个。 - 显示标签 並 标签块: 标准标签可切换,加上通常的分离器和条件控制装置。
将字段连接到您的 CSS #
Border 字段的令牌属于你的样式表,而不是你的 HTML。打开 CSS tab 并将其用作 的值 border 属性在任何选择器上都应带有边框。与我们的标题示例:
- 规则如下
border: {{border}};里面.border-title选择器。 - 在渲染时,令牌会扩展到用户选择的完整速记,例如
5px solid #e02b20.
单击 保存设置 规则到位后。您可以将相同的令牌丢弃在小部件中的任何选择器上,因此一个边框控件可以勾勒出一张卡片、其图像或两者。
使用 Elementor 中的边境管制 #
Elementor 中的页面中添加自定义小部件,或者如果页面已经打开,则重新加载编辑器。选择小部件,并且 Border 控件会显示在其面板中,并带有您设置的标签。
选择边框类型 #
的 边框类型 dropdown 列出了默认、无、实、双、虚、虚和凹槽,选择默认或无以外的任何类型,下面还会出现两个控件:边框宽度和边框颜色。您选择后立即更新预览,因此选择虚线会立即在小部件周围绘制虚线轮廓。
设置边框宽度 #
的 边框宽度 control 取单独的 Top、Right、Bottom 和 Left 值,保持链接图标打开,将所有四个边都更改在一起,或者对于不均匀的边框取消链接,就像厚的顶部和底部带有薄的标签旁边的设备图标,可以让您设置每个断点不同的宽度。
选择边框颜色 #
的 边框颜色 control 打开 Elementor 的颜色选择器。使用 globe 图标从全局颜色中提取,或者使用选择器和十六进制、RGBA 或 HSLA 输入选择自定义值。
每个变化都生活在预览中。在我们的示例中,标题最终有一个纯红色边框,顶部和底部有 5 个像素,侧面有 3 个像素。
常见用例 #
- 卡片和盒子轮廓 每个站点都需要自己的边框重量和颜色。
- 突出显示的头条新闻 就像本示例中的盒装标题一样。
- 图像帧 在团队、产品组合或产品小部件上。
- 按钮样式 轮廓变体需要用户可编辑的边框。
- 呼叫和通知框 这种风格在实体风格和破折号风格之间切换。
与边境领域合作的技巧 #
- CSS中放入令牌,而不是HTML。 短代码扩展到 CSS 值,因此它仅作为属性值才有意义
border: {{border}};. - 以速记形式设置默认值。 类似的东西
1px solid #333在任何人打开面板之前完成小部件外观。 - 将其与边框半径配对。 该字段涵盖类型、宽度和颜色。添加维度字段或固定字段
border-radius圆角规则。 - 记没有一个是真正的选择。 用户可以将面板上的边框关闭,因此不要依赖边框将布局固定在一起。
- 在有帮助的地方重复使用令牌。 的相同
{{border}}value 可以设置多个选择器,它们都遵循一个控件。
常见问题 #
Master Addons Widget Builder 中的边框字段是什么?
Border 字段将 Elementor 的边框组控制添加到自定义小部件:边框类型下拉、每边边框宽度输入和边框颜色选择器。它的短代码将生成的 CSS 边框速记打印到小部件的样式表中。
我在哪里放置边框短码?
Widget Builder的CSS标签中,作为边框属性的值,在应该携带边框的选择器上使用名为边框的字段作为边框:{{border}}。不属于HTML编辑器。
控制支持哪些边框类型?
Border Type 下拉提供默认、无、实、双、虚、虚和凹槽。选择除默认或无之外的任何类型都会显示下拉下方的边框宽度和边框颜色控件。
用户可以在每一侧设置不同的边框宽度吗?
是边框宽度控件有单独的顶部、右侧、底部、左侧输入,链接切换一起改变所有四个;解开链接设置不均匀值,如顶部和底部5个像素,侧面3个像素。
为什么我没有在面板中看到边框宽度和颜色?
Border Type 为默认或无时,那些控件会保持隐藏状态。选择 Solid、Dashed 或任何其他可见类型,并且会出现这两个控件。如果整个 Border 控件丢失,请重新加载 Elementor 编辑器,以便它拾取保存的小部件。
包裹起来 #
Widget Builder 边框字段将边框类型下拉、响应式每边宽度和颜色选择器打包为单个拖放。命名字段,设置 border: {{border}}; CSS 中,并且边界决策会从您的样式表中移出,进入 Elementor 面板,编辑器可以在其中处理它们。将其与。 文本字段 和一个 分频器 在一个地方构建一个涵盖内容和风格的小部件面板。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。
