如何用 Elementor 制作垂直选项卡(2 种方式)

主要外卖

• 垂直选项卡将标题放在左侧或右侧的一列中,面板位于它们旁边。它们适合长标题和六个或更多部分,其中会缠绕一条水平条。
• Elementor 自己的标签小部件通过设置为开始或结束的方向控制来执行此操作。不需要 CSS。
• 的 主插件选项卡小部件 具有垂直标签样式预设,其到达时具有样式而不是普通。
• 768px左右以下,没有足够的宽度做一个侧柱,所以两路都是栈,只有核心小部件变成手风琴。
• 如果小部件进入面板内部,请选择核心;如果选项卡列本身需要图标或完成外观,请选择插件。

一旦标题变长或变多,水平选项卡就会中断。 1,200 便士列上的六个标题要么包裹在两行上,要么缩小文本直至没有人阅读它们。

垂直选项卡将条带翻转到其侧面:一列狭窄的标题,旁边有活动面板。每个标题都得到一整行,因此“运输和退货”不包装。两种构建方式都遵循。

当垂直跳动时水平

当其中任何一个都为真时,垂直是更好的布局:

• 超过五个部分,其中一条带子包裹,但一根柱子变得更高。
• Title 长于两个字。“保修和维修”需要一整行。
• 高度非常不同的面板,因为标题列保持原位,而面板会改变尺寸。
• 读起来像菜单的内容:文档部分、服务列表、分组常见问题解答。

保持水平状态三四个短标题。一侧列大约吃掉宽度的四分之一,并且带有三个选项卡,交易不值得。

方法一:元素师的方向控制

Elementor 中的选项卡小部件无需插件即可处理此问题。

1. 将"选项卡"小部件拖到页面上。
2. 在"布局"中,设置左侧标题的"开始方向"或右侧标题的"结束"方向。
3. 设置对齐标题以控制标题文本位于列的左侧、中心还是右侧。
4. 像往常一样在其容器内构建每个面板。

Start 将左侧的列以从左到右的语言显示,然后自动翻转为从右到左,这就是为什么这些值被命名为"开始和结束"而不是"左"和"右"。

结果是功能性的且非风格化的:列中的文本标题、旁边的面板以及为"样式"选项卡留下的每个边框和颜色。

方法 2:预设垂直选项卡

Master Addons 小部件将布局视为预设而不是方向,因此造型随之而来。

1. 将选项卡小部件拖入。
2. 将样式预设设置为垂直选项卡。
3. 每个部分添加一个中继器项目,每个项目都有一个选项卡标题。
4. 如果标题需要图标或图像,请将图标类型设置为图标或图像,然后选择图标。
5. 写入面板内容,然后将"设置为默认"切换到应首先打开的选项卡上。

该列以自己的背景、间距和活动状态到达,因此可用块需要一分钟而不是样式会话。限制与插件始终具有的限制相同:面板保存编辑器内容,因此选项卡内的表单或图库意味着 Pro 上保存的模板,或者核心小部件。

更安静的变体:左侧活动边界

第三个预设值得了解。左活动边框保留垂直列,但删除盒装外观:标题位于页面背景上,活动边框的左边缘标有彩色条。

这是文档风格页面上可以触及的内容,其中一个沉重的选项卡列会与正文争夺注意力。

电话里会发生什么

390px的屏幕没有空间放置侧柱加面板,因此两条路线都放弃了垂直布局。

核心小部件堆叠到您在附加设置中选择的断点下方的垂直手风琴,每个标题都位于其自己的面板的正上方。附加小部件将标题堆叠成一个全宽列,面板位于下方,这有效,尽管它不是手风琴:打开的面板位于整个标题列表下方。

2种方式,在发布前先查看手机视图,你在桌面上设计的布局并不是手机访问者看到的布局。

使用哪种方法

常见问题

最后的想法

垂直化是您在不缩短标题的情况下解决宽度问题的方式。Elementor 的方向控制无需插件即可完成,并将容器保留在面板中,如果内部有任何交互内容,这很重要。插件预设标题列必须看起来完成时很重要,而无需您对其进行造型。两者大约需要相同的时间来构建,因此面板中生活的因素决定了这一点。

相关阅读

• 选项卡小部件
• 如何在 Elementor 中创建选项卡
• 元素嵌套选项卡已解释
• 高级手风琴小部件