ShortCodes – Do the Impossible: Use Components Right Inside Elements CMS
One short line in your CMS text – and like magic, your gallery, table or audio player appears
In Elements CMS, you normally can't place components inside the text of an entry. A picture, a link or an embedded YouTube video is about as far as it goes. ShortCodes changes that: galleries, tables, audio players, author cards and almost any other Elements component can now go anywhere in your text.
And it's easy to do: on a regular Elements page, put a single component or a whole group of them into a container, then give the container an ID. Now type one short line in your CMS text, exactly where it should appear. On your page, it shows up right between your paragraphs – fully working, whether it's a gallery with a lightbox, an audio player, an interactive table or anything else you build.
Everything is kept in one place. Change it there, and it updates automatically in every post that uses it.
The impossible is now just one line of text.
Some Examples
Testblog ONE - with an SVG Graphic as advertisement
Testblog TWO - made with Elements Table component
Testblog THREE - made with Elements Audio Component
Testblog FOUR - two different Galleries made with different Components
Testblog FIVE - includes a Contact Form within a contact section
Testblog SIX - final example built only from ShortCodes
{{ item.title }}
Component Settings
Create a folder for your library pages
First, create a folder in your Elements project that will hold the pages with your reusable components. We'd recommend putting a folder called "shortcodes" inside your CMS folder, as shown in the picture – that way everything that belongs to your blog stays together.
The folder can also live anywhere else in your project – you'll tell the ShortCodes component where to find it in a later step. Inside this folder, each page is one library page – for example a page called "galleries" for all your galleries. Place your library pages directly in this folder – subfolders are not supported.
Build your component and give it an ID
Open one of your library pages – in our example the "authors" page inside the "shortcodes" folder. Build what you want to show on this page, just like on any other Elements page. A library page can hold several of them, for example one author card for each writer.
Put each one into its own container and select that container. In our example, it's the author card for Jane Doe.
Now open the Advanced settings of the container and enter an ID – here "jane-doe". Use lowercase letters, numbers and hyphens, and no spaces. Remember the page name and the ID: you'll need both in one of the next steps.
Add the ShortCodes component to your blog page
Select the page that shows your blog posts – in our example "Single-Post". Then drag the ShortCodes component onto this page.
It doesn't matter where you place it, because the component shows nothing on the page itself. We'd recommend putting it at the very bottom, outside of all other containers, as shown in the picture – that way it's easy to find later. One ShortCodes component on this page is enough: it works for all your blog posts.
Set up the ShortCodes component
Select the ShortCodes component on your blog page. Its settings tell it how to recognize your shortcodes and where to find your library pages.
Prefix – the word at the start of every shortcode, right after the opening brackets. It's set to "shortcode" by default, so a shortcode looks like this: [[ shortcode.authors.jane-doe ]]. We'd recommend leaving it as it is. If you change it, use the new word in all your shortcodes.
Library Base Path – the folder you created in step 1, written as a path from the root of your website. In our example it's /cms/shortcodes/. Make sure it starts and ends with a slash. If you put your folder somewhere else, enter that path here.
Fit to Column – switched on by default. A container you place in your text is usually narrower than on its library page. With this setting on, it adapts to the width of the text column, so it looks just like it did when you built it. We'd recommend keeping it on.
How to use it in your CMS text
Open a blog post in your CMS and put the cursor where the component should appear. Type a shortcode on its own line, with an empty line before and after it:
[[ shortcode.authors.jane-doe ]]
A shortcode always has three parts, separated by dots: the prefix from step 4, the name of the library page, and the ID of the container. In our example: "shortcode", then the page "authors", then the ID "jane-doe".
Now open your blog post in Browser Preview – the Editor Canvas does not run JavaScript, so you won't see the result there. Where you typed the shortcode, you'll find the author card from your library page. If the line still shows up as plain text, ShortCodes couldn't find what it points to. Check that the page name and the ID are spelled exactly as in your library.
See it in action
Everything in this guide is included with your purchase as a ready-made demo project. It contains a complete blog setup with library pages for galleries, tables, audio players, adverts and author cards – so you can see exactly how each part fits together, and start from there.
ⓘ Once installed, you'll find the demo project in the projects panel when creating a new project – click "See All Library Items" to show the full list.
Do the Impossible: Use Components Right Inside Elements CMS