选项卡

Tabs 字段组在 Elementor 面板中控制为一个选项卡条,就像 Elementor 自己的按钮样式上的普通和悬停选项卡一样。您在主插件中构建它 小部件生成器:添加选项卡,在每个选项卡内放置字段,并使用三部分令牌读取 HTML 或 CSS 中的每个值,例如 {{ button_states.hover.bg }}.

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

Tabs 字段的作用 #

• Widget面板的一部分添加了一行可点击选项卡,单击一个选项卡会显示其内部的字段。
• 每个选项卡都有一个名称、一个标签和自己的字段列表。
• Tabs 字段本身不存储任何值,这些值属于 tabs 内部的字段。
• 模板读取这些值 {{ tabs_name.tab_name.field_name }}。两个选项卡可以使用相同的字段名称,这使得 Normal 和 Hover 规则易于比较。

如果您还没有构建小部件,请阅读 小部件生成器概述 首先。

在开始之前 #

• WordPress 已安装并处于活动状态。
• Elementor 和 Master Addons Pro 的主插件均处于活动状态。 安装指南 盖设置。
• Widget Builder 中打开的一个小部件,本指南中的示例是一个 “悬停按钮”小部件:按钮标签的文本字段,加上一个名为 Tabs 的字段 button_states 有"正常和"悬停选项卡,每个选项卡包含两个色域, bg 並 text.

如何添加选项卡字段 #

1. 去 主插件 > 小部件生成器 并打开您的小部件。
2. 单击 风格 tab并添加一个部分,例如“按钮式”。
3. 类型 tabs 在左侧的字段搜索框中。
4. 拖动 选项卡 into the section。其设置在左侧边栏中打开,并且该部分预览显示选项卡条。

一个新的选项卡字段被命名 tabs 并附有两个空选项卡, tab_1 並 tab_2。在你写任何代币之前,重新命名它们,因为这些名称成为每条路径的一部分。

选项卡字段选项已解释 #

• 标签 建[建者]内部的字段命名。在元素器中,编辑器看到的章节标题和标签标签,而不是这个标签。
• 名字 是每个令牌的第一部分,所以 button_states 给出 {{ button_states.normal.bg }}。字母,数字和下划线仅。
• 描述 是建筑商内部的便条。
• 选项卡 是选项卡的列表。每一行都有一个 名字 (用于代币)中,如 hover) 和 a 标签 (显示在选项卡上, 如悬停)。单击 添加选项卡 对于另一行,或红十字以删除一行。

在选项卡列表下,侧边栏显示一个 选项卡字段 table per tab,标题为标签页的标签,这是字段的去处。

• 名字 是令牌的最后部分,你可以在每个标签页中重复使用相同的名称,作为 bg 並 text 在这里。
• 标签 是元素器中控件旁边的文本。
• 类型 设置控件:文本、编号、文本区域、所见即所得、代码、隐藏、切换器、选择、颜色、字体、排版、日期时间、URL、媒体、图库、图标、滑块、尺寸或背景。
• 单击 添加字段 向该选项卡添加一行。

(显示标签、分离器、条件和其余部分)下方的常见设置不会改变元素器中选项卡字段的显示方式,因此您可以不理会它们。

读取模板中的选项卡值 #

选项卡内的每个值都用三个由点连接的名称来读取:选项卡字段、选项卡,然后是字段。

{{ tabs_name.tab_name.field_name }}

Tabs 字段的标签下,你不必键入这些,保存后,HTML 编辑器旁边的文档面板列出了每个路径,复制图标复制一个。

CSS选项卡以及HTML选项卡中运行的令牌, 示例按钮将其基本外观保持在一个规则中, 并在接下来的两个中读取选项卡颜色:

.ma-btn {
  background: #652dd9;
  color: #ffffff;
}

.ma-btn {
  background: {{ button_states.normal.bg }};
  color: {{ button_states.normal.text }};
}

.ma-btn:hover {
  background: {{ button_states.hover.bg }};
  color: {{ button_states.hover.text }};
}

第一个规则是后备,直到编辑器选择颜色,令牌不会打印任何内容,行就会变成 background: ;。浏览器跳过该无效行,因此第一条规则中的颜色保持在原位。

只有完整的路径有效。在测试中, {{ bg }}, {{ hover.bg }} 並 {{ button_states.hover }} 一切都没有打印任何内容,而 {{ button_states.hover.bg }} printed 的颜色,如果一个值出来是空的,先检查三个部分和确切的拼写。

单击 保存设置 当你完成后。

使用 Elementor 中的选项卡控件 #

将小部件添加到页面,或者如果页面已经打开,则重新加载编辑器。选择小部件并打开 风格 tab。您的部分显示打开正常选项卡的选项卡条。

"正常"选项卡上设置颜色, 然后单击 悬停 并设置第二对。将鼠标移到预览中的按钮上以检查悬停颜色。

常见用例 #

• 按钮、卡片和链接的普通颜色和悬停颜色。
• 用于过滤器、切换和菜单项的主动和非主动样式。
• 组件的明暗版本,从一个部分编辑。
• 内容分为几组,例如翻转卡上的前后选项卡,每个选项卡都有文本和媒体字段。

Tabs 字段工作的提示 #

• Tabs 字段名称和 tab 名称先选取,要么以后重命名,意味着更新每一个使用它们的令牌。
• 在选项卡之间重用字段名称。 normal.bg 並 hover.bg 比两个不相关的名字更容易阅读。
• Widget 出现在实时页面上后,避免更改字段的标签。Elementor 将保存的值存储在从标签构建的密钥下,因此新的标签可以使现有值从这些页面中消失。
• 将默认样式放在令牌规则之前的规则中,因此空值永远不会破坏设计。
• 给你的课程一个前缀(例如 ma-btn)。来自小部件的 CSS 选项卡的 CSS 适用于整个页面,因此通用名称如 .button 可以与其他风格发生冲突。
• 对于单个开/关设置组而不是选项卡,请参阅 弹出窗口切换字段.对于一个列表,编辑器可以添加行,使用 中继器场.

常见问题 #

包裹起来 #

Tabs 字段及其选项卡命名,将字段添加到每个选项卡,然后用读取它们 {{ tabs_name.tab_name.field_name }} HTML 或 CSS 中。保留空值的后备规则,并在小部件上线之前确定名称。The 色域 doc 涵盖了本示例中使用的颜色控制,并且 定价 显示每个计划包含的内容。