00:00:06:02 - 00:00:06:14
Right.
00:00:06:14 - 00:00:10:13
So an introduction to custom content
templates.
00:00:10:28 - 00:00:14:09
just to remind you of what these are.
00:00:17:09 - 00:00:20:25
They're where you're actually
constructing the HTML yourself.
00:00:21:07 - 00:00:24:07
So there are some cheating ways around it
where you can get
00:00:24:19 - 00:00:27:28
some of the boilerplate HTML code
generated.
00:00:28:10 - 00:00:32:15
But to tackle this, you're probably going
to want some level of HTML knowledge
00:00:32:15 - 00:00:35:15
because you are actually essentially
writing the web page
00:00:36:25 - 00:00:39:25
to remind you of the offer, useful
in ensuring conformity.
00:00:40:02 - 00:00:44:22
So let's say, for example,
you were the the,
00:00:46:08 - 00:00:50:07
HTML specialist at your particular
business, the the the web developer.
00:00:50:25 - 00:00:52:26
You could write the HTML.
00:00:52:26 - 00:00:56:22
So a really beautifully laid out page
and you would
00:00:56:22 - 00:01:01:10
in your custom content template, replace
certain bits with variable information.
00:01:01:24 - 00:01:04:23
Let's say one
which is a description of a product.
00:01:04:23 - 00:01:07:14
a link to a YouTube
video, stuff like that.
00:01:08:19 - 00:01:11:15
What that then means
is that if someone who doesn't have that
00:01:11:15 - 00:01:15:09
specialist coding knowledge, once,
they then build a load of products,
00:01:15:20 - 00:01:18:20
you can ensure that they're going
to be always using the same format
00:01:18:25 - 00:01:22:25
because they can select that content
template over and over and over again.
00:01:23:06 - 00:01:26:12
And the only bits
that they have, the ability to change
00:01:26:22 - 00:01:29:19
all the bits
that you specifically specify as a change.
00:01:29:19 - 00:01:32:19
So the description, for example.
00:01:37:13 - 00:01:37:25
Okay.
00:01:37:25 - 00:01:42:10
Another caveat of this, although
creating these custom content templates
00:01:42:10 - 00:01:46:10
and I will show you in, in a moment,
is available to all users.
00:01:46:22 - 00:01:50:06
The content template tab that you need to
utilize
00:01:50:13 - 00:01:53:06
is not enabled on platforms by default.
00:01:53:06 - 00:01:56:05
So Infigo searching for it
and can't find it, that's why
00:01:56:05 - 00:01:59:03
if you do want to play around with this,
then you'll need to put a request
00:01:59:03 - 00:02:00:26
in with our customer support team
00:02:00:26 - 00:02:03:16
and they'll grant
you access to the Content Templates tab.
00:02:05:19 - 00:02:06:03
Please do
00:02:06:03 - 00:02:09:03
bear in mind, and I do have to put
this kind of disclaimer in there.
00:02:09:03 - 00:02:11:28
The custom custom content templates,
00:02:11:28 - 00:02:14:29
will not be covered
as part of your general support plan
00:02:15:23 - 00:02:18:25
because it's kind of covered
is classed as custom coding.
00:02:19:17 - 00:02:23:00
Whilst we're able to create
or troubleshoot custom content
00:02:23:00 - 00:02:24:29
templates for you,
00:02:24:29 - 00:02:28:08
there's award classes, consultancy,
within our professional,
00:02:28:25 - 00:02:31:23
professional services team.
00:02:31:23 - 00:02:34:23
Okay.
00:02:39:19 - 00:02:39:26
Right.
00:02:39:26 - 00:02:41:17
So that's kind of
what I was talking about before.
00:02:41:17 - 00:02:44:05
So let's actually go in and
00:02:44:05 - 00:02:47:05
create one of these very quickly
and see what we can do.
00:02:48:06 - 00:02:51:21
So if you're wanting to do this yourself
later on
00:02:52:02 - 00:02:55:03
as part of those resources
are giving you the ability to download.
00:02:55:14 - 00:02:58:26
I have included some basic boilerplate
code in there for you.
00:02:59:15 - 00:03:02:18
So you can just get started with this,
nice and easily.
00:03:03:14 - 00:03:06:14
So what I'm going to do
is just open that boilerplate code.
00:03:06:16 - 00:03:08:12
and then just
I'm just going to copy that.
00:03:12:11 - 00:03:15:13
Next I'm going to navigate
to my actual Content Templates tab.
00:03:15:13 - 00:03:18:18
This is the one that you'll need support
to activate for you.
00:03:22:29 - 00:03:23:29
This gives you a list
00:03:23:29 - 00:03:26:29
of all of the different content templates
that you have available.
00:03:27:18 - 00:03:30:21
Any that are custom
will have this edit button on the bottom,
00:03:31:07 - 00:03:34:15
and you can create a brand new one
by clicking Add New up on the top
00:03:34:15 - 00:03:37:15
right.
00:03:37:22 - 00:03:40:22
Give it a name.
00:03:48:11 - 00:03:48:29
Enable it.
00:03:48:29 - 00:03:51:06
If you want your users to be able
to actually select
00:03:51:06 - 00:03:54:06
this in the list of templates.
00:03:54:25 - 00:03:57:25
And then click on Save.
00:03:58:12 - 00:04:01:12
Now before we actually start
populating this
00:04:02:10 - 00:04:05:28
we need to specify where this content
templates is going to be available.
00:04:06:12 - 00:04:10:18
So for example, if you're making one
which is specifically related to product
00:04:10:18 - 00:04:14:00
landing page layout, you're not going to
want it to be available everywhere.
00:04:14:15 - 00:04:17:15
So you can specify that
it's purely available on product.
00:04:17:16 - 00:04:18:04
For example.
00:04:19:09 - 00:04:20:26
In our case we'll do it just
00:04:20:26 - 00:04:24:07
so it's these content pages.
00:04:24:22 - 00:04:26:29
So we can just click content pages.
00:04:26:29 - 00:04:30:12
You can select multiple if you want it
available in multiple places.
00:04:33:21 - 00:04:36:21
And then save that as well.
00:04:38:29 - 00:04:40:05
Okay.
00:04:40:05 - 00:04:42:28
So what we've got here in the general tab
00:04:42:28 - 00:04:46:17
is the interface for actually generating
these content templates.
00:04:47:09 - 00:04:50:08
We'll start off with HTML markup.
00:04:50:08 - 00:04:53:05
This is where we're actually going
to put our boilerplate code.
00:04:53:05 - 00:04:55:17
So the the one I've given you for example
00:04:55:17 - 00:04:58:08
I'm just going to copy
and paste that in here.
00:04:58:08 - 00:05:02:29
And all this essentially is
is an incredibly basic web page.
00:05:05:15 - 00:05:08:15
So just to give you some context
as to what that is,
00:05:08:23 - 00:05:10:16
I'm just going to save that.
00:05:10:16 - 00:05:13:16
And then on our content page
that we were making before,
00:05:14:06 - 00:05:15:17
we just close some tabs down.
00:05:15:17 - 00:05:16:17
So I've got some space.
00:05:27:02 - 00:05:30:02
Where
we select the content template to use.
00:05:30:02 - 00:05:33:02
I can now select that custom template
we've made.
00:05:34:00 - 00:05:37:09
At the moment there's no other options
because we haven't specified anything yet,
00:05:37:09 - 00:05:41:24
but we can still look at how
that boilerplate code appears on our page.
00:05:45:05 - 00:05:47:20
So that is our boilerplate code.
00:05:47:20 - 00:05:50:13
Nothing's dynamic in there at the moment.
00:05:50:13 - 00:05:53:28
What this page essentially
is it's a very basic, basic example.
00:05:54:07 - 00:05:56:29
It's going to be an articles page
where you can add
00:05:56:29 - 00:06:01:17
multiple different entries of this article
section here.
00:06:01:17 - 00:06:04:17
So if you want to add article one article
to article three.
00:06:04:21 - 00:06:07:12
And so.
00:06:07:12 - 00:06:09:15
At the moment this is completely static.
00:06:09:15 - 00:06:12:15
So let's start
making some of that variable.
00:06:19:17 - 00:06:23:00
Okay so scrolling down
we have this fields option here.
00:06:23:09 - 00:06:26:23
Now this is the stuff
the areas that we want to make variable
00:06:26:27 - 00:06:29:09
or to do some additional work on.
00:06:29:09 - 00:06:30:23
So we'll start off really basic
00:06:31:22 - 00:06:33:25
on our page here
00:06:33:25 - 00:06:37:07
which currently is in the same color
as the background which doesn't help.
00:06:37:25 - 00:06:41:07
We've got some information which
is going to be the last updated date.
00:06:41:23 - 00:06:43:09
So in our basic example,
00:06:43:09 - 00:06:46:29
all we want our customer to be able to do
here is type in the current date.
00:06:47:06 - 00:06:49:18
So it shows when it was last updated.
00:06:49:18 - 00:06:52:18
Nice and easy.
00:06:55:08 - 00:06:59:05
So if I create a new field in here
I type in the field name.
00:06:59:05 - 00:07:02:05
So I'll say last updated.
00:07:03:26 - 00:07:06:28
And then we've got various different
field types that we can choose from.
00:07:07:12 - 00:07:10:08
So this is things like text boxes, image
00:07:10:08 - 00:07:13:08
uploads
00:07:13:28 - 00:07:16:17
checkboxes, wizzy wigs,
all sorts of different things.
00:07:16:17 - 00:07:19:17
You can play around with different element
types.
00:07:20:03 - 00:07:21:13
We'll keep this nice and simple.
00:07:21:13 - 00:07:22:07
The text box
00:07:23:21 - 00:07:25:24
click create.
00:07:25:24 - 00:07:27:24
Now we
do have some additional options in here
00:07:27:24 - 00:07:29:09
which I've not got time to cover
right now.
00:07:29:09 - 00:07:30:26
Unfortunately.
00:07:30:26 - 00:07:33:00
But the most important thing to note
is that
00:07:33:00 - 00:07:36:00
we have this generated placeholder.
00:07:36:23 - 00:07:39:02
excuse me,
00:07:39:02 - 00:07:40:26
when all we want to do is to place
00:07:40:26 - 00:07:43:26
that placeholder inside
00:07:44:21 - 00:07:48:06
our boilerplate code where we want
that dynamic information to be.
00:07:49:16 - 00:07:52:29
So if I take that last updated,
including the percentage
00:07:52:29 - 00:07:55:29
marks,
take a look for my boilerplate code,
00:07:57:00 - 00:07:59:09
and then I'm just going to directly
replace that static
00:07:59:09 - 00:08:02:09
text with
00:08:02:19 - 00:08:05:15
that place holder.
00:08:05:15 - 00:08:07:20
I'm also going to make it
so that the background is white.
00:08:07:20 - 00:08:10:20
Just all the text is white,
just so we can actually see what it is.
00:08:15:00 - 00:08:15:10
Okay.
00:08:15:10 - 00:08:16:16
So we'll use that as an example.
00:08:17:22 - 00:08:20:22
So I'm going to save that.
00:08:20:24 - 00:08:24:05
Go back to where we're actually utilizing
the content templates and refresh it.
00:08:24:25 - 00:08:28:08
And you can see now
because I've created that variable field
00:08:28:18 - 00:08:32:12
I have last updated available
in my content template.
00:08:32:22 - 00:08:35:02
And this is all of my
00:08:35:02 - 00:08:38:02
configure from figure configurator.
00:08:40:03 - 00:08:40:12
Brain.
00:08:40:12 - 00:08:41:11
Just like completely.
00:08:41:11 - 00:08:44:11
This is all they will be able to see and
all they'll be able to put things into.
00:08:45:05 - 00:08:48:07
So if I say for example
oh well this was last updated today.
00:08:48:07 - 00:08:51:07
So the 16th of the eighth, 23.
00:08:53:06 - 00:08:56:06
Save that.
00:08:58:11 - 00:09:00:25
Take a look at my actual page itself.
00:09:00:25 - 00:09:03:05
And you see
00:09:03:05 - 00:09:03:29
there it is.
00:09:03:29 - 00:09:06:29
It was there that.
00:09:08:05 - 00:09:09:06
Now we're short on time.
00:09:09:06 - 00:09:13:15
So what I want to show
you next is something called a repeater.
00:09:13:28 - 00:09:17:22
Now, this is how we would make it
so that we're actually able to duplicate
00:09:18:03 - 00:09:22:03
this section over and over again very,
very easily without having to copy
00:09:22:03 - 00:09:23:12
and paste sections of code.
00:09:26:05 - 00:09:27:10
So the first thing we want to do
00:09:27:10 - 00:09:31:16
is to add a new field in here,
which is called a repeater.
00:09:33:27 - 00:09:36:26
And I'll call this article section.
00:09:36:26 - 00:09:39:26
For example.
00:09:40:26 - 00:09:43:26
Now our repeater.
00:09:44:06 - 00:09:47:13
Has its own code section at the bottom.
00:09:47:20 - 00:09:49:04
So you can put some additional
00:09:49:04 - 00:09:53:03
boilerplate code in here
and then some additional nested fields.
00:09:53:14 - 00:09:56:13
Now again
we start making nested blocks here.
00:09:56:13 - 00:09:59:13
So we can add
we can specify a piece of code
00:09:59:13 - 00:10:02:13
that's going to be possible
to repeat over and over again,
00:10:03:04 - 00:10:05:29
and then specify things
within that repeatable code
00:10:05:29 - 00:10:08:29
which are again variable.
00:10:10:01 - 00:10:10:24
So to do this
00:10:10:24 - 00:10:14:21
I'm just going to take a section
of my original boilerplate code.
00:10:15:15 - 00:10:18:15
And I'm going to instead
put it into that repeatable section.
00:10:21:22 - 00:10:25:00
So if memory serves
I think it's just this section here.
00:10:28:21 - 00:10:31:21
I'm going to take that away.
00:10:32:14 - 00:10:34:05
And put it in the nested section
00:10:34:05 - 00:10:37:05
for the repeater.
00:10:39:15 - 00:10:42:15
Now if I go and have a look
at that on our actual page again,
00:10:42:18 - 00:10:45:18
at the moment
I shouldn't see any difference.
00:10:50:04 - 00:10:51:25
clearly I've done that wrong.
00:10:51:25 - 00:10:54:25
Let's see.
00:11:00:24 - 00:11:03:24
Oh, I know what.
00:11:09:29 - 00:11:10:09
Okay,
00:11:10:09 - 00:11:13:27
so what we need to do, we have is a bit
of additional configuration to do.
00:11:13:28 - 00:11:17:27
First, we need to specify what those,
00:11:19:23 - 00:11:22:23
nested
configurable sections are going to be.
00:11:23:15 - 00:11:25:16
So I've got a few different
bits of information
00:11:25:16 - 00:11:27:19
I might want to be configured in there.
00:11:27:19 - 00:11:30:19
I think I had an image, I had a title.
00:11:30:27 - 00:11:33:27
As we're short on time,
let's do a very basic section.
00:11:37:13 - 00:11:38:12
so article
00:11:38:12 - 00:11:41:12
title, for example,
I can say add new field.
00:11:41:12 - 00:11:43:05
This is within our nested repeater.
00:11:49:18 - 00:11:52:09
I'll make that a textbox.
00:11:52:09 - 00:11:57:15
And then just as we did before
with the higher level boilerplate
00:11:57:15 - 00:12:00:15
code section, we just want to replace
00:12:00:29 - 00:12:03:29
the relevant section of code.
00:12:07:06 - 00:12:10:06
I might do the same with the summary.
00:12:22:07 - 00:12:24:08
And then I think
there's an image in here as well.
00:12:24:08 - 00:12:25:21
So let's try that.
00:12:25:21 - 00:12:28:21
So if I as an image.
00:12:34:02 - 00:12:36:04
And then again just place the placeholder
00:12:36:04 - 00:12:39:10
where the link for
the image would go inside the HTML code.
00:12:42:06 - 00:12:43:20
Now I, I'm rushing this slightly.
00:12:43:20 - 00:12:45:28
So hopefully I've configured it correctly.
00:12:45:28 - 00:12:48:28
But I'm going to save this.
00:12:50:22 - 00:12:51:11
Refresh
00:12:51:11 - 00:12:54:11
our content template as it's been used.
00:12:54:23 - 00:12:58:06
And now you can see that
we have this article section
00:12:58:09 - 00:13:01:09
with an add new section
and add new button.
00:13:01:15 - 00:13:03:29
And it's
because this is a repeatable section.
00:13:03:29 - 00:13:06:25
We can add multiple versions of that.
00:13:06:25 - 00:13:08:17
So you can see that I've clicked it twice.
00:13:08:17 - 00:13:13:23
I've got two sections
of the same, inputs.
00:13:15:24 - 00:13:17:00
So let me fill this in quickly.
00:13:17:00 - 00:13:21:00
So article one of a bar of words
00:13:21:00 - 00:13:24:00
an image.
00:13:28:11 - 00:13:30:29
Article two
00:13:30:29 - 00:13:33:29
upload an image.
00:13:38:20 - 00:13:41:00
I'll save that.
00:13:41:00 - 00:13:44:00
Refresh my page.
00:13:45:04 - 00:13:48:04
And it doesn't want to work.
00:13:52:05 - 00:13:54:19
Okay, so in my own
00:13:54:19 - 00:13:57:07
haste to get this done,
I've probably just messed up
00:13:57:07 - 00:14:00:13
a bit of the boilerplate code slightly
while I've been copying and pasting.
00:14:00:22 - 00:14:02:17
So my apologies for that.
00:14:02:17 - 00:14:04:20
But hopefully it's quite a nice little,
00:14:04:20 - 00:14:08:09
introduction on how you can utilize
content templates effectively.