00:00:12:28 - 00:00:13:08
In this

00:00:13:08 - 00:00:16:10
tutorial we're going to learn
how to design your website header

00:00:16:23 - 00:00:19:23
primarily
using the content templates feature.

00:00:20:19 - 00:00:23:04
This allows you to create
detailed web page content

00:00:23:04 - 00:00:26:19
without having to write HTML code.

00:00:26:19 - 00:00:29:20
For more information
on adjusting your header via HTML,

00:00:30:00 - 00:00:35:03
please see the tutorial
that's named BG 003

00:00:35:12 - 00:00:39:22
Changing your header logo via HTML.

00:00:41:14 - 00:00:41:28
Okay.

00:00:41:28 - 00:00:46:05
So let's start off by taking a look
at our default storefront here.

00:00:46:23 - 00:00:48:29
So our default header is shown in

00:00:50:03 - 00:00:54:01
this screenshot here
and it contains a logo

00:00:54:01 - 00:00:58:14
and some basic links
that some of which were set up by default.

00:00:58:15 - 00:01:00:17
A couple of which have been added
separately.

00:01:01:25 - 00:01:03:28
Our task over the course of this tutorial

00:01:04:07 - 00:01:07:25
will be to understand, modify
and further design.

00:01:08:09 - 00:01:12:22
The header that's going to be used
throughout our website.

00:01:13:07 - 00:01:17:18
To begin, we're going to ensure that our
logos are available for use within Infigo.

00:01:18:12 - 00:01:22:07
So to start off with, we're going to go
to the admin area of our site.

00:01:22:26 - 00:01:25:15
I'm going to go to content management

00:01:25:15 - 00:01:28:28
and then appearance settings.

00:01:31:25 - 00:01:34:15
Now, appearance settings contain
quite a few different things,

00:01:34:15 - 00:01:37:18
most of which will be covered
in various different tutorials.

00:01:37:29 - 00:01:42:01
What we're going to focus on right now
is this section right at the top where

00:01:42:01 - 00:01:47:04
we've got the ability to select our logo
and to change our branding colors

00:01:48:00 - 00:01:51:05
two logo options are available
on the appearance settings screen.

00:01:52:02 - 00:01:54:25
So we've got a color logo

00:01:54:25 - 00:01:56:29
and a white version of the logo.

00:01:57:09 - 00:02:00:11
So the color logo is just for general use,
and the white version

00:02:00:11 - 00:02:04:23
is generally used for darker backgrounds.

00:02:04:23 - 00:02:06:18
So we'll update the logo
that's currently in use

00:02:06:18 - 00:02:10:00
because you can see at the moment
it's just using the standard Infigo logo.

00:02:10:16 - 00:02:13:09
You can click select

00:02:17:00 - 00:02:19:02
now logos from every storefront on

00:02:19:02 - 00:02:22:06
your platform will be visible
in this selector on the screen.

00:02:22:06 - 00:02:26:15
Now you can either double click
on an existing logo or you can click

00:02:26:15 - 00:02:29:29
on the Manage Images button on the top
right of that with a window

00:02:30:13 - 00:02:38:25
to add some additional images.

00:02:39:00 - 00:02:41:10
That's basically
just change the tab from here to here.

00:02:41:24 - 00:02:44:00
All we need to do next is to click upload,

00:02:45:08 - 00:02:48:04
select the relevant images

00:02:48:26 - 00:02:51:13
so one or multiple and click on open.

00:02:57:09 - 00:02:57:24
From here.

00:02:57:24 - 00:03:01:21
Navigate back to the Manage Themes tab

00:03:01:23 - 00:03:02:24
and then you just want to click

00:03:02:24 - 00:03:06:00
Select underneath the relevant logo field

00:03:06:28 - 00:03:09:00
and select the relevant logo by double

00:03:09:00 - 00:03:12:25
clicking on the image.

00:03:12:25 - 00:03:16:00
So you can see there,
I've got the color version

00:03:16:15 - 00:03:18:27
and the white version

00:03:23:26 - 00:03:25:08
and make sure you save the page

00:03:25:08 - 00:03:28:28
before we make any additional changes.

00:03:29:17 - 00:03:33:22
So with our logo updated, we'll now
navigate to our editable content area

00:03:33:22 - 00:03:38:16
where we can modify many of the areas
on our site, such as the header

00:03:38:24 - 00:03:42:29
and the banner and the footer
and various other bits and pieces.

00:03:43:28 - 00:03:46:06
So if we go to our content management tab

00:03:47:29 - 00:03:55:23
and then we'll click on editable content.

00:03:55:23 - 00:03:58:20
So there's lots of different entries
in here for various different

00:04:00:01 - 00:04:02:02
areas on your site.

00:04:02:02 - 00:04:03:23
We try and split these into sections

00:04:03:23 - 00:04:06:00
to make it nice
and easy for you to navigate around.

00:04:06:25 - 00:04:09:14
What we're looking for now is the header

00:04:09:14 - 00:04:12:17
and that is the bottom entry
in section one.

00:04:13:06 - 00:04:16:20
So the general section
right at the bottom, there is a header

00:04:17:22 - 00:04:19:27
field where we can click on edit

00:04:19:27 - 00:04:25:06
over on the right hand side.

00:04:25:06 - 00:04:27:02
And what you'll find
is that most of the editable

00:04:27:02 - 00:04:30:19
content blocks
will have a layout very similar to this.

00:04:31:14 - 00:04:34:00
So what we're going to do,

00:04:34:01 - 00:04:38:07
first of all on here is to look at
this body text editor option.

00:04:39:25 - 00:04:41:20
Now there's
three different options in here

00:04:41:20 - 00:04:44:20
and you will see those three options
for quite a lot of different

00:04:45:17 - 00:04:47:27
editable content blocks
that you're trying to create.

00:04:49:08 - 00:04:50:27
Rich Editor

00:04:50:27 - 00:04:54:03
So think of this as a word process,
a style input

00:04:54:09 - 00:04:57:14
that has direct content
formatting options.

00:04:57:14 - 00:05:00:29
So bold italics, paste a picture,

00:05:01:14 - 00:05:04:15
update, a link, something like that.

00:05:04:15 - 00:05:07:22
This will not generally be suitable
for something quite complex,

00:05:07:22 - 00:05:13:21
such as the header where it would be more
suited to HTML but may be suitable

00:05:13:21 - 00:05:20:16
for something like general page content,
which it's quite well structured.

00:05:20:16 - 00:05:22:05
So then we have the Code Mirror editor.

00:05:22:05 - 00:05:27:09
This is a code editor where HTML code
can be directly input into Infigo.

00:05:27:24 - 00:05:31:24
This option may appeal to those
with general coding experience

00:05:32:05 - 00:05:37:01
and can give you greater control over the
design and functionality of your header.

00:05:37:11 - 00:05:46:08
If you have the skills to write in HTML.

00:05:46:08 - 00:05:49:20
So the HTML code that appears can either
just be amended

00:05:50:03 - 00:05:52:28
or can be completely rewritten
by the administrator

00:05:53:29 - 00:05:55:12
when you're using the HTML.

00:05:55:12 - 00:05:59:04
And it's also allows you
the use of tokens and tokens

00:05:59:04 - 00:06:02:00
can be found
towards the bottom of the screen here.

00:06:03:12 - 00:06:07:09
Tokens are pieces of information
which are predefined elsewhere in Infigo.

00:06:07:27 - 00:06:14:11
So rather than just having
a static bit of code in your HTML

00:06:14:11 - 00:06:18:00
such as let's say a URL
or a link to an image

00:06:18:00 - 00:06:21:10
or something like that,
you could have it linked to a token.

00:06:21:24 - 00:06:25:10
So basically if you amend the setting
that that token is linked

00:06:25:10 - 00:06:28:13
to, it will update it
wherever that token is used.

00:06:29:06 - 00:06:33:22
So a good example of this will be the logo
that we just updated a few moments ago.

00:06:34:20 - 00:06:37:21
So there will be a token
somewhere in these lists

00:06:37:21 - 00:06:41:07
down here, which is to do with the logo
image or the colour logo.

00:06:42:07 - 00:06:45:02
And if
I look in line number 11 of my code,

00:06:45:16 - 00:06:51:09
I can see that there's an entry there
which is %Theme.LogoColor%

00:06:51:09 - 00:06:56:23
So I could have that just as a static PNG
or JPEG or whatever I want as my logo.

00:06:57:06 - 00:06:59:23
But if I have it set to theme logo color,

00:06:59:24 - 00:07:02:20
which is one of our tokens,
then it's going to utilize

00:07:03:10 - 00:07:07:21
whatever is detailed in that other setting
we're looking at a few minutes ago.

00:07:07:21 - 00:07:15:28
So that logo field that we were updating.

00:07:15:28 - 00:07:16:12
Okay.

00:07:16:12 - 00:07:20:27
And then the last text editor style
is the content template editor

00:07:22:12 - 00:07:27:10
and this is what
you would have found this on by default.

00:07:27:10 - 00:07:29:15
So the content template functionality,

00:07:29:15 - 00:07:33:03
it covers quite a few different areas
of the editable content

00:07:33:19 - 00:07:37:01
and we'll try and cover those
in a few different videos.

00:07:37:01 - 00:07:41:01
It's functionality that eliminates
the need for any HTML knowledge

00:07:41:09 - 00:07:44:18
by replacing the standard code
mirror editor that we've just seen

00:07:44:28 - 00:07:49:03
with a series of simple inputs
and controls to create the header

00:07:49:14 - 00:07:54:14
or the other piece of editable content
that works for you.

00:07:54:14 - 00:07:56:29
So this functionality
is constantly being improved,

00:07:57:10 - 00:08:00:10
meaning the layout of the controls
may differ very slightly

00:08:00:10 - 00:08:04:16
from the images that you see in this video
guide.

00:08:04:16 - 00:08:12:12
The general methodology,
however, will remain the same.

00:08:12:12 - 00:08:16:07
So the first thing we need to do
is to select the content template style

00:08:16:15 - 00:08:17:22
looking to make.

00:08:17:22 - 00:08:19:14
So there's a drop down here
and you can see that

00:08:19:14 - 00:08:23:22
we're already on header,
so I'm not going to change that.

00:08:23:22 - 00:08:27:09
Then we want to access the general header
settings.

00:08:27:26 - 00:08:31:13
So with header selected
as our content template, if I come down

00:08:31:13 - 00:08:36:08
to the first of several settings
icons, so this gear icon

00:08:37:16 - 00:08:39:07
that will load up this

00:08:39:07 - 00:08:43:15
header configuration screen.

00:08:43:15 - 00:08:44:27
So this screen provides options

00:08:44:27 - 00:08:48:03
for controlling the general content
and layout of our header.

00:08:48:16 - 00:08:50:19
It includes options such as

00:08:51:23 - 00:08:53:19
whether or not you want a sticky header,

00:08:53:19 - 00:08:56:03
so whether it stays in place
on your screen,

00:08:56:25 - 00:09:00:20
the layout of menus
and submenus, the inclusion

00:09:00:20 - 00:09:03:21
of languages and currency selectors,
if you want to include them,

00:09:04:08 - 00:09:06:17
the inclusion of a search box
in your header

00:09:07:13 - 00:09:09:26
and the logo
that you want to select between.

00:09:09:26 - 00:09:13:01
So if you want either
one of the logos that we uploaded

00:09:13:09 - 00:09:16:24
or you can upload a custom logo.

00:09:17:00 - 00:09:28:16
So if we change a couple of the settings,
click okay

00:09:29:20 - 00:09:31:05
and save.

00:09:31:05 - 00:09:31:19
And then what?

00:09:31:19 - 00:09:35:16
We'll see if we refresh
our homepage on our storefront

00:09:35:25 - 00:09:38:17
is an instant update to how this header

00:09:39:21 - 00:09:42:11
is now being shown to our customers.

00:09:42:11 - 00:09:46:03
We can see that my logo has moved to
the center is using the updated logo.

00:09:46:03 - 00:09:49:06
I have my links, I have my search

00:09:49:06 - 00:09:53:12
option,

00:09:53:12 - 00:09:55:17
my language and currency
selectors are available

00:09:56:20 - 00:09:58:05
so we can see

00:09:58:19 - 00:10:05:20
how that's working out for us.

00:10:05:20 - 00:10:06:01
Okay.

00:10:06:01 - 00:10:09:07
So we might want to continue
to design our header.

00:10:09:21 - 00:10:12:25
So the default header contains

00:10:12:25 - 00:10:16:26
three of these top level navigation items.

00:10:16:26 - 00:10:21:00
This about one is an additional one
I added for a different tutorial.

00:10:21:00 - 00:10:24:12
And you can see that we've got one
which is just a single link

00:10:24:12 - 00:10:27:15
on the actual navigation bar itself.

00:10:28:01 - 00:10:31:14
We've got one which is a

00:10:31:14 - 00:10:34:19
one column dropdown
containing both parent and child

00:10:34:19 - 00:10:37:13
entries, and one
which is a two column dropdown.

00:10:37:25 - 00:10:40:19
And all of these configurations
can be controlled

00:10:40:27 - 00:10:49:02
using our content templates.

00:10:49:02 - 00:10:52:06
So I'm going to navigate
back to our editable content details.

00:10:52:06 - 00:10:55:23
I'm just going to get rid of the
about section, which is the one I added

00:10:56:23 - 00:10:58:10
additionally,

00:10:59:07 - 00:11:02:13
and then
we'll make something else in here.

00:11:02:13 - 00:11:04:25
So what you can see
is those entries that we have.

00:11:04:25 - 00:11:07:02
So the home,

00:11:07:02 - 00:11:09:06
the categories and the products

00:11:09:06 - 00:11:12:09
all have their own section in here.

00:11:12:09 - 00:11:14:28
The home is just its own section

00:11:14:28 - 00:11:19:02
with no dropdown entries.

00:11:19:02 - 00:11:22:08
We've got this one,
which is categories where you can see this

00:11:22:17 - 00:11:27:25
parent and child categories.

00:11:27:25 - 00:11:31:06
And then we have our two column option,
the products where again, we're

00:11:31:06 - 00:11:34:22
just specifying different entries
in the list in one column

00:11:35:05 - 00:11:38:08
and two columns.

00:11:38:08 - 00:11:41:19
If we want to add a new entry to this
and of course, we can modify

00:11:41:19 - 00:11:44:11
the ones we've got there,
we can delete them if we want to do so,

00:11:44:21 - 00:11:48:05
or we can create new
entries in here from scratch.

00:11:49:12 - 00:11:51:18
So I can go to add content.

00:11:51:18 - 00:11:55:07
Header Item is going to give us that entry
with no dropdown options.

00:11:55:27 - 00:11:59:02
One column will give us
the current configuration we have for

00:12:00:14 - 00:12:01:29
the categories

00:12:03:22 - 00:12:05:03
and two column

00:12:05:03 - 00:12:10:03
will give us the current configuration
we've got for our products.

00:12:10:03 - 00:12:12:16
So I might go as a one column,
just as an example.

00:12:13:06 - 00:12:18:00
I then type in the name that I want
of that particular dropdown entry.

00:12:18:00 - 00:12:20:06
So the one that will actually appear
on our

00:12:21:09 - 00:12:26:04
navigation bar itself, so let's say

00:12:27:20 - 00:12:29:09
top level navigation button

00:12:29:09 - 00:12:31:15
or something like that,
just so we know exactly what it is

00:12:32:20 - 00:12:35:15
and we do have the ability to add
a link to this if we want to.

00:12:35:15 - 00:12:39:10
So if we want to click on this for each
which we link to a particular page

00:12:39:22 - 00:12:40:14
we can do.

00:12:40:14 - 00:12:46:04
So you can see you can link to a product
category, a content page or a blog entry,

00:12:46:16 - 00:12:52:13
or one of the standard Infigo pages
such as your home page.

00:12:52:13 - 00:12:57:20
We don't have to link that to anything
if I want to apply a sub item. So

00:12:57:20 - 00:13:02:12
something that will appear in the dropdown
list, I can say add new menu item.

00:13:03:26 - 00:13:05:00
You can see that that's created

00:13:05:00 - 00:13:07:09
a sub item within our primary item

00:13:10:02 - 00:13:13:19
where I can again
put in the same kind of details for a sub

00:13:13:19 - 00:13:23:03
item and I can specify a
you are if I wish to do so.

00:13:23:03 - 00:13:25:22
Now when you select one of these,
you are all types.

00:13:26:01 - 00:13:28:23
You will get a search box
appearing to the right of it,

00:13:28:23 - 00:13:32:22
and when you start typing things in here,
it will sift through the appropriate

00:13:32:22 - 00:13:38:24
type of item in order to allow you
to find the exact URL that you need.

00:13:38:24 - 00:13:44:00
So for example, if I wanted to find
a content page, let's say the, the contact

00:13:44:07 - 00:13:50:03
page, I can go to all content pages, start
typing the name of the page I want,

00:13:50:27 - 00:13:54:18
assuming it already exists,

00:13:54:18 - 00:13:58:17
and then say, contact us.

00:13:58:17 - 00:14:02:01
You are now has now been populated
and that link will now work

00:14:08:20 - 00:14:09:04
so we can add

00:14:09:04 - 00:14:13:07
a second item in there really quickly.

00:14:13:07 - 00:14:15:23
Let's say we want to connect this
to one of our standard.

00:14:15:23 - 00:14:19:24
If we go Page's log in page for example,
and again

00:14:19:24 - 00:14:23:28
there is that you are l populated.

00:14:23:28 - 00:14:25:20
We can have as much as we like to there.

00:14:25:20 - 00:14:29:03
Once we're finished, just click on
save at the top of the screen

00:14:31:26 - 00:14:33:11
and then let's just

00:14:33:11 - 00:14:37:20
take a look at our storefronts again.

00:14:37:20 - 00:14:39:21
You can see there
that a new entry has been added

00:14:40:02 - 00:14:43:28
with our two sublevel entries created
and the relevant you are.

00:14:43:28 - 00:14:46:07
Our links are in place.