00:00:14:03 - 00:00:15:15
In this tutorial we'll learn
00:00:15:15 - 00:00:19:12
how to create new and edit
existing content pages.
00:00:20:07 - 00:00:24:09
Content pages are general pages
on your website such as?
00:00:24:18 - 00:00:26:26
Contact us about us.
00:00:26:26 - 00:00:29:03
Terms and conditions and things like that.
00:00:30:04 - 00:00:32:25
There are a range of preconfigured
content pages
00:00:32:25 - 00:00:35:06
that you're able to modify as required.
00:00:35:06 - 00:00:38:09
Alternatively,
you can create new content pages
00:00:38:09 - 00:00:40:28
from scratch.
00:00:41:20 - 00:00:43:29
Essentially, any additional content
00:00:44:04 - 00:00:47:02
you want to create and provide
to your customers.
00:00:47:12 - 00:00:49:19
You can do so using content pages,
00:00:50:12 - 00:00:55:18
a content page is essentially a blank
canvas for you to either use a rich editor
00:00:55:26 - 00:00:59:17
or insert HTML
to create custom static page
00:00:59:17 - 00:01:02:16
of your choosing.
00:01:04:24 - 00:01:07:11
As of one of the latest updates,
we also have the ability
00:01:07:11 - 00:01:12:14
to use the content template
functionality as well on our content pages
00:01:14:26 - 00:01:15:13
to begin.
00:01:15:13 - 00:01:20:05
We'll navigate to our content pages
section of our admin area.
00:01:20:26 - 00:01:23:20
So we start off
with our content management section.
00:01:24:17 - 00:01:30:04
Then about halfway down the list,
we have content pages.
00:01:32:09 - 00:01:35:13
So here we can see
a number of preconfigured content pages.
00:01:35:22 - 00:01:39:07
Each of these can be completely customized
by the administrator.
00:01:39:08 - 00:01:40:19
They're not fixed.
00:01:40:19 - 00:01:43:16
You can completely change them.
00:01:43:16 - 00:01:46:23
In addition, you have got the ability
to add a new content page
00:01:47:03 - 00:01:49:07
by clicking on this button
on the top right.
00:01:52:22 - 00:01:53:03
In this
00:01:53:03 - 00:01:55:24
example will edit
one of the existing content pages.
00:01:56:04 - 00:01:59:17
You do this just by clicking edit
next to the row of interest.
00:01:59:28 - 00:02:02:03
So I'm going to do this
next while about us.
00:02:02:03 - 00:02:04:10
Page.
00:02:06:01 - 00:02:09:10
So this screen allows for complete
configuration
00:02:09:11 - 00:02:11:22
of the selected content page.
00:02:11:22 - 00:02:16:08
So in addition to the choice of editor
types, which we'll get onto in a moment,
00:02:16:25 - 00:02:20:05
all the available options
include the ability to password
00:02:20:05 - 00:02:23:20
protect a certain page
so you won't be able to access it
00:02:23:20 - 00:02:25:05
on the storefront without password
00:02:26:09 - 00:02:27:05
inclusion on
00:02:27:05 - 00:02:30:27
the site map.
00:02:30:27 - 00:02:36:09
Whether or not the page is accessible
on a closed store.
00:02:36:09 - 00:02:41:25
And you've also got the page, URL in there
as well, which is quite important.
00:02:45:06 - 00:02:46:25
So coming to this body editor
00:02:46:25 - 00:02:50:13
type of the different options
available here, I'm going to start off
00:02:51:19 - 00:02:55:17
by making sure this is on content
template editor, which is by default.
00:02:56:06 - 00:03:00:08
The content template
functionality is fairly recent
00:03:00:08 - 00:03:04:15
and if you go and it eliminates
the need for any HTML knowledge
00:03:04:26 - 00:03:09:19
by replacing the standard code mirror
editor and the rich editor with a series
00:03:09:19 - 00:03:13:20
of simple inputs and controls
to create the content that works for you.
00:03:13:28 - 00:03:23:01
Using a structure of easy
to use building blocks.
00:03:23:01 - 00:03:25:01
If I switch to the Code Mirror editor,
which
00:03:26:19 - 00:03:28:22
many of you may be familiar with,
00:03:28:22 - 00:03:32:21
so this will switch the contents
input to a HTML editor style.
00:03:33:03 - 00:03:36:18
Here you can write your own HTML code
to populate the content page
00:03:36:27 - 00:03:40:28
or you can paste code
from an alternate source.
00:03:42:23 - 00:03:46:01
And finally, we have the rich editor.
00:03:47:28 - 00:03:50:25
So this is a Rich editor,
00:03:50:25 - 00:03:53:20
suitable to be thought
of as kind of a word processor
00:03:53:20 - 00:03:57:19
style editor, where you can directly input
and format your content.
00:03:58:04 - 00:04:00:25
However, you are a bit more limited here
than you would be with the other
00:04:00:25 - 00:04:10:19
two methods.
00:04:10:19 - 00:04:13:18
If you want to see how this content page
appears on the front end.
00:04:13:29 - 00:04:16:22
You can just click on the URL
00:04:24:03 - 00:04:25:06
and our default content
00:04:25:06 - 00:04:28:24
template already provides page
content that we can use.
00:04:29:03 - 00:04:31:12
We can adjust or we can remove.
00:04:31:12 - 00:04:35:11
The page content is constructed
using a series of building blocks added
00:04:35:11 - 00:04:39:14
under the sections area when we're using
our content template editor.
00:04:40:29 - 00:04:42:19
So in our example here, we can see that
00:04:42:19 - 00:04:45:19
we've got three blocks
that are currently specified
00:04:46:08 - 00:04:49:03
and each of those
have other blocks contained within them.
00:04:49:24 - 00:04:53:22
So you can have nested blocks to help
build out your complete range of content.
00:04:55:01 - 00:04:57:21
Just to give you a feel for what
these are actually covering.
00:04:57:21 - 00:05:01:07
So we've got one, which is the banner one
which is the title section and one
00:05:01:07 - 00:05:03:28
which is the staff details.
00:05:04:26 - 00:05:07:17
We can see that we've got a banner,
00:05:07:17 - 00:05:12:04
a title section, and our staff details.
00:05:12:29 - 00:05:17:01
You can expand any of these blocks
by just clicking on the expand icon,
00:05:18:09 - 00:05:20:13
and then you'll see blocks
that are contained within
00:05:20:23 - 00:05:22:28
that initial block.
00:05:23:15 - 00:05:25:07
There are likely to be several levels
00:05:25:07 - 00:05:27:26
of nested blocks
to cover all the content within the page.
00:05:28:16 - 00:05:33:04
So for example, if I start scrolling down
into our staff details,
00:05:33:04 - 00:05:35:18
I then have a couple of different rows
as an introduction.
00:05:37:01 - 00:05:40:26
If I go to our second row,
you'll see that I have four columns
00:05:42:13 - 00:05:42:27
at each of
00:05:42:27 - 00:05:46:05
those has its own image, title,
subtitle and paragraph.
00:05:46:20 - 00:05:51:20
So now we're drilling down
to the level of the staff detail section.
00:05:51:20 - 00:05:54:19
We have our introduction and our two rows,
00:05:55:15 - 00:05:58:05
and then we're focusing on the second row
00:05:59:03 - 00:06:04:12
and we'll focus on column number four.
00:06:04:12 - 00:06:06:09
So that's this section here.
00:06:06:09 - 00:06:09:15
And you can see that
that column number four also has an image,
00:06:09:16 - 00:06:12:15
a title, a subtitle and a paragraph.
00:06:14:06 - 00:06:19:01
So image, title, subtitle and paragraph.
00:06:22:13 - 00:06:25:00
So although we can completely modify this
if we like,
00:06:25:00 - 00:06:27:25
we can delete all of these sections
and recreate them.
00:06:28:07 - 00:06:31:15
If it's in a format
that's already relatively suitable for us,
00:06:31:21 - 00:06:34:15
we could just edit
what was already been generated.
00:06:35:03 - 00:06:37:18
So for example,
if I wanted to update one of the images
00:06:37:18 - 00:06:40:09
here,
I could just go into that particular block
00:06:40:25 - 00:06:43:17
that's showing me the current image
and then
00:06:43:17 - 00:06:46:19
I can upload a new one.
00:06:50:19 - 00:06:51:07
The subsequent
00:06:51:07 - 00:06:53:28
blocks are then title,
subtitle and paragraph,
00:06:54:10 - 00:07:11:12
and I can fill in the relevant details
here.
00:07:11:12 - 00:07:15:00
And again, we could add some additional
content to here if we needed to as well.
00:07:15:08 - 00:07:18:00
So let's say, for example,
we wanted to add a button
00:07:18:00 - 00:07:21:15
which links to the social media page
or something like that.
00:07:21:26 - 00:07:25:02
You could say add content,
and then you get the ability to add
00:07:26:09 - 00:07:30:04
any additional content blocks
you want to this particular section.
00:07:30:18 - 00:07:34:01
Just be aware that if you only add it
to one of the content blocks like this.
00:07:34:26 - 00:07:38:03
So if I had an item here, for example,
it might mess up the formatting
00:07:38:03 - 00:07:39:07
for the rest.
00:07:39:20 - 00:07:41:05
So you want to be
00:07:41:13 - 00:07:51:22
careful
that you keep all of them consistent.
00:07:52:12 - 00:07:54:10
So what you'll notice
with the image as well.
00:07:55:26 - 00:07:57:04
So I,
00:07:57:04 - 00:08:03:07
if I look at one of the other blocks,
that image has a suggested size
00:08:03:07 - 00:08:03:27
and you'll find that
00:08:03:27 - 00:08:06:20
throughout the default templates,
wherever there's an image displayed,
00:08:07:02 - 00:08:09:24
more often than not,
it will have a suggested image size.
00:08:10:09 - 00:08:12:15
You can upload images of different sizes.
00:08:12:15 - 00:08:14:20
You're not limited to just that.
00:08:14:20 - 00:08:17:07
But if you want to keep the formatting
nice and tidy,
00:08:17:07 - 00:08:20:22
the same as we've got it in our default,
then those are the recommended
00:08:21:21 - 00:08:24:00
resolutions to use for your images.
00:08:24:00 - 00:08:30:03
Okay, so we should note that many of the
blocks have unique configuration settings.
00:08:30:03 - 00:08:35:12
So if a block at any level
shows this symbol, so the little settings
00:08:35:12 - 00:08:40:12
gear icon that it means it has additional
configuration settings available.
00:08:40:23 - 00:08:44:12
And this could include information
such as styling options,
00:08:44:12 - 00:08:49:12
it could be a text alignment,
could be the size of various
00:08:49:12 - 00:08:53:21
bits of content, position colors
and so much more.
00:08:54:10 - 00:08:56:18
So for example, if I go on
00:08:59:05 - 00:08:59:26
our row
00:08:59:26 - 00:09:03:23
here, let's see what
we've got on our row of stuff in that one.
00:09:03:23 - 00:09:06:08
It's just a simple column name
so nice and easy.
00:09:07:11 - 00:09:11:20
If I go to a full section,
you'll see I've got a lot more settings.
00:09:11:21 - 00:09:16:03
So things such as text color,
whether or not we've got
00:09:16:03 - 00:09:19:22
a background color, whether or not
we've got alignment of text,
00:09:20:00 - 00:09:25:01
and that will apply to everything
that is within that section.
00:09:27:20 - 00:09:29:20
So let's say, for example,
I want to change this
00:09:29:20 - 00:09:33:21
to a different color,
00:09:33:21 - 00:09:36:00
so I'll change it to my secondary colleges
so we can actually
00:09:36:12 - 00:09:37:18
definitely see a change.
00:09:37:18 - 00:09:39:21
So I'm not saying this would be
00:09:40:06 - 00:09:42:06
fantastically
00:09:42:09 - 00:09:44:11
appealing to the eye.
00:09:44:27 - 00:09:47:08
I'll click save and continue.
00:09:47:08 - 00:09:53:13
And then let's
take a look on our storefront.
00:09:53:13 - 00:09:54:06
So what we can see
00:09:54:06 - 00:09:57:29
is that that entire section
has now been updated with that new color.
00:09:57:29 - 00:10:01:21
So all of the content contained within
that section has been updated to a match
00:10:02:21 - 00:10:04:16
and our row two
00:10:04:16 - 00:10:07:16
column four section has also been updated
00:10:07:16 - 00:10:10:17
with those new bits of content.
00:10:10:17 - 00:10:14:23
We also have the ability to add completely
new sections if we want to do so.
00:10:15:25 - 00:10:18:03
And then of course you can add nested
00:10:18:03 - 00:10:20:17
blocks within that new section.
00:10:20:17 - 00:10:22:20
So it's all about
where you add the content.
00:10:22:22 - 00:10:26:29
So if I click this add content
button here, which is contained on the top
00:10:26:29 - 00:10:30:14
level of our section, that's
going to create a new section for us.
00:10:31:09 - 00:10:33:28
We can create a section,
we can create a slider
00:10:34:11 - 00:10:36:21
or a couple of featured
00:10:37:15 - 00:10:40:15
content types.
00:10:40:15 - 00:10:43:17
So if I go for a section, for example,
that creates a brand new section,
00:10:43:29 - 00:10:46:13
I then get an additional add
content button
00:10:47:05 - 00:10:57:23
which allows me to add content
within that particular section.
00:10:57:23 - 00:11:02:20
So if I say one column that gives me
a new content block where again I can add
00:11:03:12 - 00:11:11:27
nested information,
00:11:11:27 - 00:11:16:15
I'll save that
and take a look at our storefronts again.
00:11:16:15 - 00:11:21:23
And we see our new content
is now available in a new section.
