CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Complex Example | 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.79554685.css" as="style"><link rel="preload" href="/docs/assets/js/app.4a037537.js" as="script"><link rel="preload" href="/docs/assets/js/2.32541751.js" as="script"><link rel="preload" href="/docs/assets/js/1.3d99b080.js" as="script"><link rel="preload" href="/docs/assets/js/84.eb0d48eb.js" as="script"><link rel="preload" href="/docs/assets/js/4.de33d348.js" as="script"><link rel="preload" href="/docs/assets/js/19.d9598f47.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.836effd9.js"><link rel="prefetch" href="/docs/assets/js/100.592bdef9.js"><link rel="prefetch" href="/docs/assets/js/101.642cd354.js"><link rel="prefetch" href="/docs/assets/js/102.d32dbf67.js"><link rel="prefetch" href="/docs/assets/js/103.30c9fa76.js"><link rel="prefetch" href="/docs/assets/js/104.b220f4d8.js"><link rel="prefetch" href="/docs/assets/js/105.ba82ff45.js"><link rel="prefetch" href="/docs/assets/js/106.d8661b4b.js"><link rel="prefetch" href="/docs/assets/js/107.04f3ba5b.js"><link rel="prefetch" href="/docs/assets/js/108.7b8954e1.js"><link rel="prefetch" href="/docs/assets/js/109.229e8f06.js"><link rel="prefetch" href="/docs/assets/js/11.5d7506cb.js"><link rel="prefetch" href="/docs/assets/js/110.2b7f5b07.js"><link rel="prefetch" href="/docs/assets/js/111.a6a1e430.js"><link rel="prefetch" href="/docs/assets/js/112.edd2a898.js"><link rel="prefetch" href="/docs/assets/js/113.30ca7f70.js"><link rel="prefetch" href="/docs/assets/js/114.f7543676.js"><link rel="prefetch" href="/docs/assets/js/115.aba29b47.js"><link rel="prefetch" href="/docs/assets/js/116.ee502de1.js"><link rel="prefetch" href="/docs/assets/js/117.065bcc3d.js"><link rel="prefetch" href="/docs/assets/js/118.4e0ebe1e.js"><link rel="prefetch" href="/docs/assets/js/119.e32f68a4.js"><link rel="prefetch" href="/docs/assets/js/12.a4686364.js"><link rel="prefetch" href="/docs/assets/js/120.a69461e0.js"><link rel="prefetch" href="/docs/assets/js/121.32a94758.js"><link rel="prefetch" href="/docs/assets/js/122.bd4941a9.js"><link rel="prefetch" href="/docs/assets/js/123.fad58e3c.js"><link rel="prefetch" href="/docs/assets/js/124.e696a0e8.js"><link rel="prefetch" href="/docs/assets/js/125.996f913d.js"><link rel="prefetch" href="/docs/assets/js/126.e58dc590.js"><link rel="prefetch" href="/docs/assets/js/127.1c907183.js"><link rel="prefetch" href="/docs/assets/js/128.d240b275.js"><link rel="prefetch" href="/docs/assets/js/129.0b9dcb10.js"><link rel="prefetch" href="/docs/assets/js/13.6612b3d3.js"><link rel="prefetch" href="/docs/assets/js/130.a4823577.js"><link rel="prefetch" href="/docs/assets/js/131.cdc983f8.js"><link rel="prefetch" href="/docs/assets/js/132.dae10d34.js"><link rel="prefetch" href="/docs/assets/js/133.e0fb4088.js"><link rel="prefetch" href="/docs/assets/js/134.df517645.js"><link rel="prefetch" href="/docs/assets/js/135.c2452720.js"><link rel="prefetch" href="/docs/assets/js/136.4abfbe1d.js"><link rel="prefetch" href="/docs/assets/js/137.978aa079.js"><link rel="prefetch" href="/docs/assets/js/138.699baffe.js"><link rel="prefetch" href="/docs/assets/js/139.95e222f4.js"><link rel="prefetch" href="/docs/assets/js/14.87a30c47.js"><link rel="prefetch" href="/docs/assets/js/140.326732cc.js"><link rel="prefetch" href="/docs/assets/js/141.d9188a1b.js"><link rel="prefetch" href="/docs/assets/js/142.05f131a9.js"><link rel="prefetch" href="/docs/assets/js/143.adde1842.js"><link rel="prefetch" href="/docs/assets/js/144.659fc30a.js"><link rel="prefetch" href="/docs/assets/js/145.890a4f01.js"><link rel="prefetch" href="/docs/assets/js/146.0a1ecd57.js"><link rel="prefetch" href="/docs/assets/js/147.df871804.js"><link rel="prefetch" href="/docs/assets/js/148.f48f265b.js"><link rel="prefetch" href="/docs/assets/js/149.be511f13.js"><link rel="prefetch" href="/docs/assets/js/15.1d3c9083.js"><link rel="prefetch" href="/docs/assets/js/150.982c278d.js"><link rel="prefetch" href="/docs/assets/js/151.a1917d88.js"><link rel="prefetch" href="/docs/assets/js/152.e0c78065.js"><link rel="prefetch" href="/docs/assets/js/153.568a6f41.js"><link rel="prefetch" href="/docs/assets/js/154.e1c36835.js"><link rel="prefetch" href="/docs/assets/js/155.8222a311.js"><link rel="prefetch" href="/docs/assets/js/156.4103ca64.js"><link rel="prefetch" href="/docs/assets/js/157.6c786533.js"><link rel="prefetch" href="/docs/assets/js/158.ce60ce5a.js"><link rel="prefetch" href="/docs/assets/js/159.5a20eb5f.js"><link rel="prefetch" href="/docs/assets/js/16.397abca0.js"><link rel="prefetch" href="/docs/assets/js/160.3bcb2ffe.js"><link rel="prefetch" href="/docs/assets/js/161.c89a9398.js"><link rel="prefetch" href="/docs/assets/js/162.71181b59.js"><link rel="prefetch" href="/docs/assets/js/163.5a5239e8.js"><link rel="prefetch" href="/docs/assets/js/164.197e397b.js"><link rel="prefetch" href="/docs/assets/js/165.17641710.js"><link rel="prefetch" href="/docs/assets/js/166.9d88c27e.js"><link rel="prefetch" href="/docs/assets/js/167.576e27cb.js"><link rel="prefetch" href="/docs/assets/js/168.eaf86ed1.js"><link rel="prefetch" href="/docs/assets/js/169.92587866.js"><link rel="prefetch" href="/docs/assets/js/17.024e95ed.js"><link rel="prefetch" href="/docs/assets/js/170.6e2687cf.js"><link rel="prefetch" href="/docs/assets/js/171.4db36e93.js"><link rel="prefetch" href="/docs/assets/js/172.98d3bfdd.js"><link rel="prefetch" href="/docs/assets/js/173.2af35b2a.js"><link rel="prefetch" href="/docs/assets/js/174.aac095a2.js"><link rel="prefetch" href="/docs/assets/js/175.08de05b9.js"><link rel="prefetch" href="/docs/assets/js/176.c4de5f71.js"><link rel="prefetch" href="/docs/assets/js/177.1df000bb.js"><link rel="prefetch" href="/docs/assets/js/178.a63f5b44.js"><link rel="prefetch" href="/docs/assets/js/179.6336538e.js"><link rel="prefetch" href="/docs/assets/js/18.e25b2100.js"><link rel="prefetch" href="/docs/assets/js/180.240019ad.js"><link rel="prefetch" href="/docs/assets/js/181.1e021c83.js"><link rel="prefetch" href="/docs/assets/js/182.58e74e74.js"><link rel="prefetch" href="/docs/assets/js/183.a95f6264.js"><link rel="prefetch" href="/docs/assets/js/184.e8e03029.js"><link rel="prefetch" href="/docs/assets/js/185.39c65c16.js"><link rel="prefetch" href="/docs/assets/js/186.2cb1240a.js"><link rel="prefetch" href="/docs/assets/js/187.51876d64.js"><link rel="prefetch" href="/docs/assets/js/188.41802096.js"><link rel="prefetch" href="/docs/assets/js/189.0fa2e6ac.js"><link rel="prefetch" href="/docs/assets/js/190.dd9062ef.js"><link rel="prefetch" href="/docs/assets/js/191.79a29e04.js"><link rel="prefetch" href="/docs/assets/js/192.5c535f99.js"><link rel="prefetch" href="/docs/assets/js/193.f31c2ab4.js"><link rel="prefetch" href="/docs/assets/js/194.b4b736cc.js"><link rel="prefetch" href="/docs/assets/js/195.7ab4dd64.js"><link rel="prefetch" href="/docs/assets/js/196.32db08a9.js"><link rel="prefetch" href="/docs/assets/js/197.3993b652.js"><link rel="prefetch" href="/docs/assets/js/198.79404859.js"><link rel="prefetch" href="/docs/assets/js/199.8f246053.js"><link rel="prefetch" href="/docs/assets/js/20.1dd6acbb.js"><link rel="prefetch" href="/docs/assets/js/200.5d363006.js"><link rel="prefetch" href="/docs/assets/js/201.63941387.js"><link rel="prefetch" href="/docs/assets/js/202.a7bf3a52.js"><link rel="prefetch" href="/docs/assets/js/203.edb11998.js"><link rel="prefetch" href="/docs/assets/js/204.6b1e02a1.js"><link rel="prefetch" href="/docs/assets/js/205.3795ff9b.js"><link rel="prefetch" href="/docs/assets/js/206.b33a9272.js"><link rel="prefetch" href="/docs/assets/js/207.410590a0.js"><link rel="prefetch" href="/docs/assets/js/208.03a19797.js"><link rel="prefetch" href="/docs/assets/js/209.8fcb01b2.js"><link rel="prefetch" href="/docs/assets/js/21.b067890a.js"><link rel="prefetch" href="/docs/assets/js/210.af76d0b9.js"><link rel="prefetch" href="/docs/assets/js/211.a45e7bdf.js"><link rel="prefetch" href="/docs/assets/js/212.34d7bb48.js"><link rel="prefetch" href="/docs/assets/js/213.d462c22c.js"><link rel="prefetch" href="/docs/assets/js/214.7c883821.js"><link rel="prefetch" href="/docs/assets/js/215.84a17e7c.js"><link rel="prefetch" href="/docs/assets/js/216.045e2fd6.js"><link rel="prefetch" href="/docs/assets/js/217.6e2e41f3.js"><link rel="prefetch" href="/docs/assets/js/218.83e017d9.js"><link rel="prefetch" href="/docs/assets/js/219.70d7d796.js"><link rel="prefetch" href="/docs/assets/js/22.3b421a30.js"><link rel="prefetch" href="/docs/assets/js/220.47a464fc.js"><link rel="prefetch" href="/docs/assets/js/221.a062db54.js"><link rel="prefetch" href="/docs/assets/js/222.d247ea4d.js"><link rel="prefetch" href="/docs/assets/js/223.c40d128f.js"><link rel="prefetch" href="/docs/assets/js/224.7ad47a13.js"><link rel="prefetch" href="/docs/assets/js/225.73b1d0d2.js"><link rel="prefetch" href="/docs/assets/js/226.dfeca7e1.js"><link rel="prefetch" href="/docs/assets/js/227.6b93883f.js"><link rel="prefetch" href="/docs/assets/js/228.56d2c633.js"><link rel="prefetch" href="/docs/assets/js/229.0cee4ab7.js"><link rel="prefetch" href="/docs/assets/js/23.c9ebadae.js"><link rel="prefetch" href="/docs/assets/js/230.73285e9b.js"><link rel="prefetch" href="/docs/assets/js/231.4217bc4d.js"><link rel="prefetch" href="/docs/assets/js/232.884d57ed.js"><link rel="prefetch" href="/docs/assets/js/233.4129a142.js"><link rel="prefetch" href="/docs/assets/js/234.e3225657.js"><link rel="prefetch" href="/docs/assets/js/235.8da65149.js"><link rel="prefetch" href="/docs/assets/js/236.44a84cfa.js"><link rel="prefetch" href="/docs/assets/js/237.45d73288.js"><link rel="prefetch" href="/docs/assets/js/238.ffecbf73.js"><link rel="prefetch" href="/docs/assets/js/239.df10139c.js"><link rel="prefetch" href="/docs/assets/js/24.5520ed7c.js"><link rel="prefetch" href="/docs/assets/js/240.1641bb69.js"><link rel="prefetch" href="/docs/assets/js/241.920ef0fe.js"><link rel="prefetch" href="/docs/assets/js/242.657b7d78.js"><link rel="prefetch" href="/docs/assets/js/243.5a2332b7.js"><link rel="prefetch" href="/docs/assets/js/244.1dbe64bc.js"><link rel="prefetch" href="/docs/assets/js/245.e4027f3f.js"><link rel="prefetch" href="/docs/assets/js/246.e55bef8c.js"><link rel="prefetch" href="/docs/assets/js/247.13999998.js"><link rel="prefetch" href="/docs/assets/js/248.d978dd59.js"><link rel="prefetch" href="/docs/assets/js/249.6c0a8fc5.js"><link rel="prefetch" href="/docs/assets/js/25.ea3d6538.js"><link rel="prefetch" href="/docs/assets/js/250.9a31d410.js"><link rel="prefetch" href="/docs/assets/js/251.b3f35e34.js"><link rel="prefetch" href="/docs/assets/js/252.487b5324.js"><link rel="prefetch" href="/docs/assets/js/253.1f1487ff.js"><link rel="prefetch" href="/docs/assets/js/254.f5b5f89c.js"><link rel="prefetch" href="/docs/assets/js/255.3e0a1e38.js"><link rel="prefetch" href="/docs/assets/js/256.e7984ce9.js"><link rel="prefetch" href="/docs/assets/js/257.29638c50.js"><link rel="prefetch" href="/docs/assets/js/258.4bd1753d.js"><link rel="prefetch" href="/docs/assets/js/259.257ae58f.js"><link rel="prefetch" href="/docs/assets/js/26.22fa4661.js"><link rel="prefetch" href="/docs/assets/js/260.8c95a0a1.js"><link rel="prefetch" href="/docs/assets/js/261.44497ffd.js"><link rel="prefetch" href="/docs/assets/js/262.cc424a91.js"><link rel="prefetch" href="/docs/assets/js/263.cdcde635.js"><link rel="prefetch" href="/docs/assets/js/264.7df35fe4.js"><link rel="prefetch" href="/docs/assets/js/265.0fecead0.js"><link rel="prefetch" href="/docs/assets/js/266.bc9b2853.js"><link rel="prefetch" href="/docs/assets/js/267.15e85310.js"><link rel="prefetch" href="/docs/assets/js/268.fc0f6c56.js"><link rel="prefetch" href="/docs/assets/js/269.9a6a7dee.js"><link rel="prefetch" href="/docs/assets/js/27.d275ba0b.js"><link rel="prefetch" href="/docs/assets/js/270.86841e39.js"><link rel="prefetch" href="/docs/assets/js/271.bac35782.js"><link rel="prefetch" href="/docs/assets/js/272.11995466.js"><link rel="prefetch" href="/docs/assets/js/273.386419d5.js"><link rel="prefetch" href="/docs/assets/js/274.2139cccc.js"><link rel="prefetch" href="/docs/assets/js/275.5875f9fe.js"><link rel="prefetch" href="/docs/assets/js/276.af87e0d7.js"><link rel="prefetch" href="/docs/assets/js/277.3b071a69.js"><link rel="prefetch" href="/docs/assets/js/278.ebe868b8.js"><link rel="prefetch" href="/docs/assets/js/279.976c33cf.js"><link rel="prefetch" href="/docs/assets/js/28.7ea43c17.js"><link rel="prefetch" href="/docs/assets/js/280.182c66fe.js"><link rel="prefetch" href="/docs/assets/js/281.26f4ea11.js"><link rel="prefetch" href="/docs/assets/js/282.7513fe50.js"><link rel="prefetch" href="/docs/assets/js/283.5f8e22ee.js"><link rel="prefetch" href="/docs/assets/js/284.1224b1fa.js"><link rel="prefetch" href="/docs/assets/js/285.b3a95f84.js"><link rel="prefetch" href="/docs/assets/js/286.8c23e1ca.js"><link rel="prefetch" href="/docs/assets/js/287.fcd0764f.js"><link rel="prefetch" href="/docs/assets/js/288.78dd98e0.js"><link rel="prefetch" href="/docs/assets/js/289.bbb04c67.js"><link rel="prefetch" href="/docs/assets/js/29.7d89cded.js"><link rel="prefetch" href="/docs/assets/js/290.a8409c4a.js"><link rel="prefetch" href="/docs/assets/js/291.9516da92.js"><link rel="prefetch" href="/docs/assets/js/292.fc740c36.js"><link rel="prefetch" href="/docs/assets/js/293.02c2d6df.js"><link rel="prefetch" href="/docs/assets/js/294.f02e4c2b.js"><link rel="prefetch" href="/docs/assets/js/295.8f93d78c.js"><link rel="prefetch" href="/docs/assets/js/296.9b66cd43.js"><link rel="prefetch" href="/docs/assets/js/297.c9fa8fb3.js"><link rel="prefetch" href="/docs/assets/js/298.6ce74247.js"><link rel="prefetch" href="/docs/assets/js/299.ff4936a9.js"><link rel="prefetch" href="/docs/assets/js/3.8ecf6ac9.js"><link rel="prefetch" href="/docs/assets/js/30.004b2fc0.js"><link rel="prefetch" href="/docs/assets/js/300.e51eb61d.js"><link rel="prefetch" href="/docs/assets/js/301.0717836b.js"><link rel="prefetch" href="/docs/assets/js/302.9a112487.js"><link rel="prefetch" href="/docs/assets/js/303.c147cb54.js"><link rel="prefetch" href="/docs/assets/js/304.f314bd68.js"><link rel="prefetch" href="/docs/assets/js/305.9a479b5d.js"><link rel="prefetch" href="/docs/assets/js/306.16dfc959.js"><link rel="prefetch" href="/docs/assets/js/307.3f19ee3e.js"><link rel="prefetch" href="/docs/assets/js/308.264b9f59.js"><link rel="prefetch" href="/docs/assets/js/309.321accbc.js"><link rel="prefetch" href="/docs/assets/js/31.d56d2fc1.js"><link rel="prefetch" href="/docs/assets/js/310.60f45d72.js"><link rel="prefetch" href="/docs/assets/js/311.f5e52e0a.js"><link rel="prefetch" href="/docs/assets/js/312.2cc8b5a5.js"><link rel="prefetch" href="/docs/assets/js/313.1d6fd7aa.js"><link rel="prefetch" href="/docs/assets/js/314.35cb6cbd.js"><link rel="prefetch" href="/docs/assets/js/32.e35fd9a1.js"><link rel="prefetch" href="/docs/assets/js/33.d0ca1f16.js"><link rel="prefetch" href="/docs/assets/js/34.61e94196.js"><link rel="prefetch" href="/docs/assets/js/35.86fbc0f0.js"><link rel="prefetch" href="/docs/assets/js/36.0f37ff5b.js"><link rel="prefetch" href="/docs/assets/js/37.cb36eab6.js"><link rel="prefetch" href="/docs/assets/js/38.4a0e6876.js"><link rel="prefetch" href="/docs/assets/js/39.05395574.js"><link rel="prefetch" href="/docs/assets/js/40.8eb5be6c.js"><link rel="prefetch" href="/docs/assets/js/41.a8817873.js"><link rel="prefetch" href="/docs/assets/js/42.2a370aa2.js"><link rel="prefetch" href="/docs/assets/js/43.c1197d9a.js"><link rel="prefetch" href="/docs/assets/js/44.e0841163.js"><link rel="prefetch" href="/docs/assets/js/45.ec1ff6a6.js"><link rel="prefetch" href="/docs/assets/js/46.75dcc964.js"><link rel="prefetch" href="/docs/assets/js/47.e082d922.js"><link rel="prefetch" href="/docs/assets/js/48.6305c493.js"><link rel="prefetch" href="/docs/assets/js/49.220de7a1.js"><link rel="prefetch" href="/docs/assets/js/5.70556686.js"><link rel="prefetch" href="/docs/assets/js/50.6dd5edac.js"><link rel="prefetch" href="/docs/assets/js/51.e9700132.js"><link rel="prefetch" href="/docs/assets/js/52.a2ea969e.js"><link rel="prefetch" href="/docs/assets/js/53.7ece8f2c.js"><link rel="prefetch" href="/docs/assets/js/54.b5c2581d.js"><link rel="prefetch" href="/docs/assets/js/55.13e24143.js"><link rel="prefetch" href="/docs/assets/js/56.1f0ce6b4.js"><link rel="prefetch" href="/docs/assets/js/57.d9e86640.js"><link rel="prefetch" href="/docs/assets/js/58.95a7e38d.js"><link rel="prefetch" href="/docs/assets/js/59.7b46d313.js"><link rel="prefetch" href="/docs/assets/js/6.436a728f.js"><link rel="prefetch" href="/docs/assets/js/60.65c93542.js"><link rel="prefetch" href="/docs/assets/js/61.72148ba4.js"><link rel="prefetch" href="/docs/assets/js/62.b5273896.js"><link rel="prefetch" href="/docs/assets/js/63.bbc903cd.js"><link rel="prefetch" href="/docs/assets/js/64.b9d83699.js"><link rel="prefetch" href="/docs/assets/js/65.e9f68e46.js"><link rel="prefetch" href="/docs/assets/js/66.0a81eb3d.js"><link rel="prefetch" href="/docs/assets/js/67.13fde5ce.js"><link rel="prefetch" href="/docs/assets/js/68.c195528e.js"><link rel="prefetch" href="/docs/assets/js/69.6d05917a.js"><link rel="prefetch" href="/docs/assets/js/7.9e3691d1.js"><link rel="prefetch" href="/docs/assets/js/70.286e82b9.js"><link rel="prefetch" href="/docs/assets/js/71.7a50c641.js"><link rel="prefetch" href="/docs/assets/js/72.db59d476.js"><link rel="prefetch" href="/docs/assets/js/73.41e8e708.js"><link rel="prefetch" href="/docs/assets/js/74.d1677f97.js"><link rel="prefetch" href="/docs/assets/js/75.60ec7670.js"><link rel="prefetch" href="/docs/assets/js/76.31571826.js"><link rel="prefetch" href="/docs/assets/js/77.714ed672.js"><link rel="prefetch" href="/docs/assets/js/78.2ae66602.js"><link rel="prefetch" href="/docs/assets/js/79.ffbecd6f.js"><link rel="prefetch" href="/docs/assets/js/80.272432a0.js"><link rel="prefetch" href="/docs/assets/js/81.885cfc85.js"><link rel="prefetch" href="/docs/assets/js/82.f830cca1.js"><link rel="prefetch" href="/docs/assets/js/83.315af250.js"><link rel="prefetch" href="/docs/assets/js/85.f6b5be14.js"><link rel="prefetch" href="/docs/assets/js/86.2896a476.js"><link rel="prefetch" href="/docs/assets/js/87.cc6190f7.js"><link rel="prefetch" href="/docs/assets/js/88.632bdc25.js"><link rel="prefetch" href="/docs/assets/js/89.bdc0b25c.js"><link rel="prefetch" href="/docs/assets/js/90.679d5d12.js"><link rel="prefetch" href="/docs/assets/js/91.95688a59.js"><link rel="prefetch" href="/docs/assets/js/92.76ba6f9c.js"><link rel="prefetch" href="/docs/assets/js/93.8475ffb2.js"><link rel="prefetch" href="/docs/assets/js/94.eef2baf1.js"><link rel="prefetch" href="/docs/assets/js/95.22c8b921.js"><link rel="prefetch" href="/docs/assets/js/96.1f982597.js"><link rel="prefetch" href="/docs/assets/js/97.79c2bc9a.js"><link rel="prefetch" href="/docs/assets/js/98.7d7561d2.js"><link rel="prefetch" href="/docs/assets/js/99.694821d8.js"><link rel="prefetch" href="/docs/assets/js/vendors~docsearch.be90ab07.js"> <link rel="stylesheet" href="/docs/assets/css/0.styles.79554685.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/" 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 router-link-active"> 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/" 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 router-link-active"> 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"><span>Elementor Deprecations</span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/deprecations/" aria-current="page" class="sidebar-link">Introduction</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Code Deprecation</span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/deprecations/deprecated-function/" class="sidebar-link">Deprecated Function</a></li><li><a href="/docs/deprecations/deprecated-argument/" class="sidebar-link">Deprecated Arguments</a></li><li><a href="/docs/deprecations/deprecated-action-hook/" class="sidebar-link">Deprecated Action Hooks</a></li><li><a href="/docs/deprecations/deprecated-filter-hook/" class="sidebar-link">Deprecated Filter Hooks</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Examples</span> </p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/deprecations/simple-example/" class="sidebar-link">Simple Example</a></li><li><a href="/docs/deprecations/advanced-example/" class="sidebar-link">Advanced Example</a></li><li><a href="/docs/deprecations/complex-example/" aria-current="page" class="active sidebar-link">Complex Example</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="complex-example"><a href="#complex-example" class="header-anchor">#</a> Complex Example</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>In Elementor 3.0, the limited Schemes mechanism had been replaced with <a href="/docs/editor-controls/global-style/">Globals</a> which allows users to define limitless colors and typographies. Addons using schemes in their widgets controls should update their code.</p> <h2 id="schemes-to-globals"><a href="#schemes-to-globals" class="header-anchor">#</a> Schemes to Globals</h2> <p>To migrate from deprecated Schemes to the new Globals, developers should look for color and typography group controls, and changes them.</p> <h3 id="typography"><a href="#typography" class="header-anchor">#</a> Typography</h3> <p>Replace the following:</p> <ul><li><code>\Elementor\Core\Schemes\Typography::TYPOGRAPHY_1</code></li> <li><code>\Elementor\Core\Schemes\Typography::TYPOGRAPHY_2</code></li> <li><code>\Elementor\Core\Schemes\Typography::TYPOGRAPHY_3</code></li> <li><code>\Elementor\Core\Schemes\Typography::TYPOGRAPHY_4</code></li></ul> <p>With:</p> <ul><li><code>\Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_PRIMARY</code></li> <li><code>\Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_SECONDARY</code></li> <li><code>\Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_TEXT</code></li> <li><code>\Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_ACCENT</code></li></ul> <p>Here is an example:</p> <div class="language-diff line-numbers-mode"><pre class="language-diff"><code>$this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [ 'name' => 'heading_typography', <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> 'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_1, </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> 'global' => [ </span><span class="token prefix inserted">+</span><span class="token line"> 'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_PRIMARY, </span><span class="token prefix inserted">+</span><span class="token line"> ], </span></span> 'selector' => '{{WRAPPER}} .heading-class', ] ); $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [ 'name' => 'subheading_typography', <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> 'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_2, </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> 'global' => [ </span><span class="token prefix inserted">+</span><span class="token line"> 'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_SECONDARY, </span><span class="token prefix inserted">+</span><span class="token line"> ], </span></span> 'selector' => '{{WRAPPER}} .subheading-class', ] ); $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [ 'name' => 'text_typography', <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> 'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_3, </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> 'global' => [ </span><span class="token prefix inserted">+</span><span class="token line"> 'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_TEXT, </span><span class="token prefix inserted">+</span><span class="token line"> ], </span></span> 'selector' => '{{WRAPPER}} .text-class', ] ); $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [ 'name' => 'accent_typography', <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> 'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_4, </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> 'global' => [ </span><span class="token prefix inserted">+</span><span class="token line"> 'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_ACCENT, </span><span class="token prefix inserted">+</span><span class="token line"> ], </span></span> 'selector' => '{{WRAPPER}} .accent-class', ] ); </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br></div></div><h3 id="colors"><a href="#colors" class="header-anchor">#</a> Colors</h3> <p>Replace the following:</p> <ul><li><code>\Elementor\Core\Schemes\Color::COLOR_1</code></li> <li><code>\Elementor\Core\Schemes\Color::COLOR_2</code></li> <li><code>\Elementor\Core\Schemes\Color::COLOR_3</code></li> <li><code>\Elementor\Core\Schemes\Color::COLOR_4</code></li></ul> <p>With:</p> <ul><li><code>\Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_PRIMARY</code></li> <li><code>\Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_SECONDARY</code></li> <li><code>\Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_TEXT</code></li> <li><code>\Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_ACCENT</code></li></ul> <p>Here is an example:</p> <div class="language-diff line-numbers-mode"><pre class="language-diff"><code>$this->add_control( 'heading_color', [ 'label' => esc_html__( 'Heading Color', 'textdomain' ), 'type' => \Elementor\Controls_Manager::COLOR, <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> 'scheme' => [ </span><span class="token prefix deleted">-</span><span class="token line"> 'type' => \Elementor\Core\Schemes\Color::get_type(), </span><span class="token prefix deleted">-</span><span class="token line"> 'value' => \Elementor\Core\Schemes\Color::COLOR_1, </span><span class="token prefix deleted">-</span><span class="token line"> ], </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> 'global' => [ </span><span class="token prefix inserted">+</span><span class="token line"> 'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_PRIMARY, </span><span class="token prefix inserted">+</span><span class="token line"> ], </span></span> 'selectors' => [ '{{WRAPPER}} .heading-class' => 'color: {{VALUE}};', ], ] ); $this->add_control( 'subheading_color', [ 'label' => esc_html__( 'Subheading Color', 'textdomain' ), 'type' => \Elementor\Controls_Manager::COLOR, <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> 'scheme' => [ </span><span class="token prefix deleted">-</span><span class="token line"> 'type' => \Elementor\Core\Schemes\Color::get_type(), </span><span class="token prefix deleted">-</span><span class="token line"> 'value' => \Elementor\Core\Schemes\Color::COLOR_2, </span><span class="token prefix deleted">-</span><span class="token line"> ], </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> 'global' => [ </span><span class="token prefix inserted">+</span><span class="token line"> 'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_SECONDARY, </span><span class="token prefix inserted">+</span><span class="token line"> ], </span></span> 'selectors' => [ '{{WRAPPER}} .subheading-class' => 'color: {{VALUE}};', ], ] ); $this->add_control( 'text_color', [ 'label' => esc_html__( 'Text Color', 'textdomain' ), 'type' => \Elementor\Controls_Manager::COLOR, <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> 'scheme' => [ </span><span class="token prefix deleted">-</span><span class="token line"> 'type' => \Elementor\Core\Schemes\Color::get_type(), </span><span class="token prefix deleted">-</span><span class="token line"> 'value' => \Elementor\Core\Schemes\Color::COLOR_3, </span><span class="token prefix deleted">-</span><span class="token line"> ], </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> 'global' => [ </span><span class="token prefix inserted">+</span><span class="token line"> 'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_TEXT, </span><span class="token prefix inserted">+</span><span class="token line"> ], </span></span> 'selectors' => [ '{{WRAPPER}} .text-class' => 'color: {{VALUE}};', ], ] ); $this->add_control( 'accent_color', [ 'label' => esc_html__( 'Accent Color', 'textdomain' ), 'type' => \Elementor\Controls_Manager::COLOR, <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> 'scheme' => [ </span><span class="token prefix deleted">-</span><span class="token line"> 'type' => \Elementor\Core\Schemes\Color::get_type(), </span><span class="token prefix deleted">-</span><span class="token line"> 'value' => \Elementor\Core\Schemes\Color::COLOR_4, </span><span class="token prefix deleted">-</span><span class="token line"> ], </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> 'global' => [ </span><span class="token prefix inserted">+</span><span class="token line"> 'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_ACCENT, </span><span class="token prefix inserted">+</span><span class="token line"> ], </span></span> 'selectors' => [ '{{WRAPPER}} .accent-class' => 'color: {{VALUE}};', ], ] ); </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br></div></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/elementor/elementor-developers-docs/edit/master/src/deprecations/complex-example.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/28/2023, 12:46:58 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"> ← <a href="/docs/deprecations/advanced-example/" class="prev"> Advanced Example </a></span> </p></div> </main></div><div class="global-ui"></div></div> <script src="/docs/assets/js/app.4a037537.js" defer></script><script src="/docs/assets/js/2.32541751.js" defer></script><script src="/docs/assets/js/1.3d99b080.js" defer></script><script src="/docs/assets/js/84.eb0d48eb.js" defer></script><script src="/docs/assets/js/4.de33d348.js" defer></script><script src="/docs/assets/js/19.d9598f47.js" defer></script> </body> </html>