主要外卖
- Tabs是访问者挑选其间的几个平行部分。手风琴是用于大多数项目被跳过的列表。
- Tabs cap out about about four or five titles because the strip runs out of width。an handion takes twenty without complaint。
- 手风琴可以同时打开几个面板,并可以在屏幕上进行比较。选项卡恰好显示一个。
- Accordions是为窄屏幕而构建的,Elementor的标签通过切换到您设置的断点下方的手风琴来处理手机,这暗示了哪种模式在那里获胜。
- Google 都不隐藏内容,两个小部件都将每个面板放在页面 HTML 中,并用 CSS 隐藏已关闭的面板。
2种模式都做同样的工作:折叠一个长页,这样一个访客就会读出他们来找的部分,不同的是折叠的项目对彼此的意义。
Tabs说“挑一把这样的” 手风琴说“这里有一个列表,打开你需要” 把那个倒过来,页面与访客战斗,这才值得花两分钟的思考。
目录
的实际差异
| 选项卡 | 手风琴 | |
|---|---|---|
| 标题坐 | 在行或侧列中 | 堆叠起来,每个都位于自己的面板上方 |
| 一次性打开 | 一 | 一个或多个,您的选择 |
| 舒适的物品数量 | 三到五 | 五到二十 |
| 所有标题均可见 | 是的 | 是的 |
| 关闭时的页高 | 由最高的面板固定 | 随着面板打开而生长 |
| 读作 | “摘一” | “扫描列表” |
| 窄屏幕 | 需要后备 | 工程已建成 |
推动大多数决策的行是项目计数。选项卡条受到水平空间的限制,手风琴仅受到耐心的限制。
当选项卡正确时
Tabs fit 当部分是对等时, 访问者会读取其中一个。三个信号:
- 三到五个部分,少到足以容纳一条条带。
- 并行内容,例如产品页面上的描述、规范、评论和运输:同一种东西,不同的切片。
- 每个访客都想要其中一个。没有人读完这四个,每个人都读一个。
Tabs 还能使页面保持可预测的高度,当某些东西位于正下方并且您不希望它从屏幕上跳下来时,这很重要。
当手风琴正确时
当项目是列表而不是一组选择时,手风琴就适合:
- 6个或更多项目。一个有十二个问题的常见问题解答没有可行的选项卡布局。
- 大多数项目都会被跳过,因为访客会打开适用于它们的两个问题。
- 长度非常不同的项目,其中一个答案是一个句子,另一个答案是五个段落。选项卡的大小最长。
- 访问者希望同时打开面板,并排阅读两份政策。
FAQ是最清楚的案例,这就是为什么你遇到的大多数FAQ部分都是手风琴。定价政策,故障排除步骤和文档部分的行为方式相同。
Elementor 在免费插件中有一个 Accordion 小部件。 主插件高级手风琴 式(accordion Type)控制,可在手风琴行为(一次一个面板)和切换行为(每个面板独立)之间切换,自定义扩展和折叠图标,按每个项目默认激活,以毫秒为单位的切换速度,以及标题的HTML标签。
哪些手机决定
手风琴已经是垂直的满宽行堆叠,因此 390px 的屏幕不会对其进行任何更改。选项卡是必须适应的模式。
Elementor的Tabs小部件切换到您选择的断点下方的垂直手风琴布局,默认移动。Addon选项卡将他们的标题堆叠到一个全宽列中,面板位于列表下方。
Tabs在手机上的修复,换句话说,就是成为手风琴,如果你的流量大部分是移动的,从一开始就构建手风琴跳过了只存在于桌面上的布局。
SEO 的问题
Collapsed 内容编入索引,两个小部件都将每个面板放在页面 HTML 中,并用 CSS 隐藏不活动的,因此 Google 的爬虫会读取所有内容,您可以通过查看源代码并从封闭面板搜索文本来在自己的页面上确认这一点。
有两件事确实值得关心:
- 不要隐藏页面的内容。如果访问者必须单击才能了解您销售的内容,则该内容不属于选项卡三,无论爬虫能读到什么。
- FAQ结构化数据来自你的SEO插件而不是来自任一小部件,Rank Math和Yoast从他们自己的块或模式字段构建FAQPage标记,因此手风琴是演示文稿,模式是单独设置的。
切换适合的地方
Toggle 在这个比较中出现是因为 Elementor 曾经有一个 Toggle 小部件,并且因为 “toggle” 意味着两个不同的东西。
Elementor的旧Toggle小部件是一个手风琴的另一个名字:一堆可扩展的行,它从3.15版本开始就被弃用,编辑一个现在显示一个通知,告诉你要拖动手风琴小部件,而不是,所以在当前的安装中,选项卡与手风琴的问题已经吸收了它。
另一种含义是双态交换机,其中一个控件在同一内容的两个版本之间翻转页面。这就是 主插件 切换内容 widget做:两个标签,它们之间的切换,以及每个标签后面的一块内容,月度对年度定价是显而易见的情况,公制对英制单位是另一个。
That是第三种模式而不是前两种的变体,当恰好有两种状态,访问者正在它们之间切换时使用它,三个或更多选项表示选项卡,一个列表扫描表示手风琴,如果您想要的是一个面板独立打开和关闭的手风琴,那就是设置为Toggle的手风琴类型控制。
将两者结合在一起
它们结合得很好,因为它们回答不同的问题。
计(plan)比较页面可能会使用每月和每年的选项卡,每个选项卡内部都有一个功能细节的手风琴。外部级别是两个对等点之间的选择;内部级别是一个列表,可以扫描。嵌套选项卡使这变得简单,因为每个面板都是一个容器,可以接受手风琴小部件。
选项卡中的选项卡是不起作用的组合,因为它要求访问者记住他们选择了哪对标题。
Elementor 为您提供的每一项内容
两个小部件都在免费插件中,并且都是嵌套小部件,因此面板保存容器。
Tabs 添加水平或垂直方向, 水平滚动添加长标题行, 以及切换到手风琴的断点。手风琴小部件具有最大项目扩展, 它决定打开一个面板是否关闭其他。主插件小部件通过其手风琴类型控制来完成该工作。
Addon 小部件都扩展了。在选项卡侧,您将获得样式预设、图像标题和悬停切换,覆盖在 高级选项卡 post。in 手风琴一侧, 您将获得图标控件、切换模式和每项默认状态。
常见问题
手风琴比音符更好吗?
6个或更多项目,对于常见问题解答,对于移动设备较多的页面,是的,对于桌面页面上的三到五个平行部分,选项卡读取效果更好。
Google 是否在选项卡和手风琴内索引内容?
是。面板无论打开还是关闭都在HTML中,所以爬虫读取它们。
我可以在选项卡内放置手风琴吗?
是。每个嵌套选项卡面板都是一个容器,因此一个手风琴小部件直接掉入。
有多少个选项卡太多了?
5个是实用的天花板,如果标题很长或带有图标则更少,过去条带包裹和手风琴是更好的图案。
Toggle 小部件怎么样?
Elementor的Toggle小部件从3.15开始被弃用,并指向手风琴小部件。开关意义上的切换,在同一内容的两个版本之间翻转,是一个单独的模式,需要为其构建的小部件。
我应该使用哪一个来进行常见问题解答?
A手风琴。题目是一个列表扫描而不是一组选择,布局保持可读的十二个问题,没有选项卡条管理。
最后的想法
Count物品,然后问问它们对彼此是什么,一小组同行,每个人都读一个是tabs,一长串列表,大多数物品被跳过是一个手风琴。移动解决任何剩余的疑问,因为手机上的tabs反正变成了手风琴。
相关阅读
