CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Creating Your First Addon | 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/207.3996a826.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/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/26.821fa7d5.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"> Elementor Developers</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">Getting Started </button> <button type="button" aria-label="Getting Started" class="mobile-dropdown-title">Getting Started </button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"> <a href="/docs/getting-started/" class="nav-link router-link-active"> Getting Started </a></li><li class="dropdown-item"> <a href="/docs/getting-started/first-addon/" aria-current="page" class="nav-link router-link-exact-active router-link-active"> Your First Addon </a></li><li class="dropdown-item"> <a href="/docs/addons/" class="nav-link"> Building Addons </a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Internals" class="dropdown-title">Internals </button> <button type="button" aria-label="Internals" class="mobile-dropdown-title">Internals </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">Components </button> <button type="button" aria-label="Components" class="mobile-dropdown-title">Components </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 <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> (opens new window)</a></div> <a href="https://github.com/elementor/elementor-developers-docs" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <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> (opens new window)</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">Getting Started </button> <button type="button" aria-label="Getting Started" class="mobile-dropdown-title">Getting Started </button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"> <a href="/docs/getting-started/" class="nav-link router-link-active"> Getting Started </a></li><li class="dropdown-item"> <a href="/docs/getting-started/first-addon/" aria-current="page" class="nav-link router-link-exact-active router-link-active"> Your First Addon </a></li><li class="dropdown-item"> <a href="/docs/addons/" class="nav-link"> Building Addons </a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Internals" class="dropdown-title">Internals </button> <button type="button" aria-label="Internals" class="mobile-dropdown-title">Internals </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">Components </button> <button type="button" aria-label="Components" class="mobile-dropdown-title">Components </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 <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> (opens new window)</a></div> <a href="https://github.com/elementor/elementor-developers-docs" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <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> (opens new window)</a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0">Getting Started  <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/getting-started/" aria-current="page" class="sidebar-link">What is Elementor?</a></li><li><a href="/docs/getting-started/addons/" class="sidebar-link">What is an Elementor addon?</a></li></ul></section></li><li><section class="sidebar-group depth-0">Developer Docs  <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/getting-started/usage/" class="sidebar-link">The Docs Website</a></li><li><a href="/docs/getting-started/internals/" class="sidebar-link">Elementor Internals</a></li><li><a href="/docs/getting-started/components/" class="sidebar-link">Elementor Components</a></li></ul></section></li><li><section class="sidebar-group depth-0">Start Coding  <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/getting-started/requirements/" class="sidebar-link">Requirements</a></li><li><a href="/docs/getting-started/best-practices/" class="sidebar-link">Best Practices</a></li><li><a href="/docs/getting-started/first-addon/" aria-current="page" class="active sidebar-link">Creating Your First Addon</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="creating-your-first-addon"><a href="#creating-your-first-addon" class="header-anchor">#</a> Creating Your First Addon</h1> Elementor Core Basic Let’s create a simple Elementor addon that adds two widgets to Elementor. The first will be a simple "Hello World" widget while the second will be similar, but with improved functionality. <h2 id="addon-folder-structure"><a href="#addon-folder-structure" class="header-anchor">#</a> Addon Folder Structure</h2> The first step will be to register the two widgets. The addon should be placed on your site’s <code>wp-content/plugins/</code> folder with the folder structure looking like this: <div class="language- line-numbers-mode"><pre class="language-text"><code>elementor-addon/ | ├─ widgets/ | ├─ hello-world-widget-1.php | └─ hello-world-widget-2.php | └─ elementor-addon.php </code></pre> <div class="line-numbers-wrapper">1 2 3 4 5 6 7 </div></div>You can zip the entire <code>elementor-addon</code> folder and upload the <code>zip</code> file to your site from "WordPress Dashboard" > "Plugins" screen. <h2 id="addon-files"><a href="#addon-files" class="header-anchor">#</a> Addon Files</h2> These widgets will require several files. The main file <code>elementor-addon.php</code> will register the widgets. The <code>hello-world-widget-1.php</code> and <code>hello-world-widget-2.php</code> files will control the widget’s functionality: <h3 id="the-main-addon-file"><a href="#the-main-addon-file" class="header-anchor">#</a> The Main Addon File</h3> elementor-addon.php <div class="language-php line-numbers-mode"><pre class="language-php"><code><?php /** * Plugin Name: Elementor Addon * Description: Simple hello world widgets for Elementor. * Version: 1.0.0 * Author: Elementor Developer * Author URI: https://developers.elementor.com/ * Text Domain: elementor-addon * * Requires Plugins: elementor * Elementor tested up to: 3.24.0 * Elementor Pro tested up to: 3.24.0 */ function register_hello_world_widget( $widgets_manager ) { require_once( __DIR__ . '/widgets/hello-world-widget-1.php' ); require_once( __DIR__ . '/widgets/hello-world-widget-2.php' ); $widgets_manager->register( new \Elementor_Hello_World_Widget_1() ); $widgets_manager->register( new \Elementor_Hello_World_Widget_2() ); } add_action( 'elementor/widgets/register', 'register_hello_world_widget' ); </code></pre> <div class="line-numbers-wrapper">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 </div></div>Header comments are the standard way WordPress uses to provide information about plugins: <img src="/docs/assets/img/elementor-addon-plugin-screen.png" alt="Plugins screen"> Elementor register new widgets with the widget registration function. Here, we will use the <code>elementor/widgets/register</code> lifecycle hook to run the <code>register_hello_world_widget()</code> function. The function first loads the two widget files and then registers the widget classes using the widget manager. After running the code, the widget panel will display the two widgets: <img src="/docs/assets/img/elementor-addon-widgets.png" alt="The two widgets in the widgets panel"> <h3 id="the-first-widget"><a href="#the-first-widget" class="header-anchor">#</a> The First Widget</h3> The first widget is <code>widgets/hello-world-widget-1.php</code>. It’s quite simple, it simply prints the text, "Hello World" on the screen. Create it using the following code: <div class="language-php line-numbers-mode"><pre class="language-php"><code><?php class Elementor_Hello_World_Widget_1 extends \Elementor\Widget_Base { public function get_name() { return 'hello_world_widget_1'; } public function get_title() { return esc_html__( 'Hello World 1', 'elementor-addon' ); } public function get_icon() { return 'eicon-code'; } public function get_categories() { return [ 'basic' ]; } public function get_keywords() { return [ 'hello', 'world' ]; } protected function render() { ?> <p> Hello World </p> <?php } protected function content_template() { ?> <p> Hello World </p> <?php } } </code></pre> <div class="line-numbers-wrapper">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 </div></div><h3 id="the-second-widget"><a href="#the-second-widget" class="header-anchor">#</a> The Second Widget</h3> The second widget is <code>widgets/hello-world-widget-2.php</code>. It creates two controls in the widget panel. One allows the user to enter their own text and style the text with a custom color (with "Hello World" being the default text). Create it using the following code: <div class="language-php line-numbers-mode"><pre class="language-php"><code><?php class Elementor_Hello_World_Widget_2 extends \Elementor\Widget_Base { public function get_name() { return 'hello_world_widget_2'; } public function get_title() { return esc_html__( 'Hello World 2', 'elementor-addon' ); } public function get_icon() { return 'eicon-code'; } public function get_categories() { return [ 'basic' ]; } public function get_keywords() { return [ 'hello', 'world' ]; } protected function register_controls() { // Content Tab Start $this->start_controls_section( 'section_title', [ 'label' => esc_html__( 'Title', 'elementor-addon' ), 'tab' => \Elementor\Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'title', [ 'label' => esc_html__( 'Title', 'elementor-addon' ), 'type' => \Elementor\Controls_Manager::TEXTAREA, 'default' => esc_html__( 'Hello world', 'elementor-addon' ), ] ); $this->end_controls_section(); // Content Tab End // Style Tab Start $this->start_controls_section( 'section_title_style', [ 'label' => esc_html__( 'Title', 'elementor-addon' ), 'tab' => \Elementor\Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'title_color', [ 'label' => esc_html__( 'Text Color', 'elementor-addon' ), 'type' => \Elementor\Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .hello-world' => 'color: {{VALUE}};', ], ] ); $this->end_controls_section(); // Style Tab End } protected function render() { $settings = $this->get_settings_for_display(); if ( empty( $settings['title'] ) ) { return; } ?> <p class="hello-world"> <?php echo $settings['title']; ?> </p> <?php } protected function content_template() { ?> <# if ( '' === settings.title ) { return; } #> <p class="hello-world"> {{ settings.title }} </p> <?php } } </code></pre> <div class="line-numbers-wrapper">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 </div></div>Now that you’ve seen how easy it is to create your first Elementor addon, it’s time to take advantage of the growing Elementor market and start working on your own cool ideas. Continue reading more about <a href="/docs/addons/">Building Advanced Addons</a> with best practices, coding standards and even more <a href="/docs/addons/addon-example/">code examples</a>.</div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/elementor/elementor-developers-docs/edit/master/src/getting-started/first-addon.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <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> (opens new window)</div> <div class="last-updated">Last Updated: 9/18/2024, 6:23:39 PM</div></footer> <div class="page-nav"> ← <a href="/docs/getting-started/best-practices/" class="prev"> Best Practices </a> </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/207.3996a826.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>