选项卡

Tabs 是让长页不让人感到铺天盖地的最简单方法之一,你不是将所有内容垂直堆叠,而是将内容分割成可点击的部分,让访问者可以按照自己的节奏进行探索。

的 高级选项卡 小部件在 Elementor 的主插件 取基本 元素选项卡小部件 并增加了更多的灵活性。您将获得四个预设布局,可以选择向每个选项卡添加图像、图标或 Lottie 动画,并且可以在任何选项卡面板内加载已保存的 Elementor 部分。

下面,我将引导您使用演示视频中显示的相同布局选择从头开始设置它。

Elementor 高级选项卡小部件的作用 #

Zai其核心,这个小部件创建了一组标签标签加一个内容区,当有人点击一个标Zhang时,就会出现匹配面板。

Elementor 默认选项卡小部件相比,Master Addons 版本为您提供了更多的控制权,您可以在四个视觉预设之间切换,将图像或图标添加到各个选项卡,使用纯文本或保存的模板作为面板内容,并分别样式正常、悬停和活动状态。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态,如果您尚未安装,请检查 安装指南.
• "主插件"选项面板中启用的"高级选项卡"小部件。
• 可选:如果您想在选项卡内加载已保存的 Elementor 模板。

添加高级选项卡小部件 #

打开 Elementor 编辑器并查找 高级选项卡 master Addons部分下的小部件。将其拖入您的页面,您将看到默认的水平选项卡栏,其中包含三个示例选项卡:智能控制、更好的性能和轻松定制。

选择预设布局 #

改变外观最快的方法是 样式预设 "内容"选项卡中的下拉。您有四个选项:

• 水平选项卡: labels 横跨顶部,下面有内容,这是默认的。
• 垂直选项卡: 标签堆叠在左侧,内容出现在右侧。
• 左侧活动边界: 与垂直选项卡类似,但活动选项卡在左侧有一个彩色边框。
• 表格内容: 标签成为内容面板上方较大的卡片式按钮。

您可以立即在这些之间切换,所以请全部尝试一下,看看哪一个最适合您的内容。还有一个 列布局 控制可让您调整标签标签占据的列数,当您想要更窄的标签和更多的内容空间时,这很方便。

配置选项卡和内容 #

一旦您选择了布局,请展开 内容 section 来查看选项卡列表,每个项目都有自己的设置面板,可以复制、删除、重新排序选项卡,并点击 添加项目 当你需要更多的时候。

每个选项卡设置 #

• 设置为默认: 当页面加载时,选择哪个选项卡首先打开。
• 图标类型: 挑 图标, 图像、或者 洛蒂 为标签标签,或者将其留空。
• 图像/图标/洛蒂: 选项卡标题旁边显示的视觉资产。
• 选项卡标题: 访问者点击的文本。
• 内容类型: 用 内容 对于常规文本编辑器,或者 保存的部分 拉入 Elementor 模板。
• 选项卡内容: 填充面板的实际内容或模板。

Demo 中,第一个选项卡使用的是图片,只需将图标类型设置为 Image,打开媒体库,选择您的文件,图片既显示在选项卡标题旁边,也显示在内容面板内部。

Demo 切换到第二个选项卡,则切换到图标,选择图标类型并选择与标签匹配的东西,在这种情况下,速度计风格的图标对于 “性能更好”效果很好

在选项卡内加载已保存的部分 #

这里有它变得有趣的地方。改变 内容类型 到 保存的部分 elementor 库中选择任何模板。演示版在一个选项卡内加载完整的常见问题手风琴,这意味着您的面板可以包含标题、手风琴、表单或您保存为模板的任何其他内容。

设置选项卡和内容的样式 #

前往 风格 tab 来改变颜色、排版、间距和边框, 控件分为两个主要部分:

• 选项卡: 涵盖标签标签,包括标题颜色、标题排版、背景颜色、内容颜色、内容排版、内容对齐、边框半径、框阴影、填充和边距。
• 内容: 为显示选项卡何时激活的面板设置样式。

这些控件大多数支持正常、悬停和活动状态,因此当前有人正在查看的选项卡看起来可能与其他选项卡不同。 内容对齐 按钮还可以让您将面板文本对齐到内容区域的顶部、中心或底部。

高级设置 #

的 高级 tab具有您期望的通常的elementor控件:边距、填充、入口动画、响应式可见性、自定义css和属性。使用这些来调整定位或隐藏特定屏幕尺寸上的选项卡。

页面上的结果 #

发布后,选项卡的工作原理与您设置的选项卡完全相同。默认选项卡首先打开,访问者点击标签,您添加的任何保存的部分或媒体都会显示在匹配面板中。

常见用例 #

• 功能细分 在产品页面上,每个功能有一个选项卡。
• 定价或计划比较 使用表格内容或垂直标签。
• 常见问题解答部分 通过加载保存的手风琴作为面板内容,将其放入选项卡内。
• 服务描述 每个选项卡涵盖不同的服务。
• 投资组合或案例研究 每个选项卡都有图像或图标,面板中包含详细信息。

获得更好选项卡的技巧 #

• 将预设与您的内容相匹配。 水平选项卡最适合使用短标签,垂直选项卡非常适合较长的列表,并且表格内容使每个选项都脱颖而出。
• 将最重要的选项卡设置为默认选项卡。 用 设置为默认值 因此,访问者首先会看到您最好的内容。
• 保持图标和图像一致。 在同一选项卡栏中混合图像、图标和纯文本标签往往看起来很混乱。
• 不要超载保存的部分。 选项卡内的形式或手风琴是完美的,但沉重的英雄部分即使隐藏也可以减慢速度。
• 发布前检查移动视图。 垂直选项卡在小屏幕上会变高,因此请首先预览响应式布局。

常见问题 #

包裹起来 #

的 高级选项卡 widget 是一个坚实的构建方式 元素或高级选项卡 具有多种布局和丰富的内容面板。将预设与每个选项卡的图像、图标或保存的部分混合和匹配,直到获得您想要的设计。

如果您想看看还有什么,请浏览全套 主插件小部件和扩展。如果你对 Pro 功能感到好奇,请看一下 定价页面.