{"id":49680,"date":"2024-06-16T12:25:12","date_gmt":"2024-06-16T09:25:12","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=49680"},"modified":"2026-02-01T15:49:39","modified_gmt":"2026-02-01T13:49:39","slug":"off-canvas-widget","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/off-canvas-widget\/","title":{"rendered":"Off-Canvas widget"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"49680\" class=\"elementor elementor-49680\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-58ec88e7 e-flex e-con-boxed e-con e-parent\" data-id=\"58ec88e7\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38fd4539 elementor-widget elementor-widget-heading\" data-id=\"38fd4539\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Add the widget<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5f5e36bb e-flex e-con-boxed e-con e-child\" data-id=\"5f5e36bb\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-138bc316 elementor-widget elementor-widget-image\" data-id=\"138bc316\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"131\" height=\"86\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/The-widget-itself.png\" class=\"attachment-large size-large wp-image-49689\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e15756f elementor-widget elementor-widget-n-accordion\" data-id=\"1e15756f\" data-element_type=\"widget\" data-settings=\"{&quot;default_state&quot;:&quot;all_collapsed&quot;,&quot;max_items_expended&quot;:&quot;one&quot;,&quot;n_accordion_animation_duration&quot;:{&quot;unit&quot;:&quot;ms&quot;,&quot;size&quot;:400,&quot;sizes&quot;:[]}}\" data-widget_type=\"nested-accordion.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-n-accordion\" aria-label=\"Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys\">\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-5040\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"1\" tabindex=\"0\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-5040\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Add the widget to the canvas <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><i aria-hidden=\"true\" class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t<span class='e-closed'><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-5040\" class=\"elementor-element elementor-element-21c2ac18 e-con-full e-flex e-con e-child\" data-id=\"21c2ac18\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76c57a35 elementor-widget elementor-widget-text-editor\" data-id=\"76c57a35\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-renderer-start-pos=\"122\"><strong data-renderer-mark=\"true\">To access and use a widget:<\/strong><\/p><ol class=\"ak-ol\" start=\"1\" data-indent-level=\"1\"><li><p data-renderer-start-pos=\"153\">In Elementor Editor, click +. <br \/>All available widgets are displayed.<\/p><\/li><li><p data-renderer-start-pos=\"224\">Click or drag the widget to the canvas. <span>For more information, see <\/span><a href=\"https:\/\/elementor.com\/help\/add-elements-to-a-page\/\"><span>Add elements to a page<\/span><\/a><span>.<\/span><\/p><\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-511b8b44 e-flex e-con-boxed e-con e-parent\" data-id=\"511b8b44\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e307a86 elementor-widget elementor-widget-heading\" data-id=\"e307a86\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What is the Off Canvas widget?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f2a95b7 elementor-widget elementor-widget-text-editor\" data-id=\"1f2a95b7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">The Off Canvas widget allows you to create containers that do not appear when the page initially loads. These containers only appear after a visitor has taken a defined action such as clicking a button. For instance, you could create a button asking users to check out images of sale items . The button would then open an Off Canvas widget with a slideshow of sale items.<\/span><\/p><p><div class=\"hbox callout-note\">\n                <div class=\"hicon\"> \n                    <span class=\"material-symbols-outlined\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n\t\t\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.36581 2.36386C3.86061 0.869064 5.88798 0.0292969 8.00194 0.0292969C10.1159 0.0292969 12.1433 0.869064 13.6381 2.36386C15.1329 3.85865 15.9726 5.88603 15.9726 7.99999C15.9726 10.1139 15.1329 12.1413 13.6381 13.6361C12.1433 15.1309 10.1159 15.9707 8.00194 15.9707C5.88798 15.9707 3.86061 15.1309 2.36581 13.6361C0.871017 12.1413 0.03125 10.1139 0.03125 7.99999C0.03125 5.88603 0.871017 3.85865 2.36581 2.36386ZM8.00194 1.5293C6.28581 1.5293 4.63996 2.21103 3.42647 3.42452C2.21298 4.63801 1.53125 6.28385 1.53125 7.99999C1.53125 9.71612 2.21298 11.362 3.42647 12.5755C4.63996 13.7889 6.28581 14.4707 8.00194 14.4707C9.71807 14.4707 11.3639 13.7889 12.5774 12.5755C13.7909 11.362 14.4726 9.71612 14.4726 7.99999C14.4726 6.28385 13.7909 4.63801 12.5774 3.42452C11.3639 2.21103 9.71807 1.5293 8.00194 1.5293ZM8.00194 7.25002C8.41616 7.25002 8.75194 7.58581 8.75194 8.00002V11.6104C8.75194 12.0246 8.41616 12.3604 8.00194 12.3604C7.58773 12.3604 7.25194 12.0246 7.25194 11.6104V8.00002C7.25194 7.58581 7.58773 7.25002 8.00194 7.25002ZM7.54165 4.09316C7.7077 3.9822 7.90293 3.92298 8.10265 3.92298C8.37045 3.92298 8.62729 4.02937 8.81666 4.21874C9.00603 4.40811 9.11242 4.66495 9.11242 4.93275C9.11242 5.13246 9.0532 5.32769 8.94224 5.49375C8.83128 5.65981 8.67358 5.78923 8.48907 5.86566C8.30456 5.94208 8.10153 5.96208 7.90565 5.92312C7.70978 5.88416 7.52986 5.78799 7.38863 5.64677C7.24741 5.50554 7.15124 5.32562 7.11228 5.12975C7.07332 4.93387 7.09331 4.73084 7.16974 4.54633C7.24617 4.36182 7.37559 4.20412 7.54165 4.09316Z\" fill=\"black\"\/>\n\t\t\t\t  <\/svg><\/span>\n                <\/div>\n                <div class=\"hboxinfo\">\n                    <strong>Note<\/strong>\n                    <div class=\"hcontent\">In order to use an Off Canvas widget, you must have Flexbox Containers and Nested Elements active.<\/div>\n                <\/div>\n            <\/div><\/p><p><div class=\"hbox callout-warning\">\n                <div class=\"hicon\"> \n                    <span class=\"material-symbols-outlined\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\n\t\t\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10 2.24878C9.65323 2.24878 9.31598 2.35024 9.02625 2.53805C8.73692 2.72561 8.50787 2.99071 8.36031 3.29986L8.36001 3.30049L2.43644 15.74L2.43637 15.7401C2.30124 16.0241 2.23833 16.3374 2.25178 16.6509C2.26523 16.9645 2.35477 17.2714 2.51437 17.5427C2.67407 17.8141 2.89971 18.0424 3.17309 18.2026C3.44675 18.3629 3.75769 18.4486 4.07602 18.4488L4.07644 18.4488H15.9236L15.924 18.4488C16.2423 18.4486 16.5532 18.3629 16.8269 18.2026C17.1003 18.0424 17.3259 17.8141 17.4856 17.5427C17.6452 17.2714 17.7348 16.9645 17.7482 16.6509C17.7617 16.3374 17.6988 16.0241 17.5636 15.7401L17.5636 15.74L11.64 3.30049L11.6397 3.29986C11.4921 2.99071 11.2631 2.72561 10.9737 2.53805C10.684 2.35024 10.3468 2.24878 10 2.24878ZM9.84218 3.79673C9.89255 3.76408 9.94709 3.74878 10 3.74878C10.0529 3.74878 10.1075 3.76408 10.1578 3.79673C10.2085 3.82959 10.2544 3.87986 10.2859 3.94575L10.286 3.94602L16.2092 16.3847L16.2093 16.3849C16.2382 16.4456 16.2527 16.5153 16.2496 16.5867C16.2465 16.6581 16.2261 16.7253 16.1928 16.782C16.1596 16.8384 16.1158 16.8807 16.0686 16.9083C16.0218 16.9358 15.9718 16.9488 15.9231 16.9488H4.07686C4.02816 16.9488 3.9782 16.9358 3.93136 16.9083C3.88423 16.8807 3.84037 16.8384 3.80717 16.782C3.77386 16.7253 3.75346 16.6581 3.7504 16.5867C3.74734 16.5152 3.76187 16.4455 3.79081 16.3847L9.714 3.94602L9.71412 3.94575C9.74564 3.87986 9.79149 3.82959 9.84218 3.79673ZM10 7.33645C10.4142 7.33645 10.75 7.67223 10.75 8.08645V11.479C10.75 11.8932 10.4142 12.229 10 12.229C9.58579 12.229 9.25 11.8932 9.25 11.479V8.08645C9.25 7.67223 9.58579 7.33645 10 7.33645ZM9.22093 14.0925C9.42277 13.8806 9.7024 13.7562 9.99999 13.7562C10.2976 13.7562 10.5772 13.8806 10.779 14.0925C10.98 14.3035 11.0885 14.5842 11.0885 14.8716C11.0885 15.159 10.98 15.4397 10.779 15.6507C10.5772 15.8627 10.2976 15.987 9.99999 15.987C9.7024 15.987 9.42277 15.8627 9.22093 15.6507C9.01997 15.4397 8.91149 15.159 8.91149 14.8716C8.91149 14.5842 9.01997 14.3035 9.22093 14.0925Z\" fill=\"black\"\/>\n\t\t\t\t  <\/svg><\/span>\n                <\/div>\n                <div class=\"hboxinfo\">\n                    <strong>Warning<\/strong>\n                    <div class=\"hcontent\">Off canvas widgets cannot be used in loop carousels or nested carousels.<\/div>\n                <\/div>\n            <\/div><\/p><p><a style=\"font-size: 1rem; letter-spacing: -0.02rem; text-align: var(--text-align); background-color: #ffffff;\" href=\"#settings\">See all the options available with the Off Canvas widget.\u00a0\u00a0<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-382fa97c e-flex e-con-boxed e-con e-parent\" data-id=\"382fa97c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f74f696 elementor-widget elementor-widget-heading\" data-id=\"1f74f696\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Common use case\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-526e7ded elementor-widget elementor-widget-text-editor\" data-id=\"526e7ded\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Alex is creating a site for a dog adoption agency. They want the page to display a small portrait of the dogs and when visitors click the portrait, it will display a larger image of the dog at play with an in-depth bio.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-19ce5be8 e-flex e-con-boxed e-con e-parent\" data-id=\"19ce5be8\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-337242eb elementor-widget elementor-widget-heading\" data-id=\"337242eb\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Additional use cases<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7ce6ffd e-con-full e-flex e-con e-child\" data-id=\"7ce6ffd\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d08a8f0 elementor-widget elementor-widget-text-editor\" data-id=\"4d08a8f0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Bring up a slideshow when a visitor clicks a link<\/span><\/li><li aria-level=\"1\">Display a long text when a visitor clicks a link<\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Any time you want to show more detailed information without taking visitors to a new page.\u00a0<\/span><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-225b61a2 elementor-widget elementor-widget-heading\" data-id=\"225b61a2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Adding an Off Canvas widget: Step-by-step<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-461258af elementor-widget elementor-widget-text-editor\" data-id=\"461258af\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the example below, we&#8217;ll create an off canvase widget that opens when visitors click and image.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-32de0524 elementor-widget elementor-widget-text-editor\" data-id=\"32de0524\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Add an Off Canvas widget<\/h3><p><strong>To add an Off Canvas widget:<\/strong><\/p><p>\u00a0<\/p><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Add the Off Canvas widget to the canvas. For details, see <\/span><a href=\"https:\/\/elementor.com\/help\/add-elements-to-a-page\/\"><span style=\"font-weight: 400;\">Add elements to a page<\/span><\/a><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">.<br \/><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-49719\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/1-drag-the-widget-to-the-canvas.png\" alt=\"\" width=\"1327\" height=\"428\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/1-drag-the-widget-to-the-canvas.png 1327w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/1-drag-the-widget-to-the-canvas-300x97.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/1-drag-the-widget-to-the-canvas-1024x330.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/1-drag-the-widget-to-the-canvas-768x248.png 768w\" sizes=\"(max-width: 1327px) 100vw, 1327px\" \/><br \/><\/span><\/span><\/span>The canvas section of the page is grayed out and a new container is automatically created.\u00a0<\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"text-align: var(--text-align); font-size: 1rem;\">Add widgets to the container. For details, see <a href=\"https:\/\/elementor.com\/help\/how-do-i-create-a-container\/\">Create a container<\/a>.<br \/><img decoding=\"async\" class=\"alignnone size-full wp-image-49693\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/2-The-conainer.png\" alt=\"\" width=\"871\" height=\"599\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/2-The-conainer.png 871w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/2-The-conainer-300x206.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/2-The-conainer-768x528.png 768w\" sizes=\"(max-width: 871px) 100vw, 871px\" \/><\/span><span style=\"text-align: var(--text-align); font-size: 1rem;\"><br \/><\/span><\/li><li aria-level=\"1\"><span style=\"text-align: var(--text-align); font-size: 1rem;\">Click the shaded area to access options for the Off Canvas widget. For details, see the Options section below.<br \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49697\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/4-change-the-settings.png\" alt=\"\" width=\"646\" height=\"695\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/4-change-the-settings.png 646w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/4-change-the-settings-279x300.png 279w\" sizes=\"(max-width: 646px) 100vw, 646px\" \/><br \/>(Optional) There are a number of options you can use to design the Off Canvas widget. In this case, we&#8217;ll center the widget so it will appear in the middle of the screen.<br \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49698\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/5-Click-the-center-icon.png\" alt=\"\" width=\"646\" height=\"695\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/5-Click-the-center-icon.png 646w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/5-Click-the-center-icon-279x300.png 279w\" sizes=\"(max-width: 646px) 100vw, 646px\" \/><br \/><\/span><\/li><li aria-level=\"1\">In the panel, in the <strong>Horizontal Position<\/strong> field, click the center icon.<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49702\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/6-the-image-is-centered.png\" alt=\"\" width=\"1319\" height=\"634\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/6-the-image-is-centered.png 1319w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/6-the-image-is-centered-300x144.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/6-the-image-is-centered-1024x492.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/6-the-image-is-centered-768x369.png 768w\" sizes=\"(max-width: 1319px) 100vw, 1319px\" \/><br \/>The Off Canvas widget is centered.<br \/>Now we must create a way to trigger the Off Canvas widget.<br \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49703\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/7-Turn-off-edting-mode.png\" alt=\"\" width=\"795\" height=\"429\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/7-Turn-off-edting-mode.png 795w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/7-Turn-off-edting-mode-300x162.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/7-Turn-off-edting-mode-768x414.png 768w\" sizes=\"(max-width: 795px) 100vw, 795px\" \/><\/p><\/li><li aria-level=\"1\">In the panel, under the <strong>Content<\/strong> tab, switch <strong>Editing Mode<\/strong> to <strong>Off<\/strong>.<br \/>This closes the Off Canvas widget.<\/li><li aria-level=\"1\">Create a container with any widget that can include a link.<br \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49707\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/8-create-an-image-widget.png\" alt=\"\" width=\"1316\" height=\"450\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/8-create-an-image-widget.png 1316w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/8-create-an-image-widget-300x103.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/8-create-an-image-widget-1024x350.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/8-create-an-image-widget-768x263.png 768w\" sizes=\"(max-width: 1316px) 100vw, 1316px\" \/> <br \/>In this case we&#8217;ll use an image widget.<br \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49708\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/9-Selkect-Cusotm-URL.png\" alt=\"\" width=\"286\" height=\"550\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/9-Selkect-Cusotm-URL.png 286w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/9-Selkect-Cusotm-URL-156x300.png 156w\" sizes=\"(max-width: 286px) 100vw, 286px\" \/><\/li><li aria-level=\"1\">In the panel, in the Link field, use the dropdown menu to select Custom URL.<br \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49709\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Click-the-dynamic-icon.png\" alt=\"\" width=\"282\" height=\"500\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Click-the-dynamic-icon.png 282w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Click-the-dynamic-icon-169x300.png 169w\" sizes=\"(max-width: 282px) 100vw, 282px\" \/><\/li><li aria-level=\"1\">Click the dynamic link icon.<br \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49710\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/11-From-the-dropdown-select-Off-Canvas.png\" alt=\"\" width=\"286\" height=\"798\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/11-From-the-dropdown-select-Off-Canvas.png 286w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/11-From-the-dropdown-select-Off-Canvas-108x300.png 108w\" sizes=\"(max-width: 286px) 100vw, 286px\" \/><\/li><li aria-level=\"1\">From the dynamic link dropdown menu, in the <strong>Actions<\/strong> section, select <strong>Off Canvas<\/strong>.\u00a0<br \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49715\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/12-click-the-wrench-icon.png\" alt=\"\" width=\"280\" height=\"490\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/12-click-the-wrench-icon.png 280w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/12-click-the-wrench-icon-171x300.png 171w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li><li aria-level=\"1\">In the Off Canvas text box, click the wrench icon.<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49714\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/13-Choose-which-off-canvas-widget.png\" alt=\"\" width=\"291\" height=\"675\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/13-Choose-which-off-canvas-widget.png 291w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/13-Choose-which-off-canvas-widget-129x300.png 129w\" sizes=\"(max-width: 291px) 100vw, 291px\" \/><\/p><\/li><li aria-level=\"1\">Use the <strong>Choose Off Canvas widget<\/strong> dropdown menu to select Off Canvas 1.\u00a0<br \/><div class=\"hbox callout-note\">\n                <div class=\"hicon\"> \n                    <span class=\"material-symbols-outlined\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n\t\t\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.36581 2.36386C3.86061 0.869064 5.88798 0.0292969 8.00194 0.0292969C10.1159 0.0292969 12.1433 0.869064 13.6381 2.36386C15.1329 3.85865 15.9726 5.88603 15.9726 7.99999C15.9726 10.1139 15.1329 12.1413 13.6381 13.6361C12.1433 15.1309 10.1159 15.9707 8.00194 15.9707C5.88798 15.9707 3.86061 15.1309 2.36581 13.6361C0.871017 12.1413 0.03125 10.1139 0.03125 7.99999C0.03125 5.88603 0.871017 3.85865 2.36581 2.36386ZM8.00194 1.5293C6.28581 1.5293 4.63996 2.21103 3.42647 3.42452C2.21298 4.63801 1.53125 6.28385 1.53125 7.99999C1.53125 9.71612 2.21298 11.362 3.42647 12.5755C4.63996 13.7889 6.28581 14.4707 8.00194 14.4707C9.71807 14.4707 11.3639 13.7889 12.5774 12.5755C13.7909 11.362 14.4726 9.71612 14.4726 7.99999C14.4726 6.28385 13.7909 4.63801 12.5774 3.42452C11.3639 2.21103 9.71807 1.5293 8.00194 1.5293ZM8.00194 7.25002C8.41616 7.25002 8.75194 7.58581 8.75194 8.00002V11.6104C8.75194 12.0246 8.41616 12.3604 8.00194 12.3604C7.58773 12.3604 7.25194 12.0246 7.25194 11.6104V8.00002C7.25194 7.58581 7.58773 7.25002 8.00194 7.25002ZM7.54165 4.09316C7.7077 3.9822 7.90293 3.92298 8.10265 3.92298C8.37045 3.92298 8.62729 4.02937 8.81666 4.21874C9.00603 4.40811 9.11242 4.66495 9.11242 4.93275C9.11242 5.13246 9.0532 5.32769 8.94224 5.49375C8.83128 5.65981 8.67358 5.78923 8.48907 5.86566C8.30456 5.94208 8.10153 5.96208 7.90565 5.92312C7.70978 5.88416 7.52986 5.78799 7.38863 5.64677C7.24741 5.50554 7.15124 5.32562 7.11228 5.12975C7.07332 4.93387 7.09331 4.73084 7.16974 4.54633C7.24617 4.36182 7.37559 4.20412 7.54165 4.09316Z\" fill=\"black\"\/>\n\t\t\t\t  <\/svg><\/span>\n                <\/div>\n                <div class=\"hboxinfo\">\n                    <strong>Note<\/strong>\n                    <div class=\"hcontent\">If there are more than one Off Canvas widgets on a page they will be named in numerical order starting with the Off Canvas widget at the top of the page. For example, if a page has three Off Canvas widgets, the topmost one will be Off Canvas 1, the middle one will be Off Canvas 2 and the bottommost one, Off Canvas 3.<\/div>\n                <\/div>\n            <\/div><\/li><\/ol><p>When a visitor clicks the image, the Off Canvas widget appears.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3c030d76 e-flex e-con-boxed e-con e-parent\" data-id=\"3c030d76\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-10a1f5df elementor-widget elementor-widget-heading\" data-id=\"10a1f5df\" data-element_type=\"widget\" id=\"settings\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Settings for the Off Canvas widget<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2bc7683b elementor-widget elementor-widget-text-editor\" data-id=\"2bc7683b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p class=\"sc-jMbUWg fdTPyi\">You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ebd478a elementor-widget elementor-widget-heading\" data-id=\"2ebd478a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Content tab<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ff3cdb6 elementor-widget elementor-widget-text-editor\" data-id=\"4ff3cdb6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Add, delete, and edit menu items and controls.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-583e90b0 elementor-widget__width-auto e-n-tabs-mobile elementor-widget elementor-widget-n-tabs\" data-id=\"583e90b0\" data-element_type=\"widget\" data-settings=\"{&quot;horizontal_scroll&quot;:&quot;disable&quot;}\" data-widget_type=\"nested-tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-n-tabs\" data-widget-number=\"1480495280\" aria-label=\"Tabs. Open items with Enter or Space, close with Escape and navigate using the Arrow keys.\">\n\t\t\t<div class=\"e-n-tabs-heading\" role=\"tablist\">\n\t\t\t\t\t<button id=\"e-n-tab-title-14804952801\" data-tab-title-id=\"e-n-tab-title-14804952801\" class=\"e-n-tab-title\" aria-selected=\"true\" data-tab-index=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"e-n-tab-content-14804952801\" style=\"--n-tabs-title-order: 1;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tLayout\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-14804952802\" data-tab-title-id=\"e-n-tab-title-14804952802\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-14804952802\" style=\"--n-tabs-title-order: 2;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tSettings\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t<div class=\"e-n-tabs-content\">\n\t\t\t\t<div id=\"e-n-tab-content-14804952801\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-14804952801\" data-tab-index=\"1\" style=\"--n-tabs-title-order: 1;\" class=\"e-active elementor-element elementor-element-2931542b e-con-full e-flex e-con e-child\" data-id=\"2931542b\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1c3f4a9c elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"1c3f4a9c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"305\" height=\"602\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Content-tab-Layout.png\" class=\"attachment-large size-large wp-image-49726\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Content-tab-Layout.png 305w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Content-tab-Layout-152x300.png 152w\" sizes=\"(max-width: 305px) 100vw, 305px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34170615 elementor-widget elementor-widget-n-accordion\" data-id=\"34170615\" data-element_type=\"widget\" data-settings=\"{&quot;default_state&quot;:&quot;all_collapsed&quot;,&quot;max_items_expended&quot;:&quot;one&quot;,&quot;n_accordion_animation_duration&quot;:{&quot;unit&quot;:&quot;ms&quot;,&quot;size&quot;:400,&quot;sizes&quot;:[]}}\" data-widget_type=\"nested-accordion.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-n-accordion\" aria-label=\"Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys\">\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-8730\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"1\" tabindex=\"0\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-8730\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Editing Mode <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303C13.5304 10.5303 13.5303 10.5303 13 10C13.5303 9.46967 13.5304 9.4697 13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-8730\" class=\"elementor-element elementor-element-3cbe7650 e-con-full e-flex e-con e-child\" data-id=\"3cbe7650\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3e0d220d elementor-widget elementor-widget-text-editor\" data-id=\"3e0d220d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Toggle <strong>Edit Mode<\/strong> Off\u00a0 to stop editing your Off Canvas widget. Toggle it back on again if your want to start editing it again.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-8731\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"2\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-8731\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Horizontal Position <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303C13.5304 10.5303 13.5303 10.5303 13 10C13.5303 9.46967 13.5304 9.4697 13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-8731\" class=\"elementor-element elementor-element-122ef422 e-con-full e-flex e-con e-child\" data-id=\"122ef422\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3acd2e0e elementor-widget elementor-widget-text-editor\" data-id=\"3acd2e0e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Choose to have your Off Canvas widget appear on either the:<\/p><ul><li><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49734\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/right.png\" alt=\"\" width=\"32\" height=\"32\" \/> right<\/li><li><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49735\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/left.png\" alt=\"\" width=\"30\" height=\"31\" \/> left<\/li><li><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49736\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/center.png\" alt=\"\" width=\"31\" height=\"32\" \/> center<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-8732\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"3\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-8732\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Vertical Position <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303C13.5304 10.5303 13.5303 10.5303 13 10C13.5303 9.46967 13.5304 9.4697 13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-8732\" class=\"elementor-element elementor-element-316b57ae e-con-full e-flex e-con e-child\" data-id=\"316b57ae\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-41ed7775 elementor-widget elementor-widget-text-editor\" data-id=\"41ed7775\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Choose to have your Off Canvas widget appear on either the:<\/p><ul><li><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49743\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Up.png\" alt=\"\" width=\"31\" height=\"31\" \/> top of the screen<\/li><li><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49744\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Vertical-center.png\" alt=\"\" width=\"32\" height=\"31\" \/> center of the screen<\/li><li><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49745\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Down.png\" alt=\"\" width=\"31\" height=\"31\" \/>\u00a0bottom of the screen<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-8733\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"4\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-8733\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Width <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303C13.5304 10.5303 13.5303 10.5303 13 10C13.5303 9.46967 13.5304 9.4697 13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-8733\" class=\"elementor-element elementor-element-4f72bb35 e-con-full e-flex e-con e-child\" data-id=\"4f72bb35\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-72f53f64 elementor-widget elementor-widget-text-editor\" data-id=\"72f53f64\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-size: 1rem; letter-spacing: -0.02rem; text-align: var(--text-align);\">Us the slider to change the width of the Off Canvas widget.\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-8734\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"5\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-8734\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Height <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303C13.5304 10.5303 13.5303 10.5303 13 10C13.5303 9.46967 13.5304 9.4697 13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-8734\" class=\"elementor-element elementor-element-e7b4d64 e-con-full e-flex e-con e-child\" data-id=\"e7b4d64\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e5f56d1 elementor-widget elementor-widget-text-editor\" data-id=\"1e5f56d1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Use the dropdown menu to select:<\/p><ul><li><strong>Fit to Content<\/strong> &#8211; This will allow the editor to automatically determine the best height.<\/li><li><strong>Custom<\/strong> &#8211; This allows you to set a specific height for the widget.\u00a0<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-14804952802\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-14804952802\" data-tab-index=\"2\" style=\"--n-tabs-title-order: 2;\" class=\" elementor-element elementor-element-dc827bf e-con-full e-flex e-con e-child\" data-id=\"dc827bf\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6f4b4ce2 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"6f4b4ce2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"302\" height=\"586\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Content-tab-Settings.png\" class=\"attachment-large size-large wp-image-49727\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Content-tab-Settings.png 302w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Content-tab-Settings-155x300.png 155w\" sizes=\"(max-width: 302px) 100vw, 302px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5cc76d7d elementor-widget elementor-widget-n-accordion\" data-id=\"5cc76d7d\" data-element_type=\"widget\" data-settings=\"{&quot;default_state&quot;:&quot;all_collapsed&quot;,&quot;max_items_expended&quot;:&quot;one&quot;,&quot;n_accordion_animation_duration&quot;:{&quot;unit&quot;:&quot;ms&quot;,&quot;size&quot;:400,&quot;sizes&quot;:[]}}\" data-widget_type=\"nested-accordion.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-n-accordion\" aria-label=\"Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys\">\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1550\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"1\" tabindex=\"0\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1550\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Animation <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><i aria-hidden=\"true\" class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t<span class='e-closed'><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1550\" class=\"elementor-element elementor-element-41ec757 e-con-full e-flex e-con e-child\" data-id=\"41ec757\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-58d508fd elementor-widget elementor-widget-text-editor\" data-id=\"58d508fd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>By default, the widget will appear on screen when triggered, and disappear when closed. You have the option to add a special effect to the widget&#8217;s appearance and disappearance.\u00a0<\/p><p>Use the <strong>Entrance<\/strong> and <strong>Exit<\/strong> dropdown menus to animate the Off Canvas widget.<\/p><ul><li>Fading<ul><li>Fade In<\/li><li>Fade In Down<\/li><li>Fade in Left<\/li><li>Fade in Right<\/li><li>Fade In Up<\/li><\/ul><\/li><li>Zooming<ul><li>Zoom In<\/li><li>Zoom In Down<\/li><li>Zoom In Left<\/li><li>Zoom In Right<\/li><li>Zoom In Up<\/li><\/ul><\/li><li>Bouncing<ul><li>Bounce In<\/li><li>Bounce In Down<\/li><li>Bounce In Left<\/li><li>Bounce In Right<\/li><li>Bounce In Up<\/li><\/ul><\/li><li>Sliding<ul><li>Slide In Down<\/li><li>Slide In Left<\/li><li>Slide In Right<\/li><li>Slide In Up<\/li><\/ul><\/li><li>Rotating<ul><li>Rotate In<\/li><li>Rotate In Down Left<\/li><li>Rotate In Down Right<\/li><li>Rotate In Up Left<\/li><li>Rotate In Up Right<\/li><\/ul><\/li><li>Attention Seekers<ul><li>Bounce<\/li><li>Flash<\/li><li>Pulse<\/li><li>Rubber Band<\/li><li>Shake<\/li><li>Head Shake<\/li><li>Swing Tada<\/li><li>Wobble<\/li><li>Jello<\/li><\/ul><\/li><li>Light Speed<ul><li>Light Speed In<\/li><\/ul><\/li><li>Specials<ul><li>Roll In<\/li><\/ul><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1551\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"2\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1551\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Interactions <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><i aria-hidden=\"true\" class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t<span class='e-closed'><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1551\" class=\"elementor-element elementor-element-250f13a e-con-full e-flex e-con e-child\" data-id=\"250f13a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-64772f46 elementor-widget elementor-widget-text-editor\" data-id=\"64772f46\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Be default, an Off Canvas widget closes when:<\/p><ul><li>The visitor clicks on the page outside the borders of the Off Canvas widget. Toggle the <strong>Prevent Closing on Overlay<\/strong> to <strong>Yes<\/strong> to stop the widget from closing on these clicks.<\/li><li>The visitor hits the Escape key.\u00a0 Toggle <strong>Prevent Closing on ESC Overlay<\/strong> to <strong>Yes<\/strong> to prevent the widget from closing when the visitor hits Escape.<\/li><\/ul><p>By default, the widget prevents visitors from scrolling down the page while the Off Canvas widget is on screen. Toggle <strong>Disable Page Scrolling<\/strong> to <strong>Yes<\/strong> to turn this feature off.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1552\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"3\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1552\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> HTML tag <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><i aria-hidden=\"true\" class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t<span class='e-closed'><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1552\" class=\"elementor-element elementor-element-eb16e0a e-con-full e-flex e-con e-child\" data-id=\"eb16e0a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-685ea5a elementor-widget elementor-widget-text-editor\" data-id=\"685ea5a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Choose the HTML tag for your heading. Choices include H1 to H6, Div, Span, or Paragraph.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-24b29a20 e-flex e-con-boxed e-con e-parent\" data-id=\"24b29a20\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f0f29f8 elementor-widget elementor-widget-heading\" data-id=\"1f0f29f8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Style tab<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6152f025 elementor-widget elementor-widget-text-editor\" data-id=\"6152f025\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p class=\"sc-jMbUWg fdTPyi\">Determine the look and feel of menu items and controls.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-60529837 elementor-widget__width-auto e-n-tabs-mobile elementor-widget elementor-widget-n-tabs\" data-id=\"60529837\" data-element_type=\"widget\" data-settings=\"{&quot;horizontal_scroll&quot;:&quot;disable&quot;}\" data-widget_type=\"nested-tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-n-tabs\" data-widget-number=\"1616025655\" aria-label=\"Tabs. Open items with Enter or Space, close with Escape and navigate using the Arrow keys.\">\n\t\t\t<div class=\"e-n-tabs-heading\" role=\"tablist\">\n\t\t\t\t\t<button id=\"e-n-tab-title-16160256551\" data-tab-title-id=\"e-n-tab-title-16160256551\" class=\"e-n-tab-title\" aria-selected=\"true\" data-tab-index=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"e-n-tab-content-16160256551\" style=\"--n-tabs-title-order: 1;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tBackground\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-16160256552\" data-tab-title-id=\"e-n-tab-title-16160256552\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-16160256552\" style=\"--n-tabs-title-order: 2;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tOverlay\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t<div class=\"e-n-tabs-content\">\n\t\t\t\t<div id=\"e-n-tab-content-16160256551\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-16160256551\" data-tab-index=\"1\" style=\"--n-tabs-title-order: 1;\" class=\"e-active elementor-element elementor-element-3ff1395b e-con-full e-flex e-con e-child\" data-id=\"3ff1395b\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eac2289 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"eac2289\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"301\" height=\"410\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Style-tab-Background.png\" class=\"attachment-large size-large wp-image-49767\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Style-tab-Background.png 301w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Style-tab-Background-220x300.png 220w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-452edc55 elementor-widget elementor-widget-n-accordion\" data-id=\"452edc55\" data-element_type=\"widget\" data-settings=\"{&quot;default_state&quot;:&quot;all_collapsed&quot;,&quot;max_items_expended&quot;:&quot;one&quot;,&quot;n_accordion_animation_duration&quot;:{&quot;unit&quot;:&quot;ms&quot;,&quot;size&quot;:400,&quot;sizes&quot;:[]}}\" data-widget_type=\"nested-accordion.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-n-accordion\" aria-label=\"Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys\">\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1160\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"1\" tabindex=\"0\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1160\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Background Type <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><i aria-hidden=\"true\" class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t<span class='e-closed'><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1160\" class=\"elementor-element elementor-element-400abd8e e-con-full e-flex e-con e-child\" data-id=\"400abd8e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-581cc15d elementor-widget elementor-widget-text-editor\" data-id=\"581cc15d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Controls the background of the container created by the Off Canvas widget.\u00a0<span style=\"font-weight: 400;\">For more details, see <\/span><a href=\"http:\/\/elementor.com\/help\/create-background\"><span style=\"font-weight: 400;\">Create a Background<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1161\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"2\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1161\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Border Type <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><i aria-hidden=\"true\" class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t<span class='e-closed'><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1161\" class=\"elementor-element elementor-element-6ee27770 e-con-full e-flex e-con e-child\" data-id=\"6ee27770\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-849ba6 elementor-widget elementor-widget-text-editor\" data-id=\"849ba6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Controls the border surrounding the container created by the Off Canvas widget.\u00a0<span style=\"font-weight: 400;\">For more details, see <\/span><a href=\"https:\/\/elementor.com\/help\/border-type\/\"><span style=\"font-weight: 400;\">Border type<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1162\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"3\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1162\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Border Radius <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><i aria-hidden=\"true\" class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t<span class='e-closed'><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1162\" class=\"elementor-element elementor-element-5e2e5c3f e-con-full e-flex e-con e-child\" data-id=\"5e2e5c3f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4298f957 elementor-widget elementor-widget-text-editor\" data-id=\"4298f957\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Controls the corners of the border surrounding the container created by the Off Canvas widget.\u00a0<span style=\"font-weight: 400;\">For more details, see <\/span><a href=\"https:\/\/elementor.com\/help\/border-radius-tools\/\"><span style=\"font-weight: 400;\">Border radius tools<\/span><\/a><span style=\"font-weight: 400;\">.<\/span> <span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1163\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"4\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1163\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Box Shadow <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><i aria-hidden=\"true\" class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t<span class='e-closed'><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1163\" class=\"elementor-element elementor-element-1da375f5 e-con-full e-flex e-con e-child\" data-id=\"1da375f5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2ed19bbf elementor-widget elementor-widget-text-editor\" data-id=\"2ed19bbf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Give the container created by the Off Canvas widget more depth by adding a shadow effect.\u00a0<span style=\"font-weight: 400;\">For more details, see, <\/span><a href=\"https:\/\/elementor.com\/help\/shadow\/\"><span style=\"font-weight: 400;\">What is Shadow?<\/span><\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-16160256552\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-16160256552\" data-tab-index=\"2\" style=\"--n-tabs-title-order: 2;\" class=\" elementor-element elementor-element-5ccf4bc7 e-con-full e-flex e-con e-child\" data-id=\"5ccf4bc7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a297c1e elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"4a297c1e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"489\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Style-tab-Overlay.png\" class=\"attachment-large size-large wp-image-49768\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Style-tab-Overlay.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/Style-tab-Overlay-184x300.png 184w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eb3e87a elementor-widget elementor-widget-n-accordion\" data-id=\"eb3e87a\" data-element_type=\"widget\" data-settings=\"{&quot;default_state&quot;:&quot;all_collapsed&quot;,&quot;max_items_expended&quot;:&quot;one&quot;,&quot;n_accordion_animation_duration&quot;:{&quot;unit&quot;:&quot;ms&quot;,&quot;size&quot;:400,&quot;sizes&quot;:[]}}\" data-widget_type=\"nested-accordion.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-n-accordion\" aria-label=\"Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys\">\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-2460\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"1\" tabindex=\"0\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-2460\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Overlay <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><i aria-hidden=\"true\" class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t<span class='e-closed'><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-2460\" class=\"elementor-element elementor-element-928f00f e-con-full e-flex e-con e-child\" data-id=\"928f00f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-216adad1 elementor-widget elementor-widget-text-editor\" data-id=\"216adad1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>By default,\u00a0 when an Off Canvas widget is activated, the surrounding page is grayed out. This area is called the overlay.\u00a0<\/p><p>Toggle <strong>Overlay<\/strong> to <strong>Off<\/strong> to prevent this overlay from appearing.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-2461\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"2\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-2461\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Background Type <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><i aria-hidden=\"true\" class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t<span class='e-closed'><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-2461\" class=\"elementor-element elementor-element-1c1ecf87 e-con-full e-flex e-con e-child\" data-id=\"1c1ecf87\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6151382a elementor-widget elementor-widget-text-editor\" data-id=\"6151382a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Add a background to the overlay.\u00a0<span style=\"font-weight: 400;\">For more details, see <\/span><a href=\"http:\/\/elementor.com\/help\/create-background\"><span style=\"font-weight: 400;\">Create a Background<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-2462\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"3\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-2462\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Color <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><i aria-hidden=\"true\" class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t<span class='e-closed'><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-2462\" class=\"elementor-element elementor-element-67c455bb e-con-full e-flex e-con e-child\" data-id=\"67c455bb\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-793ff7c4 elementor-widget elementor-widget-text-editor\" data-id=\"793ff7c4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Add a color to the overlay.\u00a0<span style=\"font-weight: 400;\">For more details, see <\/span><a href=\"https:\/\/elementor.com\/help\/choose-color\/\"><span style=\"font-weight: 400;\">Choose a color<\/span><\/a><span style=\"font-weight: 400;\"> or <\/span><a href=\"https:\/\/elementor.com\/help\/how-do-i-use-global-fonts-and-colors\/\"><span style=\"font-weight: 400;\">Use global fonts and colors<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-2463\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"4\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-2463\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Image <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><i aria-hidden=\"true\" class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t<span class='e-closed'><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-2463\" class=\"elementor-element elementor-element-6ff3250a e-con-full e-flex e-con e-child\" data-id=\"6ff3250a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-750f1dea elementor-widget elementor-widget-text-editor\" data-id=\"750f1dea\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Have an image appear in the overlay.\u00a0<span style=\"font-weight: 400;\">For more details, see <\/span><a href=\"https:\/\/elementor.com\/help\/add-graphic-element\/\"><span style=\"font-weight: 400;\">Adding images and icons<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Add the widget Add the widget to the canvas To access and use a widget: In Elementor Editor, click +. All available widgets are displayed. Click or drag the widget to the canvas. For more information, see Add elements to a page. To access and use a widget: In Elementor Editor, click +. All available [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["666eaf7a03910aaab08343d1"],"footnotes":""},"categories":[1440],"tags":[1389,1388,1387,1235,1407],"class_list":["post-49680","post","type-post","status-publish","format-standard","hentry","category-advanced-functionality","tag-advanced","tag-agency","tag-essential","tag-pro","tag-version-3-22"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Off-Canvas widget | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Off-Canvas widget in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/off-canvas-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Off-Canvas widget | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Off-Canvas widget in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/off-canvas-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-16T09:25:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-01T13:49:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/The-widget-itself.png\" \/>\n\t<meta property=\"og:image:width\" content=\"131\" \/>\n\t<meta property=\"og:image:height\" content=\"86\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cliff Churgin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cliff Churgin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/off-canvas-widget\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/off-canvas-widget\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Off-Canvas widget\",\"datePublished\":\"2024-06-16T09:25:12+00:00\",\"dateModified\":\"2026-02-01T13:49:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/off-canvas-widget\/\"},\"wordCount\":2279,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/off-canvas-widget\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/The-widget-itself.png\",\"keywords\":[\"Advanced\",\"Agency\",\"Essential\",\"Pro\",\"Version 3.22\"],\"articleSection\":[\"Advanced functionality\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/off-canvas-widget\/\",\"url\":\"https:\/\/elementor.com\/help\/off-canvas-widget\/\",\"name\":\"Off-Canvas widget | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/off-canvas-widget\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/off-canvas-widget\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/The-widget-itself.png\",\"datePublished\":\"2024-06-16T09:25:12+00:00\",\"dateModified\":\"2026-02-01T13:49:39+00:00\",\"description\":\"Learn everything about Off-Canvas widget in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/off-canvas-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/off-canvas-widget\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/off-canvas-widget\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/The-widget-itself.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/The-widget-itself.png\",\"width\":131,\"height\":86},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/off-canvas-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Advanced functionality\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Off-Canvas widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\",\"name\":\"Cliff Churgin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"caption\":\"Cliff Churgin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Off-Canvas widget | Elementor","description":"Learn everything about Off-Canvas widget in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/off-canvas-widget\/","og_locale":"en_US","og_type":"article","og_title":"Off-Canvas widget | Elementor","og_description":"Learn everything about Off-Canvas widget in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/off-canvas-widget\/","og_site_name":"Help","article_published_time":"2024-06-16T09:25:12+00:00","article_modified_time":"2026-02-01T13:49:39+00:00","og_image":[{"width":131,"height":86,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/The-widget-itself.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/off-canvas-widget\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/off-canvas-widget\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Off-Canvas widget","datePublished":"2024-06-16T09:25:12+00:00","dateModified":"2026-02-01T13:49:39+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/off-canvas-widget\/"},"wordCount":2279,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/off-canvas-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/The-widget-itself.png","keywords":["Advanced","Agency","Essential","Pro","Version 3.22"],"articleSection":["Advanced functionality"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/off-canvas-widget\/","url":"https:\/\/elementor.com\/help\/off-canvas-widget\/","name":"Off-Canvas widget | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/off-canvas-widget\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/off-canvas-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/The-widget-itself.png","datePublished":"2024-06-16T09:25:12+00:00","dateModified":"2026-02-01T13:49:39+00:00","description":"Learn everything about Off-Canvas widget in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/off-canvas-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/off-canvas-widget\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/off-canvas-widget\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/The-widget-itself.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/05\/The-widget-itself.png","width":131,"height":86},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/off-canvas-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Advanced functionality","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/"},{"@type":"ListItem","position":5,"name":"Off-Canvas widget"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3","name":"Cliff Churgin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","caption":"Cliff Churgin"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/49680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=49680"}],"version-history":[{"count":25,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/49680\/revisions"}],"predecessor-version":[{"id":163202,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/49680\/revisions\/163202"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=49680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=49680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=49680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}