用于滑出面板和菜单的 Elementor 画外小部件 (Pro)
Off-Canvas Content是一个Master Addons Pro小部件,它会在页面上放置一个按钮,并在访问者点击它时打开面板。面板显示保存的Elementor模板,因此您可以在其中放置菜单、联系表单、过滤器或促销信息,并在其他页面上重用相同的模板。选择面板出现的位置、动画方式和按钮的外观。访问者通过关闭图标关闭它,通过单击覆盖层或按Esc。
Free Elementor 没有画外小部件。Elementor Pro 在 3.22 版本中添加了一个,并且需要打开 Flexbox 容器和嵌套元素功能。该小部件是 Master Addons Pro 选项:它打开任何保存的模板,从任何一侧,在一个按钮后面,您会样式一次。
画外内容一目了然
| 设置 | 它做什么 |
|---|---|
| 内容来源 | 保存的 Elementor 模板:页面、部分或容器(下拉列表除套件之外的每个库项目) |
| 职位 | 右、左、上、下、中、相对(按钮下方的下拉) |
| 入口动画 | 褪色、滑动或生长;相对支持仅褪色 |
| 入口类型 | Cover 将面板滑动到页面上; Push 将页面移过。Push 适用于顶部、左侧和右侧 |
| 尺寸 | 左、右、中和相对的宽度(以 px、% 或 vw 为单位);顶部、底部、中间和相对的高度(以 px、% 或 vh 为单位);每个设备都有 |
| 关闭与 | 关闭图标、单击覆盖层或 Esc 键;聚焦关闭图标上的 Enter 或 Space 也有效 |
| 额外 | 按默认打开,动画持续时间(以秒为单位),标题标题(带有反向标题),页面滚动锁定(打开时),带有文本、图标或两者的可风格触发按钮 |
| 打开自 | Widget 自己的按钮而已(没有 CSS 选择器或外部触发器) |
| 需求 | Elementor(免费或专业版)加上 Master Addons Pro |
面板位置、尺寸和动画
位置 提供右、左、上、下、中和相对。左、右和中面板的宽度以 px、% 或 vw 为单位,顶部、底部和中面板的高度以 px、% 或 vh 为单位,每个设备均可调节。 入口动画 是淡入淡出、滑动或增长,只有淡入淡出与相对。左、右和顶部面板还有一个 入口类型 的覆盖或推送。设置 动画持续时间 秒后,然后打开 按默认打开 如果面板应该开始打开。
Cover 和 Push 是两种入口类型。With Cover 面板在页面上滑动,覆盖层使后面的内容变暗。With Push 整个页面随着面板宽度的移动而移动,因此内容在菜单旁边保持可见。 Push 可用于顶部、左侧和右侧面板;底部、中间和相对始终覆盖。
- 左侧或右侧面板,带有用于较小屏幕的站点菜单。
- 用于简短公告或搜索表单的顶部面板。
- 中间面板作为注册表单的简单模式。
触发按钮、标头和容器造型
触发按钮可以显示标题、图标或两者,并具有图标距离和对齐设置。为普通和悬停设置其颜色、背景颜色和边框颜色,以及框阴影、字体、SVG 大小、填充、边框类型和边框半径。面板内部, 标头 部分为关闭图标和可选标题标题进行样式,反向标题交换其位置。 集装箱 部分设置面板背景、边框、填充、覆盖颜色以及滚动条颜色和宽度。
- 标头中仅包含图标的汉堡按钮。
- “联系我们”文本按钮,打开表单。
- 品牌覆盖颜色使面板后面的页面变暗。
Elementor Pro 画外内容与 Master 插件画外内容
Off-canvas菜单是最常见的用途,这个小部件本身并不构建菜单,所以你先将一个菜单小部件放在模板中,如果你只需要菜单,Master Addons 导航菜单 widget在pro中还有一个画布外类型的汉堡布局,跳过模板步骤,当面板应该包含多个菜单时,例如徽标,联系方式和社交链接,使用画布外内容。
| 特点 | Elementor Pro 画外画 | 主插件画外内容 |
|---|---|---|
| 价格 | 需要 Elementor Pro | 需要 Master Addons Pro |
| 面板内容 | 在编辑模式下构建在小部件内 | 您可以重用保存的 Elementor 模板 |
| 它是如何打开的 | 使用画布外操作的任何按钮或链接 | Widget 自己的触发按钮 |
| 位置 | 水平和垂直起点、中心或结束 | 右、左、上、下、中或相对 |
| 动画 | 入口和出口动画 | 褪色、滑动或生长,带盖或推力 |
| 关闭 | Overlay和Esc,每个都可以关闭;可以锁定页面滚动 | 关闭图标、叠加单击或 Esc |
| 内置标头 | 否 | 标题标题和关闭图标 |
| 默认打开 | 不是小部件设置 | 是的 |
Elementor Pro 在页面上的任何链接打开面板或您想要退出动画时获胜。Master Addons 适合许多页面上现成的按钮后面应该出现一个模板。对于搜索面板,另请参阅 搜索 小部件。
如何在 Elementor 中构建画外菜单
Off-canvas菜单是最常见的用途,小部件本身并不构建菜单,所以你先将一个菜单小部件放在模板中。
- 创建保存的模板并添加菜单小部件,例如免费的主插件 导航菜单 设置为垂直布局。
- 发布模板。
- 在您的标头中,添加画外内容并选择该模板。
- 将位置设置为左或右,将宽度设置为 320px 左右,将入口动画设置为幻灯片。
- 关闭"显示标题",打开"显示图标"并选择一个条形图标,使该按钮看起来像汉堡包。
- Elementor 的响应式可见性, 仅在桌面标头保持其正常菜单的情况下, 才可在平板电脑和移动设备上显示此按钮。
元素器中的全屏菜单
全屏菜单是中间位置,宽度设置为 100vw,高度设置为 100vh。在其中放置一个带有大垂直菜单的模板,选择淡入淡出入口,使图层出现在适当的位置,并为容器提供坚实的背景,因此没有任何显示。关闭图标位于面板标头中,Esc 键也会关闭图层。
Stylesheet的一个细节:面板被封盖在视口的90%,所以一个100vw x 100vh的面板会留下一个全方位的余量,在页面的自定义CSS中添加此规则以删除盖子:
.jltma-offcanvas-wrap .jltma-offcanvas-content { max-width: 100% !important; max-height: 100% !important; }
屏幕截图的分步操作已完成 elementor 中如何构建全屏菜单.
画布外面板示例
打开下面的每个演示以查看面板移动:右侧接触面板、推动页面跨过的左侧菜单、使用相对位置的下拉面板、从顶部边缘开始的公告栏、带有打开的底部表格时间,以及从中间位置构建的全屏菜单。
画外内容的常见问题
画外内容小部件免费吗?
号画外内容是其中的一部分 硕士插件专业版。免费插件不包含它。
如何将内容添加到画布外面板?
Elementor模板先将内容建为保存的,比如菜单、表单或者宣传片,然后在小部件的Select模板下拉中选择那个模板,你可以在几个面板中重用一个模板。
我应该使用画布外面板还是弹出窗口?
用画布外面板进行导航,并用于访问者通过点击要求的内容,例如菜单、过滤器或联系方式。使用弹出窗口进行定时或退出意图消息以及应中断的表单。两者都可以在打开时锁定页面滚动。
如何改变动画速度?
Content 选项卡中设置动画持续时间,值以秒为单位,默认 0.6,范围从 0 到 15,较低的值打开面板速度更快,设置适用于每个入口动画以及 Cover 和 Push。
为什么我的画布外面板没有打开?
Check三件事,选择模板必须指向一个已发布的模板,否则面板打印的是通知而不是内容,触发器必须是小部件自己的按钮,因为没有其他元素可以打开它,而Open by Default应该关闭,除非你希望它在加载时打开。
我可以用它构建一个画外菜单吗?
是的。放入菜单小部件,例如主插件 导航菜单 在保存的模板中,在画布外内容中选择它,将位置设置为左或右,并使用条形图标作为按钮。仅对于菜单,pro 中的 Nav 菜单汉堡布局就有自己的画布外类型。
面板内容会减慢我的页面速度吗?
Load时模板渲染到页面中,然后隐藏直到点击按钮,一个带有几个小部件的面板增加的重量很少,但里面有沉重的滑块或视频加载页面,所以保持面板模板轻。
我可以从自己的标头图标打开面板吗?
No。面板仅从小部件渲染的按钮打开,因此现有的图标或菜单链接无法触发它。对于从汉堡图标打开的标头菜单,请使用Nav菜单小部件的汉堡布局,使用Offcanvas类型代替。
Elementor 有免费的画外小部件吗?
Elementor的免费插件没有。Elementor Pro包含一个来自3.22版本的Off-Canvas小部件,当Flexbox容器和嵌套元素打开时。Off-Canvas内容是Master Addons Pro的一部分,并打开任何保存的模板,而Pro小部件则不这样做。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
