如何在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頁面。您將獲得大量的外面設計，您可以直接在網站上複製和粘貼。

如果您還有其他未解決的查詢，請通過下面的評論框告訴我們。我們很快就會通過有用的答案與您聯繫。