选择

的 选择字段 elementor 在小部件面板中渲染一排图标按钮,用于文本对齐的控件相同:三个或四个按钮,一次一个活动。在主插件内部 小部件生成器只要选项很少并且图标说的不仅仅是单词,它就是正确的选择。对齐是明显的例子,但位置和方向开关适合相同的模具。

"选择"控件的选项键直接与之配合使用 条件(so),所以可以根据所选选项出现其他字段,并带有 Twig-语法模板引擎,其中检查像 {% if align == "center" %} 切换您的标记。两个指南都涵盖了详细信息。

Select 一样,交给你模板的值是选项的键,而不是它的标题,Choose 在上面添加的内容:每个选项的图标,可选的切换关闭行为,以及进入 Elementor 选择器的简单路径机制,用于纯 CSS 选择,如对齐。

"选择"字段的作用 #

• 渲染一排图标按钮 elementor面板中,每个选项中,您定义一个。
• 握住一把钥匙 从定义的集合中,一次恰好有一个按钮处于活动状态。
• 将每个选项与一个 eicon 配对的,如 eicon-text-align-left的,所以选择一看就知道了。
• 可选地关闭:打开"切换"选项,再次单击活动按钮取消选择它,值就会变空。
• 支持响应式标志 并且可以直接通过选择器写入 CSS,如下所述。

如果您是构建小部件的新手,请从以下内容开始 小部件生成器概述 首先。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Widget Builder编辑器中打开的自定义小部件,我们的示例是一个带有“报价对齐”选择器的见证小部件:左,中,右。

如何添加"选择"字段 #

在 Widget Builder 编辑器中,找到 选择 左侧面板中的字段,与其他选择字段分组。

将其拖入下面的一个部分 风格 tab;对齐型设置自然地生活在那里,一旦它落地,字段的选项就会在左侧打开。

选择解释的字段选项 #

• 标签: elementor中按钮旁边显示的文本,例如“报价对齐”。
• 名称: 例如,字段、字母、数字和下划线的唯一标识符 quote_align.
• 选项: 每个选项都是一个键加上一个标题和一个图标,标题成为按钮的工具提示,图标是一个 eicon 类,例如 eicon-text-align-left 为钥匙 left.
• 切换: on 时,再次单击活动按钮取消选择,字段的值变为空,如果小部件始终需要值,请将其关闭。
• 默认: 当小部件首次掉落到页面上时,密钥处于活动状态。
• 响应式: 添加设备图标,以便每个断点对齐方式可能有所不同。
• 描述、显示标签、分离器: 标准显示设置,以及仅在另一个控件具有一定值时显示字段的条件。

将选择连接到您的模板或选择器 #

2种布线样式,对齐实例可与任一。

模板模式。 Token 打印所选键, 因此选择模式继续保持不变。修改器类将变体保留在您的 CSS 选项卡中:

<blockquote class="quote align--{{ quote_align }}">
  {{ quote_text }}
</blockquote>

与 .align--center { text-align: center; } CSS选项卡中的朋友。条件也起作用: {% if quote_align == 'center' %}。与选择一样,与键进行比较,永远不要与标题进行比较。

的选择器选项。 The Choose 还可以通过 Elementor 的选择器机制编写 CSS,完全跳过模板,在依赖它之前要知道一件事:Elementor 为一个 Choose 选择器注入的默认属性是 color: {{VALUE}}的, 这对对齐是没有用的, 一个自定义选择器条目必须拼出不动产:

text-align: {{VALUE}};

然后密钥需要是有效的 CSS 值 (left, center, right 已经是),并且 {{WRAPPER}} 对于这种值控制,会自动预先显示,因此样式会保留到您的小部件的范围,而无需您编写它。

A 留意这个错误的静音版本,A 选线到保留默认属性的选择器会很开心地写入 color: center、无效声明浏览器掉落一句话都没有控制台警告,没有视觉提示如果按钮似乎什么都不做,在触摸字段配置之前检查生成的CSS。

使用 Elementor 中的"选择"控件 #

Elementor 中将自定义小部件添加到页面,如果页面已经打开,则重新加载编辑器。控件显示为标签下的一排图标按钮,默认键的按钮处于活动状态。

单击一个按钮,预览会立即更新。打开切换,单击活动按钮可以清除选择,小部件会回落到您的 CSS 选项卡定义的任何内容。打开响应式,设备图标可以让每个断点保留自己的选择。

常见用例 #

• 文本对齐 对于标题、引言和标题,控制的主场。
• 元素位置 例如媒体和文本卡中的左图或右图。
• 方向开关 用于水平与垂直列表和时间线。
• 尺寸预设 就像小、中、大映射到修饰符类一样。
• 展示方的选择 对于徽章和丝带,从左上角到右下角。

"选择"字段工作的提示 #

• 保持两个、三个或四个选项。 一排七个图标按钮是穿着服装的下拉;使用选择代替。
• 使用选择器时将密钥与 CSS 值匹配。 钥匙喜欢 left 並 center 直接掉进去 text-align: {{VALUE}} 没有翻译层。
• 在自定义选择器中定义不动产。 默认注入属性是 color: {{VALUE}}的,这只适合实际的颜色选择。
• Toggle 打开时为空值计划。 取消选择的字段打印空键,因此 align-- 类和条件应该容忍它,或者保持切换。
• 与条件条件中的键进行比较。 选项标题是仅限面板的文本,并且永远不会匹配 {% if %}.
• 使用响应式对齐。 移动中心、桌面左侧是一个控件,而不是两个控件。

常见问题 #

包裹起来 #

Widget Builder Choose 字段为小的视觉决策提供了他们应得的控制。按键位于图标按钮后面,令牌提供修改器类和条件,选择器路径处理一个属性选择,例如一旦您定义了真正的 CSS 属性,就需要完整的缩略图而不是图标的布局选择,请向上一步 视觉选择字段。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。