FAQ部分由它的手风琴生或死:问题保持紧凑,答案出现在点击,页面永远不会感觉很长。免费的 高级手风琴小部件 在 Elementor 的主插件 builds that pattern。每个项目都持有一个键入的答案,并且使用Master Addons Pro,一个项目可以加载一个保存的Elementor模板代替,因此一个答案可以是联系表单,定价表,甚至是另一个手风琴。
本指南将浏览真实常见问题解答部分的小部件,从项目列表到实时页面上的风格手风琴。
寻找小部件的作用而不是如何配置它? Elementor 手风琴小部件概述 一页涵盖功能、造型选项和定价。
高级手风琴小部件的作用 #
Widget 渲染一堆可折叠的项目,每一行都有一个标题、一个内容区域,以及一个在展开和折叠状态之间翻转的切换图标。The 手风琴类型 下拉选择行为: 手风琴 一次保持一件物品打开,当新物品打开时关闭最后一件; 切换 让游客同时打开多个物品。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- 高级手风琴小部件在基本小部件下的主插件选项面板中启用。
- 可选:如果您想在手风琴项目中加载 Master Addons Pro 和保存的 Elementor 模板。
添加和管理手风琴项目 #
在 内容 tab, item list 每题一个条目, 单击一个item 展开其设置, 将每个旁边的图标重复或删除行, 然后按 添加项目 要扩展列表。演示运行五个问题的管道常见问题解答。
列表下方是共享控件:
- 显示活动/非活动图标?: 切换每个标题右侧的展开和折叠图标。
- 展开图标和折叠图标: 两个选项卡,每个图标选择器一个。下面将详细介绍这些内容。
- 切换速度(毫秒): 物品打开和关闭的速度有多快,默认情况下为 300 毫秒。那种默认感觉很活泼;超过 600 手风琴开始感觉像在停顿。
- 标题 HTML 标签: 每个问题周围的标记,默认情况下为 div。如果问题应该提供页面的标题结构,请选择 H3。
将文本或整个模板放入项目中 #
打开单个项目,每个项目控件就会出现: 默认情况下激活 以打开该项目开始页面, 启用自定义图标 赋予它自己的切换图标,并且 启用背景颜色 (专业版) 只是那一行。
需要记住的是 内容类型。将其保留在内容上以获得正常的类型答案。使用 Master Addons Pro,您可以将其设置为 保存的部分、保存的小部件或保存的页面模板, 并从您的 Elementor 库中选择一个模板。演示加载一个联系人部分, 配有工作表, 在第一个手风琴项目内:
Pro中嵌套手风琴也是这样工作的:将手风琴保存为模板,然后将其加载到另一个手风琴的一个项目中带有子问题的类别,带有课程的课程模块,那种结构。两个级别是实际极限;比这更深,访问者会失去他们所在的位置。
设置展开和折叠图标 #
的 展开图标 並 折叠图标 tabs 各自打开 Elementor 图标库,展开图标显示在已关闭的项目上,崩溃图标显示在打开的项目上。
配对读起来最好:caret down with caret up,加上 with minus,V 形与 V 形。演示以 carets 为基础。
风格标题 #
的 风格 选项卡闯入 项目, 标题, 内容、和 切换图标。标题部分带有 正常, 悬停、和 活跃 states,所以悬而未决的问题可能看起来与其他问题不同。
- 背景类型和颜色: 每个州的标题栏填充。
- 文本颜色和字体: 的问题文本。
- 标题对齐: 左、中、右。
- 边框类型、边框半径、盒子阴影、填充: 该演示版使用 8 像素半径和 20 x 16 填充来制作柔软、宽敞的条形。
Demo 给标题提供了浅灰色背景和蓝色文本, 并且画布在颜色选择器打开时实时更新:
设置内容区域 #
的 内容 部分为答案面板设计: 背景颜色, 文本颜色, 版式, 填充、和 文本阴影。保持答案背景比标题栏轻,因此打开的项目读作连接但清晰。
设置切换图标 #
的 切换图标 部分完成行结束。
- 图标位置: 标题的左边、右边或没有。
- 图标尺寸、间距、填充: 该演示运行 18 个像素图标。
- 图标颜色: 正常状态、悬停状态和活动状态,每个状态都有背景和图标颜色。
页面上的结果 #
在实时页面上,手风琴的行为完全符合配置:一次打开一个问题,在项目切换时小心翻转,以及保持该部分可扫描的样式标题栏。
常见用例 #
- 常见问题解答部分 于落地页、定价页和产品页。
- 答案中的联系或引用表格的,像演示一样使用 Pro 保存部分内容类型。
- 嵌套手风琴 (Pro) 用于类别和子类别问题集。
- 课程或文档大纲 每个模块都扩展到其课程中。
- 工作列表 以角色作为标题和面板中的详细信息。
获得更好手风琴的技巧 #
- 常见问题解答选择手风琴类型。 一个开放的答案可以让访问者保持专注;切换适合人们并排比较的参考内容。
- 默认打开问题最多的问题。 将"活动设置为"默认值,以解决您最好的问题,这样该部分就永远不会开始完全关闭。
- 使用 H3 作为常见问题解答页面上的标题 HTML 标签。 搜索引擎将问题解读为正确的标题。
- 保持图标对一致。 翻转方向的看护装置可以立即传达状态;不匹配的图标会让游客思考。
- 保存部分中的思维模板权重。 物品内的表格或表格很棒;即使在折叠时,具有重图像的全宽部分也会加载。
视频教程 #
如果您更愿意观看 Advanced Accordion 的实际操作,则此视频将介绍任何人都可以轻松构建一个,请从头到尾:
本文展示了如何添加嵌套手风琴,将一把手风琴装入另一把手风琴中,并使用"保存部分"内容类型:
常见问题 #
Master Addons 中的高级手风琴小部件是什么?
是可折叠内容部分的 Elementor 小部件,您添加带有标题和答案的项目,选择手风琴或切换行为,设置展开和折叠图标,并按状态对标题、内容和图标进行样式设置。项目保存文本,或使用 Master Addons Pro 保存完整的模板。
手风琴和切换类型有什么区别?
Accordion 一次保持一个项目打开,当一个新的项目打开时关闭上一个项目,切换让访问者一次打开几个项目并独立关闭,两者都从 Content 选项卡中的 Accordion Type 下拉设置。
我可以在手风琴项目中放入表格或模板吗?
是的,使用 Master Addons Pro。将项目的内容类型设置为已保存部分,并从 Elementor 库中选择任何模板。演示将一个完整的联系部分加载到手风琴项目内的工作表单,任何其他保存的模板的工作方式相同。
如何在 Elementor 中创建嵌套手风琴?
This需要Master Addons Pro。先将一个手风琴保存为Elementor模板, 然后,在父手风琴中, 将一个项目的内容类型设置为保存部分, 选择那个模板。内手风琴在外项目内部加载, 给你两个级别的可折叠内容。
默认情况下一项项目可以保持打开状态吗?
是在内容选项卡中展开项目,然后以默认状态打开活动,当页面加载时,该项目开始打开,这对于访问者最常提出的问题非常有效。
包裹起来 #
Advanced Accordion 小部件处理标准常见问题解答模式,然后进一步:每个项目的图标和背景,三态样式,以及,与 Pro,保存部分内容类型,将表单,表格或整个嵌套手风琴放在任何项目中,浏览全套 主插件小部件和扩展 要查看插件还附带哪些内容,请查看 高级手风琴小部件页面 demo 以及和 Elementor 自己的手风琴的比较,注意这个小部件没有输出常见问题模式。
