请参阅正在运行的选项卡小部件
下面的块是小部件,不是截图,标题上有四个选项卡、图标,第一个设置默认打开,点击一个标题切换面板。
- 概述
- 规格
- 交货
- 保修
一块,四块面板
Tabs 保持长页短,下面所有内容都位于同一个块中,只有你挑选的面板在屏幕上,所以一个规格、一个送货单和一个保修页就不再争夺同一个卷轴了。
这是小部件本身。单击上面的标题即可切换面板。
规格
每个面板都采用普通编辑器内容:标题、段落、列表和图像。这里没有任何内容是屏幕截图。
- 单独使用图标、图像或文本的选项卡标题
- 水平、垂直或左活动边框预设
- 单击或悬停时切换
交货
送货或送货面板是产品页面上经典的第二个选项卡,因为人们在主要描述中寻找它并且没有人想要它。
设置哪个选项卡首先打开,在项目上设置为默认值。
保修
最后一个面板是一个很好的家,可以提供条款、退货和其他对买家重要但不属于球场的任何东西。
如何在 Elementor 中添加选项卡
从空页面到工作选项卡块的五个步骤。
- Elementor 小部件面板中搜索选项卡, 然后将小部件拖到页面上。
- Tabs 中继器打开,每面板添加一项,每项都有一个 Tab 标题和一个内容编辑器。
- 将每个项目上的图标类型设置为"无"、"图标"或"图像",然后选择该图标或上传图像。
- 选择样式预设:水平选项卡、垂直选项卡或左活动边框。
- 将"选项卡效果设置为"单击或"悬停,并在应首先打开的选项卡上将"设置为默认值切换。
带有样式预设的水平和垂直选项卡
从内置预设开始,Horizontal Tabs 将标题排成一排放在顶部,Vertical Tabs 在侧面排列,Left Active Border 在打开的选项卡上标记有彩色边框。Master Addons Pro 为盒装外观添加了 Tabular Content 预设。每个预设都只是一个起点,因此您可以重新设计以匹配您的品牌。
- 水平和垂直布局:选择适合您内容的选项卡方向。
- 视觉预设:从设计的布局而不是空白小部件开始。
- 易于切换:从水平选项卡更改为垂直选项卡,无需重建内容。
垂直选项卡,实时
Style Preset设置为垂直选项卡的相同小部件。标题沿着左侧运行,面板位于它们旁边,在狭窄的屏幕上,条形堆叠在内容上方。
- 调查
- 设计
- 建造
- 交接
调查
垂直选项卡将标题放在左侧的一列中,面板放在它们旁边。它们适合一个过程,其中顺序很重要,每个步骤都有一两个段落。
设计
通过四到五个步骤,垂直条带的读数比水平行更好,因为长标题有空间,眼睛沿着它们向下移动页面。
建造
Style 预设控件在两者之间切换, 水平标签、垂直标签和左侧活动边框是列表中的三个预设。
交接
在窄屏幕上,垂直条形堆叠在面板上方,因此内容无需第二种布局即可保持可读性。
选项卡 (Pro) 中保存的模板
Free 版本从文本编辑器中填充每个选项卡,有了 Master Addons Pro,每个选项卡可以使用不同的内容类型:简单的文本编辑器、已保存的部分、已保存的小部件,甚至是整个已保存的页面模板,这意味着您可以将复杂的定价表、联系表单、图片库或任何其他预先设计好的内容块放入选项卡中,就像一个页面中有多个页面,没有杂乱无章。
- 模板集成:将任何保存的 Elementor 模板插入选项卡中,以实现无限的设计可能性。
- 一致设计:重复使用现有的部分和小部件以保持连贯的外观。
- 非常适合比较:使用选项卡在不同的产品规格、定价计划或功能列表之间切换。
标签造型:颜色、边框和排版
通过对选项卡的每个部分进行造型,实现完美、抛光的外观 分别设计选项卡容器和内容区域 对于选项卡,控制不同颜色、背景、边框和排版的正常状态和活动状态 调整填充、边距和图标大小 对于内容区域,对背景、填充、边距和排版进行样式设计 此级别的控制可确保您的选项卡看起来一体且专业。
- 基于状态的造型:为活动和非活动选项卡设置独特的颜色、背景和边框。
- 图标支持:将图标添加到选项卡并控制其大小和位置。
- 内容区域设计:对内容容器进行风格设计,以符合您网站的美学。
单击或悬停时切换选项卡
定用户如何与您的选项卡交互将选项卡效果设置为单击(传统)或悬停(用于更快的导航),您还可以设置默认打开哪个选项卡。这种灵活性允许您创建您想要的确切用户体验,无论是快节奏的产品展示还是仔细的、循序渐进的指南。
- 单击或悬停:选择适合您内容的触发器。悬停是默认值。
- 默认活动选项卡:设置页面加载时打开哪个选项卡。
元素选项卡与主插件高级选项卡
Elementor自己的Tabs小部件在免费插件中,它擅长于这一件不能做的一件事:它在每个面板内部都装有其他小部件,因为每个标签都是一个容器,交易是标签标题可以携带的内容以及曝光了多少样式。
| 特点 | 元素标签(免费核心) | 主插件选项卡 |
|---|---|---|
| 将其他小部件放入选项卡中 | 是的,每个面板都是一个容器 | 不,面板采用编辑器内容 |
| 侧(垂直)的标题 | 是的 | 是的,预设了垂直选项卡 |
| 变成移动手风琴 | 是的 | 否 |
| 图像作为选项卡标题 | 否 | 是的,图标类型设置为图像 |
| 选项卡标题上的图标 | 是的 | 是的 |
| 样式预设 | 否 | 三,加上带有 Pro 的表格内容 |
| 打开悬停器 | 否 | 是的,选项卡效果设置为悬停 |
| 选项卡内保存的模板 | 不需要,使用小部件 | 专业人士 |
So 简短版:如果面板需要表单,里面需要图库或者是定价表,那就用核心小部件,如果标签条本身就是设计问题,有图片标题,预设或者悬停切换,这个就有控件。
Tabs 小部件做什么和不做什么
Widget面板中勾选。“诺”行和其他行一样有用, 因为其中两个是人们问得最多的问题。
| 设置 | 支持 |
|---|---|
| 水平选项卡 | 是的,默认预设 |
| 垂直选项卡 | 是的 |
| 左活动边框预设 | 是的 |
| 选项卡标题上的图标 | 是的,来自 Elementor 图标库 |
| 图像作为选项卡标题 | 是的,图标类型设置为图像 |
| 仅文本标题 | 是的,图标类型设置为无 |
| 单击或悬停即可切换 | 是的,选项卡效果 |
| 选择第一个打开的选项卡 | 是的,在项目上设置为默认值 |
| 选项卡和内容对齐 | 是的 |
| 活跃和不活跃的颜色 | 是的 |
| 在选项卡中保存部分、小部件或页面模板 | 专业人士 |
| 表格内容预设 | 专业人士 |
| 选项卡条的列布局 | 专业人士 |
| URL 或链接中打开一个选项卡 | 否 |
| 移动手风琴 | 否 |
选项卡常见问题
我可以在选项卡标题中使用图标和文本吗?
是对于每个选项卡,将图标类型设置为图标或图像,然后从库中选择一个图标或从您的媒体库中选择一个图像。样式选项卡中的图标大小控件设置图标显示的大小。
如何让标签在移动设备上看起来不错?
Elementor的响应式模式来调整平板电脑和手机的排版、填充和页边距。在发布之前在小屏幕上预览垂直选项卡, 因为标题列占用宽度。
的表格内容预设与其他有什么区别?
Tabular Content是一个Pro预设,它给标签内容区域一个鲜明的背景、边框和填充,使它看起来像一个与标签相连的盒子,与经典的下划线或边框左侧样式相比,它是一个更加结构化、包含的外观。
我可以在选项卡内放置保存的模板吗?
是的,使用 Master Addons Pro。将项目上的内容类型设置为已保存部分、已保存小部件或已保存页面模板并选择模板。在免费插件上,每个面板都采用编辑器内容。
我可以设置哪个选项卡首先打开吗?
是页面加载时在要打开的项目上切换设置为默认,如果没有设置,则第一个选项卡打开。
我可以将选项卡链接到外部 URL 或页面上的其他部分吗?
Advanced Tabs元素是专为在小部件内切换内容而设计的,为了链接到外部URL或页面部分,您可能需要一个不同的解决方案,例如导航菜单或锚点链接,但是,您可以将带有链接的按钮放置在选项卡内容内。
这与 Elementor 自己的 Tabs 小部件有何不同?
Elementor 的免费 Tabs 小部件可让您在每个选项卡内放置任何小部件,并将标题放在内容的上方、下方或旁边。Master Addons Advanced Tabs 为您提供悬停触发器、图标或图像标签以及 Left Active Border 等现成的预设,并且您可以根据需要向页面添加尽可能多的 Advanced Tabs 小部件。Pro 将 Tabular Content 预设和保存的部分、小部件或页面模板添加为选项卡内容。
"左侧活动边界"预设如何工作?
Left Active Border预设通常会突出显示左侧有彩色边框或背景的活动选项卡,它是一种现代、干净的外观,如果您想要独特的指示器,它非常适合垂直选项卡甚至水平选项卡。
标签在移动设备上会变成手风琴吗?
No。tab strip 停留在标签条上,并包裹在窄屏幕上。Elementor 自己的 Tabs 小部件确实切换到手风琴,这样如果需要移动手风琴,则选择一个更好。
我应该使用选项卡还是手风琴?
当面板是访客选择的替代方案(例如规格、交货和保修)时,会出现选项卡。安 手风琴 当项目是人们阅读的列表时,例如常见问题解答,因为可以同时打开多个项目,并且它们会自然地堆叠在手机上。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
