画布外内容

有些内容在页面上占有一席之地。其余的、菜单、常见问题解答列表、联系表单,最好隐藏起来,直到有人要求为止。 画布外内容 小部件在 Elementor 的主插件 将任何元素模板隐藏在按钮后面,并在访问者单击时从屏幕的侧面、顶部或底部将其滑入。

您选择保存的模板,放置触发按钮,然后选择面板的输入方式。本指南将小部件从元素面板跟踪到实时页面上的工作滑出常见问题解答面板。

Off-Canvas Content 小部件的作用 #

Widget 在您的页面上放置一个触发按钮,并将其链接到隐藏面板。该面板的内容是来自您的 Elementor 库的任何模板,因此移动菜单、巨型常见问题解答、购物车摘要或注册表单都以相同的方式工作。当访问者单击按钮时,面板会在页面上滑动或淡入,后面有一个变暗的覆盖层,其标头中有一个关闭图标。

一切都发生在一个小部件中:触发器、面板、动画和造型。没有单独的弹出插件,没有模板短代码。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• 保存的 Elementor 模板可在面板内部显示。首先在仪表板中的模板下构建一个;此处的演示使用现成的常见问题解答部分。

如何添加画外内容小部件 #

在 Elementor 编辑器中,搜索 元素 面板为 画布外内容的,或者滚动到主插件部分,然后拖到页面上,画布上会出现一个标有点击此处的蓝色触发按钮,面板本身一直隐藏,直到你选择一个模板并打开它。

选择模板并设置面板 #

的 内容 部分保存面板的核心设置。

• 选择模板: elementor模板面板显示。在此下拉中出现任何保存的部分或页面模板。
• 标题标题和标题: switch 在面板头上并键入其标签,例如 “探索常见问题解答”。关闭的图标住在同一个头中。
• 位置: 面板来自哪个边缘。下面对此有更多内容。
• 宽度: pixels 中面板有多宽,默认情况下为 300。从顶部或底部开始的面板使用 a 高度 控制视口高度。
• 入口动画和入口类型: 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或点击覆盖层关闭它,两者都起作用。

常见用例 #

• 移动和辅助菜单 它从侧面滑入,不会挤满头部。
• 常见问题解答和帮助面板 与演示一样,在登陆页面上一键保留答案。
• 联系或报价表 这会在页面上打开,而不是生活在单独的页面上。
• 购物车和帐户抽屉 在商店页面上。
• 公告栏 使用高度较小的顶部位置从顶部边缘开始。

更好的画外面板的技巧 #

• 首先构建模板。 该小部件仅列出保存的模板,因此在拖动小部件之前,请在模板下设计面板内容。
• 将宽度与内容匹配。 300像素适合一个菜单;表格和常见问题列表呼吸更好,大约450到500。
• 少用推送。 看起来很引人注目,但移动整个页面可能会让人感觉在长内容上跳跃。用深色覆盖层覆盖是较平静的默认值。
• 记住相对规则。 Position 设置为相对时,只有淡入淡出动画才有效。
• 在手机上检查面板。 500像素的面板比许多手机更宽;通过响应式控制为移动断点设置更小的宽度。

常见问题 #

包裹起来 #

Off-Canvas Content 小部件将任何保存的模板变成滑出面板:挑选模板,放置触发按钮,选择边缘和动画,从按钮到滚动条的所有样式,自然地与用于移动导航的 Nav Menu 小部件和用于点击接触面板的表单小部件配对,浏览全套 主插件小部件和扩展 要查看盒子中还有哪些船只,请检查 定价页面 为职业群众演员。