The Shortcode Element is a versatile component that allows you to easily integrate dynamic content, reusable components, or functionality into your design using shortcodes.
Shortcodes are small, predefined code snippets that can be used to add complex features without needing to write custom code.
How to Use the Shortcode Element
Here’s how you can start adding shortcode using Shortcode element:
- Drag and Drop: Drag the Shortcode Element from the toolbar and drop it onto your canvas.
- Access the Shortcode Field: Click on the element to open the shortcode input field.
- Enter Your Shortcode: Paste or type the shortcode you want to use.

Placeholder for Shortcode
The Shortcode Element acts as a placeholder for shortcodes, enabling you to:
- Display Dynamic Content: Pull in dynamic content such as recent posts, testimonials, or product listings.
- Integrate Plugins: Use shortcodes provided by third-party plugins to add features like contact forms, sliders, or galleries.
- Reuse Components: Insert reusable components or templates created with shortcodes.

Best Practices
- Use Trusted Shortcodes: Only use shortcodes from reliable sources or plugins to avoid errors or security risks.
- Test Functionality: Ensure the shortcode works as expected by testing it in a staging environment before adding it to your live design.
- Keep It Simple: Avoid overloading your design with too many shortcodes, as this can impact performance.
- Check Responsiveness: Verify that the shortcode-generated content is responsive and displays correctly on all devices.
Troubleshooting
- Preview Not Accurate: Shortcode preview may not always be accurate. Be sure double check with the Live Preview Mode.
- Shortcode Not Displaying: Double-check the shortcode syntax and ensure it is correctly entered.
- Content Not Loading: Verify that the plugin or feature associated with the shortcode is active and functioning properly.
- Layout Issues: Adjust the element’s settings to ensure the shortcode content fits well within your design.