00:00:05:24 - 00:00:06:05
Right.
00:00:06:05 - 00:00:07:00
So starting off
00:00:07:00 - 00:00:10:16
with sections and really understanding
what sections are in this case.
00:00:10:28 - 00:00:13:22
So sections are, as we've already said,
00:00:13:22 - 00:00:16:22
they're like building blocks
that help to organize your web page.
00:00:16:24 - 00:00:20:23
and they define or divide
the content into different parts.
00:00:21:05 - 00:00:23:22
So you'll see this on the vast
majority of web pages.
00:00:23:22 - 00:00:25:00
And I apologize for some of you.
00:00:25:00 - 00:00:28:19
If you are bespoke web developers,
this will be second nature to you guys
00:00:28:27 - 00:00:31:27
just trying to cover the whole audience
that we might have available here.
00:00:33:20 - 00:00:37:10
So it makes it easier to understand.
00:00:37:10 - 00:00:38:00
You can see here
00:00:38:00 - 00:00:42:03
that this sample page I've got here
is split into three different sections.
00:00:42:05 - 00:00:43:24
So it makes it nice and clear.
00:00:43:24 - 00:00:48:05
Dividing up your section, dividing up
your content into different sections.
00:00:54:02 - 00:00:56:17
Now when
we're actually adding our sections
00:00:56:17 - 00:01:01:19
into Infigo itself,
we have a few different
00:01:02:19 - 00:01:06:24
possibilities of what that section
might be and how that section might work.
00:01:07:17 - 00:01:10:19
So I'll go through this side
and then we'll actually go and see how
00:01:10:19 - 00:01:13:28
a couple of those work,
on the actual storefront itself.
00:01:15:05 - 00:01:17:18
So when we're generating content
templates, users
00:01:17:18 - 00:01:20:18
have several sections, options
to choose from.
00:01:20:26 - 00:01:25:16
and again, you can put numerous
different sections on each page body.
00:01:25:16 - 00:01:26:18
You're not limited to one.
00:01:26:18 - 00:01:29:18
You can add as many as you like.
00:01:30:07 - 00:01:33:07
Now the first one is section.
00:01:33:07 - 00:01:35:15
So you can see the little dropdown
list there.
00:01:35:15 - 00:01:36:28
we can add a section.
00:01:36:28 - 00:01:41:08
This is kind of a general section
template facilitating placing content
00:01:41:17 - 00:01:43:08
in customized columns.
00:01:43:08 - 00:01:47:00
So for example
the one we've got here which I showed
00:01:47:12 - 00:01:50:24
is a section where we've just formatted
the particular content.
00:01:55:03 - 00:01:57:02
The next option we have is a slider.
00:01:57:02 - 00:02:01:01
So that is a scrolling slider
which facilitates sections
00:02:01:07 - 00:02:03:06
with differing appearance.
00:02:03:06 - 00:02:05:09
So this changes it ever so slightly.
00:02:05:09 - 00:02:09:25
You're still specifying the the layout
and the content of those sections.
00:02:10:08 - 00:02:13:08
But seeing as it's sliding
between different
00:02:13:13 - 00:02:15:28
slides, pages,
whatever you want to call them,
00:02:15:28 - 00:02:18:28
you will have to specify
multiple different layouts,
00:02:18:28 - 00:02:21:28
and you can customize those as well.
00:02:23:18 - 00:02:25:19
We also have featured content.
00:02:25:19 - 00:02:28:26
So this is in the product style
or in the category style.
00:02:29:12 - 00:02:32:26
we won't touch on these too much today,
00:02:33:10 - 00:02:36:10
but just to show you what it is
that they look like.
00:02:36:23 - 00:02:39:15
So I'll use that demonstration page
00:02:39:15 - 00:02:42:15
that I've set up.
00:02:43:28 - 00:02:46:28
So you have a section
which is featured Content of Product style
00:02:48:25 - 00:02:51:19
and of category style.
00:02:51:19 - 00:02:54:16
And that will essentially allow you
so the same way in
00:02:54:16 - 00:02:57:16
which you can have featured products
or featured categories.
00:02:57:19 - 00:03:00:19
It allows you to display content
on your home page
00:03:00:19 - 00:03:03:19
using the identical style
of those sections.
00:03:04:03 - 00:03:06:08
So these don't have to link to products
or categories,
00:03:06:08 - 00:03:08:22
it's just using that particular styling.
00:03:08:22 - 00:03:10:17
So this could link to the pages.
00:03:10:17 - 00:03:12:14
It could link to.
00:03:12:14 - 00:03:14:19
It could link to products
if you want it to
00:03:14:19 - 00:03:17:19
and so on and so forth.
00:03:25:15 - 00:03:25:23
All right.
00:03:25:23 - 00:03:30:00
So let's take a look at adding
a couple of sections just for context.
00:03:31:01 - 00:03:34:12
Now when we're actually
going through this process
00:03:34:29 - 00:03:37:29
I'm going to build,
00:03:38:17 - 00:03:40:24
just for this example, a content page.
00:03:40:24 - 00:03:44:18
So a brand new web page
that we can very update very easily,
00:03:44:18 - 00:03:46:19
can take a look at very easily.
00:03:46:19 - 00:03:49:07
So I'm just going to go
to our content pages section,
00:03:50:08 - 00:03:53:08
create a new content page.
00:04:03:04 - 00:04:04:21
I'll save that.
00:04:04:21 - 00:04:08:13
And I'll get started just by changing
that to Content Template editor.
00:04:09:15 - 00:04:12:15
What this gives us by default is
00:04:12:15 - 00:04:15:10
the selection of no content templates.
00:04:15:10 - 00:04:18:10
But we can choose our builder, which is
the one we're going to be focusing on.
00:04:24:06 - 00:04:25:21
That does give you a section in there
00:04:25:21 - 00:04:28:21
by default, but you can get rid of that
if you wish to do so.
00:04:28:21 - 00:04:31:27
So you starting off with a clean slate,
a blank section.
00:04:35:15 - 00:04:38:06
Go to add content
over on the bottom right.
00:04:38:06 - 00:04:40:28
And that gives you the option to,
00:04:40:28 - 00:04:44:10
add different types of sections
that we've just been talking about.
00:04:44:27 - 00:04:47:27
So we'll start off with a section itself.
00:04:51:15 - 00:04:53:01
Now we can add layouts.
00:04:53:01 - 00:04:56:04
So different numbers of columns
we can add content to this.
00:04:56:11 - 00:04:58:12
We'll do that in the next steps.
00:04:58:12 - 00:05:01:21
However if we want to look at specific
configuration options for that
00:05:01:21 - 00:05:04:28
particular section we'll go to that
little configuration icon.
00:05:05:09 - 00:05:06:13
And you'll see this allows us
00:05:06:13 - 00:05:10:09
to control things such as
if we want to change the background color,
00:05:10:17 - 00:05:13:00
if we want an image
to be displayed in the background,
00:05:14:04 - 00:05:17:09
or little different styling options
which are accessible via
00:05:17:09 - 00:05:20:11
a dropdown list, rather
than having to write that HTML code.
00:05:22:23 - 00:05:24:14
So just so we can see what we're doing
here, I'm
00:05:24:14 - 00:05:27:29
just going to switch that background color
to be my primary color.
00:05:28:07 - 00:05:31:07
So that's what's been utilized
in my appearance settings.
00:05:33:23 - 00:05:36:23
And then click on save.
00:05:38:15 - 00:05:40:25
I would of that page
00:05:40:25 - 00:05:43:03
and I have a section at the top here
which is that cool.
00:05:43:03 - 00:05:46:03
It just so happens to be the same color
as my footer as well.
00:05:47:17 - 00:05:48:25
So that's the section included.
00:05:48:25 - 00:05:50:09
There's no content in it so far.
00:05:50:09 - 00:05:53:09
That is the section included.
00:05:54:05 - 00:05:56:04
We could also add a slider,
00:05:56:04 - 00:05:59:04
so I'll try one of those as well.
00:05:59:25 - 00:06:02:14
And you'll see that as I mentioned
before, this requires
00:06:02:14 - 00:06:06:24
a little bit of extra configuration
because you've got a changing screen.
00:06:07:13 - 00:06:11:00
You're going to want multiple
what are essentially sections on there.
00:06:11:07 - 00:06:13:18
So we can add a new slide. For example.
00:06:16:22 - 00:06:18:18
So I've got a couple of new slides.
00:06:18:18 - 00:06:21:17
And then we can start defining
the layout of those particular slides
00:06:21:17 - 00:06:24:17
as well.
00:06:24:24 - 00:06:27:04
I'm just going to change the background
color of those slides
00:06:27:04 - 00:06:30:04
just so
we can see exactly what it's doing.
00:06:32:26 - 00:06:35:18
So I'll make one of my slides like gray
00:06:35:18 - 00:06:38:18
and I'll make my other slide.
00:06:40:05 - 00:06:43:05
My secondary color.
00:06:46:05 - 00:06:47:18
So hopefully you can start to see.
00:06:47:18 - 00:06:48:22
Now I know we're only
00:06:48:22 - 00:06:52:03
doing the absolute basics, but you can see
how this is starting to populate.
00:06:52:15 - 00:06:55:03
So we've created a section
which is currently empty.
00:06:55:03 - 00:06:59:05
We then created a slider
in which we've added two slides.
00:06:59:06 - 00:07:02:06
So they're contained
within the slider element.
00:07:03:21 - 00:07:06:21
If I then save that and refresh the page.
00:07:09:17 - 00:07:10:29
We can see we've got our section
00:07:12:02 - 00:07:12:15
and we've
00:07:12:15 - 00:07:15:15
got the beginnings of our actual slider
component,
00:07:15:15 - 00:07:18:20
which we can see there is changing between
the two slides that have specified.
