CINXE.COM
Shortcode Widget » Elementor
<!DOCTYPE html> <html lang="en-US" prefix="og: https://ogp.me/ns#"> <head> <meta charset="UTF-8"> <!-- Search Engine Optimization by Rank Math PRO - https://rankmath.com/ --> <title>Shortcode Widget » Elementor</title> <meta name="description" content="On this page, we explain how to add shortcodes to any WordPress page using the Elementor website builder. Learn more here."/> <meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/> <link rel="canonical" href="https://elementor.com/help/shortcode-widget/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Shortcode Widget » Elementor" /> <meta property="og:description" content="On this page, we explain how to add shortcodes to any WordPress page using the Elementor website builder. Learn more here." /> <meta property="og:url" content="https://elementor.com/help/shortcode-widget/" /> <meta property="og:site_name" content="Elementor" /> <meta property="article:publisher" content="https://www.facebook.com/elemntor/" /> <meta property="article:author" content="https://www.facebook.com/itamarbd/" /> <meta property="article:section" content="Add advanced functionality" /> <meta property="og:updated_time" content="2024-02-25T12:48:07+02:00" /> <meta property="og:image" content="https://elementor.com/help/wp-content/uploads/2024/02/Shortcode-widget-2.png" /> <meta property="og:image:secure_url" content="https://elementor.com/help/wp-content/uploads/2024/02/Shortcode-widget-2.png" /> <meta property="og:image:width" content="1999" /> <meta property="og:image:height" content="1119" /> <meta property="og:image:alt" content="Shortcode widget 2" /> <meta property="og:image:type" content="image/png" /> <meta property="article:published_time" content="2020-03-17T10:06:04+02:00" /> <meta property="article:modified_time" content="2024-02-25T12:48:07+02:00" /> <meta property="og:video" content="https://www.youtube.com/embed/jPp7PK9Tt8Y" /> <meta property="video:duration" content="103" /> <meta property="og:video" content="https://www.youtube.com/embed/XHOmBV4js_E" /> <meta property="video:duration" content="16" /> <meta property="ya:ovs:upload_date" content="2021-05-04T07:00:30-07:00" /> <meta property="ya:ovs:allow_embed" content="true" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Shortcode Widget » Elementor" /> <meta name="twitter:description" content="On this page, we explain how to add shortcodes to any WordPress page using the Elementor website builder. Learn more here." /> <meta name="twitter:image" content="https://elementor.com/help/wp-content/uploads/2024/02/Shortcode-widget-2.png" /> <meta name="twitter:label1" content="Written by" /> <meta name="twitter:data1" content="Ian Cabizo" /> <meta name="twitter:label2" content="Time to read" /> <meta name="twitter:data2" content="1 minute" /> <!-- /Rank Math WordPress SEO plugin --> <link rel='dns-prefetch' href='//cdn.jsdelivr.net' /> <link rel="alternate" type="application/rss+xml" title="Help » Feed" href="https://elementor.com/help/feed/" /> <link rel="alternate" type="application/rss+xml" title="Help » Comments Feed" href="https://elementor.com/help/comments/feed/" /> <!-- This site is optimized with the Schema Premium ver.1.2.2 - https://schema.press --> <script type="application/ld+json" class="schema-premium">{"@context":"https:\/\/schema.org","@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/shortcode-widget\/#breadcrumb","url":"https:\/\/elementor.com\/help\/shortcode-widget\/","name":"Breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"item":{"@type":"WebPage","@id":"https:\/\/elementor.com\/help#webpage","url":"https:\/\/elementor.com\/help","name":"Blog"}},{"@type":"ListItem","position":2,"item":{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/shortcode-widget\/#webpage","url":"https:\/\/elementor.com\/help\/shortcode-widget\/","name":"Shortcode widget"}}]}</script><script type="application/ld+json" class="schema-premium">[{"@context":"https:\/\/schema.org","@type":"BlogPosting","image":{"@type":"ImageObject","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/02\/shortcode-button.png","width":1200,"height":"87"},"url":"https:\/\/elementor.com\/help\/shortcode-widget\/","description":"Learn how to add shortcodes that are previewed right in the Elementor editor","headline":"Shortcode widget","datePublished":"2020-03-17T10:06:04+02:00","dateModified":"2024-02-25T12:48:07+02:00","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/shortcode-widget\/#webpage"},"dateCreated":"2020-03-17T10:06:04+02:00","publisher":{"@type":"Organization","@id":"https:\/\/elementor.com\/help#organization","url":"https:\/\/elementor.com\/help","name":"Help","description":"","logo":{"@type":"ImageObject","@id":"https:\/\/elementor.com\/help#logo","url":"","width":600,"height":60},"image":{"@type":"ImageObject","@id":"https:\/\/elementor.com\/help#logo","url":"","width":600,"height":60}},"keywords":"","author":{"@type":"Person","name":"Ian Cabizo"},"@id":"https:\/\/elementor.com\/help\/shortcode-widget#blogposting"}]</script><!-- Schema Premium Plugin --> <link rel="alternate" type="application/rss+xml" title="Help » Shortcode widget Comments Feed" href="https://elementor.com/help/shortcode-widget/feed/" /> <style id='riovizual-tablebuilder-style-inline-css' type='text/css'> .wp-block-riovizual-tablebuilder .rv_tb-caption{max-width:100%}@media(min-width:768px){.wp-block-riovizual-tablebuilder.is-scroll-on-pc{overflow-x:auto}.wp-block-riovizual-tablebuilder.is-scroll-on-pc table{align-self:self-start;max-width:unset}}@media(max-width:767px){.wp-block-riovizual-tablebuilder.is-scroll-on-mobile{overflow-x:auto}.wp-block-riovizual-tablebuilder.is-scroll-on-mobile table{align-self:self-start;max-width:unset}}.wp-block-riovizual-tablebuilder .active-sticky-row,.wp-block-riovizual-tablebuilder.active-sticky-column table tr>:first-child{background-color:#f0f3f9}@media(max-width:767px){.wp-block-riovizual-tablebuilder .is-stacked-on-mobile .active-sticky-row,.wp-block-riovizual-tablebuilder .is-stacked-on-mobile.active-sticky-column table tr>:first-child{background-color:transparent}}.wp-block-riovizual-tablebuilder table{border-collapse:collapse;max-width:100%;width:100%}.wp-block-riovizual-tablebuilder h1,.wp-block-riovizual-tablebuilder h2,.wp-block-riovizual-tablebuilder h3,.wp-block-riovizual-tablebuilder h4,.wp-block-riovizual-tablebuilder h5,.wp-block-riovizual-tablebuilder h6,.wp-block-riovizual-tablebuilder p{margin:0}.wp-block-riovizual-tablebuilder table td,.wp-block-riovizual-tablebuilder table th{border:1px solid #000;padding:.5em;text-align:inherit}.wp-block-riovizual-tablebuilder tbody,.wp-block-riovizual-tablebuilder td,.wp-block-riovizual-tablebuilder th,.wp-block-riovizual-tablebuilder tr{position:relative}.wp-block-riovizual-tablebuilder td,.wp-block-riovizual-tablebuilder th{height:20px}.wp-block-riovizual-tablebuilder img{-o-object-fit:cover;object-fit:cover}.wp-block-riovizual-tablebuilder .has-fixed-layout{table-layout:fixed}.wp-block-riovizual-tablebuilder .has-fixed-layout td,.wp-block-riovizual-tablebuilder .has-fixed-layout th{word-break:break-word}.wp-block-riovizual-tablebuilder .has-fixed-layout .rv_tb-nowrap{white-space:pre-wrap!important}.wp-block-riovizual-tablebuilder.aligncenter,.wp-block-riovizual-tablebuilder.alignleft,.wp-block-riovizual-tablebuilder.alignright{display:table;width:auto}.wp-block-riovizual-tablebuilder.aligncenter td,.wp-block-riovizual-tablebuilder.aligncenter th,.wp-block-riovizual-tablebuilder.alignleft td,.wp-block-riovizual-tablebuilder.alignleft th,.wp-block-riovizual-tablebuilder.alignright td,.wp-block-riovizual-tablebuilder.alignright th{word-break:break-word}.wp-block-riovizual-tablebuilder.is-align-center,.wp-block-riovizual-tablebuilder.is-align-left,.wp-block-riovizual-tablebuilder.is-align-right{display:flex;flex-direction:column}.wp-block-riovizual-tablebuilder.is-align-left{align-items:flex-start}.wp-block-riovizual-tablebuilder.is-align-center{align-items:center}.wp-block-riovizual-tablebuilder.is-align-right{align-items:flex-end}.wp-block-riovizual-tablebuilder .rv_tb-nowrap{white-space:nowrap!important}.wp-block-riovizual-tablebuilder.is-style-stripes{background-color:transparent;border-collapse:inherit;border-spacing:0}.wp-block-riovizual-tablebuilder.is-style-stripes tbody tr:nth-child(odd)>*{background-color:#ddd}.wp-block-riovizual-tablebuilder.is-style-stripes tbody tr:nth-child(2n)>*{background-color:#fff}.wp-block-riovizual-tablebuilder .editor-styles-wrapper .wp-block-button__link:focus,.wp-block-riovizual-tablebuilder .editor-styles-wrapper .wp-element-button:focus,.wp-block-riovizual-tablebuilder .wp-block-button__link:focus,.wp-block-riovizual-tablebuilder .wp-element-button:focus{outline-offset:0!important;outline-style:none!important;outline-width:0!important}.wp-block-riovizual-tablebuilder .rv_tb-list{overflow:hidden}.wp-block-riovizual-tablebuilder .rv_tb-element{min-height:10px;position:relative}.wp-block-riovizual-tablebuilder .rv_tb-button-wrap,.wp-block-riovizual-tablebuilder .rv_tb-list-wrap,.wp-block-riovizual-tablebuilder .rv_tb-shortcode-wrap,.wp-block-riovizual-tablebuilder .rv_tb-text-wrap{display:flex}.wp-block-riovizual-tablebuilder .rv_tb-text{font-size:16px;overflow-wrap:break-word;padding:5px;width:100%}.wp-block-riovizual-tablebuilder .rv_tb-image{position:relative}.wp-block-riovizual-tablebuilder .rv_tb-image img{box-sizing:border-box;max-width:100%;vertical-align:middle}.wp-block-riovizual-tablebuilder .rv_tb-button{display:inline-block;text-align:center}.wp-block-riovizual-tablebuilder .rv_tb-button .wp-element-button{font-size:16px;overflow:hidden}.wp-block-riovizual-tablebuilder .rv_tb-button a{display:block;overflow-wrap:break-word;text-align:center;text-decoration:none}.wp-block-riovizual-tablebuilder .rv_tb-list{display:flex;flex-direction:column;list-style-position:outside;margin:0;padding:5px 5px 5px 25px;width:100%}.wp-block-riovizual-tablebuilder .rv_tb-list li{font-size:16px}.wp-block-riovizual-tablebuilder .rv_tb-icon{line-height:1}.wp-block-riovizual-tablebuilder .rv_tb-icon svg{box-sizing:content-box;height:16px;vertical-align:-.125em;width:16px}.wp-block-riovizual-tablebuilder .rv_tb-shortcode{display:flex}@media(max-width:768px){.is-scroll-on-mobile .has-fixed-layout td,.is-scroll-on-mobile .has-fixed-layout th{width:100px}}.components-popover{z-index:9999!important} </style> <style id='riovizual-prosandcons-style-inline-css' type='text/css'> .wp-block-riovizual-prosandcons{display:flex;flex-flow:column}.wp-block-riovizual-prosandcons .rv_pac-wrapper{overflow-x:auto;overflow-y:hidden}.wp-block-riovizual-prosandcons.is-align-left{align-items:flex-start}.wp-block-riovizual-prosandcons.is-align-center{align-items:center}.wp-block-riovizual-prosandcons.is-align-right{align-items:flex-end}@media(max-width:767px){.wp-block-riovizual-prosandcons:not(.is-vertical-on-mobile) .rv_pac-row{width:560px}}.wp-block-riovizual-prosandcons .rv_pac-row{display:grid;grid-template-columns:1fr 1fr}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons-wrapper,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros-wrapper{position:relative;z-index:0}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros{display:flex;flex:1 1 0;flex-direction:column;overflow:hidden}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-body,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-body{height:100%}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-header-item,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-header-item{align-items:center;display:flex;font-size:18px;font-weight:600;gap:5px;line-height:1.3}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-header-item.rv_pac-reverse,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-header-item.rv_pac-reverse{flex-direction:row-reverse}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-body-items,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-body-items{display:flex;flex-direction:column;font-size:16px;line-height:1.6;list-style:none;margin:0!important;padding:15px;row-gap:6px}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-body-items .rv_pac-body-item,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-body-items .rv_pac-body-item{align-items:center;display:flex;gap:5px;padding:6px 10px}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-body-items .rv_pac-body-item.rv_pac-reverse,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-body-items .rv_pac-body-item.rv_pac-reverse{flex-direction:row-reverse}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-item-text,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-item-text{overflow-wrap:break-word}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-item-icon,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-item-icon{display:flex}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-item-icon svg,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-item-icon svg{height:1em}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-header-item{align-items:center;display:flex;font-size:18px;font-weight:600;gap:5px;line-height:1.3}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-header{display:flex;flex-direction:column;padding:12px 25px}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-header .rv_pac-header-item{position:relative;width:100%}.components-popover{z-index:9999!important} </style> <style id='rank-math-toc-block-style-inline-css' type='text/css'> .wp-block-rank-math-toc-block nav ol{counter-reset:item}.wp-block-rank-math-toc-block nav ol li{display:block}.wp-block-rank-math-toc-block nav ol li:before{content:counters(item, ".") ". ";counter-increment:item} </style> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='flexible-table-block-css' href='https://elementor.com/help/wp-content/plugins/flexible-table-block/build/style-index.css?ver=1698918388' type='text/css' media='all' /> <style id='flexible-table-block-inline-css' type='text/css'> .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table{width:100%;max-width:100%;border-collapse:collapse;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(odd) th{background-color:#f0f0f1;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(odd) td{background-color:#f0f0f1;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(even) th{background-color:#ffffff;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(even) td{background-color:#ffffff;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th,.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td{padding:0.5em;border-width:1px;border-style:solid;border-color:#000000;text-align:left;vertical-align:middle;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th{background-color:#f0f0f1;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td{background-color:#ffffff;}@media screen and (min-width:769px){.wp-block-flexible-table-block-table.is-scroll-on-pc{overflow-x:scroll;}.wp-block-flexible-table-block-table.is-scroll-on-pc table{max-width:none;align-self:self-start;}}@media screen and (max-width:768px){.wp-block-flexible-table-block-table.is-scroll-on-mobile{overflow-x:scroll;}.wp-block-flexible-table-block-table.is-scroll-on-mobile table{max-width:none;align-self:self-start;}.wp-block-flexible-table-block-table table.is-stacked-on-mobile th,.wp-block-flexible-table-block-table table.is-stacked-on-mobile td{width:100%!important;display:block;}} </style> <link rel='stylesheet' id='hc-sidebar-css' href='https://elementor.com/help/wp-content/plugins/hc_sidebar/assets/css/hc-sidebar.css?ver=0.1.14' type='text/css' media='all' /> <link rel='stylesheet' id='hc-lightbox-css' href='https://elementor.com/help/wp-content/plugins/hc_sidebar/assets/css/lightbox-help-center.css?ver=0.1.14' type='text/css' media='all' /> <link rel='stylesheet' id='hc-colored-tags-css' href='https://elementor.com/help/wp-content/plugins/hc_sidebar/assets/css/hc-colored-tags.css?ver=0.1.14' type='text/css' media='all' /> <link rel='stylesheet' id='table-addons-for-elementor-css' href='https://elementor.com/help/wp-content/plugins/table-addons-for-elementor/public/css/table-addons-for-elementor-public.css?ver=1.4.0' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-icons-css' href='https://elementor.com/help/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=5.30.0' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-frontend-css' href='https://elementor.com/help/wp-content/plugins/elementor/assets/css/frontend-lite.min.css?ver=3.22.3' type='text/css' media='all' /> <link rel='stylesheet' id='swiper-css' href='https://elementor.com/help/wp-content/plugins/elementor/assets/lib/swiper/v8/css/swiper.min.css?ver=8.4.5' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-32341-css' href='https://elementor.com/help/wp-content/uploads/elementor/css/post-32341.css?ver=1728545529' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-pro-css' href='https://elementor.com/help/wp-content/plugins/elementor-pro/assets/css/frontend-lite.min.css?ver=3.22.1' type='text/css' media='all' /> <link rel='stylesheet' id='font-awesome-5-all-css' href='https://elementor.com/help/wp-content/plugins/elementor/assets/lib/font-awesome/css/all.min.css?ver=3.22.3' type='text/css' media='all' /> <link rel='stylesheet' id='font-awesome-4-shim-css' href='https://elementor.com/help/wp-content/plugins/elementor/assets/lib/font-awesome/css/v4-shims.min.css?ver=3.22.3' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-global-css' href='https://elementor.com/help/wp-content/uploads/elementor/css/global.css?ver=1728545530' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-239-css' href='https://elementor.com/help/wp-content/uploads/elementor/css/post-239.css?ver=1728545789' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-26780-css' href='https://elementor.com/help/wp-content/uploads/elementor/css/post-26780.css?ver=1730196503' type='text/css' media='all' /> <link rel='stylesheet' id='hc-callout-css' href='https://elementor.com/help/wp-content/plugins/hc_sidebar/assets/css/hc-callout.css?ver=0.1.14' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-28845-css' href='https://elementor.com/help/wp-content/uploads/elementor/css/post-28845.css?ver=1730877609' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-40845-css' href='https://elementor.com/help/wp-content/uploads/elementor/css/post-40845.css?ver=1730830279' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-52588-css' href='https://elementor.com/help/wp-content/uploads/elementor/css/post-52588.css?ver=1730633433' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-site-style-child-css' href='https://elementor.com/help/wp-content/themes/elementor-website/assets/css/style.css?ver=1.1.5' type='text/css' media='all' /> <link rel='stylesheet' id='google-fonts-1-css' 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&ver=6.6.2' type='text/css' media='all' /> <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin><script type="text/javascript" src="https://elementor.com/help/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor/assets/lib/font-awesome/js/v4-shims.min.js?ver=3.22.3" id="font-awesome-4-shim-js"></script> <script type="text/javascript"> var swiftypeConfig = { filters: { posts: { object_type: [ 'post' ], }, }, }; </script> <script> window.dataLayer = window.dataLayer || []; </script> <!-- Google Tag Manager --> <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> <!-- End Google Tag Manager --> <meta name="referrer" content="no-referrer-when-downgrade"><meta name="generator" content="Elementor 3.22.3; features: e_optimized_assets_loading, e_optimized_css_loading, additional_custom_breakpoints; settings: css_print_method-external, google_font-enabled, font_display-auto"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <link rel="icon" href="https://elementor.com/help/wp-content/uploads/2023/01/cropped-elementor-favicon-512-32x32.png" sizes="32x32" /> <link rel="icon" href="https://elementor.com/help/wp-content/uploads/2023/01/cropped-elementor-favicon-512-192x192.png" sizes="192x192" /> <link rel="apple-touch-icon" href="https://elementor.com/help/wp-content/uploads/2023/01/cropped-elementor-favicon-512-180x180.png" /> <meta name="msapplication-TileImage" content="https://elementor.com/help/wp-content/uploads/2023/01/cropped-elementor-favicon-512-270x270.png" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /></head> <body class="post-template-default single single-post postid-239 single-format-standard elementor-default elementor-template-canvas elementor-kit-32341 elementor-page elementor-page-239 elementor-page-40845"> <div data-elementor-type="wp-post" data-elementor-id="239" class="elementor elementor-239" data-elementor-post-type="post"> <div class="elementor-element elementor-element-dec32d7 e-flex e-con-boxed e-con e-parent" data-id="dec32d7" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-870caf5 elementor-widget elementor-widget-heading" data-id="870caf5" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.22.0 - 26-06-2024 */ .elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}</style><h2 class="elementor-heading-title elementor-size-default">Add the widget</h2> </div> </div> <div class="elementor-element elementor-element-89d483a e-flex e-con-boxed e-con e-child" data-id="89d483a" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-8694a00 elementor-widget elementor-widget-image" data-id="8694a00" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.22.0 - 26-06-2024 */ .elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=".svg"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}</style> <img decoding="async" width="132" height="87" src="https://elementor.com/help/wp-content/uploads/2024/02/shortcode-button.png" class="attachment-large size-large wp-image-46153" alt="shortcode button Shortcode widget 1" title="Shortcode widget 2"> </div> </div> <div class="elementor-element elementor-element-ef5fcfc elementor-widget elementor-widget-n-accordion" data-id="ef5fcfc" data-element_type="widget" data-settings="{"default_state":"all_collapsed","max_items_expended":"one","n_accordion_animation_duration":{"unit":"ms","size":400,"sizes":[]}}" data-widget_type="nested-accordion.default"> <div class="elementor-widget-container"> <div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys"> <details id="e-n-accordion-item-2510" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="1" tabindex="0" aria-expanded="false" aria-controls="e-n-accordion-item-2510" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Add the widget </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z" fill="black"></path></svg></span> <span class='e-closed'><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303C13.5304 10.5303 13.5303 10.5303 13 10C13.5303 9.46967 13.5304 9.4697 13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z" fill="black"></path></svg></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-2510" class="elementor-element elementor-element-2393088 e-con-full e-flex e-con e-child" data-id="2393088" data-element_type="container"> <div class="elementor-element elementor-element-d2d41a3 elementor-widget elementor-widget-text-editor" data-id="d2d41a3" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.22.0 - 26-06-2024 */ .elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}</style> <p><b>Add the widget to the canvas</b></p> <ol class="ak-ol" start="1" data-indent-level="1"> <li> <p data-renderer-start-pos="153">In Elementor Editor, click +. <br>All available widgets are displayed.</p> </li> <li> <p data-renderer-start-pos="224">Click or drag the widget to the canvas. For more information, see <a href="https://elementor.com/help/add-elements-to-a-page/" target="_blank" rel="noopener">Add elements to a page</a>.</p> </li> </ol> </div> </div> </div> </details> </div> </div> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-4dc68294 e-flex e-con-boxed e-con e-parent" data-id="4dc68294" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-3d3e0d69 elementor-widget elementor-widget-heading" data-id="3d3e0d69" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">What is the Shortcode widget?</h2> </div> </div> <div class="elementor-element elementor-element-17719bc9 elementor-widget elementor-widget-text-editor" data-id="17719bc9" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span style="font-weight: 400">Shortcode widget allows you to embed custom shortcodes into your pages or posts. Shortcodes are small pieces of code enclosed in square brackets </span><b>[ ]</b><span style="font-weight: 400">, and they trigger specific functions or display dynamic content. Learn more about </span><a href="https://elementor.com/help/how-to-use-shortcodes/" target="_blank" rel="noopener"><span style="font-weight: 400">Elementor Shortcodes.</span></a></p><p><span style="font-weight: 400">You can easily add special features or content to your website by using shortcodes – short, simple codes that perform specific functions, like embedding videos or forms, without needing to know how to write complex code.</span></p><p><span style="font-weight: 400">For example, if you’re using a shortcode to display a contact form, it connects to the contact form plugin you’ve installed on your website. When you insert the shortcode using the Shortcode widget in Elementor, it instructs Elementor to render the contact form on the page where you’ve placed the widget.</span></p> </div> </div> <div class="elementor-element elementor-element-22cbde9f elementor-widget elementor-widget-image" data-id="22cbde9f" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <img fetchpriority="high" decoding="async" width="1024" height="573" src="https://elementor.com/help/wp-content/uploads/2024/02/Shortcode-widget-2-1024x573.png" class="attachment-large size-large wp-image-46137" alt="Shortcode widget 2" srcset="https://elementor.com/help/wp-content/uploads/2024/02/Shortcode-widget-2-1024x573.png 1024w, https://elementor.com/help/wp-content/uploads/2024/02/Shortcode-widget-2-300x168.png 300w, https://elementor.com/help/wp-content/uploads/2024/02/Shortcode-widget-2-768x430.png 768w, https://elementor.com/help/wp-content/uploads/2024/02/Shortcode-widget-2-1536x860.png 1536w, https://elementor.com/help/wp-content/uploads/2024/02/Shortcode-widget-2.png 1999w" sizes="(max-width: 1024px) 100vw, 1024px" title="Shortcode widget 3"> </div> </div> <div class="elementor-element elementor-element-4b9b54fd elementor-widget elementor-widget-text-editor" data-id="4b9b54fd" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span style="font-weight: 400">You can also add shortcodes with the regular text editor widget, but the shortcode widget is much more powerful because you can see how the shortcode looks without going to preview mode. It is rendered automatically. Using shortcodes this way is easier because it saves you time and lets you add specialized content much easier.</span></p> </div> </div> <div class="elementor-element elementor-element-55f9337d elementor-widget elementor-widget-heading" data-id="55f9337d" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Video</h2> </div> </div> <div class="elementor-element elementor-element-32db8945 elementor-widget elementor-widget-text-editor" data-id="32db8945" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>See a video demonstrating the widget in action.</p> </div> </div> <div class="elementor-element elementor-element-52a9afe1 elementor-widget elementor-widget-video" data-id="52a9afe1" data-element_type="widget" data-settings="{"youtube_url":"https:\/\/youtu.be\/jPp7PK9Tt8Y?si=LAlvl3nYCYMer2O5","video_type":"youtube","controls":"yes"}" data-widget_type="video.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.22.0 - 26-06-2024 */ .elementor-widget-video .elementor-widget-container{overflow:hidden;transform:translateZ(0)}.elementor-widget-video .elementor-wrapper{aspect-ratio:var(--video-aspect-ratio)}.elementor-widget-video .elementor-wrapper iframe,.elementor-widget-video .elementor-wrapper video{height:100%;width:100%;display:flex;border:none;background-color:#000}@supports not (aspect-ratio:1/1){.elementor-widget-video .elementor-wrapper{position:relative;overflow:hidden;height:0;padding-bottom:calc(100% / var(--video-aspect-ratio))}.elementor-widget-video .elementor-wrapper iframe,.elementor-widget-video .elementor-wrapper video{position:absolute;top:0;right:0;bottom:0;left:0}}.elementor-widget-video .elementor-open-inline .elementor-custom-embed-image-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:50%}.elementor-widget-video .elementor-custom-embed-image-overlay{cursor:pointer;text-align:center}.elementor-widget-video .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play i{opacity:1}.elementor-widget-video .elementor-custom-embed-image-overlay img{display:block;width:100%;aspect-ratio:var(--video-aspect-ratio);-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center}@supports not (aspect-ratio:1/1){.elementor-widget-video .elementor-custom-embed-image-overlay{position:relative;overflow:hidden;height:0;padding-bottom:calc(100% / var(--video-aspect-ratio))}.elementor-widget-video .elementor-custom-embed-image-overlay img{position:absolute;top:0;right:0;bottom:0;left:0}}.elementor-widget-video .e-hosted-video .elementor-video{-o-object-fit:cover;object-fit:cover}.e-con-inner>.elementor-widget-video,.e-con>.elementor-widget-video{width:var(--container-widget-width);--flex-grow:var(--container-widget-flex-grow)}</style> <div class="elementor-wrapper elementor-open-inline"> <div class="elementor-video"></div> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-406a8e34 e-flex e-con-boxed e-con e-parent" data-id="406a8e34" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-438b6e8f elementor-widget elementor-widget-heading" data-id="438b6e8f" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Add a Shortcode widget: Step-by-step</h2> </div> </div> </div> </div> <div class="elementor-element elementor-element-2ee235d4 e-flex e-con-boxed e-con e-parent" data-id="2ee235d4" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-4ce3f98 elementor-widget elementor-widget-text-editor" data-id="4ce3f98" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <ol><li style="font-weight: 400;"><span style="font-weight: 400;">Add the Shortcode widget to the canvas. For more information, see </span><a href="https://elementor.com/help/add-elements-to-a-page/" target="_blank" rel="noopener"><span style="font-weight: 400;">Add elements to a page</span></a><span style="font-weight: 400;">.<br /><img decoding="async" class="alignnone wp-image-46154" src="https://elementor.com/help/wp-content/uploads/2024/02/Screenshot.png" alt="Screenshot Shortcode widget 4" width="680" height="235" title="Shortcode widget 5" srcset="https://elementor.com/help/wp-content/uploads/2024/02/Screenshot.png 1024w, https://elementor.com/help/wp-content/uploads/2024/02/Screenshot-300x104.png 300w, https://elementor.com/help/wp-content/uploads/2024/02/Screenshot-768x266.png 768w" sizes="(max-width: 680px) 100vw, 680px" /><br /></span></li><li style="font-weight: 400;"><span style="font-size: 11pt; font-family: Arial, sans-serif; background-color: transparent; vertical-align: baseline;">In the </span><span style="font-size: 11pt; font-family: Arial, sans-serif; background-color: transparent; font-weight: bold; vertical-align: baseline;">Content</span><span style="font-size: 11pt; font-family: Arial, sans-serif; background-color: transparent; vertical-align: baseline;"> tab, under the </span><span style="font-size: 11pt; font-family: Arial, sans-serif; background-color: transparent; font-weight: bold; vertical-align: baseline;">Shortcode </span><span style="font-size: 11pt; font-family: Arial, sans-serif; background-color: transparent; vertical-align: baseline;">section, enter your shortcode in the textbox area provided.<br /><img loading="lazy" decoding="async" class="alignnone wp-image-46142" src="https://elementor.com/help/wp-content/uploads/2024/02/Shortcode-widget-1-1024x494.png" alt="Shortcode widget 1" width="680" height="328" title="Shortcode widget 6" srcset="https://elementor.com/help/wp-content/uploads/2024/02/Shortcode-widget-1-1024x494.png 1024w, https://elementor.com/help/wp-content/uploads/2024/02/Shortcode-widget-1-300x145.png 300w, https://elementor.com/help/wp-content/uploads/2024/02/Shortcode-widget-1-768x371.png 768w, https://elementor.com/help/wp-content/uploads/2024/02/Shortcode-widget-1-1536x741.png 1536w, https://elementor.com/help/wp-content/uploads/2024/02/Shortcode-widget-1.png 1999w" sizes="(max-width: 680px) 100vw, 680px" /></span></li><li style="font-weight: 400;"><span style="font-size: 11pt; font-family: Arial, sans-serif; background-color: transparent; vertical-align: baseline;">You can further style the shortcode in the Custom CSS option located in the </span><span style="font-size: 11pt; font-family: Arial, sans-serif; background-color: transparent; font-weight: bold; vertical-align: baseline;"><a href="https://elementor.com/help/advanced-tab/" target="_blank" rel="noopener">Advanced</a> </span><span style="font-size: 11pt; font-family: Arial, sans-serif; background-color: transparent; vertical-align: baseline;">Tab.</span></li></ol> </div> </div> </div> </div> <div class="elementor-element elementor-element-3c1a4dc e-flex e-con-boxed e-con e-parent" data-id="3c1a4dc" data-element_type="container"> <div class="e-con-inner"> </div> </div> </div> <script> document.addEventListener( "DOMContentLoaded", function () { ( () => { const formSelector = document.querySelector( '.elementor-search-form' ); if ( ! formSelector.action.includes( "/search" ) ) { const prefix = formSelector.action.charAt( formSelector.action.length - 1 ) === '/' ? '' : '/'; formSelector.action = formSelector.action + prefix + 'search/'; formSelector.querySelector( 'input[type="search"]' ).name = 'q'; } } )(); } ); </script> <!-- Google Tag Manager --> <noscript> <iframe src="https://gtm.elementor.com/ns.html?id=GTM-NJK8HW" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript> <!-- End Google Tag Manager --> <section data-elementor-type="popup" data-elementor-id="52588" class="elementor elementor-52588 elementor-location-popup" data-elementor-settings="{"entrance_animation":"fadeInRight","exit_animation":"fadeInRight","entrance_animation_duration":{"unit":"px","size":1,"sizes":[]},"prevent_close_on_background_click":"yes","entrance_animation_mobile":"fadeInUp","exit_animation_mobile":"fadeInUp","triggers":{"page_load_delay":1,"page_load":"yes"},"timing":{"devices":"yes","times_times":1,"times":"yes","page_views_views":1,"page_views":"yes","times_period":"session","times_count":"close","devices_devices":["desktop","mobile","tablet"]}}" data-elementor-post-type="elementor_library"> <div class="elementor-element elementor-element-6ac41444 e-con-full e-flex e-con e-parent" data-id="6ac41444" data-element_type="container" data-settings="{"background_background":"gradient"}"> <div class="elementor-element elementor-element-130dcb04 e-flex e-con-boxed e-con e-child" data-id="130dcb04" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-363aeb6e elementor-invisible elementor-widget elementor-widget-heading" data-id="363aeb6e" data-element_type="widget" data-settings="{"_animation":"fadeInUp","_animation_mobile":"fadeInRight"}" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Stuck? <br>Our Elementor Expert is Ready</h2> </div> </div> <div class="elementor-element elementor-element-28f644d1 elementor-align-center elementor-widget elementor-widget-button" data-id="28f644d1" data-element_type="widget" data-widget_type="button.default"> <div class="elementor-widget-container"> <div class="elementor-button-wrapper"> <a class="elementor-button elementor-button-link elementor-size-sm" href="https://my.elementor.com/checkout-2/?add-to-cart=15726257&edata=%7B%22name%22%3A%22ELEMENTOR-SERVICES-CONSULTATION-01%22%2C%22price%22%3A%7B%22EUR%22%3A%2299%22%2C%22ILS%22%3A%22399%22%2C%22USD%22%3A%2299%22%7D%2C%22id%22%3A%2215726257%22%2C%22category%22%3A%22Elementor+Services%22%7D&currency=PLACEHOLDER" target="_blank" data-gtm-event_name="element_click" data-gtm-type="cta" data-gtm-section="popup" data-gtm-element_name="get professional help button" data-gtm-outcome="proceeding to intial site setup page" data-gtm-english_text="get professional help now" data-gtm-additional_description="services promotion popup"> <span class="elementor-button-content-wrapper"> <span class="elementor-button-icon"> <i aria-hidden="true" class="fas fa-video"></i> </span> <span class="elementor-button-text">Unlock Your Session Now</span> </span> </a> </div> </div> </div> <div class="elementor-element elementor-element-6f4b5d14 elementor-absolute elementor-view-default elementor-widget elementor-widget-icon" data-id="6f4b5d14" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default"> <div class="elementor-widget-container"> <div class="elementor-icon-wrapper"> <a class="elementor-icon" href="#elementor-action%3Aaction%3Dpopup%3Aclose%26settings%3DeyJkb19ub3Rfc2hvd19hZ2FpbiI6IiJ9" data-gtm-event_name="element_click" data-gtm-type="ui" data-gtm-section="popup" data-gtm-element_name="exit button" data-gtm-outcome="closing the popup" data-gtm-english_text="get professional help now" data-gtm-additional_description="services promotion popup"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.2197 5.21967C14.5126 4.92678 14.9874 4.92678 15.2803 5.21967C15.5732 5.51256 15.5732 5.98744 15.2803 6.28033L11.3107 10.25L15.2803 14.2197C15.5732 14.5126 15.5732 14.9874 15.2803 15.2803C14.9874 15.5732 14.5126 15.5732 14.2197 15.2803L10.25 11.3107L6.28033 15.2803C5.98744 15.5732 5.51256 15.5732 5.21967 15.2803C4.92678 14.9874 4.92678 14.5126 5.21967 14.2197L9.18934 10.25L5.21967 6.28033C4.92678 5.98744 4.92678 5.51256 5.21967 5.21967C5.51256 4.92678 5.98744 4.92678 6.28033 5.21967L10.25 9.18934L14.2197 5.21967Z" fill="black"></path></svg> </a> </div> </div> </div> <div class="elementor-element elementor-element-6c39a22 elementor-widget elementor-widget-text-editor" data-id="6c39a22" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p class="p1">Book a <b>45-min video consultation call</b> with an Elementor expert and elevate your site!</p> </div> </div> </div> </div> </div> </section> <script> addEventListener( 'onSiteCreationStart', function () { if ( ! window.braze || ! braze.logCustomEvent ) { return; } braze.logCustomEvent( 'site_creation_start_event' ); } ); </script> <link rel='stylesheet' id='e-animations-css' href='https://elementor.com/help/wp-content/plugins/elementor/assets/lib/animations/animations.min.css?ver=3.22.3' type='text/css' media='all' /> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor-network/assets/js/geo-loader.js?ver=1.4.29" id="elementor-network-geo-loader-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/hc_sidebar/assets/js/lightbox-help-center.js?ver=0.1.14" id="hc-lightbox-js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js?ver=1.6.0" id="slick-js"></script> <script type="text/javascript" id="elementor-addtocart-tracking-js-extra"> /* <![CDATA[ */ var addToCartTracking = {"currenciesCountries":{"default":{"currency":"USD","symbol":"$"},"IL":{"currency":"ILS","symbol":"₪"},"AT":{"currency":"EUR","symbol":"€"},"BE":{"currency":"EUR","symbol":"€"},"CY":{"currency":"EUR","symbol":"€"},"DE":{"currency":"EUR","symbol":"€"},"EE":{"currency":"EUR","symbol":"€"},"ES":{"currency":"EUR","symbol":"€"},"FI":{"currency":"EUR","symbol":"€"},"FR":{"currency":"EUR","symbol":"€"},"GR":{"currency":"EUR","symbol":"€"},"IE":{"currency":"EUR","symbol":"€"},"IT":{"currency":"EUR","symbol":"€"},"LT":{"currency":"EUR","symbol":"€"},"LU":{"currency":"EUR","symbol":"€"},"LV":{"currency":"EUR","symbol":"€"},"MT":{"currency":"EUR","symbol":"€"},"NL":{"currency":"EUR","symbol":"€"},"PT":{"currency":"EUR","symbol":"€"},"SI":{"currency":"EUR","symbol":"€"},"SK":{"currency":"EUR","symbol":"€"}}}; var addToCartTracking = {"currenciesCountries":{"default":{"currency":"USD","symbol":"$"},"IL":{"currency":"ILS","symbol":"₪"},"AT":{"currency":"EUR","symbol":"€"},"BE":{"currency":"EUR","symbol":"€"},"CY":{"currency":"EUR","symbol":"€"},"DE":{"currency":"EUR","symbol":"€"},"EE":{"currency":"EUR","symbol":"€"},"ES":{"currency":"EUR","symbol":"€"},"FI":{"currency":"EUR","symbol":"€"},"FR":{"currency":"EUR","symbol":"€"},"GR":{"currency":"EUR","symbol":"€"},"IE":{"currency":"EUR","symbol":"€"},"IT":{"currency":"EUR","symbol":"€"},"LT":{"currency":"EUR","symbol":"€"},"LU":{"currency":"EUR","symbol":"€"},"LV":{"currency":"EUR","symbol":"€"},"MT":{"currency":"EUR","symbol":"€"},"NL":{"currency":"EUR","symbol":"€"},"PT":{"currency":"EUR","symbol":"€"},"SI":{"currency":"EUR","symbol":"€"},"SK":{"currency":"EUR","symbol":"€"}}}; var addToCartTracking = {"currenciesCountries":{"default":{"currency":"USD","symbol":"$"},"IL":{"currency":"ILS","symbol":"₪"},"AT":{"currency":"EUR","symbol":"€"},"BE":{"currency":"EUR","symbol":"€"},"CY":{"currency":"EUR","symbol":"€"},"DE":{"currency":"EUR","symbol":"€"},"EE":{"currency":"EUR","symbol":"€"},"ES":{"currency":"EUR","symbol":"€"},"FI":{"currency":"EUR","symbol":"€"},"FR":{"currency":"EUR","symbol":"€"},"GR":{"currency":"EUR","symbol":"€"},"IE":{"currency":"EUR","symbol":"€"},"IT":{"currency":"EUR","symbol":"€"},"LT":{"currency":"EUR","symbol":"€"},"LU":{"currency":"EUR","symbol":"€"},"LV":{"currency":"EUR","symbol":"€"},"MT":{"currency":"EUR","symbol":"€"},"NL":{"currency":"EUR","symbol":"€"},"PT":{"currency":"EUR","symbol":"€"},"SI":{"currency":"EUR","symbol":"€"},"SK":{"currency":"EUR","symbol":"€"}}}; var addToCartTracking = {"currenciesCountries":{"default":{"currency":"USD","symbol":"$"},"IL":{"currency":"ILS","symbol":"₪"},"AT":{"currency":"EUR","symbol":"€"},"BE":{"currency":"EUR","symbol":"€"},"CY":{"currency":"EUR","symbol":"€"},"DE":{"currency":"EUR","symbol":"€"},"EE":{"currency":"EUR","symbol":"€"},"ES":{"currency":"EUR","symbol":"€"},"FI":{"currency":"EUR","symbol":"€"},"FR":{"currency":"EUR","symbol":"€"},"GR":{"currency":"EUR","symbol":"€"},"IE":{"currency":"EUR","symbol":"€"},"IT":{"currency":"EUR","symbol":"€"},"LT":{"currency":"EUR","symbol":"€"},"LU":{"currency":"EUR","symbol":"€"},"LV":{"currency":"EUR","symbol":"€"},"MT":{"currency":"EUR","symbol":"€"},"NL":{"currency":"EUR","symbol":"€"},"PT":{"currency":"EUR","symbol":"€"},"SI":{"currency":"EUR","symbol":"€"},"SK":{"currency":"EUR","symbol":"€"}}}; var addToCartTracking = {"currenciesCountries":{"default":{"currency":"USD","symbol":"$"},"IL":{"currency":"ILS","symbol":"₪"},"AT":{"currency":"EUR","symbol":"€"},"BE":{"currency":"EUR","symbol":"€"},"CY":{"currency":"EUR","symbol":"€"},"DE":{"currency":"EUR","symbol":"€"},"EE":{"currency":"EUR","symbol":"€"},"ES":{"currency":"EUR","symbol":"€"},"FI":{"currency":"EUR","symbol":"€"},"FR":{"currency":"EUR","symbol":"€"},"GR":{"currency":"EUR","symbol":"€"},"IE":{"currency":"EUR","symbol":"€"},"IT":{"currency":"EUR","symbol":"€"},"LT":{"currency":"EUR","symbol":"€"},"LU":{"currency":"EUR","symbol":"€"},"LV":{"currency":"EUR","symbol":"€"},"MT":{"currency":"EUR","symbol":"€"},"NL":{"currency":"EUR","symbol":"€"},"PT":{"currency":"EUR","symbol":"€"},"SI":{"currency":"EUR","symbol":"€"},"SK":{"currency":"EUR","symbol":"€"}}}; /* ]]> */ </script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor-network/assets/js/add-to-cart-tracking.min.js?ver=1.4.29" id="elementor-addtocart-tracking-js"></script> <script type="text/javascript" id="elementor-site-js-extra"> /* <![CDATA[ */ var Elementor_Site_Args = {"ajaxurl":"https:\/\/elementor.com\/help\/wp-admin\/admin-ajax.php","i18n":{"stay_up_to_date":"Download Just a Click Away","get_free_download_link":"Get Free Download Link To Your Email"}}; /* ]]> */ </script> <script type="text/javascript" src="https://elementor.com/help/wp-content/themes/elementor-website/assets/js/app.min.js?ver=1.1.5" id="elementor-site-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-content/themes/elementor-website/assets/js/js.cookie.min.js?ver=1.1.5" id="elementor-site-cookie-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=3.22.1" id="elementor-pro-webpack-runtime-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.22.3" id="elementor-webpack-runtime-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.22.3" id="elementor-frontend-modules-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-includes/js/dist/hooks.min.js?ver=2810c76e705dd1a53b18" id="wp-hooks-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); /* ]]> */ </script> <script type="text/javascript" id="elementor-pro-frontend-js-before"> /* <![CDATA[ */ var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/elementor.com\/help\/wp-admin\/admin-ajax.php","nonce":"9e60fd9467","urls":{"assets":"https:\/\/elementor.com\/help\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/elementor.com\/help\/wp-json\/"},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"},"x-twitter":{"title":"X"},"threads":{"title":"Threads"}},"facebook_sdk":{"lang":"en_US","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/elementor.com\/help\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}}; /* ]]> */ </script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.22.1" id="elementor-pro-frontend-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor/assets/lib/waypoints/waypoints.min.js?ver=4.0.2" id="elementor-waypoints-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script> <script type="text/javascript" id="elementor-frontend-js-before"> /* <![CDATA[ */ var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close","a11yCarouselWrapperAriaLabel":"Carousel | Horizontal scrolling: Arrow Left & Right","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}}},"version":"3.22.3","is_static":false,"experimentalFeatures":{"e_optimized_assets_loading":true,"e_optimized_css_loading":true,"additional_custom_breakpoints":true,"container":true,"container_grid":true,"e_swiper_latest":true,"e_onboarding":true,"home_screen":true,"editor_v2":true,"ai-layout":true,"landing-pages":true,"nested-elements":true,"display-conditions":true,"form-submissions":true,"mega-menu":true,"taxonomy-filter":true},"urls":{"assets":"https:\/\/elementor.com\/help\/wp-content\/plugins\/elementor\/assets\/"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"body_background_background":"gradient","active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description"},"post":{"id":239,"title":"Shortcode%20Widget%20%C2%BB%20Elementor","excerpt":"Learn how to add shortcodes that are previewed right in the Elementor editor","featuredImage":false}}; /* ]]> */ </script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.22.3" id="elementor-frontend-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=3.22.1" id="pro-elements-handlers-js"></script> <script> jQuery(document).ready(function($) { $(".elementor-post").each (function () { var postName = $(this).find(".elementor-post__title").text().trim(); $(this).find("a").attr("aria-label", function () { return "Read more: " + postName }); }); }); </script> <script> jQuery(document).ready(function ($) { setTimeout(function () { if ($('.elementor-toc__body').text().indexOf('No headings were found on this page.') != -1) { $('.elementor-widget-table-of-contents').hide(); $('#hide-toc-title').hide(); } /** * Hide Related Content text if there are no posts found. * Author - Nirbhay ***/ const relatedContent = $('#related-content-section .elementor-loop-container .e-loop-item'); if (relatedContent.length < 1) { $('#hide-related-content').css('display', 'none'); } /** Select specific heading tags (e.g., h1, h2) $('h1, h2, h3').each(function (index) { // Create a unique ID for the anchor link based on the heading's text var headingText = $(this).text(); var headingId = headingText.replace(/\s+/g, '-').toLowerCase(); $(this).attr('id', headingId); // Create an anchor link and append it before the heading var anchorLink = $('<a>').attr('href', '#' + headingId).addClass('anchor-link').html('¶'); $(this).append(anchorLink); });**/ $('.anchorlink').on('click', function (e) { e.preventDefault(); var currentURL = new URL(window.location.href); // Remove a specific part, for example, the hash (fragment) portion currentURL.hash = ''; // Construct the modified URL var modifiedURL = currentURL.href; var linkToCopy = modifiedURL + $(this).attr('href'); try { navigator.clipboard.writeText(linkToCopy); console.log('Content copied to clipboard'); $('#notification-box').show().fadeTo(2000, 1, function(){ $('#notification-box, #notification-box p').hide().fadeTo(1000, 0); }); } catch (err) { console.error('Failed to copy: ', err); } }) }, 1000); }) </script> <script> jQuery(document).ready(function($) { jQuery( document ).on( 'submit_success', 'form#elementor_newsletter_subscribe', function( event, response ){ event.preventDefault(); var $thisForm = $( this ); let isNewsletter = $thisForm.find('input[name="form_fields[newsletter_subscribe]"]').val(); if ( 'elementor_newsletter_subscribe' === isNewsletter ) { if ( window.dataLayer && dataLayer.push ) { dataLayer.push( { 'event': 'GAEvent', 'eventCategory': 'form engagement', 'eventAction': 'form submit success', 'eventLabel': 'newsletter', 'customMetricKey': '31', 'customMetricValue': 1 } ); } } if ( 'undefined' !== typeof response.link && '' !== response.link ) { setTimeout( function() { location.href = response.link; }, 500 ); } return false; }); }); </script> <script> document.addEventListener('strattic-form-success', function() { var formElement = document.querySelector('#form'); formElement.classList.add('form-thanks'); }); </script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0" /> <style> .bluenote{ background:#DCE6FF; } .greentip{ background:#D9FFF1; } .redwarning{ background:#FFF1E8; } .criticalwarning{ background:#FFE1E1; } .protip{ background:#DCD7FF; } .singleaction{ background:transparent; border:0.06rem solid #B5B5B5; } .contactsupport{ background:transparent; border:0.06rem solid #B5B5B5; } .hbutton a{ display:flex; margin-top:1.25rem; color:#05047E; font-size:1rem; font-weight: 700; text-decoration:none; } .bicon{ margin-left:0.5rem; } .generalnote{ background:#EBEBEB; } .hbox{ padding:1.88rem; border-radius:0.5rem; display:flex; font-family: DM Sans; font-size:1rem; line-height:1.6rem; color:#212121; margin-top:0.5rem; margin-bottom:0.5rem; } .hicon{margin-right:1.25rem;} .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20 } </style> <script> document.addEventListener("DOMContentLoaded", function() { const videoElements = document.querySelectorAll(".custom-video"); videoElements.forEach(videoElement => { // Create the video wrapper const videoWrapper = document.createElement("div"); videoWrapper.className = "video-wrapper"; // Create the gradient overlay const gradientOverlay = document.createElement("div"); gradientOverlay.className = "gradient-overlay"; // Create the play icon const playIcon = document.createElement("div"); playIcon.className = "play-icon"; const playIconImage = document.createElement("img"); playIconImage.src = "https://academy.site.strattic.io/wp-content/uploads/2023/05/play_video.svg"; playIcon.appendChild(playIconImage); // Add everything to the wrapper and replace the video with the wrapper videoWrapper.appendChild(videoElement.cloneNode(true)); videoWrapper.appendChild(gradientOverlay); videoWrapper.appendChild(playIcon); videoElement.parentNode.replaceChild(videoWrapper, videoElement); // Now the new video is the one inside the videoWrapper const newVideo = videoWrapper.querySelector('video'); // Add event listeners playIcon.addEventListener('click', function() { if (newVideo.paused) { newVideo.play(); this.style.display = 'none'; gradientOverlay.style.display = 'none'; } else { newVideo.pause(); this.style.display = 'block'; gradientOverlay.style.display = 'block'; } }); newVideo.addEventListener('play', function() { playIcon.style.display = 'none'; gradientOverlay.style.display = 'none'; }); newVideo.addEventListener('pause', function() { playIcon.style.display = 'block'; gradientOverlay.style.display = 'block'; }); newVideo.addEventListener('ended', function() { playIcon.style.display = 'block'; gradientOverlay.style.display = 'block'; }); }); }); </script> <style> .video-wrapper { position: relative; width: 720px; height: 440px; margin: 20px auto 30px; display: flex; justify-content: center; align-items: center; } .video-wrapper video { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; /* Added */ } .video-wrapper .gradient-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(53, 55, 58, 0.5) 21.95%, rgba(30, 30, 30, 0) 77.02%); pointer-events: none; z-index: 1; } .video-wrapper .play-icon { z-index: 2; cursor: pointer; } .video-wrapper .play-icon img { margin-bottom: 0!important; } /* For mobile devices */ @media (max-width: 767px) { .video-wrapper { width: 264px; /* Adjust the width as needed */ height: 160px; } } /* For tablet devices */ @media (min-width: 768px) and (max-width: 1023px) { .video-wrapper { width: 640px; /* Adjust the width as needed */ height: 390px; } } </style> <script type="text/javascript"> // Showing/Hiding the feedback forms jQuery(document).ready(function($){ // Hide the forms by default $(".articlelike").hide(); $(".articledislike").hide(); // Toggle the .articlelike form when the .likebutton icon is clicked $(".likebutton").click(function(){ $(".articledislike").slideUp('fast'); $(".articlelike").slideToggle('fast'); }); // Toggle the .articledislike form when the .dislikebutton icon is clicked $(".dislikebutton").click(function(){ $(".articlelike").slideUp('fast'); $(".articledislike").slideToggle('fast'); }); }); // Showing/hiding the share URLs jQuery(document).ready(function($){ // Hide the widget by default $(".shareurls").hide(); // Toggle the .shareurls widget when the .sharebtn button is clicked $(".sharebtn").click(function(){ $(".shareurls").slideToggle('fast'); }); }); </script> </body> </html>