{"id":239,"date":"2020-03-17T10:06:04","date_gmt":"2020-03-17T08:06:04","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=239"},"modified":"2024-02-25T12:48:07","modified_gmt":"2024-02-25T10:48:07","slug":"shortcode-widget","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/shortcode-widget\/","title":{"rendered":"Shortcode widget"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Add the widget<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
Add the widget <\/div><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/path><\/svg><\/span>\n\t\t\t<\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Add the widget to the canvas<\/b><\/p>\n

    \n
  1. \n

    In Elementor Editor, click +.
    All available widgets are displayed.<\/p>\n<\/li>\n

  2. \n

    Click or drag the widget to the canvas. For more information, see Add elements to a page<\/a>.<\/p>\n<\/li>\n<\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    What is the Shortcode widget?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    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>, and they trigger specific functions or display dynamic content. Learn more about <\/span>Elementor Shortcodes.<\/span><\/a><\/p>

    You can easily add special features or content to your website by using shortcodes \u2013 short, simple codes that perform specific functions, like embedding videos or forms, without needing to know how to write complex code.<\/span><\/p>

    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>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Shortcode\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    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>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t

    Video<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    See a video demonstrating the widget in action.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t
    <\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Add a Shortcode widget: Step-by-step<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t
    1. Add the Shortcode widget to the canvas. For more information, see <\/span>Add elements to a page<\/span><\/a>.
      \"\"
      <\/span><\/li>
    2. In the <\/span>Content<\/span> tab, under the <\/span>Shortcode <\/span>section, enter your shortcode in the textbox area provided.
      \"Shortcode<\/span><\/li>
    3. You can further style the shortcode in the Custom CSS option located in the <\/span>Advanced<\/a> <\/span>Tab.<\/span><\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
      \n\t\t\t\t\t
      \n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

      Learn how to add shortcodes that are previewed right in the Elementor editor<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65ba3c47f2fb5f1fdf50a7b2"],"footnotes":""},"categories":[1440],"tags":[],"class_list":["post-239","post","type-post","status-publish","format-standard","hentry","category-advanced-functionality"],"acf":[],"yoast_head":"\nHow to Use the Elementor Shortcode Widget | Elementor<\/title>\n<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.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/shortcode-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use the Elementor Shortcode Widget | Elementor\" \/>\n<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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/shortcode-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-17T08:06:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-25T10:48:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/02\/shortcode-button.png\" \/>\n\t<meta property=\"og:image:width\" content=\"132\" \/>\n\t<meta property=\"og:image:height\" content=\"87\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/shortcode-widget\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/shortcode-widget\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Shortcode widget\",\"datePublished\":\"2020-03-17T08:06:04+00:00\",\"dateModified\":\"2024-02-25T10:48:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/shortcode-widget\/\"},\"wordCount\":331,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/shortcode-widget\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/02\/shortcode-button.png\",\"articleSection\":[\"Advanced functionality\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/help\/shortcode-widget\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/shortcode-widget\/\",\"url\":\"https:\/\/elementor.com\/help\/shortcode-widget\/\",\"name\":\"How to Use the Elementor Shortcode Widget | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/shortcode-widget\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/shortcode-widget\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/02\/shortcode-button.png\",\"datePublished\":\"2020-03-17T08:06:04+00:00\",\"dateModified\":\"2024-02-25T10:48:07+00:00\",\"description\":\"On this page, we explain how to add shortcodes to any WordPress page using the Elementor website builder. Learn more here.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/shortcode-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/shortcode-widget\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/shortcode-widget\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/02\/shortcode-button.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/02\/shortcode-button.png\",\"width\":132,\"height\":87},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/shortcode-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Advanced functionality\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Shortcode widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use the Elementor Shortcode Widget | Elementor","description":"On this page, we explain how to add shortcodes to any WordPress page using the Elementor website builder. Learn more here.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/shortcode-widget\/","og_locale":"en_US","og_type":"article","og_title":"How to Use the Elementor Shortcode Widget | Elementor","og_description":"On this page, we explain how to add shortcodes to any WordPress page using the Elementor website builder. Learn more here.","og_url":"https:\/\/elementor.com\/help\/shortcode-widget\/","og_site_name":"Help","article_published_time":"2020-03-17T08:06:04+00:00","article_modified_time":"2024-02-25T10:48:07+00:00","og_image":[{"width":132,"height":87,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/02\/shortcode-button.png","type":"image\/png"}],"author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/shortcode-widget\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/shortcode-widget\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Shortcode widget","datePublished":"2020-03-17T08:06:04+00:00","dateModified":"2024-02-25T10:48:07+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/shortcode-widget\/"},"wordCount":331,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/shortcode-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/02\/shortcode-button.png","articleSection":["Advanced functionality"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/help\/shortcode-widget\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/shortcode-widget\/","url":"https:\/\/elementor.com\/help\/shortcode-widget\/","name":"How to Use the Elementor Shortcode Widget | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/shortcode-widget\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/shortcode-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/02\/shortcode-button.png","datePublished":"2020-03-17T08:06:04+00:00","dateModified":"2024-02-25T10:48:07+00:00","description":"On this page, we explain how to add shortcodes to any WordPress page using the Elementor website builder. Learn more here.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/shortcode-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/shortcode-widget\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/shortcode-widget\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/02\/shortcode-button.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/02\/shortcode-button.png","width":132,"height":87},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/shortcode-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Advanced functionality","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/"},{"@type":"ListItem","position":5,"name":"Shortcode widget"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=239"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/239\/revisions"}],"predecessor-version":[{"id":46129,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/239\/revisions\/46129"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}