3 minutes reading time (688 words)

Content Templates - the Joomla Page Builder you didn't know you already had

Content Templates - the Joomla Page Builder you didn't know you already had


Why are you using a so-called page builder when Joomla has everything you probably need right in the box? Don't know what I am talking about? Well it's a fairly hidden feature of the TinyMCE editor called Content Templates.

The idea behind a page builder is that you can easily build an article with layouts that are more than simply paragraphs or lists by using some pre-built elements. Examples of this could be a pricing table or a hero section with image. 

You can do all of this and more with Content Templates in Joomla. The difference is that instead of being given a large, but limited, quantity of elements by the author of the page builder you have to create them for yourself. But don't let that put you off as they are extremely easy to create and you have a virtually inexhaustible supply available from all across the internet. 

This is because a Joomla Content Template is pure html and nothing more. You simply save the html in a text file located in your template's html/tinymce folder and they are available to use. Just don't forget to tell the TinyMCE editor plugin which of your site's templates to look for the content templates.

setting the folder in the editor plugin


For my sites I typically have four different types of content templates:

Full Page Partial Page Elements Buttons  Repeating Text

Each of these content elements is completely formatted - all I have to do is to change the image and text as appropriate. It's no different to editing an existing article and then saving it as a copy. So if your user can do that, they will be able to use Joomla Content Templates, no matter if they create/edit content on the front end or in the administrator interface as long as the Content Template button is available, or has been added, to the TinyMCE toolbar. 

Creating new Content Templates is currently restricted to those users who have access to the Joomla Template Manager but maybe that will be changed in the future. Prior to Joomla 5.0 the code behind this was provided by TinyMCE but it is now "our" code that we can improve upon.

selecting the Content Template on the TinyMCE Toolbar


After you have created your Content Templates you can access them via the stamp button on the TinyMCE toolbar.

The templates are listed in alphabetical order so to make it easier for me to find the one that I want I usually create a dummy template that will load first and act as an index to the different types of Content Templates I have.


list of content templates to insert


A preview is shown for each Content Template that when selected you can insert into your article and edit the content and images as required. 

Power Tip 1

A content template is just html and the preview will show exactly what will be inserted. But - there is always a but - this Power Tip lets you add additional information to the preview that will not be inserted into the article.

show additional information and instructions

To achieve this you need to wrap the parts of the template that you wish to insert in an additional <div> with a class of "mceTmpl". Anything outside that div will be displayed in the preview only but not inserted.

Power Tip 2

I regularly have some buttons in my content and the markup can be quite complex. For these I have a Content Layout with a special feature so that instead of inserting the layout for the button in to the article and then changing the text I can do it the other way around. I select the text in the article that I want to make into a button and then select the required button template.

show preview of button with preselected text

To achieve this you need to wrap the sample button text in your template with an additional <span> with a class of "selcontent" Anything inside that span will be replaced with the content that you highlighted in the article.


unlimited content templates works with all site templates copy to any site zero additional cost an almost no-code solution no dependencies almost no learning curve. zero Joomla upgrade impact
Stay Informed

When you subscribe to the blog, we will send you an e-mail when there are new updates on the site so you wouldn't miss them.

Making workflows that work for you
Templates for Joomla - Episode 1: Templates, Frame...


No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Tuesday, 23 July 2024

Captcha Image