有些内容在页面上占有一席之地。其余的、菜单、常见问题解答列表、联系表单,最好隐藏起来,直到有人要求为止。 画外内容小部件 在 硕士插件专业版 将任何元素模板隐藏在按钮后面,并在访问者单击时从屏幕的侧面、顶部或底部将其滑入。
您选择保存的模板,放置触发按钮,然后选择面板的输入方式。本指南将小部件从元素面板跟踪到实时页面上的工作滑出常见问题解答面板。
Off-Canvas Content 小部件的作用 #
Widget 在您的页面上放置一个触发按钮,并将其链接到隐藏面板。该面板的内容是来自您的 Elementor 库的任何模板,因此移动菜单、巨型常见问题解答、购物车摘要或注册表单都以相同的方式工作。当访问者单击按钮时,面板会在页面上滑动或淡入,后面有一个变暗的覆盖层,其标头中有一个关闭图标。
一切都发生在一个小部件中:触发器、面板、动画和造型。没有单独的弹出插件,没有模板短代码。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- 硕士插件专业版 使用活动许可证安装,因为 Off-Canvas Content 是一个 Pro 小部件。插件新功能?查看 安装指南.
- 保存的 Elementor 模板可在面板内部显示。首先在仪表板中的模板下构建一个;此处的演示使用现成的常见问题解答部分。
如何添加画外内容小部件 #
在 Elementor 编辑器中,搜索 元素 面板为 画布外内容的,或者滚动到主插件部分,然后拖到页面上,画布上会出现一个标有点击此处的蓝色触发按钮,面板本身一直隐藏,直到你选择一个模板并打开它。
选择模板并设置面板 #
的 内容 部分保存面板的核心设置。
- 选择模板: elementor模板面板显示。在此下拉中出现任何保存的部分或页面模板。
- 标题标题和标题: switch 在面板头上并键入其标签,例如 “探索常见问题解答”。关闭的图标住在同一个头中。
- 位置: 面板来自哪个边缘。下面对此有更多内容。
- 宽度: px、%或vw中面板有多宽,默认情况下是300px,从顶部或底部开始的面板使用a 高度 以 px、% 或 vh 为单位进行控制。
- 入口动画和入口类型: panel 到达的方式 动画的淡入淡出、滑动或增长 类型 的封面或推送 封面将面板铺在页面上; 推送将页面推到一边腾出空间。
- 动画时长: 入口速度以秒为单位,默认为0.6。
- 默认打开: 在面板已经打开的情况下启动页面。设计时很方便,因为每次更改后您都可以在不单击触发器的情况下为面板设计样式。
配置触发按钮 #
的 按钮 同一选项卡中的组控制触发器。 显示标题 並 标题 设置标签;演示将其从单击此处重命名为常见问题。 对齐 将按钮左、中或右放置在其列中。
显示图标 在标签旁边添加一个图标,并且 选择图标 打开 Elementor 图标库,以便您可以从 Font Awesome 或您已安装的任何图标集中进行选择。 图标距离 设置图标和文本之间的间隙。
选择面板从哪里滑动 #
的 位置 downdown 提供六种选项: 右、左、上、下、中、相对.
Right和Left是经典的抽屉面板,选择一个,编辑器立即预览:面板滑入,里面有你的模板,顶部有标题,关闭图标就绪。
顶部和底部将宽度控件替换为 a 高度 viewport高度来测量的滑块。30vh的顶部条形像一个纤薄的公告抽屉一样工作。
中间像模态一样使面板居中。相对将面板锚定到触发按钮本身,具有 距离 control for the gap,这会让小部件变成下拉式显示屏,面板本身的一条注释:只有淡入淡出动画与相对位置一起工作。
设置宽度和入口动画 #
回到侧面位置,演示将面板加宽至 500 像素并切换 入口动画 以滑动 入口类型 push 上。Push,页面内容随着面板进入而移位,而不是被覆盖。保持持续时间在半秒左右;较慢的开始感觉像是等待。
为面板设计样式 #
的 风格 tab 有三个部分: 按钮, 标头、和 集装箱.
按钮 #
Styles 触发器:背景、文本颜色、排版、边框和填充,具有普通和悬停状态。演示将默认的蓝色变成与页面匹配的深色海军蓝。
标头 #
在开放式面板顶部设计条带。
- 反向标头: 交换标题并关闭图标侧面,因此 X 从右向左移动。
- 填充: 标题内容周围的空间。
- 关闭图标: X按钮的颜色、背景、边框颜色、字体大小、盒子大小、边框如果受众大多在手机上,盒子大小保持在24或更多;12像素的轻点目标很容易错过。
集装箱 #
设置面板主体及其周围的样式。
- 背景颜色、边框颜色、盒子阴影、边框类型、边框半径、填充: 面板表面本身。
- 覆盖背景颜色: 当面板打开时,页面其余部分的色调。深色覆盖层将焦点拉至面板。
- 滚动条: 高于屏幕的面板的滚动条的颜色和宽度。
页面上的结果 #
Live页面上,按钮位于您放置的位置,点击从所选边缘滑动面板,调暗其后面的页面,并显示您的模板,顶部带有标头和关闭图标。访问者通过X关闭它,通过单击覆盖层或按Esc。
常见用例 #
- 移动和辅助菜单 它从侧面滑入,不会挤满头部。
- 常见问题解答和帮助面板 与演示一样,在登陆页面上一键保留答案。
- 联系或报价表 这会在页面上打开,而不是生活在单独的页面上。
- 购物车和帐户抽屉 在商店页面上,使用 WooCommerce 的购物车或帐户小部件或其他插件。
- 公告栏 使用高度较小的顶部位置从顶部边缘开始。
更好的画外面板的技巧 #
- 首先构建模板。 该小部件仅列出保存的模板,因此在拖动小部件之前,请在模板下设计面板内容。
- 将宽度与内容匹配。 300像素适合一个菜单;表格和常见问题列表呼吸更好,大约450到500。
- 少用推送。 看起来很引人注目,但移动整个页面可能会让人感觉在长内容上跳跃。用深色覆盖层覆盖是较平静的默认值。
- 记住相对规则。 Position 设置为相对时,只有淡入淡出动画才有效。
- 在手机上检查面板。 500像素的面板比许多手机更宽;通过响应式控制为移动断点设置更小的宽度。
常见问题 #
Master Addons 中的 Off-Canvas Content 小部件是什么?
Elementor小部件,将保存的模板隐藏在触发按钮后面,点击时作为面板滑入,在一个小部件中处理按钮、面板位置、入口动画、覆盖层和关闭图标。
我可以在面板中显示任何 Elementor 模板吗?
是选择模板下拉列表列出了您的 Elementor 库中保存的每个模板菜单、常见问题解答部分、表单和完整的自定义布局都完全按照设计加载到面板内部。
面板可以从哪些方向打开?
6个位置可供选择:右、左、上、下、中、相对侧面板使用宽度,顶部和底部面板使用视口高度,相对将面板锚定到带有距离控制的触发按钮。
Cover 和 Push 有什么区别?
Cover 在页面上滑动面板,而覆盖层使背景变暗。Push 将页面内容移到一边,为面板腾出空间。Cover 是更安全的默认值;Push 更引人注目,但改变了整个布局。
画布外面板可以自动打开吗?
是在内容设置中打开默认打开,页面加载时面板开始打开,访问者可以通过点击覆盖层或Esc键用关闭图标关闭它,用触发按钮重新打开它。
包裹起来 #
Off-Canvas Content 小部件将任何保存的模板变成滑出面板:选择模板,放置触发按钮,选择边缘和动画,并设置从按钮到滚动条的所有样式。它与自然配对 导航菜单 widget 移动导航,并带有用于点击接触面板的表单小部件 浏览全套 主插件小部件和扩展 要查看盒子里还有什么船,请查看 画外内容小部件页面 有关演示以及与 Elementor Pro Off-Canvas 小部件的比较,请检查 定价页面 为专业计划。
