主要外卖
- 4个标签标题,适合1,200px桌面列,手机上大约有390px,所以它们会包裹,压扁或溢出。
- Elementor的Tabs小部件有一个断点控制,可以将条形切换到您选择的宽度下方的垂直手风琴,移动设备是默认的。
- 水平滚动是另一种选择:标题保持在一排,访客可以滑动浏览它们。
- 的 主插件选项卡小部件 将其标题堆叠成手机上的全宽列,下面是开放式面板。那是可读的,但它不是手风琴。
- 3个或更少的短标题通常能在手机中保持不变。过去,故意选择手风琴或滚动。
Tabs是一个桌面模式,它们假定几个标题加上一个面板的水平空间,而一部手机大约有这个宽度的三分之一。
Elementor给你两种出路,addon小部件又表现得不一样了,下面手机截图是390px的真实测试页的捕获,所以你看到的就是设置所做的。
目录
出了什么问题
Tab strip 要一条线, 给它比标题需要的宽度少, 你得到三个结果之一, 没有一个是好的:
- 标题包裹在第二行和第三行上,条带停止以条带形式读取。
- 相反,它们会压扁,直到每个标签都是几个无法读取的文本像素。
- 或者最后一个从边缘溢出,通常会带来水平页面滚动条。
Tap 目标使情况变得更糟,触摸指南将一个舒适的目标放在 44px 左右,一个被压扁的标题远低于此,因此人们会错过并击中邻居。
选项 1:切换到手风琴
这是大多数人想要的行为,Tabs 小部件无需 CSS 即可完成此操作。
- 择选项卡小部件,然后在内容选项卡中打开附加设置。
- Breakpoint 设置为条带应该放弃的宽度, 移动是默认的, 通常是对的答案;标题长时平板是有道理的。
在该宽度下方,每个标题都位于其自己的面板的正上方,点击一个标题即可打开它。每行一个标题意味着一个全宽点击目标,并且内容保持崩溃状态,因此页面不会变长。
选项 2:让条形滚动
转横向滚动,标题在任何宽度下都保持一行,行向侧面滚动,访客沿着它滑动以到达屏幕外的标题。
这适合将顺序读取为序列的条带,例如月份或大小,其中保持顺序可见比同时看到每个选项更重要。它的弱点是发现:访问者不会注意到行滚动永远不会在后面的选项卡边缘留下半可见的下一个标题很有帮助,因为截止标签是明显的滑动邀请。
Scroll 和手风琴断点并不相互排斥,所以如果你把两者都设置好,决定你真正想要的断点下方,然后用手机检查结果。
添加选项卡在手机上做什么
Master Addons 小部件通过堆叠处理窄屏幕:标题变成全宽列,打开的面板位于整个列表下方。
每个标题都有一个全角点击目标,这解决了压扁问题。它不会将每个标题与自己的面板配对,因此,通过六个或七个选项卡,访问者在到达任何内容之前滚动超过整个列表。
实用规则:带有三个或四个选项卡的手机上的插件没问题,并且当有更多选项卡时,带有断点的核心小部件会更好。
哪个页面的哪个选项
| 情况 | 设置 |
|---|---|
| 三四个简短的标题,主要是桌面流量 | 离开它,然后打电话 |
| 五个或多个选项卡 | 核心选项卡的断点设置为移动 |
| “船运”和回”等长标题 | 将断点设置为平板电脑的核心选项卡 |
| 标题读作序列,例如月份或大小 | 水平滚动 |
| 主要是电话流量和长面板 | 手风琴小部件而不是选项卡 |
| 图标标题,三个或四个选项卡 | Addon小部件,堆叠的列就可以了 |
当选项卡停止在移动设备上工作时
“不适用于移动”的标签通常被证明是四件事之一:
- A悬停效果,悬停在触摸屏上不存在,所以设置开启悬停的标签需要轻点,有时是两个,设置效果点击任何有电话流量的页面。
- CSS缓存,更改断点后,重新生成Elementor的CSS并清除页面缓存,或者手机一直服务于旧的样式表。
- 延迟脚本。攻击性 JavaScript 延迟会将选项卡脚本保留回来,直到访问者与页面交互,因此第一次点击什么也不做。在优化插件中排除小部件的脚本。
- Tap target,太小了,什么都没坏,标题就是比拇指小,手风琴断点固定。
常见问题
如何让 Elementor 选项卡变成移动手风琴?
Tabs 小部件中选择, 打开附加设置并设置断点, 在该宽度下方条形切换到垂直手风琴布局, 默认移动设备。
为什么我的标签标题在手机上重叠?
条宽度小于标题需要的宽度。设置手风琴断点,打开水平卷轴,或缩短标题。
选项卡会伤害移动搜索引擎优化吗?
No。选项卡内的内容在HTML中,无论面板是否打开,都会被索引。
我应该在手机上使用标签还是手风琴?
如果您的流量大部分是手机,并且面板很长,请从一开始就将其构建为手风琴。当桌面是主要视图时,带有断点的选项卡是更好的呼叫。
为什么我的第一次点击什么也没做?
通常为悬停效果或延迟脚本。将选项卡效果设置为单击,并将选项卡脚本从 JavaScript 延迟中排除。
最后的想法
CSS都不需要,Elementor的断点控件涵盖了常见的情况,水平滚动涵盖了序列,将addon小部件堆叠成可读的列,然后在实际的手机上打开页面,轻点每个标题,因为那是人们跳过的步骤。
相关阅读
