CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Scripts & Styles | 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/270.5e1c4681.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/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/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/" 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"><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/" aria-current="page" class="nav-link router-link-exact-active router-link-active"> 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/" 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"><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/" aria-current="page" class="nav-link router-link-exact-active router-link-active"> 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>Scripts & Styles</span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/scripts-styles/" 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>Frontend</span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/scripts-styles/frontend-scripts/" class="sidebar-link">Frontend Scripts</a></li><li><a href="/docs/scripts-styles/frontend-styles/" class="sidebar-link">Frontend Styles</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Editor</span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/scripts-styles/editor-scripts/" class="sidebar-link">Editor Scripts</a></li><li><a href="/docs/scripts-styles/editor-styles/" class="sidebar-link">Editor Styles</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Preview</span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/scripts-styles/preview-scripts/" class="sidebar-link">Preview Scripts</a></li><li><a href="/docs/scripts-styles/preview-styles/" class="sidebar-link">Preview Styles</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Widgets</span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/scripts-styles/widget-scripts/" class="sidebar-link">Widget Scripts</a></li><li><a href="/docs/scripts-styles/widget-styles/" class="sidebar-link">Widget Styles</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Controls</span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/scripts-styles/control-scripts/" class="sidebar-link">Control Scripts</a></li><li><a href="/docs/scripts-styles/control-styles/" class="sidebar-link">Control Styles</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="scripts-styles"><a href="#scripts-styles" class="header-anchor">#</a> Scripts & Styles</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>Intermediate</span> <p>Just like WordPress, Elementor has special hooks to register custom scripts and styles. It's very important to use the correct hook in order to improve site performance. Using Elementor recommendations and best practices helps Elementor enqueue files dynamically only when they are used, reducing performance impact.</p> <h2 id="static-vs-dynamic-loading"><a href="#static-vs-dynamic-loading" class="header-anchor">#</a> Static vs. Dynamic Loading</h2> <p>Some scripts should always be loaded, others only when used. For example, editor scripts should always be loaded, while widget scripts should only be loaded when they are being used. Elementor allows developers the freedom of choosing either method.</p> <p>Each script and stylesheet increases the page size. This is why it is best practice to register assets and let Elementor decide whether or not to load them. Elementor checks to see if the page uses an element requiring your script, and only then it is loaded.</p> <h2 id="frontend-scripts-styles"><a href="#frontend-scripts-styles" class="header-anchor">#</a> Frontend Scripts & Styles</h2> <p>Learn more about registering new scripts and styles to frontend pages:</p> <ul><li><a href="/docs/scripts-styles/frontend-scripts/">Frontend Scripts</a></li> <li><a href="/docs/scripts-styles/frontend-styles/">Frontend Styles</a></li></ul> <h2 id="editor-scripts-styles"><a href="#editor-scripts-styles" class="header-anchor">#</a> Editor Scripts & Styles</h2> <p>Learn more about registering new scripts and styles to the <a href="./../editor/elementor-panel">Elementor Editor</a>:</p> <ul><li><a href="/docs/scripts-styles/editor-scripts/">Editor Scripts</a></li> <li><a href="/docs/scripts-styles/editor-styles/">Editor Styles</a></li></ul> <h2 id="preview-scripts-styles"><a href="#preview-scripts-styles" class="header-anchor">#</a> Preview Scripts & Styles</h2> <p>Learn more about registering new scripts and styles to <a href="./../editor/elementor-preview">Elementor preview</a>:</p> <ul><li><a href="/docs/scripts-styles/preview-scripts/">Preview Scripts</a></li> <li><a href="/docs/scripts-styles/preview-styles/">Preview Styles</a></li></ul> <h2 id="widget-scripts-styles"><a href="#widget-scripts-styles" class="header-anchor">#</a> Widget Scripts & Styles</h2> <p>Learn more about registering custom scripts and styles to <a href="/docs/widgets/">Elementor widgets</a>:</p> <ul><li><a href="/docs/scripts-styles/widget-scripts/">Widget Scripts</a></li> <li><a href="/docs/scripts-styles/widget-styles/">Widget Styles</a></li></ul> <h2 id="controls-scripts-styles"><a href="#controls-scripts-styles" class="header-anchor">#</a> Controls Scripts & Styles</h2> <p>Learn more about registering custom scripts and styles to <a href="/docs/controls/">Elementor controls</a>:</p> <ul><li><a href="/docs/scripts-styles/control-scripts/">Control Scripts</a></li> <li><a href="/docs/scripts-styles/control-styles/">Control Styles</a></li></ul></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/elementor/elementor-developers-docs/edit/master/src/scripts-styles/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">12/21/2023, 7:25:06 AM</span></div></footer> <div class="page-nav"><p class="inner"> <span class="next"><a href="/docs/scripts-styles/frontend-scripts/"> Frontend Scripts </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/270.5e1c4681.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>