视觉选择

的 视觉选择字段 widget的面板中渲染一组图像卡,每个选项一个,用户通过点击缩略图进行选择,它是布局选择器控件,其中select提供单词,choice提供图标,visual Choice显示每个变体实际外观的小图片主插件内部 小部件生成器这使其自然适合网格与列表的决策,并且屏幕截图解释的任何变体都比名称更快。

视觉选择选项值直接插入 条件(spicked)的布局,让其他控件遵循所选的布局,并进入 Twig-语法模板引擎,在哪里 {% if style == "grid" %} 切换标记以匹配。两个指南都涵盖了细节。

Template 契约匹配其他选择字段:值是所选选项的键,Visual Choice 不同的是第二种接线样式,即前缀类,它会更改小部件包装器上的类,以便您的 CSS 可以在模板未提及字段的情况下切换布局。

Visual Choice 字段的作用 #

• 渲染可点击的图像卡 elementor面板中,每个选项都由一个键、一个标题和一个图像定义。
• 握住一把钥匙 从定义的集合中,当前选择的卡。
• 将卡片放在列中默认情况下每行三个,可通过列选项进行调整。
• Feeds 模板所选的密钥 对于修饰语类和 {% if %} 块。
• 可选设置包装类别 过前缀类选项,因此仅CSS就可以切换布局。

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

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Widget Builder编辑器中打开的自定义小部件,我们的例子是一个团队成员小部件,有两个布局变体,一个3列网格和一个堆叠列表,通过缩略图卡片选择。

如何添加视觉选择字段 #

找 视觉选择 widget 生成器编辑器左侧的字段面板中,与其他选择字段分组。

将其拖入下面的一个部分 内容 或 风格 tab。layout 选取器通常先坐在面板中,在内容选项卡的顶部,因此编辑器在填写内容之前会选择一个结构,一旦字段落地,它的选项就会在左侧打开。

解释了视觉选择字段选项 #

• 标签: elementor 中卡片上方显示的文本,例如 “布局”。
• 名称: 例如,字段、字母、数字和下划线的唯一标识符 team_layout.
• 选项: 每个选项都是一个键加上一个标题和一个图像,图像变成可点击的卡片;标题标记它。按键保持短时间且 CSS-safe: grid, list.
• 列: panel中每行坐多少张牌,默认3。两张大牌读起来更好2列。
• 前缀类: 类词干 Elementor 将选定的键附加到小部件包装器上并放置在小部件包装器上。与 team-layout- 和钥匙 grid,包装纸携带 team-layout-grid.
• 默认: widget 首次掉落到页面时所选择的键。
• 描述、显示标签、分离器: 标准显示设置,以及仅在另一个控件具有一定值时显示字段的条件。

将"视觉选择"连接到您的小部件 #

两种布线方式。每字段选择一种。

样式 A:模板图案。 令牌打印所选密钥,因此所有内容都来自 选择字段 apply。a 修饰符类:

<div class="team team--{{ team_layout }}">
  ...
</div>

或者当变体需要不同的标记时结构分支:

{% if team_layout == 'list' %}
  <ul class="team-list"> ... </ul>
{% else %}
  <div class="team-grid"> ... </div>
{% endif %}

样式 B:前缀类。 填写前缀类选项,例如 team-layout-,而元素符写 team-layout-grid 或 team-layout-list upon 小部件的包装纸, 当用户点击卡片。然后你的CSS针对组合类:

.team-layout-grid .member { /* grid card rules */ }
.team-layout-list .member { /* stacked row rules */ }

Template 根本就不会引用字段;wrapper 类做切换,这使得 HTML 保持为单个标记块,并将每个变体推入样式表中,当只改变表示形式时,通常就是更干净的剪切。

注意在一个字段上混合两种样式。假设的模板条件 grid 而前缀类同时设置 team-layout-list 是两个真理的来源,它们会漂移,通常几个月后,当有人编辑一侧并忘记另一侧存在时,通过模板或包装类决定这个字段是否说话,然后坚持下去。

在《元素》中使用视觉选择控件 #

Elementor 中将自定义小部件添加到页面, 如果页面已经打开, 则重新加载编辑器。控件在面板中显示您的选项卡, 所选选项卡突出显示。

单击一张卡片,布局会在预览中翻转,无论是通过修改器类还是通过包装纸上的前缀类,无论您选择哪个接线。因为每张卡片本身都显示变体,因此编辑器无需阅读任何内容即可选择正确的布局。

常见用例 #

• 网格与列表布局 适用于团队、投资组合和帖子小部件。
• 卡片风格变体 缩略图显示了实际的盒装、叠加和分体设计。
• 标题安排 例如图像顶部、图像左侧和纯文本英雄变体。
• 滑块与静态演示文稿 的相同内容集。
• 一个小部件内的模板包客户从图片中选择三个预先设计的外观。

使用 Visual Choice 字段的技巧 #

• 使用真实屏幕截图作为选项图像。 每个变体的微小渲染都会击败抽象图标;卡片是文档。
• 每个字段选择一种接线方式。 模板模式或前缀类,不是两者,或者两者最终会出现分歧。
• 键会输入类名,因此请保留它们。 grid 並 list不是“网格布局”。
• 用分隔符结束前缀。 team-layout- 加加 grid 读作 team-layout-grid;没有连字符,你得到 team-layoutgrid.
• 将列与您的卡片数量相匹配。 3列的两个选项留下一个空白;将列设置为2,行填充。
• 保留它以适应视觉差异。 如果选项的行为而不是外观不同,则带有清晰标签的"选择"可以更好地为编辑器服务。

常见问题 #

包裹起来 #

Widget Builder 可视化选择字段,让编辑器通过查看来选择布局:面板中的图像卡、模板中的键以及前缀类选项,当您宁愿单独从 CSS 切换布局时,它会自然地与 选择字段。缩略图处理大结构镐,图标按钮小调整。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。