1"use strict";(self.webpackChunkmapsvg=self.webpackChunkmapsvg||[]).push([[15120],{8934:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>o,contentTitle:()=>l,default:()=>c,frontMatter:()=>d,metadata:()=>n,toc:()=>a});const n=JSON.parse('{"id":"guides/page-builders/elementor-widget","title":"Elementor widget","description":"The MapSVG Elementor widget embeds a map with a live preview in the Elementor editor.","source":"@site/docs/02. guides/03. page-builders/02.elementor-widget.md","sourceDirName":"02. guides/03. page-builders","slug":"/guides/page-builders/elementor-widget","permalink":"/docs/guides/page-builders/elementor-widget","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"title":"Elementor widget"},"sidebar":"tutorialSidebar","previous":{"title":"Gutenberg block","permalink":"/docs/guides/page-builders/gutenberg-block"},"next":{"title":"Classic editor","permalink":"/docs/guides/page-builders/classic-editor"}}');var s=i(74848),r=i(28453);const d={title:"Elementor widget"},l="MapSVG Elementor widget",o={},a=[{value:"Add the widget",id:"add-the-widget",level:2},{value:"Widget settings",id:"widget-settings",level:2},{value:"Where to find it (common mix-up)",id:"where-to-find-it-common-mix-up",level:2},{value:"Front end",id:"front-end",level:2},{value:"Related",id:"related",level:2}];function h(e){const t={a:"a",admonition:"admonition",br:"br",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",ol:"ol",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"mapsvg-elementor-widget",children:"MapSVG Elementor widget"})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"MapSVG"})," Elementor widget embeds a map with a ",(0,s.jsx)(t.strong,{children:"live preview"})," in the Elementor editor."]}),"\n",(0,s.jsx)(t.admonition,{title:"Prerequisites",type:"info",children:(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.a,{href:"https://wordpress.org/plugins/elementor/",children:"Elementor"})," must be installed and active. MapSVG registers the widget automatically when Elementor is available."]})}),"\n",(0,s.jsx)(t.h2,{id:"add-the-widget",children:"Add the widget"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["Edit a page with ",(0,s.jsx)(t.strong,{children:"Edit with Elementor"})]}),"\n",(0,s.jsxs)(t.li,{children:["Open the ",(0,s.jsx)(t.strong,{children:"widgets / elements"})," panel on the left",(0,s.jsx)(t.br,{}),"\n","(the widgets grid \u2014 ",(0,s.jsx)(t.strong,{children:"not"})," the folder library with Blocks / Pages / Templates)"]}),"\n",(0,s.jsxs)(t.li,{children:["Search for ",(0,s.jsx)("img",{src:"/logo-icon.svg",alt:"",width:18,height:18,style:{verticalAlign:"-3px",margin:"0 2px"}})," ",(0,s.jsx)(t.strong,{children:"MapSVG"}),", or open the ",(0,s.jsx)(t.strong,{children:"MapSVG"})," / ",(0,s.jsx)(t.strong,{children:"General"})," category"]}),"\n",(0,s.jsxs)(t.li,{children:["Drag the ",(0,s.jsx)("img",{src:"/logo-icon.svg",alt:"",width:18,height:18,style:{verticalAlign:"-3px",margin:"0 2px"}})," ",(0,s.jsx)(t.strong,{children:"MapSVG"})," widget onto the canvas"]}),"\n"]}),"\n",(0,s.jsxs)(t.ol,{start:"5",children:["\n",(0,s.jsxs)(t.li,{children:["In the widget settings, choose a ",(0,s.jsx)(t.strong,{children:"Map"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"The map appears as a live preview in the Elementor canvas."}),"\n",(0,s.jsx)(t.h2,{id:"widget-settings",children:"Widget settings"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Setting"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:(0,s.jsx)(t.strong,{children:"Map"})}),(0,s.jsx)(t.td,{children:"Which MapSVG map to display"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:(0,s.jsx)(t.strong,{children:"Selected Region ID"})}),(0,s.jsxs)(t.td,{children:["Optional region ID to pre-select on load (same as shortcode ",(0,s.jsx)(t.code,{children:"selected"}),")"]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:(0,s.jsx)(t.strong,{children:"Lazy load"})}),(0,s.jsxs)(t.td,{children:["If enabled, the map loads when it enters the viewport on the ",(0,s.jsx)(t.strong,{children:"front end"})," only (editor always loads immediately)"]})]})]})]}),"\n",(0,s.jsx)(t.h2,{id:"where-to-find-it-common-mix-up",children:"Where to find it (common mix-up)"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Panel"}),(0,s.jsx)(t.th,{children:"What it is"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"Widgets / Elements (grid icon)"}),(0,s.jsxs)(t.td,{children:["Drag-and-drop widgets \u2014 ",(0,s.jsx)(t.strong,{children:"MapSVG is here"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"Folder \u2192 Blocks / Pages / Templates"}),(0,s.jsxs)(t.td,{children:["Template library \u2014 MapSVG is ",(0,s.jsx)(t.strong,{children:"not"})," listed there"]})]})]})]}),"\n",(0,s.jsx)(t.h2,{id:"front-end",children:"Front end"}),"\n",(0,s.jsxs)(t.p,{children:["Update / publish the page. The front end uses the same options as the widget settings (",(0,s.jsx)(t.code,{children:"id"}),", ",(0,s.jsx)(t.code,{children:"selected"}),", ",(0,s.jsx)(t.code,{children:"lazy"}),")."]}),"\n",(0,s.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"/docs/installation/creating-your-first-map",children:"Creating your first map"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"/docs/guides/page-builders/gutenberg-block",children:"Gutenberg block"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./classic-editor",children:"Classic editor (shortcode)"})}),"\n"]})]})}function c(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},28453:(e,t,i)=>{i.d(t,{R:()=>d,x:()=>l});var n=i(96540);const s={},r=n.createContext(s);function d(e){const t=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:d(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.