Picture of Custom Content Templates Overview | Time-Saving Toolbox

Custom Content Templates Overview | Time-Saving Toolbox

This tutorial explains how Infigo’s Custom Content Templates let you build consistent, repeatable pages without exposing raw code to everyday administrators. You’ll see how a developer can craft an HTML/CSS/JavaScript “boilerplate” that includes dynamic placeholders (tokens and repeaters) for images, text, files, or whole sections. Once the template is saved, non-technical product builders simply pick it in the Content Template Editor, fill in the guided fields, and instantly generate polished product or information pages. The result is a streamlined workflow: uniform front-end design, easy updates across multiple pages, and clear separation between code maintenance and content entry.

Tutorial Video Transcript

A transcript of our tutorial video, ensuring you can find exactly what you need, when you need it.

You can search this page to find the relevant time-stamp in the video. Also, this text can be used as part of the tutorial search feature.

0:01 We'll talk about custom content templates. Now this is a really powerful feature, especially if you do have some experience with HTML, L, CSS, JavaScript, and of course you can utilize AI tools again to generate this for you as I have on mine.
0:22 But what this basically allows you to do, to talk about the basic process, it gives you the ability to create a reusable template over and over and over and over again.
0:34 So, for example, let's say that you want a repeatable format for your product page. You are the web developer that's working in a particular company.
0:46 So you're going to write the HTML on the code that creates that content. But you don't want your general administrators who are creating the product to be able to see that HTML or to modify that HTML.
0:57 So, what these content templates, custom content templates allow you to do is to make some boilerplate code in the background with some dynamic placeholders, I'll share in a moment.
1:08 You can then give your general administrators just the ability to fill in those placeholders rather than having the entire code to play around with.
1:21 And what this means is that you've got an exactly repeatable template over and over again and with just certain elements of dynamic information, and it just makes it super easy to create new content and to update things as well, because you can just go in and modify that custom content template if you
1:38 need to make a change, re-save all your individual products, they're using it, and then the update will be propagated. So let's take a look at an example of this one.
1:55 So I hope that's not too small, but just to sort of show where that comes from. The first step is the actual creation of the code and creation of various placeholders where this dynamic information is going to go.
2:11 Now this is a very difficult one to explain because there's a few different steps. So please do bear with me.
2:18 If I go to content templates, again, you may need to request access to this, if you've not got default access.
2:29 And you can create new templates on here as well. Any default one, which is already within the system, you won't be able to modify.
2:36 Okay, within here, you're putting in your boilerplate code. So this could, as it is from mine, the AI generated or if you've got the skills within house, you could make this yourselves.
2:50 But then in various locations within this boilerplate code, you want that dynamic information to be input. And this could be where you want to upload a custom product description or a customized inline image or a particular sample download file or something like that.
3:07 So it can't all be completely static because otherwise there's no point having the different pages. But we need some level of variable information.
3:15 So what you'll see is that I've got my static mark up here. But then every now and again, you'll see that there is.
3:25 In the same format as our tokens, there's a placeholder in there. Every place is a placeholder, which is specified in these separate sections at the bottom here.
3:38 That will mean that when this template is being used, it is a customisable element, so it could be text boxes, it could be images, upload files, and then also something which we call a repeater.
3:51 So this allows you to create a repeatable body of code and subsequent fields over and over and over again. So this is the first step of creating it, which we're generally done by someone with a bit more coding experience.
4:07 Once that's done, that can then be handed over to your, let's say your general product builder. So I created that template to be applicable to content pages.
4:18 So, this could be additional pages on your site like contactors about me, terms of conditions, whatever you need. All I'm doing when creating this is if I switch to my content template editor, I then get the ability to select that custom template that we've just created.
4:39 And then from a product builder perspective, all you're actually seeing as relevant inputs is things which are dynamic using those play told us.
4:49 So for example, I've got image, I've got text, I've got wizzy wig, I've got file uploads, and then I've got these repeaters here where I can add new elements of it, but each one will have its own individual inputs.
5:07 So in terms of my product builder, I don't need to access the code. I don't need that information. I get there's no chance to be messing it up.
5:14 I'm just putting the information in that we need. And what this means in terms of the front end is we get a consistently structured page with just those various elements of variable data.
5:30 And there's a little script running on here which is identifying different areas of this particular page which are being replaced.
5:37 So we can see here that it's a nice combination of static boilerplate text which might not need to change and variable information that's been input.
5:46 It all just gets fed into that HTML which is working in the background. And using this system, you can put in HTML, you can put in CSS and you can put in JavaScript as well.

Incomplete
Info

Creating Custom Content Templates

 

1. Introduction to Custom Content Templates 0:01

generated-image-at-00:00:01

  • Overview of custom content templates as a powerful feature.

  • Importance of HTML, CSS, and JavaScript knowledge.

  • Mention of AI tools for generating templates.

 

2. Purpose of Custom Content Templates 0:22

generated-image-at-00:00:22

  • Allows creation of reusable templates for consistent content.

  • Example: Creating a repeatable format for product pages.

  • Protects HTML code from general administrators while allowing them to fill in dynamic placeholders.

 

3. Benefits of Using Custom Content Templates 1:21

generated-image-at-00:01:21

  • Ensures repeatable templates with dynamic information.

  • Simplifies content creation and updates.

  • Changes in the template can propagate to all products using it.

 

4. Steps to Create a Custom Content Template 1:55

generated-image-at-00:01:55

  • Access the content templates section (request access if needed).

  • Create new templates or modify existing ones (default templates cannot be modified).

  • Input boilerplate code with dynamic placeholders.

 

5. Adding Dynamic Information 2:50

generated-image-at-00:02:50

  • Include static markup and dynamic placeholders in the code.

  • Dynamic elements can include text boxes, images, file uploads, and repeaters.

 

6. Handing Over to Product Builders 4:07

generated-image-at-00:04:07

  • Once the template is created, it can be used by product builders.

  • Product builders only see relevant inputs without accessing the code.

 

7. Front-End Consistency 5:14

generated-image-at-00:05:14

  • Resulting pages have a consistent structure with variable data.

  • Static boilerplate text combined with dynamic information.

  • HTML, CSS, and JavaScript can be utilized in the templates.

Link to Loom

https://loom.com/share/eed770818cc247ff95dd4bd4b053361d

Alternate Search Terms

custom content template, create product page template, reusable HTML boilerplate, dynamic placeholder fields, repeatable section template, admin-friendly page builder, Infigo template tokens, edit content template code, CMS custom layout guide, tutorial for content templates