Elementor is one of the most popular page builders used in the wordpress, but its free version doesn’t allow you to use saved templates via shortcodes. Luckily, with a bit of custom code, you can achieve this functionality and make your templates reusable throughout your site.
What Are Shortcodes in WordPress?
Shortcodes are small pieces of code that allow you to insert dynamic content into WordPress pages or posts. The shortcode will be dynamically renders a saved Elementor template with the template ID.
Step-by-Step Guide to Render Elementor Saved Templates
Step 1: Create a custom function in your active theme file functions.php file.
Copy the below code and add in your functions.php file.
function codekosh_render_elementor_template($atts) {
$atts = shortcode_atts(
array(
'id' => '', // Template ID
),
$atts,
'elementor_template'
);
if (!empty($atts['id'])) {
return Elementor\Plugin::$instance->frontend->get_builder_content_for_display($atts['id']);
}
return '';
}
add_shortcode('elementor_template', 'codekosh_render_elementor_template');
Step 2: Create and Save an Elementor Template.
- Go to Templates > Saved Templates in the WordPress admin area.
- Click Add New, design your section, and save it.
- Note down the Template ID from the template list.
Step 3: Use the Shortcode
- Add the following shortcode wherever you want the saved template to appear as I have used under the elementor tabbing widget:
- Replace the ID of your saved template in the ShortCode.