The free version of Elementor is plenty powerful, but it’s missing a key feature that I love in the Pro Version. The ability to Embed Elementor templates in your content or theme by using a simple Shortcode.
So after some tinkering, I found two good workarounds that will let you insert or hook your Elementor templates basically anywhere you could possibly want.
It’s completely free, requires one lightweight plugin, and is 100% compatible with the free version of Elementor.
What we’re building
Here’s what you’ll learn, and the capability you’ll add to your site after this tutorial:
- Template Blocks – Insert Elementor templates with in the Gutenberg Editor (or anywhere you can use blocks, like your widget areas)
- Template Shortcode – A custom shortcode to embed your template anywhere shortcodes work (basically everywhere)
- Troubleshooting – Fix common issues, like embedding Elementor templates in your sidebars and fixed-width widget areas.
Just watch this quick tutorial or follow the easy (written) steps below:
What, Why & How of Elementor embedding
Elementor (free) has limited template support. You can import 3rd-party templates or save your own, but you can only use them inside an Elementor page.
The Pro version is way more functional. You get a shortcode that lets you insert Elementor templates (basically) anywhere. Hook it into your footer or post header. Stick in in the middle of a blog post or a sidebar widget. It lets you design any type of content visually (no HTML or CSS) then re-use it wherever you want.
And now you can do the same thing in the free version.
Methods we’ll use
We’re going to use too basic tools to insert our Elementor layouts and templates:
- Gutenberg Block (via Elementor Blocks for Gutenberg plugin)
- Shortcode (via Insert Pages plugin)
Elementor Templates in Gutenberg Blocks
Elementor’s team decided Gutenberg integration would be a good thing, and released their own Gutenberg block.
The Elementor Blocks for Gutenberg plugin installs a single block on your website. This block lets you insert any saved Elementor template wherever you can insert Gutenberg blocks. And best of all, it works with the Free Version of Elementor.
Where you can use it:
- Posts / Pages
- Theme Hooks (like Generatepress Pro)
- Sidebars, Footers and other Widget areas (as of WP 5.8)
How to insert Elementor Templates using blocks
- Download and install the plugin
- Open the Gutenberg editor on a page/post or widget
- Click ‘Add new block’ or use the ‘/’ search shortcut
- Choose the ‘Elementor Library‘ block.
- Choose any Template from your saved templates and insert it directly into your layout.
Pro Tip: Depending on your theme, the template might have weird spacing or positioning in the Gutenberg editor, but should look normal on the front end.
Depending the width of the container you’re adding the block to, it may not display as expected. This happens frequently in the sidebar. We’ll cover the fix shortly, or you can skip there.
Insert Elementor Templates with Shortcodes
This method is a bit hacked together, because it leans on another plugin that isn’t specifically built for this purpose. But it works great and functions the same as the Shortcode-embed option in the Pro version.
Required Plugin: Insert Pages (free)
How to embed templates with a shortcode (steps)
- Install and activate the Insert Pages plugin
- Get find the unique POST ID of the template you want to use
- Use the shortcode. Example:
[insert page="postid" display="content"]
Find the Post ID of your Elementor template
Every piece of content in your WordPress database has a unique numerical ID, even custom post types like Elementor templates.
There are several easy ways to find the Post ID of your template:
From the edit Page:
- Go to Dashboard > Templates > Saved Templates
- Select a template and click edit
- Look in the URL bar for ‘post=xxxx’
- The numbers in place of ‘xxxx’ is your PostID
Hover the Template Name
Instead of clicking ‘edit’, you can just hover over the template’s name (or the edit link) and the URL with Post ID will be displayed in the bottom left of your browser.
How to use the Insert Pages Shortcode
The Insert Pages plugin lets you grab the data of any post or page in the database and insert it into another piece of content by using a shortcode. It accepts two parameters.
- Page – Which page, post or custom post type to pull data from
- Display – What to show from that post (content, custom field data, etc)
To insert Elementor Templates, we’ll always use the same format:
[insert page="TemplatePostID" display="content"]
So for my example above, I’d use:
[insert page="1634" display="content"]
Where to use your Shortcodes?
Shortcodes are one of the oldest and best-supported methods of injecting content in WordPress. They can be used almost anywhere.
Here are some ideas:
- Pages or Post content
- Sidebar/Footer widgets
- Other Page Builders (other than Elementor)
- Popups/Modal boxes
- Theme Hooks (themes like GeneratePress Pro, Astra, Neve, and OceanWP have multiple locations to hook templates into your theme)
Using Templates in Small Containers (like Widgets)
If you insert an Elementor template into a full-width content area, it’ll likely look fine. But problems pop up when you take a template that was designed to look normal at 800px and stick in a box that’s only 300px wide (like a Sidebar).
Ordinarily, Elementor uses media queries to adjust the layout for small screens, so elements stack on top of each other. But in a sidebar, it’s not the screen that is small, it’s just the container. So media queries don’t get triggered.
How to fix it
When you plan to use a template in a narrow container, you should build it as mobile-ready from the start in Elementor. It needs to fit without media queries, which means Elements can’t re-flow inside the container.
And you end up with something that looks like this:
Here are some simple rules of thumb:
Don’t Use…
- multiple columns (single-column only)
- elements with a fixed minimum width
- too much padding/margin
- margin on the template outer section
- large text
You can even set a max-width on the outer section while designing the template, so that you’re building it at a similar width to how it will display in the sidebar.