00:00:06:29 - 00:00:07:08
So we've
00:00:07:08 - 00:00:10:08
done the sections contained within
the sections.
00:00:10:08 - 00:00:14:04
We're going to have to actually define
the layout of those sections.
00:00:14:14 - 00:00:17:23
So what this primarily will involve
is selecting
00:00:17:23 - 00:00:20:23
a number of columns from 1 to 4 columns.
00:00:21:20 - 00:00:24:28
If you do select those 1
to 4 column options, they will provide you
00:00:24:28 - 00:00:28:22
equal width columns which span
the entire section that you've added.
00:00:30:09 - 00:00:31:26
Another option that you have available
00:00:31:26 - 00:00:35:01
is two column image and content.
00:00:35:21 - 00:00:41:01
So this is quite simply where the section
is split into two columns.
00:00:41:14 - 00:00:44:22
You've got a fully defined
image on one side,
00:00:44:29 - 00:00:47:14
and you can put whatever content
you want in the other.
00:00:47:14 - 00:00:50:14
You can generate the same things
just using a two column layout.
00:00:50:17 - 00:00:54:27
It's aimed at just saving you a little bit
of time, being a bit more intuitive.
00:00:58:00 - 00:00:58:17
And the third
00:00:58:17 - 00:01:01:17
option you've got on
there is something called featured tiles.
00:01:01:24 - 00:01:04:11
So quite similar to the ones
I showed you before.
00:01:04:11 - 00:01:08:11
This allows you to specify
individual tiles or individual buttons,
00:01:08:16 - 00:01:12:20
things that really draw the attentions
of your of your viewers
00:01:13:01 - 00:01:16:01
to actually link
to certain parts of your site.
00:01:21:01 - 00:01:24:01
And again, I'll show those in a moment.
00:01:24:04 - 00:01:27:01
What we've also got in
there is custom columns.
00:01:27:01 - 00:01:30:19
So this is probably I've actually speaking
been speaking to our front
00:01:30:19 - 00:01:32:18
and frontend team about this.
00:01:32:18 - 00:01:35:19
And they say that custom columns
is one of the things they use the most
00:01:35:19 - 00:01:38:26
when they're generating layouts
using content templates.
00:01:39:16 - 00:01:43:14
So this gives the ability
for administrators to actually define
00:01:43:14 - 00:01:46:28
the width of the different columns
that they add to that particular section.
00:01:48:27 - 00:01:51:20
facilitates the creation of columns
in different widths.
00:01:51:20 - 00:01:55:26
For example, if we have a 33% column
00:01:56:11 - 00:01:59:23
and a 66% column,
it knows that they're going to be
00:01:59:23 - 00:02:03:03
sat side by side because they
they fit within that same row.
00:02:06:29 - 00:02:08:15
And then, as with the other columns,
00:02:08:15 - 00:02:11:15
multiple content can be placed
within those columns as well.
00:02:13:10 - 00:02:14:25
If the next column you add.
00:02:14:25 - 00:02:18:19
So let's say for example,
we've got our 33% or 66%
00:02:19:08 - 00:02:23:09
if the next custom column
we add doesn't fit on the same line.
00:02:23:20 - 00:02:26:22
It knows this and it automatically
places it on the next one down.
00:02:26:23 - 00:02:29:11
So it's quite easy
to format this whole thing.
00:02:29:11 - 00:02:33:23
You can see there
my setup with a 3366, 20, 20, 60.
00:02:34:16 - 00:02:37:16
That's what I've got as a result.
00:02:43:13 - 00:02:46:25
So just to give some context
as to how those different layout
00:02:46:25 - 00:02:49:25
configurations
would work on our actual storefront,
00:02:50:03 - 00:02:52:15
again, I'm going to jump to the
page I created for you guys.
00:02:54:19 - 00:02:57:19
We've got single column layout.
00:02:58:16 - 00:02:59:08
Two column.
00:02:59:08 - 00:03:02:03
Again, you can put multiple
bits of content in those columns.
00:03:02:03 - 00:03:05:03
It doesn't just have to be one thing
00:03:05:03 - 00:03:08:00
three column, four column
00:03:08:00 - 00:03:11:00
two, column image and content.
00:03:12:20 - 00:03:15:20
And then our custom columns.
00:03:23:13 - 00:03:23:23
All right.
00:03:23:23 - 00:03:27:05
So let's take a look at this in one of
our sections that we've been creating.
00:03:27:21 - 00:03:31:24
So if I expand the actual section
you can see what it's awaiting.
00:03:31:24 - 00:03:35:02
Next is the actual layout specification.
00:03:35:03 - 00:03:38:03
So it needs to know
how it's going to arrange this data.
00:03:38:17 - 00:03:40:14
So we go to add content.
00:03:40:14 - 00:03:43:14
You can see it's giving us the selection
between those different
00:03:44:00 - 00:03:47:00
options
that we've just been talking about.
00:03:47:19 - 00:03:49:24
As I've been talking about them
and picking them up so much.
00:03:49:24 - 00:03:51:00
Let's go for a custom column.
00:03:56:24 - 00:03:58:16
Now, in order to utilize the
00:03:58:16 - 00:04:02:04
custom column, we need to specify
how wide that custom column is.
00:04:02:18 - 00:04:05:19
That's one of those options that's
going to be on its configuration settings.
00:04:05:24 - 00:04:09:05
So just remember click the gear
to get to those configuration settings.
00:04:10:03 - 00:04:13:03
And we can specify
what width that column is going to be.
00:04:19:26 - 00:04:21:03
I'm then going to add a second
00:04:21:03 - 00:04:24:03
custom column.
00:04:26:10 - 00:04:27:05
I can now that we have that
00:04:27:05 - 00:04:30:05
as auto width where it should just fill
in the rest of the line.
00:04:30:13 - 00:04:33:05
Or I can specifically define
how wide I want that
00:04:33:05 - 00:04:36:05
to be.
00:04:39:11 - 00:04:39:29
And that's it.
00:04:39:29 - 00:04:42:02
So if we were defining
one of the other options.
00:04:42:02 - 00:04:44:03
So let's say a specific
00:04:44:03 - 00:04:47:21
two column option that displays
in a very slightly different way
00:04:47:27 - 00:04:50:27
where it's all contained
within one of these building blocks.
00:04:51:01 - 00:04:54:13
But then you've got a separate section for
what you want in each of those columns.
