{"id":4851,"date":"2026-09-20T20:23:14","date_gmt":"2026-09-20T20:23:14","guid":{"rendered":"https:\/\/marketplace.emcptools.com\/widgets\/offcanvas-panel\/"},"modified":"2026-09-21T17:35:23","modified_gmt":"2026-09-21T17:35:23","slug":"offcanvas-panel","status":"publish","type":"page","link":"https:\/\/marketplace.emcptools.com\/widgets\/offcanvas-panel\/","title":{"rendered":"Offcanvas Panel"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4851\" class=\"elementor elementor-4851\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d5fbced e-flex e-con-boxed e-con e-parent\" data-id=\"d5fbced\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-d70fe54 e-flex e-con-full e-con e-child\" data-id=\"d70fe54\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bb7a154 elementor-widget elementor-widget-html\" data-id=\"bb7a154\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><div class=\"top\"><a href=\"https:\/\/marketplace.emcptools.com\/widgets\/\">&larr; All widgets<\/a><span>Widget 108 &middot; <code>emcp_custom_108<\/code><\/span><\/div><h2 style=\"font-size:36px;margin-bottom:8px\">Offcanvas Panel<\/h2><div class=\"chips\"><span class=\"chip dark\">Elementor widget<\/span><span class=\"chip\">4 layouts<\/span><span class=\"chip\">14 content options<\/span><span class=\"chip\">36 style options<\/span><span class=\"chip\">5 panel sections<\/span><\/div><p>Built with the EMCP Widget Builder and registered under the <b>EMCP Custom<\/b> category of the Elementor panel. Search the panel for: offcanvas, drawer, sidebar, slide, panel, menu, hamburger.<\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-24efe6f e-flex e-con-full e-con e-child\" data-id=\"24efe6f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3f6d32c elementor-widget elementor-widget-html\" data-id=\"3f6d32c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><h2>Setup guide<\/h2><ol><li>Open a page in Elementor, search the panel for <b>Offcanvas Panel<\/b> and drag it into a container.<\/li><li><b>Content &rsaquo; Trigger<\/b>: Trigger Style, Button Text, Icon, Trigger Alignment.<\/li><li><b>Content &rsaquo; Panel Content<\/b>: Panel Title, Logo (optional), Content, Quick Links, Footer Text, Slide From, Effect, Close on Overlay Click and 2 more.<\/li><li>Pick a <b>Effect<\/b>: Slide over, Push page, Reveal (page slides away), Scale page back. Each one is shown below.<\/li><li><b>Style tab<\/b> sections: Trigger, Panel, Panel Text &amp; Links. Colours, typography and spacing set here are scoped to this widget instance.<\/li><li>Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.<\/li><\/ol><div class=\"note\">Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.<\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4832787 e-flex e-con-full e-con e-child\" data-id=\"4832787\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6760db6 elementor-widget elementor-widget-html\" data-id=\"6760db6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><div class=\"demo-head\"><span>Layout<\/span><h3>Slide over<\/h3><\/div><p class=\"demo-cap\">Effect = <code>slide<\/code><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb28300 elementor-widget elementor-widget-emcp_custom_108\" data-id=\"bb28300\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"emcp_custom_108.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"emcp-oc emcp-oc--hamburger\" data-side=\"left\" data-effect=\"slide\" data-overlay-close=\"yes\" data-esc=\"yes\" data-close-links=\"yes\"><button type=\"button\" class=\"emcp-oc__trigger\" aria-expanded=\"false\"><span class=\"emcp-oc__ico\"><\/span><span class=\"emcp-oc__burger\"><i class=\"emcp-oc__bar\"><\/i><i class=\"emcp-oc__bar\"><\/i><i class=\"emcp-oc__bar\"><\/i><\/span><span class=\"emcp-oc__label\">Menu<\/span><\/button><div class=\"emcp-oc__wrap\" aria-hidden=\"true\"><div class=\"emcp-oc__overlay\"><\/div><aside class=\"emcp-oc__panel emcp-oc__panel--left\" role=\"dialog\" aria-modal=\"true\"><button type=\"button\" class=\"emcp-oc__close\" aria-label=\"Close\">&#10005;<\/button><div class=\"emcp-oc__inner\"><div class=\"emcp-oc__head\"><h3 class=\"emcp-oc__title\">Navigation<\/h3><\/div><div class=\"emcp-oc__content\"><p>Quick links and contact details go here.<\/p><\/div><nav class=\"emcp-oc__links\"><a class=\"emcp-oc__link\" href=\"\"><span class=\"emcp-oc__linkico\"><\/span>Home<\/a><a class=\"emcp-oc__link\" href=\"\"><span class=\"emcp-oc__linkico\"><\/span>About<\/a><a class=\"emcp-oc__link\" href=\"\"><span class=\"emcp-oc__linkico\"><\/span>Services<\/a><a class=\"emcp-oc__link\" href=\"\"><span class=\"emcp-oc__linkico\"><\/span>Contact<\/a><\/nav><div class=\"emcp-oc__footer\">\u00a9 2026 EMCP Tools<\/div><\/div><\/aside><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1aefca3 e-flex e-con-full e-con e-child\" data-id=\"1aefca3\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5e1487e elementor-widget elementor-widget-html\" data-id=\"5e1487e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><div class=\"demo-head\"><span>Layout<\/span><h3>Push page<\/h3><\/div><p class=\"demo-cap\">Effect = <code>push<\/code><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8298eab elementor-widget elementor-widget-emcp_custom_108\" data-id=\"8298eab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"emcp_custom_108.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"emcp-oc emcp-oc--hamburger\" data-side=\"left\" data-effect=\"push\" data-overlay-close=\"yes\" data-esc=\"yes\" data-close-links=\"yes\"><button type=\"button\" class=\"emcp-oc__trigger\" aria-expanded=\"false\"><span class=\"emcp-oc__ico\"><\/span><span class=\"emcp-oc__burger\"><i class=\"emcp-oc__bar\"><\/i><i class=\"emcp-oc__bar\"><\/i><i class=\"emcp-oc__bar\"><\/i><\/span><span class=\"emcp-oc__label\">Menu<\/span><\/button><div class=\"emcp-oc__wrap\" aria-hidden=\"true\"><div class=\"emcp-oc__overlay\"><\/div><aside class=\"emcp-oc__panel emcp-oc__panel--left\" role=\"dialog\" aria-modal=\"true\"><button type=\"button\" class=\"emcp-oc__close\" aria-label=\"Close\">&#10005;<\/button><div class=\"emcp-oc__inner\"><div class=\"emcp-oc__head\"><h3 class=\"emcp-oc__title\">Navigation<\/h3><\/div><div class=\"emcp-oc__content\"><p>Quick links and contact details go here.<\/p><\/div><nav class=\"emcp-oc__links\"><a class=\"emcp-oc__link\" href=\"\"><span class=\"emcp-oc__linkico\"><\/span>Home<\/a><a class=\"emcp-oc__link\" href=\"\"><span class=\"emcp-oc__linkico\"><\/span>About<\/a><a class=\"emcp-oc__link\" href=\"\"><span class=\"emcp-oc__linkico\"><\/span>Services<\/a><a class=\"emcp-oc__link\" href=\"\"><span class=\"emcp-oc__linkico\"><\/span>Contact<\/a><\/nav><div class=\"emcp-oc__footer\">\u00a9 2026 EMCP Tools<\/div><\/div><\/aside><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-aea517b e-flex e-con-full e-con e-child\" data-id=\"aea517b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-71300fd elementor-widget elementor-widget-html\" data-id=\"71300fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><div class=\"demo-head\"><span>Layout<\/span><h3>Reveal (page slides away)<\/h3><\/div><p class=\"demo-cap\">Effect = <code>reveal<\/code><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-129de03 elementor-widget elementor-widget-emcp_custom_108\" data-id=\"129de03\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"emcp_custom_108.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"emcp-oc emcp-oc--hamburger\" data-side=\"left\" data-effect=\"reveal\" data-overlay-close=\"yes\" data-esc=\"yes\" data-close-links=\"yes\"><button type=\"button\" class=\"emcp-oc__trigger\" aria-expanded=\"false\"><span class=\"emcp-oc__ico\"><\/span><span class=\"emcp-oc__burger\"><i class=\"emcp-oc__bar\"><\/i><i class=\"emcp-oc__bar\"><\/i><i class=\"emcp-oc__bar\"><\/i><\/span><span class=\"emcp-oc__label\">Menu<\/span><\/button><div class=\"emcp-oc__wrap\" aria-hidden=\"true\"><div class=\"emcp-oc__overlay\"><\/div><aside class=\"emcp-oc__panel emcp-oc__panel--left\" role=\"dialog\" aria-modal=\"true\"><button type=\"button\" class=\"emcp-oc__close\" aria-label=\"Close\">&#10005;<\/button><div class=\"emcp-oc__inner\"><div class=\"emcp-oc__head\"><h3 class=\"emcp-oc__title\">Navigation<\/h3><\/div><div class=\"emcp-oc__content\"><p>Quick links and contact details go here.<\/p><\/div><nav class=\"emcp-oc__links\"><a class=\"emcp-oc__link\" href=\"\"><span class=\"emcp-oc__linkico\"><\/span>Home<\/a><a class=\"emcp-oc__link\" href=\"\"><span class=\"emcp-oc__linkico\"><\/span>About<\/a><a class=\"emcp-oc__link\" href=\"\"><span class=\"emcp-oc__linkico\"><\/span>Services<\/a><a class=\"emcp-oc__link\" href=\"\"><span class=\"emcp-oc__linkico\"><\/span>Contact<\/a><\/nav><div class=\"emcp-oc__footer\">\u00a9 2026 EMCP Tools<\/div><\/div><\/aside><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1172743 e-flex e-con-full e-con e-child\" data-id=\"1172743\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7259414 elementor-widget elementor-widget-html\" data-id=\"7259414\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><div class=\"demo-head\"><span>Layout<\/span><h3>Scale page back<\/h3><\/div><p class=\"demo-cap\">Effect = <code>scale<\/code><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aeba24e elementor-widget elementor-widget-emcp_custom_108\" data-id=\"aeba24e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"emcp_custom_108.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"emcp-oc emcp-oc--hamburger\" data-side=\"left\" data-effect=\"scale\" data-overlay-close=\"yes\" data-esc=\"yes\" data-close-links=\"yes\"><button type=\"button\" class=\"emcp-oc__trigger\" aria-expanded=\"false\"><span class=\"emcp-oc__ico\"><\/span><span class=\"emcp-oc__burger\"><i class=\"emcp-oc__bar\"><\/i><i class=\"emcp-oc__bar\"><\/i><i class=\"emcp-oc__bar\"><\/i><\/span><span class=\"emcp-oc__label\">Menu<\/span><\/button><div class=\"emcp-oc__wrap\" aria-hidden=\"true\"><div class=\"emcp-oc__overlay\"><\/div><aside class=\"emcp-oc__panel emcp-oc__panel--left\" role=\"dialog\" aria-modal=\"true\"><button type=\"button\" class=\"emcp-oc__close\" aria-label=\"Close\">&#10005;<\/button><div class=\"emcp-oc__inner\"><div class=\"emcp-oc__head\"><h3 class=\"emcp-oc__title\">Navigation<\/h3><\/div><div class=\"emcp-oc__content\"><p>Quick links and contact details go here.<\/p><\/div><nav class=\"emcp-oc__links\"><a class=\"emcp-oc__link\" href=\"\"><span class=\"emcp-oc__linkico\"><\/span>Home<\/a><a class=\"emcp-oc__link\" href=\"\"><span class=\"emcp-oc__linkico\"><\/span>About<\/a><a class=\"emcp-oc__link\" href=\"\"><span class=\"emcp-oc__linkico\"><\/span>Services<\/a><a class=\"emcp-oc__link\" href=\"\"><span class=\"emcp-oc__linkico\"><\/span>Contact<\/a><\/nav><div class=\"emcp-oc__footer\">\u00a9 2026 EMCP Tools<\/div><\/div><\/aside><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6afd3c8 e-flex e-con-full e-con e-child\" data-id=\"6afd3c8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4db1484 elementor-widget elementor-widget-html\" data-id=\"4db1484\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><h2>Options reference<\/h2><p>Every control the widget exposes, grouped by panel section. Names in <code>code<\/code> are the setting keys used by the MCP tools (<code>add-free-widget<\/code>, <code>update-widget<\/code>).<\/p><h3 style=\"margin-top:8px\">Content tab<\/h3><p style=\"margin:14px 0 6px;font-weight:700\">Trigger<\/p><table><thead><tr><th style=\"width:24%\">Option<\/th><th style=\"width:11%\">Type<\/th><th style=\"width:27%\">Choices \/ range<\/th><th style=\"width:12%\">Default<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><b>Trigger Style<\/b><br><code>trigger_style<\/code><\/td><td>Dropdown<\/td><td>Button with text, Icon only, Animated hamburger, Floating edge tab<\/td><td>button<\/td><td><\/td><\/tr><tr><td><b>Button Text<\/b><br><code>btn_text<\/code><\/td><td>Text<\/td><td><\/td><td>Open panel<\/td><td><\/td><\/tr><tr><td><b>Icon<\/b><br><code>btn_icon<\/code><\/td><td>Icon<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Trigger Alignment<\/b><br><code>align<\/code><\/td><td>Button group<\/td><td>Left, Center, Right<\/td><td>left<\/td><td>Responsive<\/td><\/tr><\/tbody><\/table><p style=\"margin:14px 0 6px;font-weight:700\">Panel Content<\/p><table><thead><tr><th style=\"width:24%\">Option<\/th><th style=\"width:11%\">Type<\/th><th style=\"width:27%\">Choices \/ range<\/th><th style=\"width:12%\">Default<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><b>Panel Title<\/b><br><code>title<\/code><\/td><td>Text<\/td><td><\/td><td>Menu<\/td><td><\/td><\/tr><tr><td><b>Logo (optional)<\/b><br><code>logo<\/code><\/td><td>Image<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Content<\/b><br><code>content<\/code><\/td><td>Rich text<\/td><td><\/td><td>Add any content: navigation links, co...<\/td><td><\/td><\/tr><tr><td><b>Quick Links<\/b><br><code>links<\/code><\/td><td>Repeater<\/td><td><\/td><td>4 items<\/td><td><\/td><\/tr><tr><td>&#8627; <b>Label<\/b><br><code>label<\/code><\/td><td>Text<\/td><td><\/td><td>Home<\/td><td><\/td><\/tr><tr><td>&#8627; <b>URL<\/b><br><code>url<\/code><\/td><td>Link<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td>&#8627; <b>Icon<\/b><br><code>icon<\/code><\/td><td>Icon<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Footer Text<\/b><br><code>footer_text<\/code><\/td><td>Textarea<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Slide From<\/b><br><code>side<\/code><\/td><td>Dropdown<\/td><td>Left, Right, Top, Bottom<\/td><td>left<\/td><td><\/td><\/tr><tr><td><b>Effect<\/b><br><code>effect<\/code><\/td><td>Dropdown<\/td><td>Slide over, Push page, Reveal (page slides away), Scale page back<\/td><td>slide<\/td><td><\/td><\/tr><tr><td><b>Close on Overlay Click<\/b><br><code>close_overlay<\/code><\/td><td>Toggle<\/td><td>on \/ off<\/td><td>yes<\/td><td><\/td><\/tr><tr><td><b>Close on Esc<\/b><br><code>close_esc<\/code><\/td><td>Toggle<\/td><td>on \/ off<\/td><td>yes<\/td><td><\/td><\/tr><tr><td><b>Close When a Link Is Clicked<\/b><br><code>close_links<\/code><\/td><td>Toggle<\/td><td>on \/ off<\/td><td>yes<\/td><td><\/td><\/tr><\/tbody><\/table><h3 style=\"margin-top:8px\">Style tab<\/h3><p style=\"margin:14px 0 6px;font-weight:700\">Trigger<\/p><table><thead><tr><th style=\"width:24%\">Option<\/th><th style=\"width:11%\">Type<\/th><th style=\"width:27%\">Choices \/ range<\/th><th style=\"width:12%\">Default<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><b>Typography<\/b><br><code>t_typo<\/code><\/td><td>Typography<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Text \/ Icon Color<\/b><br><code>t_color<\/code><\/td><td>Color<\/td><td><\/td><td>#ffffff<\/td><td><\/td><\/tr><tr><td><b>Background<\/b><br><code>t_bg<\/code><\/td><td>Color<\/td><td><\/td><td>#101828<\/td><td><\/td><\/tr><tr><td><b>Hover Text \/ Icon<\/b><br><code>t_color_h<\/code><\/td><td>Color<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Hover Background<\/b><br><code>t_bg_h<\/code><\/td><td>Color<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Icon Size<\/b><br><code>t_icon_size<\/code><\/td><td>Slider<\/td><td>min 10, max 60, px<\/td><td>18<\/td><td><\/td><\/tr><tr><td><b>Padding<\/b><br><code>t_pad<\/code><\/td><td>Dimensions<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Radius<\/b><br><code>t_radius<\/code><\/td><td>Slider<\/td><td>min 0, max 60, px<\/td><td>10<\/td><td><\/td><\/tr><tr><td><b>Border<\/b><br><code>t_border<\/code><\/td><td>Border<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Shadow<\/b><br><code>t_shadow<\/code><\/td><td>Box shadow<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Floating Tab Vertical Position<\/b><br><code>float_pos<\/code><\/td><td>Slider<\/td><td>min 0, max 100, %<\/td><td>50<\/td><td><\/td><\/tr><\/tbody><\/table><p style=\"margin:14px 0 6px;font-weight:700\">Panel<\/p><table><thead><tr><th style=\"width:24%\">Option<\/th><th style=\"width:11%\">Type<\/th><th style=\"width:27%\">Choices \/ range<\/th><th style=\"width:12%\">Default<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><b>Panel Width<\/b><br><code>p_w<\/code><\/td><td>Slider<\/td><td>min 200, max 900, px\/vw\/%<\/td><td>360<\/td><td>Responsive<\/td><\/tr><tr><td><b>Panel Height (top \/ bottom)<\/b><br><code>p_h<\/code><\/td><td>Slider<\/td><td>min 20, max 100, vh<\/td><td>60<\/td><td><\/td><\/tr><tr><td><b>Background<\/b><br><code>p_bg<\/code><\/td><td>Background<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Padding<\/b><br><code>p_pad<\/code><\/td><td>Dimensions<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Shadow<\/b><br><code>p_shadow<\/code><\/td><td>Box shadow<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Overlay Color<\/b><br><code>overlay<\/code><\/td><td>Color<\/td><td><\/td><td>rgba(16,24,40,.55)<\/td><td><\/td><\/tr><tr><td><b>Animation Duration<\/b><br><code>duration<\/code><\/td><td>Slider<\/td><td>min 0.1, max 2, s<\/td><td>0.4<\/td><td><\/td><\/tr><tr><td><b>Close Icon Color<\/b><br><code>x_color<\/code><\/td><td>Color<\/td><td><\/td><td>#667085<\/td><td><\/td><\/tr><tr><td><b>Close Background<\/b><br><code>x_bg<\/code><\/td><td>Color<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Close Hover Color<\/b><br><code>x_color_h<\/code><\/td><td>Color<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Close Size<\/b><br><code>x_size<\/code><\/td><td>Slider<\/td><td>min 20, max 64, px<\/td><td>36<\/td><td><\/td><\/tr><\/tbody><\/table><p style=\"margin:14px 0 6px;font-weight:700\">Panel Text &amp; Links<\/p><table><thead><tr><th style=\"width:24%\">Option<\/th><th style=\"width:11%\">Type<\/th><th style=\"width:27%\">Choices \/ range<\/th><th style=\"width:12%\">Default<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><b>Title Typography<\/b><br><code>title_typo<\/code><\/td><td>Typography<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Title Color<\/b><br><code>title_color<\/code><\/td><td>Color<\/td><td><\/td><td>#101828<\/td><td><\/td><\/tr><tr><td><b>Logo Height<\/b><br><code>logo_h<\/code><\/td><td>Slider<\/td><td>min 16, max 120, px<\/td><td>32<\/td><td><\/td><\/tr><tr><td><b>Content Typography<\/b><br><code>c_typo<\/code><\/td><td>Typography<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Content Color<\/b><br><code>c_color<\/code><\/td><td>Color<\/td><td><\/td><td>#475467<\/td><td><\/td><\/tr><tr><td><b>Link Typography<\/b><br><code>l_typo<\/code><\/td><td>Typography<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Link Color<\/b><br><code>l_color<\/code><\/td><td>Color<\/td><td><\/td><td>#101828<\/td><td><\/td><\/tr><tr><td><b>Link Hover Color<\/b><br><code>l_color_h<\/code><\/td><td>Color<\/td><td><\/td><td>#6a11cb<\/td><td><\/td><\/tr><tr><td><b>Link Hover Background<\/b><br><code>l_bg_h<\/code><\/td><td>Color<\/td><td><\/td><td>#f9f5ff<\/td><td><\/td><\/tr><tr><td><b>Link Padding<\/b><br><code>l_pad<\/code><\/td><td>Dimensions<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Link Divider Color<\/b><br><code>l_divider<\/code><\/td><td>Color<\/td><td><\/td><td>#eaecf0<\/td><td><\/td><\/tr><tr><td><b>Link Radius<\/b><br><code>l_radius<\/code><\/td><td>Slider<\/td><td>min 0, max 30, px<\/td><td>8<\/td><td><\/td><\/tr><tr><td><b>Footer Typography<\/b><br><code>f_typo<\/code><\/td><td>Typography<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Footer Color<\/b><br><code>f_color<\/code><\/td><td>Color<\/td><td><\/td><td>#98a2b3<\/td><td><\/td><\/tr><\/tbody><\/table><h3>Add it with the MCP tools<\/h3><p>Any connected agent can place this widget: call <code>add-free-widget<\/code> with <code>widget_type: \"emcp_custom_108\"<\/code> and a <code>settings<\/code> object using the keys above. Run <code>get-custom-widget<\/code> with id <code>108<\/code> for the full JSON spec.<\/p><\/div>\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>&larr; All widgetsWidget 108 &middot; emcp_custom_108 Offcanvas Panel Elementor widget4 layouts14 content options36 style options5 panel sections Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: offcanvas, drawer, sidebar, slide, panel, menu, hamburger. Setup guide Open a page in Elementor, search the panel [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-4851","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/pages\/4851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/comments?post=4851"}],"version-history":[{"count":22,"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/pages\/4851\/revisions"}],"predecessor-version":[{"id":6290,"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/pages\/4851\/revisions\/6290"}],"wp:attachment":[{"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/media?parent=4851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}