00:00:12:23 - 00:00:13:04
In this
00:00:13:04 - 00:00:17:28
tutorial, we're going to take a look
at utilizing the container and module
00:00:17:28 - 00:00:21:12
functionality
within the layout editor to achieve
00:00:21:13 - 00:00:25:14
customize web page layouts.
00:00:25:14 - 00:00:28:23
So as with the previous video
that took a look at switching
00:00:28:23 - 00:00:31:26
layouts, there's a bit of terminology
that we need to be aware of.
00:00:32:29 - 00:00:35:11
So a layout is the overall structure
00:00:35:12 - 00:00:39:18
and configuration of your page
on the front end of your storefront.
00:00:40:15 - 00:00:45:09
So looking at our In-Development
storefront here, for example,
00:00:45:09 - 00:00:49:28
the layout is what we consider
the overall structure of our page.
00:00:50:12 - 00:00:53:18
So for example, having the footer
at the bottom, the header at the top
00:00:54:00 - 00:01:01:06
and the main content in the middle,
we also need to consider a container.
00:01:01:17 - 00:01:06:23
So this is a pre designated
area of your main layout and that includes
00:01:06:23 - 00:01:11:29
elements such as a header like we've
got at the top of our page here, a footer
00:01:12:27 - 00:01:16:10
and our main content
00:01:19:11 - 00:01:20:13
now containers
00:01:20:13 - 00:01:23:19
as the name suggests, they just are areas
00:01:23:19 - 00:01:26:22
that we can add or remove things
from to sort of structure,
00:01:27:06 - 00:01:29:22
how we're adding new elements
to our page of
00:01:29:22 - 00:01:33:16
where they will appear.
00:01:33:16 - 00:01:36:22
A module is an element that sits
00:01:36:22 - 00:01:39:16
within or relative to our containers.
00:01:40:29 - 00:01:43:25
So these adds information
00:01:43:25 - 00:01:46:27
or functionality to your page things.
00:01:46:27 - 00:01:49:27
This could include, for example,
or a search bar,
00:01:50:28 - 00:01:53:07
the ability to navigate between products
00:01:53:19 - 00:01:57:09
or if you want to put particular imagery
or text onto your page.
00:01:57:17 - 00:02:02:17
These might be done using modules
which sit within certain containers.
00:02:02:17 - 00:02:07:14
So that means they'll appear
at a certain part of your page.
00:02:07:14 - 00:02:10:04
And then we've also got to consider
the term columns.
00:02:10:20 - 00:02:13:28
So again, quite self-explanatory.
00:02:14:05 - 00:02:17:23
However, in this respect,
we're talking about the names
00:02:17:23 - 00:02:20:17
that are given to our two main
layout groups.
00:02:21:01 - 00:02:24:17
So we have one column pages
and two column pages
00:02:24:27 - 00:02:28:20
which allow for a greater variation
in our layouts.
00:02:29:16 - 00:02:32:20
And the difference between the two is
that containers are laid out
00:02:32:21 - 00:02:42:02
slightly differently, and we'll see that
as we go through this tutorial.
00:02:42:02 - 00:02:45:14
So what we're going to do first,
if we go to our home page,
00:02:45:27 - 00:02:49:25
I'm going to navigate
to the Layout Administration panel,
00:02:50:03 - 00:02:53:17
which is located on the
front end of your storefront,
00:02:54:18 - 00:02:56:09
and it's this icon on the bottom left
00:02:56:09 - 00:03:04:09
which will just be visible
to administrators.
00:03:04:09 - 00:03:07:19
Now what we want to do is to identify
and apply a layout
00:03:07:19 - 00:03:11:17
that we actually want to work on.
00:03:11:17 - 00:03:12:04
And I'll tell you what,
00:03:12:04 - 00:03:15:16
before I actually do this, I'm
going to switch to another page.
00:03:15:25 - 00:03:18:11
So we're not actually messing up our home
page here.
00:03:18:23 - 00:03:22:29
So I'm going to go to our contact page,
which at the moment is very, very simple.
00:03:22:29 - 00:03:27:15
There's a header, there's a little bit
of information and there is a flutter.
00:03:28:25 - 00:03:31:29
And if I go back on my icon here,
you can see that
00:03:31:29 - 00:03:37:14
the layout is currently
using is the one column layout.
00:03:37:14 - 00:03:41:00
As we've mentioned in previous videos,
a lot of these layouts are blank
00:03:41:00 - 00:03:43:22
templates
which are waiting user specification.
00:03:44:13 - 00:03:45:06
If you
00:03:46:14 - 00:03:47:07
highlight it
00:03:47:07 - 00:03:49:21
and select one that you want to work on
00:03:51:08 - 00:03:52:29
and click on Change Layout,
00:03:52:29 - 00:03:55:18
any changes that we make to
00:03:57:00 - 00:04:00:04
the modules within the containers
and the layout of our page
00:04:00:18 - 00:04:03:22
will now be applied
to that particular layout
00:04:03:26 - 00:04:09:20
and that will be global
across the entire storefront.
00:04:09:20 - 00:04:17:11
It's also in this list here that we switch
between our one and two column layouts.
00:04:17:11 - 00:04:20:20
So just to briefly take you
through the main difference between
00:04:20:20 - 00:04:24:03
those one and two column layouts,
I've got a little PDF here
00:04:24:03 - 00:04:28:11
which is also available from our Help Desk
as a PDF download.
00:04:28:12 - 00:04:33:17
If you wish to have a copy
of this yourselves.
00:04:33:17 - 00:04:37:22
So to serve as a good point of reference,
the main container
00:04:37:24 - 00:04:41:05
which is in the center here, the think of
this is the layout of our actual page
00:04:41:12 - 00:04:45:01
and these are the different containers
within our page.
00:04:45:18 - 00:04:47:01
This is a one column layout.
00:04:48:18 - 00:04:49:25
The main container
00:04:49:25 - 00:04:54:06
will always contain the automatically
generated content for the page.
00:04:54:21 - 00:04:57:07
So if we look at our page,
we're looking at here,
00:04:57:07 - 00:05:01:14
for example, this text
that we've predefined in the back
00:05:01:14 - 00:05:06:27
end of Infigo
that is within our main container.
00:05:06:27 - 00:05:10:27
So for example, a product page
here will have the product information
00:05:10:27 - 00:05:12:16
within the main container.
00:05:12:16 - 00:05:16:02
A category page will have all of its
products and subcategories
00:05:16:02 - 00:05:17:18
within the main container.
00:05:17:18 - 00:05:20:12
And as we've seen with this what,
which is a content page,
00:05:20:21 - 00:05:23:15
we've just got our defined
00:05:23:15 - 00:05:28:14
text essentially.
00:05:28:14 - 00:05:31:23
Now there's not too much of a difference
between the one column
00:05:31:24 - 00:05:33:01
and two column layout.
00:05:33:01 - 00:05:36:29
So if I just scroll down to the next page,
just keep a careful eye on what changes
00:05:38:14 - 00:05:38:25
you'll see.
00:05:38:25 - 00:05:41:17
The only real change here is that
00:05:42:27 - 00:05:45:06
the main container has been
00:05:45:06 - 00:05:48:26
shortened, so it no longer spans
the full width of the page.
00:05:49:05 - 00:05:52:14
And now we have this left side
container option as well.
00:05:53:21 - 00:05:57:09
So this is most notable use
of the display of categories and products
00:05:57:18 - 00:06:01:29
without losing the main body
of the content within the main container.
00:06:03:06 - 00:06:06:18
And again, it's completely up to the user
whether they want to use a one
00:06:06:18 - 00:06:13:12
or two column layout.
00:06:13:12 - 00:06:16:16
So I've applied this one column D layout,
which I know
00:06:16:24 - 00:06:20:15
is not in use on
anything else on my storefront.
00:06:20:15 - 00:06:23:05
And so I can I can change this.
00:06:23:05 - 00:06:26:16
And what I want to do to begin with is
I want to start with a completely
00:06:26:16 - 00:06:29:09
clean slate. So I'm going to remove
00:06:29:11 - 00:06:33:18
a lot of the modules
that we currently have on this page.
00:06:34:16 - 00:06:35:28
And what I do to get to
00:06:35:28 - 00:06:39:22
this option is to click on this toggle
layout mode here.
00:06:41:19 - 00:06:45:08
This will show us on our actual storefront
page.
00:06:45:26 - 00:06:49:15
We'll still see the content
that's visible.
00:06:49:15 - 00:06:52:07
However, it will also give us the option
to remove
00:06:53:03 - 00:06:56:18
any of those modules
that we don't want to utilize.
00:06:57:02 - 00:07:00:19
So what I'm going to do is just remove
all of the options
00:07:01:07 - 00:07:03:17
we have on there just by clicking remove.
00:07:04:08 - 00:07:08:16
And you'll see that the only thing
I have left now on that page is my
00:07:09:17 - 00:07:21:27
text, which appears in the main container.
00:07:21:27 - 00:07:22:12
All right.
00:07:22:12 - 00:07:25:21
So the first thing we're going to do
to actually add modules to
00:07:25:21 - 00:07:29:02
this page is to specify our top menu.
00:07:29:02 - 00:07:32:10
We want to actually see
a top menu on our page.
00:07:32:10 - 00:07:36:11
So this is our our header,
which contains all of the different links
00:07:36:11 - 00:07:39:23
and our logo and whatever
other information we need it to contain.
00:07:41:02 - 00:07:43:17
So if
I go back to our layout manager panel,
00:07:45:10 - 00:07:49:00
I'm going to select
where I want this module to replace.
00:07:49:00 - 00:07:51:02
So which container do I want this module?
00:07:51:02 - 00:07:54:29
Then I can reference back to my PDF
00:07:55:02 - 00:08:03:27
if I wish, so
I might want it in the header container.
00:08:03:27 - 00:08:07:00
And then on the modules
you can see all of the list of modules
00:08:07:00 - 00:08:10:06
that we have available to add to our page
layout.
00:08:11:12 - 00:08:14:03
We'll be covering
a few of these in this tutorial,
00:08:14:03 - 00:08:16:04
but not all of them by any means.
00:08:17:18 - 00:08:23:17
And we're going to navigate to top menu.
00:08:23:17 - 00:08:26:00
I then say add module to container.
00:08:27:08 - 00:08:29:11
We can now see that top menu
00:08:29:11 - 00:08:34:05
appearing on our page layout.
00:08:34:05 - 00:08:38:02
So next we will see how different
container and module selections
00:08:38:02 - 00:08:41:08
influence the final page layout.
00:08:41:08 - 00:08:45:17
So we'll take a look at a few simple
examples will primarily
00:08:45:18 - 00:08:48:28
focus on the header container
that we've worked on here, but
00:08:48:29 - 00:08:52:18
we'll put a couple of different modules
in different containers as well.
00:08:53:28 - 00:08:54:27
So we'll start off
00:08:54:27 - 00:09:02:29
by clicking on the show
layout administration panel.
00:09:02:29 - 00:09:05:23
And what we're going to do next
is we're going to actually apply
00:09:05:23 - 00:09:10:06
a search box to our header container.
00:09:10:06 - 00:09:10:27
So this is so
00:09:10:27 - 00:09:14:22
we can actually search between products,
for example, between categories.
00:09:15:14 - 00:09:18:17
So if I go to header container
00:09:18:19 - 00:09:20:20
because I want it to appear
at the top of my page
00:09:21:21 - 00:09:24:14
and then within my modules
00:09:25:00 - 00:09:27:01
quite close to the bottom,
I have the option
00:09:27:01 - 00:09:30:03
for a search box
00:09:32:13 - 00:09:34:08
at module two container
00:09:34:08 - 00:09:43:15
and you can see how that search
box is appearing.
00:09:43:15 - 00:09:44:10
So you'll see here
00:09:44:10 - 00:09:49:19
that we've added the search box
directly to the header container.
00:09:49:19 - 00:09:54:18
Now the search box option there is
spanning the entire width of our page.
00:09:55:09 - 00:09:57:16
The search box itself is not.
00:09:57:16 - 00:10:00:19
However, it means that it's
being orientated to the direct
00:10:00:19 - 00:10:03:20
left of that search box section,
00:10:05:07 - 00:10:07:00
and that's because it follows the behavior
00:10:07:00 - 00:10:12:09
of the main head, a container itself.
00:10:12:09 - 00:10:15:17
What it also means
is that any subsequent modules that we add
00:10:15:17 - 00:10:20:03
to the header
will appear directly below this.
00:10:20:12 - 00:10:24:05
So essentially just to end up
with a line of modules which might not
00:10:24:05 - 00:10:29:28
look the tidiest,
it might not be exactly what we want.
00:10:29:28 - 00:10:33:28
So what we're going to do
is see how we might make
00:10:33:28 - 00:10:36:00
this look a little bit
more visually appealing.
00:10:37:03 - 00:10:40:01
So if I go back to our navigation
and layout manager
00:10:40:01 - 00:10:46:06
option down here,
00:10:46:06 - 00:10:49:05
what we're going to do next is apply
00:10:49:28 - 00:10:54:12
what can essentially be thought
of as a sub-container, I would say.
00:10:55:18 - 00:10:57:25
So let me add this now explain it further.
00:10:58:13 - 00:11:02:18
So if we go to our header container,
so again, we want to add something
00:11:02:18 - 00:11:03:22
to our header container.
00:11:04:27 - 00:11:06:01
And this time I'm
00:11:06:01 - 00:11:10:05
going to navigate to a module
called header module one column.
00:11:11:05 - 00:11:17:17
So so you can see
00:11:17:17 - 00:11:21:00
that's been added in there.
00:11:21:00 - 00:11:24:00
So modules such as this,
00:11:24:00 - 00:11:27:24
they act as I would say,
they act as additional formatting.
00:11:27:24 - 00:11:31:03
So they allow us to configure a layout
more in keeping
00:11:31:17 - 00:11:33:18
with the rest of the page.
00:11:34:08 - 00:11:37:23
And this can be thought of, as I mentioned
before, as kind of a sub-container.
00:11:39:04 - 00:11:40:29
So I'll show
you exactly what I mean by this.
00:11:40:29 - 00:11:44:18
So if I go to our layout manager again,
00:11:45:12 - 00:11:50:02
you'll notice that we in our containers
and these were present before.
00:11:50:02 - 00:11:52:22
So we have header left and header right
00:11:53:14 - 00:11:57:28
and those particular containers
are not on our main settings here.
00:11:57:28 - 00:12:00:19
They're not on our main layouts.
00:12:00:19 - 00:12:03:24
And if we added something directly
to header left
00:12:03:24 - 00:12:06:15
and had a right, we wouldn't have seen
it appear on our page.
00:12:07:06 - 00:12:11:13
But now we have this sort
of additional sub-container.
00:12:11:13 - 00:12:14:25
What say we can add things to header
left, header right
00:12:15:02 - 00:12:19:06
and they will show on our page.
00:12:19:06 - 00:12:21:14
So we find our go to header left.
00:12:22:24 - 00:12:25:20
I'm going
to select on our search box again
00:12:27:01 - 00:12:29:07
and add that to our container.
00:12:29:07 - 00:12:32:09
And what you can see is
that it's no longer spanning
00:12:32:09 - 00:12:34:21
the entire width of our page.
00:12:34:21 - 00:12:37:08
The one column layout
00:12:37:08 - 00:12:39:15
there is now just the same width as our
00:12:40:17 - 00:12:42:14
main content.
00:12:42:14 - 00:12:46:19
So it's much more reasonable formatting
that the entire width of the page.
00:12:47:06 - 00:12:50:13
So you can see there, if I click on that,
my search products
00:12:50:13 - 00:13:00:08
is now a bit more reasonably placed.
00:13:00:08 - 00:13:03:27
So the use of modules
giving this sub container functionality
00:13:04:10 - 00:13:08:06
can also be used to group
modules side by side, which you wouldn't
00:13:08:06 - 00:13:11:03
be able to do just by adding things
directly to the main.
00:13:12:24 - 00:13:14:27
The main container.
00:13:14:27 - 00:13:17:10
So in this example
will place another module
00:13:18:04 - 00:13:22:15
next to the search box
that we've just added.
00:13:22:15 - 00:13:28:00
So we'll start off
by going to the layout manager again.
00:13:28:00 - 00:13:34:00
I'm going to pick the same container.
00:13:34:00 - 00:13:37:06
So had a left,
you might reasonably think that
00:13:37:06 - 00:13:40:26
if you add the header right,
it will add it over here.
00:13:41:08 - 00:13:44:23
However, Thinker's header left
and had a right as different containers,
00:13:44:23 - 00:13:47:03
so they will appear
in different places on the page
00:13:47:25 - 00:13:50:15
if we add something else to header left.
00:13:50:15 - 00:13:54:02
So this time I'll go
for say mini shopping cart,
00:13:55:15 - 00:13:57:08
add module to container
00:13:57:08 - 00:14:01:02
and you can see there it's now
half the length of the search box option
00:14:01:12 - 00:14:05:20
and is allowing us to put that
mini shopping cart right next to it.
00:14:06:05 - 00:14:08:03
And we could do that
with multiple containers
00:14:08:03 - 00:14:13:29
so we're not limited to
we could do three or more.
00:14:13:29 - 00:14:17:03
So we'll move away from the
00:14:18:04 - 00:14:19:14
header
00:14:20:05 - 00:14:21:01
container.
00:14:21:01 - 00:14:24:12
I'm first I'm going to get rid of that
first search box that we added.
00:14:24:19 - 00:14:27:28
She's now surplus to requirements.
00:14:27:28 - 00:14:32:12
What we're going to do now is to look
at a couple of different containers
00:14:33:03 - 00:14:37:15
we're going to look at before
main container and after main container,
00:14:37:28 - 00:14:41:18
which, if I go to our PDF is just before
00:14:42:01 - 00:14:45:16
and just after our main
container contents.
00:14:45:16 - 00:14:53:09
So our main body of text.
00:14:53:09 - 00:14:56:03
So if I go back to our way out manager,
00:14:57:00 - 00:15:00:17
if I select the container
called before main container,
00:15:02:10 - 00:15:04:10
now I
can add whatever module I want to this.
00:15:04:10 - 00:15:07:10
In this case we might go for a slider
00:15:07:10 - 00:15:08:19
because we'll have a look at that.
00:15:08:19 - 00:15:15:12
And it's options in subsequent videos.
00:15:15:12 - 00:15:18:13
You can see
it's added outside a module directly
00:15:18:13 - 00:15:23:19
before our main content.
00:15:23:19 - 00:15:26:29
So the slider itself can be configured
within the editable
00:15:26:29 - 00:15:29:25
content area of the storefront backend.
00:15:30:10 - 00:15:36:18
And as I mentioned, this will be covered
in a a different tutorial.
00:15:36:18 - 00:15:40:16
And the last thing we'll add
here is another module, but we'll do this
00:15:41:09 - 00:15:44:07
after main container
00:15:44:13 - 00:15:45:00
this time.
00:15:45:00 - 00:15:47:17
Maybe I'll do a shopping cart slider
00:15:50:08 - 00:15:54:13
and then I'll add that one as well.
00:15:54:13 - 00:15:56:04
Now saying that our basket is empty,
00:15:56:04 - 00:15:59:09
I've got no items there,
but that will show us details
00:15:59:09 - 00:16:03:10
on any items that we have in our basket
after our main contents.
00:16:03:10 - 00:16:10:25
Because, because we've added it
to that particular container.
00:16:10:25 - 00:16:13:24
Oh, okay. So that's it for this tutorial.
00:16:13:24 - 00:16:17:26
Hopefully that gives you
a good understanding of how the container
00:16:17:26 - 00:16:21:22
and module functionality works.
