How to use any shortcode in Elementor

WordPress Shortcodes are macros in square brackets [] which you can use in a WordPress page to add a dynamic content to your page.
For instance you can insert a Revolution Slider Shortcode into your page to show a slider or by adding the Contact Form7 Shortcode to be able to add your created form into your page instantly.

Here is a sample of revolution slider shortcode:
[rev_slider alias=”sample-slider”] 


Shortcodes can be added with Text Editor widget, and it works fine. But the problem is you’re not able to see the output of Shortcode in Elementor and it will be visible only in preview mode. In other words you will see the shortcode’s output only when you preview the page.


With Shortcode widget, the Shortcodes will render automatically in Elementor editor. It enables you to view the Shortcode when you’re editing the page in Elementor.

Elementor Shortcode

1. Add a new page or edit an existing one.

2. Click on Edit with Elementor button.

3. From the left dashboard, search for the Shortcode.

4. Drag and drop the Shortcode element to your page.

5. A new dashboard on the left will open with the element’s settings. 

6. Enter your Shortcode in the Shortcode box. 

shortcode box elementor

7. APPLY to update the changes.

The Shortcode will be automatically added and visible while you are editing the page in Elementor.