{"id":16739,"date":"2022-01-24T15:30:45","date_gmt":"2022-01-24T09:30:45","guid":{"rendered":"https:\/\/hasthemes.com\/blog\/?p=16739"},"modified":"2022-04-24T12:35:34","modified_gmt":"2022-04-24T06:35:34","slug":"elementor-off-canvas-widget","status":"publish","type":"post","link":"https:\/\/hasthemes.com\/blog\/elementor-off-canvas-widget\/","title":{"rendered":"Elementor Off Canvas Widget"},"content":{"rendered":"\n<p>Have you ever wished you could have a little more space on your WordPress site? Maybe the sidebar is just too crowded, or you need to create a nice-looking landing page. Elementor has the perfect solution \u2013 the off-canvas widget! This handy tool lets you move content away from the main column and into a hidden panel, freeing up more room on your page. Plus, it&#8217;s easy to use.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Elementor Off Canvas Widget<\/h2>\n\n\n\n<p>With Elementor off canvas widget, you can create off canvas sidebar that appear smoothly when you click on a button. The panel is moved off the screen by default and can be displayed when a button is triggered. These panels are known as off canvas panels, and they&#8217;re perfect for creating engaging and persuasive marketing content.<\/p>\n\n\n\n<p>Elementor Off canvas widget is a great way to keep your website looking clean and minimalistic. Off canvas, the widget is a wonderful way to integrate all you need without cluttering up your design, especially as more content is added to websites all the time. They&#8217;re also movable, so you can place them wherever they&#8217;ll be most effective on your page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why Use Elementor Off Canvas Widget<\/h3>\n\n\n\n<p>Elementor Off Canvas Widget is the perfect tool for creating an attractive and user-friendly website. With this widget, you can easily display information without cluttering up the main page. There are many benefits to using the off-canvas widget, but these five standout qualities are particularly impressive:<\/p>\n\n\n\n<p>1) They provide your visitors with the information they want.&nbsp;<\/p>\n\n\n\n<p>2) They make it easier for users to find what they need on your site.&nbsp;<\/p>\n\n\n\n<p>3) They work well for mobile devices.&nbsp;<\/p>\n\n\n\n<p>4) You can customize them to match your <a href=\"https:\/\/woolentor.com\" target=\"_blank\" rel=\"noreferrer noopener\">website design<\/a> style perfectly.&nbsp;<\/p>\n\n\n\n<p>5) Elementor Off canvas <a href=\"https:\/\/hasthemes.com\/blog\/elementor-scroll-navigation-widget\/\" target=\"_blank\" data-type=\"post\" data-id=\"16026\" rel=\"noreferrer noopener\">Menu Widget<\/a> gives you more control over the layout of your site \u2013 making it easy to create a beautiful and functional website that meets<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Elementor Off Canvas Widget by HT Mega<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/wphtmega.com\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2021\/11\/addons-elementor-page-builder.png\" alt=\"Elementor Off Canvas Widget by HT Mega\" class=\"wp-image-12532\" width=\"750\" height=\"242\" srcset=\"https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2021\/11\/addons-elementor-page-builder.png 772w, https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2021\/11\/addons-elementor-page-builder-600x194.png 600w, https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2021\/11\/addons-elementor-page-builder-768x249.png 768w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/a><figcaption> Elementor Off Canvas Widget by HT Mega <\/figcaption><\/figure>\n\n\n\n<p>You can create slide panels that appear seamlessly when you click a button using the<a href=\"https:\/\/hasthemes.com\/blog\/get-elementor\" target=\"_blank\" rel=\"noreferrer noopener\"> Elementor<\/a> off canvas widget by <a href=\"https:\/\/wphtmega.com\" target=\"_blank\" rel=\"noreferrer noopener\">HT Mega<\/a>. By default, the panel is hidden behind the screen, but it can be seen by pressing a button. This widget is available on the <a href=\"https:\/\/wordpress.org\/plugins\/ht-mega-for-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">free version of this plugin<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"265\" src=\"https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/01\/elementor-offcanvas-widget-by-ht-mega.jpg\" alt=\" Elementor <a href=\" class=\"wp-image-16782\" srcset=\"https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/01\/elementor-offcanvas-widget-by-ht-mega.jpg 980w, https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/01\/elementor-offcanvas-widget-by-ht-mega-600x162.jpg 600w, https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/01\/elementor-offcanvas-widget-by-ht-mega-768x208.jpg 768w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><figcaption>  Elementor Off Canvas Widget by HT Mega  <\/figcaption><\/figure>\n\n\n\n<p>With this widget, you can easily select the content source for your off-canvas panel, choose a position for it on-screen, and even add your button text and icon. Whether you want to use off-canvas sidebar content or a custom <a href=\"https:\/\/wphtmega.com\/ready-templates\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor template<\/a>, this widget makes it easy to get the look you want. From the style tab, you can customize all the necessary elements of this widget.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">How to add Off Canvas Widget using HT Mega Elementor Addon<\/h4>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to add Off Canvas Widget using HT Mega Elementor Addon | Part 36\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/vKymtpFoR2E?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption> How to add <a href=\"https:\/\/www.youtube.com\/watch?v=vKymtpFoR2E\" target=\"_blank\" rel=\"noreferrer noopener\">Off Canvas Widge<\/a>t using HT Mega Elementor Addon <\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/wphtmega.com\/widget\/element-off-canvas\/\" target=\"_blank\" rel=\"noreferrer noopener\">View Live Demo<\/a><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Elementor Off Canvas Widget by Move Addons<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/moveaddons.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"772\" height=\"250\" src=\"https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2021\/11\/move-addons-for-elementor.png\" alt=\"Elementor Off Canvas Widget by Move Addons\" class=\"wp-image-12533\" srcset=\"https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2021\/11\/move-addons-for-elementor.png 772w, https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2021\/11\/move-addons-for-elementor-600x194.png 600w, https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2021\/11\/move-addons-for-elementor-768x249.png 768w\" sizes=\"auto, (max-width: 772px) 100vw, 772px\" \/><\/a><figcaption> Elementor Off Canvas Widget by Move Addons<\/figcaption><\/figure>\n\n\n\n<p>Elementor Off Canvas Widget by <a href=\"https:\/\/moveaddons.com\" target=\"_blank\" rel=\"noreferrer noopener\">Move Addons<\/a> is another perfect way to create slide panels that appear smoothly when you click on a button. This widget is available on the free version of this <a href=\"https:\/\/hasthemes.com\/wordpress-plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">amazing plugin<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"289\" src=\"https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/01\/elementor-offcanvas-widget-by-move-addon.jpg\" alt=\"\" class=\"wp-image-16788\" srcset=\"https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/01\/elementor-offcanvas-widget-by-move-addon.jpg 980w, https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/01\/elementor-offcanvas-widget-by-move-addon-600x177.jpg 600w, https:\/\/hasthemes.com\/blog\/wp-content\/uploads\/2022\/01\/elementor-offcanvas-widget-by-move-addon-768x226.jpg 768w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><figcaption>Elementor Off Canvas Widget by Move Addons<\/figcaption><\/figure>\n\n\n\n<p>With this widget, you can easily select the content source for your off-canvas panel, whether you want a sidebar or an Elementor template. You can also select the position of the sidebar if you choose to use one. From the style tab, you can adjust the alignment, margin, typography, and border type of both the button and off-canvas content area.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/demo.moveaddons.com\/off-canvas\/\" target=\"_blank\" rel=\"noreferrer noopener\">View Live Demo<\/a><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"pricing-plan-ht-mega-and-move-addons-\">Pricing Plan: HT Mega and Move Addons <\/h3>\n\n\n\n<p> Check the pricing table for Move Addons and HT Mega plugins.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th><a href=\"https:\/\/wphtmega.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">HT Mega<\/a><\/th><th><a href=\"https:\/\/moveaddons.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Move Addons<\/a><\/th><\/tr><\/thead><tbody><tr><td>1 Website: $49\/year<\/td><td>1 Website: $39\/year<\/td><\/tr><tr><td>5 Websites: $79\/Year<\/td><td> 5 Websites: $89\/Year <\/td><\/tr><tr><td> 999 (Growth Package) Websites: $99\/Year<\/td><td> Unlimited Websites: $179\/Year <\/td><\/tr><tr><td><strong><a href=\"https:\/\/wphtmega.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Buy Now or Check Pricing Plan<\/a><\/strong><\/td><td> <strong><a href=\"https:\/\/moveaddons.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Buy Now or Check Pricing Plan <\/a><\/strong><\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\"> Pricing Plan: HT Mega and Move Addons<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>The <a href=\"https:\/\/elementor.com\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor<\/a> Off Canvas Widget is a fantastic solution for any website that wants to have an off-canvas menu. It&#8217;s perfect for smaller screens, it doesn&#8217;t take up space on the user interface when not in use, and it can be configured with ease. If you&#8217;re looking for just one more tool to help your site stand out from its competitors then this might be what you need.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever wished you could have a little more space on your WordPress site? Maybe the sidebar is just too crowded, or you need to create a nice-looking landing page. Elementor has the perfect solution \u2013 the off-canvas widget! This handy tool lets you move content away from the main column and into a [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":21586,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[101],"class_list":["post-16739","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-elementor-widgets"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/posts\/16739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/comments?post=16739"}],"version-history":[{"count":0,"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/posts\/16739\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/media\/21586"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/media?parent=16739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/categories?post=16739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/blog\/wp-json\/wp\/v2\/tags?post=16739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}