In this tutorial we will teach you how to use the Shortcode Widget. Embedding shortcodes into your website is extremely useful when working with third party providers. With the Shortcode Widget, it’s never been easier to implement this into your website projects. This tutorial will cover:
✔ What is a shortcode?
✔ How to use the shortcode widget
✔︎ And much more!
Hey there, it’s Ash from Elementor.
In this tutorial we’re going to explore the shortcode widget.
Shortcodes are small snippets of code which allow you to embed files and objects into your pages and posts with ease. Many third party providers will provide you with shortcodes and these can range from simple contact forms to complex booking systems.
In our example we’re going to use a WooCommerce shortcode within a popup which allows the user to check the status of their order.
Let’s open up our popup and drop in the shortcode widget.
By using the shortcode widget you will ensure you are able to view the contents of the shortcode within the Elementor editor. Dropping shortcodes into other widgets like the text editor will not always guarantee you can see the content within the editor.
As you can see, we have only one field to populate for our shortcode to work. Simply type or paste in your shortcode and instantly you’ll see the shortcode content within the editor.
Whilst there is no style tab for the shortcode widget, we do have all of the advanced options like margin, padding, motion effects and more.
Let’s make some quick adjustments to our popup and preview this on the live website.
Now let’s test it to see that it all works.
