如何在Elementor中创建CANVAS内容：指南

对于网络设计人员来说，在不混淆用户混淆的情况下，在不混淆用户的情况下呈现大量内容是一个挑战。 OFF CANVAS内容是一种时尚，新颖和智能的解决方案，可以在这种情况下为您提供帮助。

借助Elementor Page Builder插件，您可以在网站上轻松地创建外部菜单，宣传横幅，侧栏等。这不仅可以帮助您进行内容演示文稿，还可以简化导航，提高可读性并转换用户。

如果您的网站是使用Elementor构建的，则只需几分钟即可为您的网站创建帆布内容。在此博客文章中，我们将指导您如何通过分步指南在Elementor中添加帆布内容。让我们开始吧！

什么是帆布内容？

OFF CANVAS内容是一个Elementor小部件，可将内容保留在屏幕外隐藏，直到用用户交互触发。通常，该小部件与屏幕上的按钮连接。每当用户单击按钮时，Off-Canvas内容就会立即滑入并显示其他信息。

如上所述，开瓦斯内容的小部件涵盖了菜单，宣传横幅，侧栏，登录和注册面板，购物车，内容过滤器和快速视图选项等内容。它有助于保持干净有条理的布局，在需要时易于访问。

如何在Elementor中创建CANVAS内容

现在，在本节中，我们将讨论如何通过逐步指南在Elementor中创建Canvas Content。但是，在跳入教程之前，请确保您在网站上安装了以下插件并激活了以下插件。

• Elementor
• Happyaddons
• Happyaddons Pro

当他们在您的网站上准备就绪时，开始遵循以下说明的教程。

步骤01：将关闭的画布内容小部件添加到Elementor Canvas

使用Elementor Canvas打开帖子或页面。通过在Elementor面板的搜索框中键入其名称来查找小部件。看到小部件后，将其拖动到画布中。

您会看到添加到画布中的按钮或图标。通过单击它，您可以打开“ Off Canvas”部分。您可以在下面附带的视频剪辑中查看。

步骤02：将关闭的画布小部件添加到您的网页

在上面，我们将小部件放在空白的画布上。但是您可以将其添加到网页的任何特定部分。为了解释这一点，我们打开了一个装饰的网页。然后，将小部件放在英雄部分上

您可以看到窗口小部件已添加到网页的“标头”部分。

检查如何使用Elementor在WordPress中改善本地SEO。

步骤03：选择“关闭画布小部件”的自定义内容类型

导航到内容> OffCanvas内容。单击“内容类型”选项旁边的下拉列表。

您必须根据要显示的内容类型从“下拉列表”中从下拉列表中选择合适的内容类型。

对于本教程，我们选择了自定义内容类型。

探索有关如何在WordPress设计知识基础的指南。

步骤04：将信息添加到小部件

通过使用这些盒子将所需的内容添加到小部件。单击框将它们展开它们并创建空间以让您添加信息。

您可以看到我们通过扩展将内容添加到框中。您可以通过单击各个选项来添加文本和媒体文件。

了解如何在Elementor中创建令人惊叹的信息图网页。

步骤05：选择一个切换源

在“切换”部分中，您可以更改切换源类型，位置，动画和标签。

打开“切换源”选项旁边的下拉列表。选择所需的切换类型。我们选择了本教程的按钮作为切换类型。

接下来，从按钮文本选项更改按钮副本。您甚至可以添加一个按钮图标。检查画布上按钮的所有更改。

步骤06：自定义关闭栏图标

Off Canvas部分带有右上角的十字图标（X） 。要自定义，请在Elementor面板上展开关闭条形部分。

使用各自的选项，您可以禁用图标，更改对齐方式，更改图标类型，图标标题等。希望你能自己做这些。

这是有关如何在WordPress中创建事件日历的教程。

步骤07：更改小部件的设置

扩展设置部分。从方向选项中，您可以更改Off Canvas小部件的位置。您可以将其放在左，右，顶部或底部。

接下来，您可以选择内容过渡效果。它将在网页中添加动画效果，并在单击按钮时显示它。

例如，我们选择揭示为内容过渡类型。现在，请参阅下面附加的视频剪辑。单击按钮后，页面还与Off Canvas部分一起移动。

以同样的方式配置其他选项。

步骤08：风格开开的画布小部件

来到“样式”选项卡并扩展OffCanvas内容。

从这里开始，您可以更改关闭的画布大小，添加边框类型，增加边框宽度，更改边框颜色并设置边框半径。希望您能像我们这样做一样自己做。

扩展内容部分。您将获得选择内容对齐，背景颜色，边框类型，边框宽度，边框颜色和边框半径的选项，其中包括Off Canvas小部件的内容。

以同样的方式，您可以更改字体，字体大小和文本颜色。

这是有关如何在WordPress中显示360个旋转产品摄影的简单指南。

步骤09：样式化切换按钮

以同样的方式，展开切换部分。这将使您可以自定义按钮对齐，版式，文本颜色，边框半径，按钮背景。

步骤10：自定义封闭条图标

通过扩展“封闭条”部分，您可以自定义关闭图标的颜色，大小和更多内容。

步骤11：使canvas小部件移动响应能力

您的每个网络元素都应针对移动设备进行优化，以便在所有设备类型上都很好地显示它们。否则，您可能会错过巨大的流量潜力，因为大多数网站中大约50％的流量来自移动用户。

要进行移动优化，请单击Elementor面板底部的响应模式图标。 TOPBAR将出现带有选项，可让您在不同的屏幕尺寸之间切换。

现在，在不同的屏幕尺寸之间切换，并检查各自设备的设计是否还可以。如果有任何问题，您可以根据需要更改字体大小，按钮尺寸，帆布宽度，高度和其他选项。

更改将仅为该特定屏幕大小保存，而不会影响其他屏幕。因此，您可以使帆布小部件移动响应能力。

步骤12：预览canvas内容小部件

现在，转到网页的预览选项，并检查小部件是否正常工作。您可以看到，它在我们的尽头很好。

使用Off Canvas Content Widget时要考虑的事情

为了充分利用小部件，在使用OFF CANVAS内容小部件时，必须仔细考虑一些要点。在下面看看它们。

• 流畅的用户体验

外面的内容应支持用户在网站上导航，而不是打扰他们的体验。确保窗口小部件通过配位的动画顺利运行。但是，最大程度地减少可能会降低性能的重型运动效果，尤其是在手机上。

• 优化手机

如上所述，今天大量的网络访问者通常来自移动设备用户，您必须为所有设备类型很好地优化网站。否则，以移动为中心的用户将具有严重的负面经验。

• 容易关闭

OFF CANVAS内容小部件必须合并一个简单的结局选项。如果很难找到，用户肯定会感到沮丧。因此，不要忘记以一种易于浏览的方式来高度高度关闭图标。

• 内容相关性

外面的内容需要保持简短和专注，以实现特定功能，例如导航工具或促销横幅。包含过多的信息或无关紧要的要素破坏了其提供专注和无缝的用户体验的目的。

最后一句话！

一旦您知道如何利用它，OFF CANVAS内容小部件可能是吸引用户并提高转换的强大方法。我们试图介绍小部件的基本教程。因为讨论小部件的所有功能以及如何使用它们确实很难。

因此，除了本教程之外，如果您想对小部件可以做的其他事情有更多想法，则可以访问我们的Elementor of Canvas Content Demo页面。您将获得大量的外面设计，您可以直接在网站上复制和粘贴。

如果您还有其他未解决的查询，请通过下面的评论框告诉我们。我们很快就会通过有用的答案与您联系。