CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Building Addons | Elementor Developers</title> <meta name="generator" content="VuePress 1.9.10"> <link rel="icon" href="/docs/favicon.png"> <link rel="manifest" href="/docs/manifest.json"> <link rel="mask-icon" href="/docs/assets/img/logo.svg" color="#db3157"> <link rel="apple-touch-icon" href="/docs/assets/img/logo.svg"> <link rel="preconnect" href="https://elementor.com" crossorigin=""> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=DM+Sans%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&display=auto"> <script type="text/javascript" src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" charset="UTF-8" data-cfasync="false" data-domain-script="31f0e3a0-7e21-4548-96da-7ae09f8d3f78"></script> <script>function OptanonWrapper(){}function insureCookieBanner(n,o){window.setTimeout(function(){window[n]?o(window[n]):insureCookieBanner(n,o)},800)}insureCookieBanner("OneTrust",function(n){OneTrust.LoadBanner()});</script> <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://gtm.elementor.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NJK8HW'); </script> <meta name="description" content="Resources and tutorials for Elementor developers"> <meta name="theme-color" content="#db3157"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="msapplication-TileImage" content="/assets/img/logo.svg"> <meta name="msapplication-TileColor" content="#000000"> <link rel="preload" href="/docs/assets/css/0.styles.4ef1e280.css" as="style"><link rel="preload" href="/docs/assets/js/app.c3462fb1.js" as="script"><link rel="preload" href="/docs/assets/js/2.dc2e3e99.js" as="script"><link rel="preload" href="/docs/assets/js/1.807b5085.js" as="script"><link rel="preload" href="/docs/assets/js/26.821fa7d5.js" as="script"><link rel="preload" href="/docs/assets/js/4.b3da44be.js" as="script"><link rel="preload" href="/docs/assets/js/19.ffc7ee04.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.50f340ac.js"><link rel="prefetch" href="/docs/assets/js/100.bec293c2.js"><link rel="prefetch" href="/docs/assets/js/101.8bc18328.js"><link rel="prefetch" href="/docs/assets/js/102.892a3902.js"><link rel="prefetch" href="/docs/assets/js/103.5ad1357e.js"><link rel="prefetch" href="/docs/assets/js/104.1ef3275c.js"><link rel="prefetch" href="/docs/assets/js/105.0b748374.js"><link rel="prefetch" href="/docs/assets/js/106.4fc5c350.js"><link rel="prefetch" href="/docs/assets/js/107.1200433e.js"><link rel="prefetch" href="/docs/assets/js/108.b5956b54.js"><link rel="prefetch" href="/docs/assets/js/109.c03cefec.js"><link rel="prefetch" href="/docs/assets/js/11.bfd533da.js"><link rel="prefetch" href="/docs/assets/js/110.31ea95a2.js"><link rel="prefetch" href="/docs/assets/js/111.4aeeea7d.js"><link rel="prefetch" href="/docs/assets/js/112.b3937337.js"><link rel="prefetch" href="/docs/assets/js/113.d14322a2.js"><link rel="prefetch" href="/docs/assets/js/114.a7dd6a09.js"><link rel="prefetch" href="/docs/assets/js/115.c9ce8d82.js"><link rel="prefetch" href="/docs/assets/js/116.146e66b8.js"><link rel="prefetch" href="/docs/assets/js/117.dec46bfc.js"><link rel="prefetch" href="/docs/assets/js/118.7752063b.js"><link rel="prefetch" href="/docs/assets/js/119.a818dd30.js"><link rel="prefetch" href="/docs/assets/js/12.b787937d.js"><link rel="prefetch" href="/docs/assets/js/120.40a3635f.js"><link rel="prefetch" href="/docs/assets/js/121.8f49a77c.js"><link rel="prefetch" href="/docs/assets/js/122.aa65ff15.js"><link rel="prefetch" href="/docs/assets/js/123.bfc897c2.js"><link rel="prefetch" href="/docs/assets/js/124.9eabfb02.js"><link rel="prefetch" href="/docs/assets/js/125.e81b6663.js"><link rel="prefetch" href="/docs/assets/js/126.94379035.js"><link rel="prefetch" href="/docs/assets/js/127.ef4f1913.js"><link rel="prefetch" href="/docs/assets/js/128.6e2bb8dd.js"><link rel="prefetch" href="/docs/assets/js/129.26020793.js"><link rel="prefetch" href="/docs/assets/js/13.19b7d008.js"><link rel="prefetch" href="/docs/assets/js/130.73285fb7.js"><link rel="prefetch" href="/docs/assets/js/131.ab445cc4.js"><link rel="prefetch" href="/docs/assets/js/132.aa45a878.js"><link rel="prefetch" href="/docs/assets/js/133.00310284.js"><link rel="prefetch" href="/docs/assets/js/134.657d6d06.js"><link rel="prefetch" href="/docs/assets/js/135.6bb99925.js"><link rel="prefetch" href="/docs/assets/js/136.abd93aa3.js"><link rel="prefetch" href="/docs/assets/js/137.1856b98a.js"><link rel="prefetch" href="/docs/assets/js/138.c3d892d6.js"><link rel="prefetch" href="/docs/assets/js/139.06a6d0c9.js"><link rel="prefetch" href="/docs/assets/js/14.a850925a.js"><link rel="prefetch" href="/docs/assets/js/140.a8c8b2cd.js"><link rel="prefetch" href="/docs/assets/js/141.66e5fb68.js"><link rel="prefetch" href="/docs/assets/js/142.96eac2a5.js"><link rel="prefetch" href="/docs/assets/js/143.1c8e0778.js"><link rel="prefetch" href="/docs/assets/js/144.e96dd4f6.js"><link rel="prefetch" href="/docs/assets/js/145.5ce6ef61.js"><link rel="prefetch" href="/docs/assets/js/146.ef2e438a.js"><link rel="prefetch" href="/docs/assets/js/147.49901e72.js"><link rel="prefetch" href="/docs/assets/js/148.d9639488.js"><link rel="prefetch" href="/docs/assets/js/149.c6060afb.js"><link rel="prefetch" href="/docs/assets/js/15.ae342d67.js"><link rel="prefetch" href="/docs/assets/js/150.ccba08d7.js"><link rel="prefetch" href="/docs/assets/js/151.f097da49.js"><link rel="prefetch" href="/docs/assets/js/152.11bb6d6f.js"><link rel="prefetch" href="/docs/assets/js/153.c963c1dc.js"><link rel="prefetch" href="/docs/assets/js/154.c877adc7.js"><link rel="prefetch" href="/docs/assets/js/155.cf960053.js"><link rel="prefetch" href="/docs/assets/js/156.36c3cd38.js"><link rel="prefetch" href="/docs/assets/js/157.07e4b4ba.js"><link rel="prefetch" href="/docs/assets/js/158.a163357b.js"><link rel="prefetch" href="/docs/assets/js/159.692c8bf4.js"><link rel="prefetch" href="/docs/assets/js/16.702301a5.js"><link rel="prefetch" href="/docs/assets/js/160.4a69793b.js"><link rel="prefetch" href="/docs/assets/js/161.863d1efa.js"><link rel="prefetch" href="/docs/assets/js/162.adcfe99f.js"><link rel="prefetch" href="/docs/assets/js/163.6204bfc1.js"><link rel="prefetch" href="/docs/assets/js/164.cb838e73.js"><link rel="prefetch" href="/docs/assets/js/165.57a63ae1.js"><link rel="prefetch" href="/docs/assets/js/166.d52b9caf.js"><link rel="prefetch" href="/docs/assets/js/167.89cd879d.js"><link rel="prefetch" href="/docs/assets/js/168.c32363e6.js"><link rel="prefetch" href="/docs/assets/js/169.3e83daea.js"><link rel="prefetch" href="/docs/assets/js/17.7489fda9.js"><link rel="prefetch" href="/docs/assets/js/170.c51994d0.js"><link rel="prefetch" href="/docs/assets/js/171.952b64a6.js"><link rel="prefetch" href="/docs/assets/js/172.66c43879.js"><link rel="prefetch" href="/docs/assets/js/173.caf8117d.js"><link rel="prefetch" href="/docs/assets/js/174.c9271826.js"><link rel="prefetch" href="/docs/assets/js/175.358ac527.js"><link rel="prefetch" href="/docs/assets/js/176.0ffc4430.js"><link rel="prefetch" href="/docs/assets/js/177.3790670c.js"><link rel="prefetch" href="/docs/assets/js/178.d1d0773e.js"><link rel="prefetch" href="/docs/assets/js/179.960e571e.js"><link rel="prefetch" href="/docs/assets/js/18.e47b670c.js"><link rel="prefetch" href="/docs/assets/js/180.9e4ce475.js"><link rel="prefetch" href="/docs/assets/js/181.eadda369.js"><link rel="prefetch" href="/docs/assets/js/182.f18b33b2.js"><link rel="prefetch" href="/docs/assets/js/183.e92d2d65.js"><link rel="prefetch" href="/docs/assets/js/184.2a82f141.js"><link rel="prefetch" href="/docs/assets/js/185.448c8bf3.js"><link rel="prefetch" href="/docs/assets/js/186.b44cc197.js"><link rel="prefetch" href="/docs/assets/js/187.1141c65e.js"><link rel="prefetch" href="/docs/assets/js/188.11d4cd6b.js"><link rel="prefetch" href="/docs/assets/js/189.08053519.js"><link rel="prefetch" href="/docs/assets/js/190.86188a9b.js"><link rel="prefetch" href="/docs/assets/js/191.081a7dc9.js"><link rel="prefetch" href="/docs/assets/js/192.3343b271.js"><link rel="prefetch" href="/docs/assets/js/193.1e99163e.js"><link rel="prefetch" href="/docs/assets/js/194.7084936c.js"><link rel="prefetch" href="/docs/assets/js/195.f8e4c627.js"><link rel="prefetch" href="/docs/assets/js/196.0f2fc770.js"><link rel="prefetch" href="/docs/assets/js/197.7d4d49c4.js"><link rel="prefetch" href="/docs/assets/js/198.c1aa703a.js"><link rel="prefetch" href="/docs/assets/js/199.66653e2b.js"><link rel="prefetch" href="/docs/assets/js/20.d44615b7.js"><link rel="prefetch" href="/docs/assets/js/200.62abbf2b.js"><link rel="prefetch" href="/docs/assets/js/201.c1faac6e.js"><link rel="prefetch" href="/docs/assets/js/202.ecad40f1.js"><link rel="prefetch" href="/docs/assets/js/203.e3bb5c23.js"><link rel="prefetch" href="/docs/assets/js/204.bd79ab0b.js"><link rel="prefetch" href="/docs/assets/js/205.b0aa3e1e.js"><link rel="prefetch" href="/docs/assets/js/206.aca504bc.js"><link rel="prefetch" href="/docs/assets/js/207.3996a826.js"><link rel="prefetch" href="/docs/assets/js/208.0cc9112d.js"><link rel="prefetch" href="/docs/assets/js/209.6aeede41.js"><link rel="prefetch" href="/docs/assets/js/21.fa71d959.js"><link rel="prefetch" href="/docs/assets/js/210.7cd766e4.js"><link rel="prefetch" href="/docs/assets/js/211.6365e5ed.js"><link rel="prefetch" href="/docs/assets/js/212.733d50cb.js"><link rel="prefetch" href="/docs/assets/js/213.94da17d1.js"><link rel="prefetch" href="/docs/assets/js/214.b730bcc8.js"><link rel="prefetch" href="/docs/assets/js/215.67333edb.js"><link rel="prefetch" href="/docs/assets/js/216.6cb69a1a.js"><link rel="prefetch" href="/docs/assets/js/217.9f064eef.js"><link rel="prefetch" href="/docs/assets/js/218.c1249385.js"><link rel="prefetch" href="/docs/assets/js/219.5c6b1605.js"><link rel="prefetch" href="/docs/assets/js/22.fbcc9bea.js"><link rel="prefetch" href="/docs/assets/js/220.e02bb011.js"><link rel="prefetch" href="/docs/assets/js/221.98b55be5.js"><link rel="prefetch" href="/docs/assets/js/222.ad179a15.js"><link rel="prefetch" href="/docs/assets/js/223.b7eeb8b7.js"><link rel="prefetch" href="/docs/assets/js/224.afd67a99.js"><link rel="prefetch" href="/docs/assets/js/225.42863a0d.js"><link rel="prefetch" href="/docs/assets/js/226.4073c2b8.js"><link rel="prefetch" href="/docs/assets/js/227.78b7ddeb.js"><link rel="prefetch" href="/docs/assets/js/228.c44dba99.js"><link rel="prefetch" href="/docs/assets/js/229.b26dec1f.js"><link rel="prefetch" href="/docs/assets/js/23.d9c51ae6.js"><link rel="prefetch" href="/docs/assets/js/230.526b3fa1.js"><link rel="prefetch" href="/docs/assets/js/231.96aad910.js"><link rel="prefetch" href="/docs/assets/js/232.65c52a16.js"><link rel="prefetch" href="/docs/assets/js/233.7d91cf6f.js"><link rel="prefetch" href="/docs/assets/js/234.d9a1eaf1.js"><link rel="prefetch" href="/docs/assets/js/235.1b16ba37.js"><link rel="prefetch" href="/docs/assets/js/236.76c90fa7.js"><link rel="prefetch" href="/docs/assets/js/237.182ffbc2.js"><link rel="prefetch" href="/docs/assets/js/238.9ea78e9c.js"><link rel="prefetch" href="/docs/assets/js/239.2408a283.js"><link rel="prefetch" href="/docs/assets/js/24.822264cc.js"><link rel="prefetch" href="/docs/assets/js/240.0a637f54.js"><link rel="prefetch" href="/docs/assets/js/241.1bc1bb12.js"><link rel="prefetch" href="/docs/assets/js/242.e80b3260.js"><link rel="prefetch" href="/docs/assets/js/243.03543f2b.js"><link rel="prefetch" href="/docs/assets/js/244.8a0b4849.js"><link rel="prefetch" href="/docs/assets/js/245.00f19f03.js"><link rel="prefetch" href="/docs/assets/js/246.4d75b874.js"><link rel="prefetch" href="/docs/assets/js/247.cbbcdb30.js"><link rel="prefetch" href="/docs/assets/js/248.81375bee.js"><link rel="prefetch" href="/docs/assets/js/249.1baa2c9c.js"><link rel="prefetch" href="/docs/assets/js/25.7ecf77ae.js"><link rel="prefetch" href="/docs/assets/js/250.e597f77a.js"><link rel="prefetch" href="/docs/assets/js/251.5350455d.js"><link rel="prefetch" href="/docs/assets/js/252.5171ccb6.js"><link rel="prefetch" href="/docs/assets/js/253.0c1b639a.js"><link rel="prefetch" href="/docs/assets/js/254.70abc44f.js"><link rel="prefetch" href="/docs/assets/js/255.ecfef0b8.js"><link rel="prefetch" href="/docs/assets/js/256.26d3ab72.js"><link rel="prefetch" href="/docs/assets/js/257.a9a1db87.js"><link rel="prefetch" href="/docs/assets/js/258.ea90edcd.js"><link rel="prefetch" href="/docs/assets/js/259.032000e7.js"><link rel="prefetch" href="/docs/assets/js/260.bedd14b2.js"><link rel="prefetch" href="/docs/assets/js/261.ed7b103b.js"><link rel="prefetch" href="/docs/assets/js/262.fdc93111.js"><link rel="prefetch" href="/docs/assets/js/263.837d57f8.js"><link rel="prefetch" href="/docs/assets/js/264.16ea1f51.js"><link rel="prefetch" href="/docs/assets/js/265.6c83d00c.js"><link rel="prefetch" href="/docs/assets/js/266.ea1fa7a9.js"><link rel="prefetch" href="/docs/assets/js/267.a019a5d9.js"><link rel="prefetch" href="/docs/assets/js/268.171812cb.js"><link rel="prefetch" href="/docs/assets/js/269.395180da.js"><link rel="prefetch" href="/docs/assets/js/27.d53e558e.js"><link rel="prefetch" href="/docs/assets/js/270.5e1c4681.js"><link rel="prefetch" href="/docs/assets/js/271.24f19ada.js"><link rel="prefetch" href="/docs/assets/js/272.8fa4da40.js"><link rel="prefetch" href="/docs/assets/js/273.9b344e86.js"><link rel="prefetch" href="/docs/assets/js/274.52fd8768.js"><link rel="prefetch" href="/docs/assets/js/275.cc29c0bf.js"><link rel="prefetch" href="/docs/assets/js/276.e8df2fb3.js"><link rel="prefetch" href="/docs/assets/js/277.c4910087.js"><link rel="prefetch" href="/docs/assets/js/278.5db0521c.js"><link rel="prefetch" href="/docs/assets/js/279.956a861d.js"><link rel="prefetch" href="/docs/assets/js/28.5be7464b.js"><link rel="prefetch" href="/docs/assets/js/280.6a4fd389.js"><link rel="prefetch" href="/docs/assets/js/281.0736b232.js"><link rel="prefetch" href="/docs/assets/js/282.ec35e694.js"><link rel="prefetch" href="/docs/assets/js/283.59c5977c.js"><link rel="prefetch" href="/docs/assets/js/284.f8cce77b.js"><link rel="prefetch" href="/docs/assets/js/285.9c5e4865.js"><link rel="prefetch" href="/docs/assets/js/286.31c8d107.js"><link rel="prefetch" href="/docs/assets/js/287.20953bbd.js"><link rel="prefetch" href="/docs/assets/js/288.416666df.js"><link rel="prefetch" href="/docs/assets/js/289.bada1808.js"><link rel="prefetch" href="/docs/assets/js/29.9e98af36.js"><link rel="prefetch" href="/docs/assets/js/290.3ab76a50.js"><link rel="prefetch" href="/docs/assets/js/291.4dde3f0a.js"><link rel="prefetch" href="/docs/assets/js/292.0e5f7c51.js"><link rel="prefetch" href="/docs/assets/js/293.17d56343.js"><link rel="prefetch" href="/docs/assets/js/294.d72a0ab0.js"><link rel="prefetch" href="/docs/assets/js/295.bb6780cf.js"><link rel="prefetch" href="/docs/assets/js/296.b269e240.js"><link rel="prefetch" href="/docs/assets/js/297.e4fcd363.js"><link rel="prefetch" href="/docs/assets/js/298.ea452d2b.js"><link rel="prefetch" href="/docs/assets/js/299.ce20c7ba.js"><link rel="prefetch" href="/docs/assets/js/3.9ea3ecfa.js"><link rel="prefetch" href="/docs/assets/js/30.9a2fac63.js"><link rel="prefetch" href="/docs/assets/js/300.2932e502.js"><link rel="prefetch" href="/docs/assets/js/301.4b93e205.js"><link rel="prefetch" href="/docs/assets/js/302.e4388c2a.js"><link rel="prefetch" href="/docs/assets/js/303.aff6f676.js"><link rel="prefetch" href="/docs/assets/js/304.daa76e81.js"><link rel="prefetch" href="/docs/assets/js/305.9a1f2668.js"><link rel="prefetch" href="/docs/assets/js/306.da7954c6.js"><link rel="prefetch" href="/docs/assets/js/307.6b22c750.js"><link rel="prefetch" href="/docs/assets/js/308.c30f9cac.js"><link rel="prefetch" href="/docs/assets/js/309.cdaaa920.js"><link rel="prefetch" href="/docs/assets/js/31.61d441a3.js"><link rel="prefetch" href="/docs/assets/js/310.31fe61dc.js"><link rel="prefetch" href="/docs/assets/js/311.0ccef9d6.js"><link rel="prefetch" href="/docs/assets/js/312.475ffa67.js"><link rel="prefetch" href="/docs/assets/js/32.54a83f83.js"><link rel="prefetch" href="/docs/assets/js/33.c83df89e.js"><link rel="prefetch" href="/docs/assets/js/34.4a3ec3f8.js"><link rel="prefetch" href="/docs/assets/js/35.26f6ab78.js"><link rel="prefetch" href="/docs/assets/js/36.6a2cf3cf.js"><link rel="prefetch" href="/docs/assets/js/37.85006bec.js"><link rel="prefetch" href="/docs/assets/js/38.6a84befe.js"><link rel="prefetch" href="/docs/assets/js/39.65898c45.js"><link rel="prefetch" href="/docs/assets/js/40.b4bd4f22.js"><link rel="prefetch" href="/docs/assets/js/41.5b90dc14.js"><link rel="prefetch" href="/docs/assets/js/42.e648573b.js"><link rel="prefetch" href="/docs/assets/js/43.ffd867f6.js"><link rel="prefetch" href="/docs/assets/js/44.28ce5b6c.js"><link rel="prefetch" href="/docs/assets/js/45.00d568c0.js"><link rel="prefetch" href="/docs/assets/js/46.796d7b82.js"><link rel="prefetch" href="/docs/assets/js/47.c4aaaed9.js"><link rel="prefetch" href="/docs/assets/js/48.9794eb8b.js"><link rel="prefetch" href="/docs/assets/js/49.0a9d07fc.js"><link rel="prefetch" href="/docs/assets/js/5.3582bdb9.js"><link rel="prefetch" href="/docs/assets/js/50.1b56594f.js"><link rel="prefetch" href="/docs/assets/js/51.18934100.js"><link rel="prefetch" href="/docs/assets/js/52.787c1532.js"><link rel="prefetch" href="/docs/assets/js/53.9b4bf6a8.js"><link rel="prefetch" href="/docs/assets/js/54.a7b239a6.js"><link rel="prefetch" href="/docs/assets/js/55.47e4a290.js"><link rel="prefetch" href="/docs/assets/js/56.846eb0ce.js"><link rel="prefetch" href="/docs/assets/js/57.68fdf77c.js"><link rel="prefetch" href="/docs/assets/js/58.a7bc04cc.js"><link rel="prefetch" href="/docs/assets/js/59.ab4c3915.js"><link rel="prefetch" href="/docs/assets/js/6.dba9daaa.js"><link rel="prefetch" href="/docs/assets/js/60.c29418e5.js"><link rel="prefetch" href="/docs/assets/js/61.4447d314.js"><link rel="prefetch" href="/docs/assets/js/62.eb9d79f3.js"><link rel="prefetch" href="/docs/assets/js/63.f53fb7ff.js"><link rel="prefetch" href="/docs/assets/js/64.4793ef5f.js"><link rel="prefetch" href="/docs/assets/js/65.d901a504.js"><link rel="prefetch" href="/docs/assets/js/66.fa645b07.js"><link rel="prefetch" href="/docs/assets/js/67.8619c78e.js"><link rel="prefetch" href="/docs/assets/js/68.d40ade58.js"><link rel="prefetch" href="/docs/assets/js/69.04781fa0.js"><link rel="prefetch" href="/docs/assets/js/7.2bccbfe1.js"><link rel="prefetch" href="/docs/assets/js/70.7f824a10.js"><link rel="prefetch" href="/docs/assets/js/71.8b239ed3.js"><link rel="prefetch" href="/docs/assets/js/72.9b8fe5af.js"><link rel="prefetch" href="/docs/assets/js/73.f01a95df.js"><link rel="prefetch" href="/docs/assets/js/74.68aa869f.js"><link rel="prefetch" href="/docs/assets/js/75.054b6e7c.js"><link rel="prefetch" href="/docs/assets/js/76.0ec0c9f6.js"><link rel="prefetch" href="/docs/assets/js/77.b94fc337.js"><link rel="prefetch" href="/docs/assets/js/78.8dc6e3c7.js"><link rel="prefetch" href="/docs/assets/js/79.43c1e80f.js"><link rel="prefetch" href="/docs/assets/js/80.2f49fc9a.js"><link rel="prefetch" href="/docs/assets/js/81.01873eab.js"><link rel="prefetch" href="/docs/assets/js/82.ff972152.js"><link rel="prefetch" href="/docs/assets/js/83.fd96e257.js"><link rel="prefetch" href="/docs/assets/js/84.6b5ad870.js"><link rel="prefetch" href="/docs/assets/js/85.aa145a44.js"><link rel="prefetch" href="/docs/assets/js/86.22bc73f0.js"><link rel="prefetch" href="/docs/assets/js/87.0e3f4722.js"><link rel="prefetch" href="/docs/assets/js/88.2fc83d34.js"><link rel="prefetch" href="/docs/assets/js/89.d5f8d513.js"><link rel="prefetch" href="/docs/assets/js/90.d6b8c442.js"><link rel="prefetch" href="/docs/assets/js/91.87933fe4.js"><link rel="prefetch" href="/docs/assets/js/92.cdeef348.js"><link rel="prefetch" href="/docs/assets/js/93.1d40e822.js"><link rel="prefetch" href="/docs/assets/js/94.4260160f.js"><link rel="prefetch" href="/docs/assets/js/95.88d7b0b4.js"><link rel="prefetch" href="/docs/assets/js/96.0d4df100.js"><link rel="prefetch" href="/docs/assets/js/97.209c558e.js"><link rel="prefetch" href="/docs/assets/js/98.06f0626c.js"><link rel="prefetch" href="/docs/assets/js/99.b1b38c26.js"><link rel="prefetch" href="/docs/assets/js/vendors~docsearch.aae61d50.js"> <link rel="stylesheet" href="/docs/assets/css/0.styles.4ef1e280.css"> </head> <body> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><img src="/docs/assets/img/icon.svg" alt="Elementor Developers" class="logo"> <span class="site-name can-hide">Elementor Developers</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> </div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Getting Started" class="dropdown-title"><span class="title">Getting Started</span> <span class="arrow down"></span></button> <button type="button" aria-label="Getting Started" class="mobile-dropdown-title"><span class="title">Getting Started</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"> <a href="/docs/getting-started/" class="nav-link"> Getting Started </a></li><li class="dropdown-item"> <a href="/docs/getting-started/first-addon/" class="nav-link"> Your First Addon </a></li><li class="dropdown-item"> <a href="/docs/addons/" aria-current="page" class="nav-link router-link-exact-active router-link-active"> Building Addons </a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Internals" class="dropdown-title"><span class="title">Internals</span> <span class="arrow down"></span></button> <button type="button" aria-label="Internals" class="mobile-dropdown-title"><span class="title">Internals</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"> <a href="/docs/editor/" class="nav-link"> The Editor </a></li><li class="dropdown-item"> <a href="/docs/editor-controls/" class="nav-link"> Editor Controls </a></li><li class="dropdown-item"> <a href="/docs/data-structure/" class="nav-link"> Data Structure </a></li><li class="dropdown-item"> <a href="/docs/managers/" class="nav-link"> Managers </a></li><li class="dropdown-item"> <a href="/docs/scripts-styles/" class="nav-link"> Scripts & Styles </a></li><li class="dropdown-item"> <a href="/docs/hooks/" class="nav-link"> Hooks </a></li><li class="dropdown-item"> <a href="/docs/deprecations/" class="nav-link"> Deprecations </a></li><li class="dropdown-item"> <a href="/docs/cli/" class="nav-link"> CLI </a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Components" class="dropdown-title"><span class="title">Components</span> <span class="arrow down"></span></button> <button type="button" aria-label="Components" class="mobile-dropdown-title"><span class="title">Components</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"> <a href="/docs/widgets/" class="nav-link"> Widgets </a></li><li class="dropdown-item"> <a href="/docs/controls/" class="nav-link"> Controls </a></li><li class="dropdown-item"> <a href="/docs/dynamic-tags/" class="nav-link"> Dynamic Tags </a></li><li class="dropdown-item"> <a href="/docs/form-actions/" class="nav-link"> Form Actions </a></li><li class="dropdown-item"> <a href="/docs/form-fields/" class="nav-link"> Form Fields </a></li><li class="dropdown-item"> <a href="/docs/theme-conditions/" class="nav-link"> Theme Conditions </a></li><li class="dropdown-item"> <a href="/docs/themes/" class="nav-link"> Theme Locations </a></li><li class="dropdown-item"> <a href="/docs/context-menu/" class="nav-link"> Context Menu </a></li><li class="dropdown-item"> <a href="/docs/finder/" class="nav-link"> Finder </a></li></ul></div></div><div class="nav-item"><a href="https://developers.elementor.com/blog/" target="_blank" rel="noopener noreferrer" class="nav-link external"> Blog <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/elementor/elementor-developers-docs" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Getting Started" class="dropdown-title"><span class="title">Getting Started</span> <span class="arrow down"></span></button> <button type="button" aria-label="Getting Started" class="mobile-dropdown-title"><span class="title">Getting Started</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"> <a href="/docs/getting-started/" class="nav-link"> Getting Started </a></li><li class="dropdown-item"> <a href="/docs/getting-started/first-addon/" class="nav-link"> Your First Addon </a></li><li class="dropdown-item"> <a href="/docs/addons/" aria-current="page" class="nav-link router-link-exact-active router-link-active"> Building Addons </a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Internals" class="dropdown-title"><span class="title">Internals</span> <span class="arrow down"></span></button> <button type="button" aria-label="Internals" class="mobile-dropdown-title"><span class="title">Internals</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"> <a href="/docs/editor/" class="nav-link"> The Editor </a></li><li class="dropdown-item"> <a href="/docs/editor-controls/" class="nav-link"> Editor Controls </a></li><li class="dropdown-item"> <a href="/docs/data-structure/" class="nav-link"> Data Structure </a></li><li class="dropdown-item"> <a href="/docs/managers/" class="nav-link"> Managers </a></li><li class="dropdown-item"> <a href="/docs/scripts-styles/" class="nav-link"> Scripts & Styles </a></li><li class="dropdown-item"> <a href="/docs/hooks/" class="nav-link"> Hooks </a></li><li class="dropdown-item"> <a href="/docs/deprecations/" class="nav-link"> Deprecations </a></li><li class="dropdown-item"> <a href="/docs/cli/" class="nav-link"> CLI </a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Components" class="dropdown-title"><span class="title">Components</span> <span class="arrow down"></span></button> <button type="button" aria-label="Components" class="mobile-dropdown-title"><span class="title">Components</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"> <a href="/docs/widgets/" class="nav-link"> Widgets </a></li><li class="dropdown-item"> <a href="/docs/controls/" class="nav-link"> Controls </a></li><li class="dropdown-item"> <a href="/docs/dynamic-tags/" class="nav-link"> Dynamic Tags </a></li><li class="dropdown-item"> <a href="/docs/form-actions/" class="nav-link"> Form Actions </a></li><li class="dropdown-item"> <a href="/docs/form-fields/" class="nav-link"> Form Fields </a></li><li class="dropdown-item"> <a href="/docs/theme-conditions/" class="nav-link"> Theme Conditions </a></li><li class="dropdown-item"> <a href="/docs/themes/" class="nav-link"> Theme Locations </a></li><li class="dropdown-item"> <a href="/docs/context-menu/" class="nav-link"> Context Menu </a></li><li class="dropdown-item"> <a href="/docs/finder/" class="nav-link"> Finder </a></li></ul></div></div><div class="nav-item"><a href="https://developers.elementor.com/blog/" target="_blank" rel="noopener noreferrer" class="nav-link external"> Blog <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/elementor/elementor-developers-docs" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Building Addons</span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/addons/" aria-current="page" class="active sidebar-link">Introduction</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Elementor Addon</span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/addons/file-folder-structure/" class="sidebar-link">File & Folder Structure</a></li><li><a href="/docs/addons/plugin-header/" class="sidebar-link">Header Comments</a></li><li><a href="/docs/addons/load/" class="sidebar-link">Loading Process</a></li><li><a href="/docs/addons/main-class/" class="sidebar-link">Main Class</a></li><li><a href="/docs/addons/compatibility/" class="sidebar-link">Compatibility Checks</a></li><li><a href="/docs/addons/initialization/" class="sidebar-link">Initialization Process</a></li><li><a href="/docs/addons/namespaces/" class="sidebar-link">Using Namespaces</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Examples</span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/addons/addon-example/" class="sidebar-link">Addon Wrapper Example</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="building-addons"><a href="#building-addons" class="header-anchor">#</a> Building Addons</h1> <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>Elementor Core</span> <span class="badge warning" style="vertical-align:top;" data-v-15b7b770>Basic</span> <p>Elementor addons are basically WordPress plugins that add functionality to Elementor. Before you start creating Elementor addons, you need a background in creating WordPress plugins. Afterwards, you need to learn the basics of how Elementor addons are built.</p> <h2 id="wordpress-plugins"><a href="#wordpress-plugins" class="header-anchor">#</a> WordPress Plugins</h2> <p><a href="https://wordpress.org/" target="_blank" rel="noopener noreferrer">WordPress<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> has a very extendable code base. It lets anyone extend core functionality by using plugins. For in-depth information check out the <a href="https://developer.wordpress.org/plugins/" target="_blank" rel="noopener noreferrer">Plugin Handbook<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, which is part of the <a href="https://developer.wordpress.org/" target="_blank" rel="noopener noreferrer">WordPress Developer Resources<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <h2 id="elementor-addon"><a href="#elementor-addon" class="header-anchor">#</a> Elementor Addon</h2> <p>When creating Elementor addons, you should implement all WordPress coding standards and best practices. In addition, you should follow the Elementor standards and best practices as outlined on this site.</p> <p>To start creating an Elementor addon, you first need to build a simple WordPress plugin focused on Elementor, using the following information:</p> <ul><li><a href="/docs/addons/file-folder-structure/">File & Folder Structure</a></li> <li><a href="/docs/addons/plugin-header/">Header Comments</a></li> <li><a href="/docs/addons/load/">Loading Process</a></li> <li><a href="/docs/addons/main-class/">Main Class</a></li> <li><a href="/docs/addons/compatibility/">Compatibility Checks</a></li> <li><a href="/docs/addons/initialization/">Initialization Process</a></li> <li><a href="/docs/addons/namespaces/">Using Namespaces</a></li> <li><a href="/docs/addons/addon-example/">Addon Example</a></li></ul> <h2 id="what-s-next"><a href="#what-s-next" class="header-anchor">#</a> What's Next?</h2> <p>When you finish building a wrapper, you can start extending Elementor components. Check out the following tutorials for details and examples of how you can extend individual components:</p> <ul><li><a href="/docs/widgets/">Create new widgets</a></li> <li><a href="/docs/controls/">Create new controls</a></li> <li><a href="/docs/dynamic-tags/">Create new dynamic tags</a></li> <li><a href="/docs/form-actions/">Create new form actions</a></li> <li><a href="/docs/form-fields/">Create new form fields</a></li> <li><a href="/docs/finder/">Create new finder categories</a></li> <li><a href="/docs/context-menu/">Extend the context menu</a></li></ul> <p>Of course these are just some of the ways you can extend Elementor.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/elementor/elementor-developers-docs/edit/master/src/addons/index.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">11/6/2022, 7:15:25 PM</span></div></footer> <div class="page-nav"><p class="inner"> <span class="next"><a href="/docs/addons/file-folder-structure/"> File & Folder Structure </a> → </span></p></div> </main></div><div class="global-ui"></div></div> <script src="/docs/assets/js/app.c3462fb1.js" defer></script><script src="/docs/assets/js/2.dc2e3e99.js" defer></script><script src="/docs/assets/js/1.807b5085.js" defer></script><script src="/docs/assets/js/26.821fa7d5.js" defer></script><script src="/docs/assets/js/4.b3da44be.js" defer></script><script src="/docs/assets/js/19.ffc7ee04.js" defer></script> </body> </html>