视觉选择

Visual Choice 字段将一行可点击的图像卡添加到使用主插件构建的自定义小部件中 小部件生成器。每张卡片都是一个选项的小图片,所以编辑通过查看来选择布局或样式,你的模板获取他们点击的卡片的键。

Visual Choice是一个Pro字段,免费插件包含一个有限的小部件生成器,全套字段自带 硕士插件专业版.

Visual Choice 字段的作用 #

• Elementor面板中以图像卡的形式显示您的选项,所选卡片获得一个亮点。
• 每个选项都有一个键、一个标题和一个图像。标题用作卡片的工具提示和替代文本。
• 您的模板接收选定的密钥,例如 grid 或 list您可以在类名或类名中使用它 {% if %} 查。
• 列设置控制面板一行中有多少张卡片。

如果您还没有构建小部件,请阅读 小部件生成器概述 首先。对于像文本或图标一样精细阅读的选择, 选择 並 选择 字段设置速度更快。

在开始之前 #

• WordPress 已安装并处于活动状态。
• Elementor 和 Master Addons Pro 的主插件均处于活动状态。 安装指南 盖设置。
• Elementor的深色面板上,每个选项都有一个小图像。大约240 x 160像素的简单线条图,保存为透明背景的PNG。
• Widget Builder 中打开的小部件,本指南中的示例是一个具有三种布局的“团队展示”小部件:网格、列表和聚光灯。

如何添加视觉选择字段 #

1. 去 主插件 > 小部件生成器 并打开您的小部件。
2. 上 内容 tab,添加一个部分,一个布局选择器通常先走,所以编辑器先选择结构再做其他任何事情。
3. 类型 visual 在左侧的字段搜索框中。
4. 拖动 视觉选择 into the section。its settings open in the left sidebar。

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

• 标签 是 Elementor 中卡片上方的文本,例如 “布局”。
• 名字 是该字段的唯一ID及其模板令牌,因此 team_layout 变成 {{team_layout}}。字母,数字和下划线仅。
• 描述 elementor 中的卡片下方出现。
• 选项 每张卡持有一行。 钥 是模板得到的值(保持短小写,就像 grid). 标题 给卡片命名。单击 图像 box 打开"选择图像"窗口, 上传文件或从媒体库中选择一个, 然后单击 使用此图像。加号图标增加一行,红十字会删除一行。
• 列 1到6中设置一行适合多少张牌,即使框中已经显示2,也要键入数字,直到你更改显示的数字才被保存,并且没有保存的值,elementor每行放一张牌。
• 切换 在面板中列出,但在我们的测试中它没有什么区别。编辑器总是可以再次单击选定的卡以清除它。

下面的常见设置与其他字段一样工作,包括 条件。面板没有此字段的默认值,因此小部件的新副本以未选择卡片开始。

单击 保存设置 添加选项后。

使用模板中选定的密钥 #

{{team_layout}} prints 所选卡的键, 最简单的使用方法就是修改器类:

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

选择网格后,就会呈现 ts-team--grid.当布局需要不同的标记时,检查键与 {% if %}List布局中, 示例仅显示一个简短的bio:

{% if team_layout == 'list' %}
  <p class="ts-bio">Leads brand and product design across every client project.</p>
{% endif %}

然后每个键写一组 CSS 规则:

.ts-team--grid { grid-template-columns: repeat(3, 1fr); }
.ts-team--list { grid-template-columns: 1fr; }
.ts-team--spotlight { grid-template-columns: 1.4fr 1fr; }

在编辑器单击卡片之前,令牌不会打印任何内容,上面的类就会变成 ts-team--.给出底数 .ts-team class a布局本身看起来很好,所以在做出选择之前,小部件永远不会出现损坏。

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

将小部件添加到页面中,或者如果页面已经打开,则重新加载编辑器。卡片出现在"内容"选项卡上。单击其中一个,画布立即更新。

单击列表将团队切换到行,并且 {% if %} block 添加了 bios:

Spotlight 使第一个成员变大:

再次单击选定的卡以清除选择。然后模板得到空键,如上所述。

常见用例 #

• 团队、博客、作品集和推荐小部件的布局选择器。
• 从图片比从名称更容易识别的卡片或标头样式。
• 图像位置选择,例如左图、右图或顶部图像。
• 预设设计可同时使用一个类切换多个 CSS 规则。

使用 Visual Choice 字段的技巧 #

• 每个选项图像都使用相同的绘图样式,因此卡片看起来像一组。
• Keep键短小写无空格,最后都是班级名。
• Widget 使用后不要重命名密钥,保存旧密钥的页面将无法与您的新 CSS 匹配。
• 当您拥有三个或更少的选项时,将列设置为选项数量,以便所有卡片都排成一排。
• Style空状态,直到有人挑到一张卡片,钥匙都是空白的。

常见问题 #

包裹起来 #

为每个选项提供一个键、一个标题和一个图像、键入列值并使用 {{field_name}} 在类名或一个中 {% if %} check。plan 空状态,因为在编辑器点击卡片之前什么都没有被选中。要从文本列表中进行选择,请参阅 选择2字段,并检查 定价 对于每个计划包含的内容。