00:00:13:04 - 00:00:14:03
In this tutorial

00:00:14:03 - 00:00:16:20
we'll learn how to design your website
homepage

00:00:17:03 - 00:00:20:03
primarily
using the content templates feature.

00:00:20:27 - 00:00:23:19
So this allows you to create
detailed web page content

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

00:00:27:05 - 00:00:30:29
More information on adjusting
your homepage banner via HTML.

00:00:31:10 - 00:00:36:14
You can look at one of our slightly older
tutorial videos that's BG 005,

00:00:36:25 - 00:00:43:29
which is called Editing Your Home Page
Banner via HTML.

00:00:43:29 - 00:00:47:16
So what we can see on the screen at
the moment is our default home page.

00:00:48:19 - 00:00:50:24
So this contains a slider

00:00:50:24 - 00:00:53:09
along with several sample sections

00:00:53:27 - 00:00:57:18
containing various different styles,
imagery and text.

00:00:59:00 - 00:01:01:14
So our task
during the course of this tutorial

00:01:01:22 - 00:01:05:29
will be to understand, modify
and further design our home page.

00:01:07:15 - 00:01:11:00
And what we're going to do to begin
with is to locate the editable

00:01:11:00 - 00:01:14:06
content blocks
which control our home page content.

00:01:15:03 - 00:01:19:29
So I'm going to go to the
admin section of our website.

00:01:20:29 - 00:01:24:02
They're going to go to content management

00:01:24:03 - 00:01:27:04
and editable content.

00:01:28:20 - 00:01:30:11
From here, we can navigate to section

00:01:30:11 - 00:01:32:28
two, which is all to do with the home
page.

00:01:33:18 - 00:01:36:16
Now the home page section contains
three editable

00:01:36:16 - 00:01:39:21
content blocks that you can see here,

00:01:39:21 - 00:01:43:26
each controlling elements
within different areas of our home page.

00:01:44:19 - 00:01:47:04
So we've got the second one down
is the home page banner.

00:01:47:05 - 00:01:51:05
This is the main banner content
at the top of your home page,

00:01:51:18 - 00:01:55:06
excluding the header, of course,
in our default configuration.

00:01:55:06 - 00:01:59:15
This contains a slider
and a simple four column content section.

00:01:59:28 - 00:02:02:17
So as it stands on our default page,
our home page

00:02:02:17 - 00:02:03:12
banner

00:02:07:03 - 00:02:08:23
is our slider.

00:02:09:13 - 00:02:12:13
And this section here.

00:02:17:13 - 00:02:18:06
Also on here,

00:02:18:06 - 00:02:21:25
we have two entries which do to do
with the middle page content.

00:02:21:26 - 00:02:25:10
So you see this above and below
the middle page content.

00:02:26:22 - 00:02:29:06
So what is the middle page content?

00:02:29:06 - 00:02:31:29
So the middle page can be considered
as a location

00:02:31:29 - 00:02:34:21
where featured products
will appear on your home page.

00:02:35:03 - 00:02:37:04
Now, something we've not covered so far

00:02:37:15 - 00:02:40:25
in this series of tutorials,
but will be covered in a future tutorial.

00:02:41:18 - 00:02:45:24
However, just for context
above mid page content, we'll insert

00:02:46:06 - 00:02:50:03
a content above those

00:02:51:24 - 00:02:54:14
feature products and then below it.

00:02:54:14 - 00:02:57:11
Page contents will do as the name suggests
and put new

00:02:58:12 - 00:03:01:08
content blocks below
those featured products.

00:03:02:25 - 00:03:05:07
It's worth noting that multiple elements
can be applied

00:03:05:07 - 00:03:09:13
to both above
and below the middle page content.

00:03:13:13 - 00:03:15:10
So what we'll do first is to modify

00:03:15:10 - 00:03:19:07
our homepage
banner Editable content block.

00:03:20:07 - 00:03:22:18
So I'm just going to go to the right hand
side and click edit

00:03:22:21 - 00:03:25:19
next to the home page banner.

00:03:28:06 - 00:03:31:04
So we'll be presented with
something like this, which is very similar

00:03:31:04 - 00:03:34:12
to what we saw in the previous tutorial
on modifying your header.

00:03:35:09 - 00:03:37:15
So by default, the specification

00:03:37:15 - 00:03:40:15
type for your home page
banner will use content

00:03:40:15 - 00:03:43:29
templates editor and we'll talk
more about those in a moment.

00:03:44:14 - 00:03:47:20
However, you are able to select
other input styles

00:03:48:16 - 00:03:51:01
name with a rich editor and the Code

00:03:51:01 - 00:03:53:16
Mirror editor.

00:03:54:12 - 00:03:56:10
So the rich editor

00:03:56:16 - 00:03:59:21
best to think of this is kind of word
process, processor style input.

00:04:00:00 - 00:04:05:00
So you've got direct content
formatting options such as making things

00:04:05:00 - 00:04:08:12
bold, aligning things, adding links,

00:04:08:18 - 00:04:10:24
pasting pictures, that kind of thing.

00:04:11:12 - 00:04:14:18
It's not generally going to be suitable
for something quite complex

00:04:14:18 - 00:04:17:23
such as the banner,
but may be more suitable for something

00:04:17:23 - 00:04:21:04
like general page content.

00:04:22:03 - 00:04:24:16
And then we have the Code Mirror editor.

00:04:24:16 - 00:04:27:17
So this is a code editor
where HTML code can be directly

00:04:27:17 - 00:04:31:21
input into Infigo
this option may appeal to those

00:04:31:21 - 00:04:36:09
with a HTML coding experience
and can give you greater control

00:04:36:09 - 00:04:40:28
over the design
and functionality of your content box.

00:04:41:09 - 00:04:45:19
In this, in this case, our banner.

00:04:45:19 - 00:04:53:03
In our example, though, we're going to
remain on our content templates, editors.

00:04:53:03 - 00:04:57:20
So the content template functionality
eliminates the need for any HTML knowledge

00:04:57:29 - 00:05:02:20
by replacing the standard code mirror
editor with a series of simple inputs

00:05:02:20 - 00:05:06:02
and controls
to create the content that works for you.

00:05:07:21 - 00:05:10:22
So this functionality
is constantly being improved,

00:05:10:22 - 00:05:12:06
meaning the layout of the controls

00:05:12:06 - 00:05:15:22
may differ slightly
from what you can see in this video guide.

00:05:16:04 - 00:05:20:04
However, the general methodology
should remain the same.

00:05:24:19 - 00:05:25:18
So what we're going to do

00:05:25:18 - 00:05:28:28
first
is to choose a content template style

00:05:29:14 - 00:05:32:12
and depending on what you're
trying to build, dictates

00:05:32:12 - 00:05:34:14
the one that you're going to choose
from this list.

00:05:35:02 - 00:05:38:10
So you'll see that
we've got some preconfigured examples

00:05:38:10 - 00:05:41:20
for footer content builder and header.

00:05:42:24 - 00:05:46:06
Each will provide their own range
of available content formats.

00:05:46:28 - 00:05:49:25
In our example, we're going to remain
on the currently selected one,

00:05:49:25 - 00:05:52:18
which is a builder templates,
which is kind of more of a

00:05:53:14 - 00:05:56:15
a general template for making the format

00:05:56:15 - 00:05:58:28
that you want.

00:05:59:23 - 00:06:03:22
Do note that the asterisk
on the end of the template names

00:06:03:22 - 00:06:08:13
relates to default
and supported templates.

00:06:12:10 - 00:06:13:24
So if I leave that on builder

00:06:13:24 - 00:06:17:12
and move down a little bit further,
we're now looking at sections.

00:06:18:05 - 00:06:22:01
So we build up the contents
of our templates within the sections area.

00:06:22:17 - 00:06:27:13
Each template can contain numerous
different sections with each section

00:06:27:13 - 00:06:30:29
capable of containing completely
different content from one another.

00:06:31:24 - 00:06:35:29
So for example, we can see in our default
configuration that we have two sections.

00:06:36:19 - 00:06:38:19
We have a slider.

00:06:38:19 - 00:06:42:14
So this, as we saw in our actual web page,
that's these scrollable

00:06:43:01 - 00:06:46:15
banner images at the top of our home
page is fully configurable.

00:06:46:26 - 00:06:49:06
It can contain text, imagery,

00:06:49:29 - 00:06:54:04
buttons and much, much more.

00:06:55:09 - 00:06:56:15
And then underneath that, we

00:06:56:15 - 00:07:00:00
have something called sections,
and this one is a four column section.

00:07:00:15 - 00:07:03:18
So this is a more of a generic section
within our home page.

00:07:03:28 - 00:07:06:08
Specifically created with four columns.

00:07:06:08 - 00:07:11:07
In this case, sections can also be made
with one, two or three columns.

00:07:11:29 - 00:07:15:15
And again, these sections can contain
imagery, text links,

00:07:15:28 - 00:07:20:25
loads of different things
and are fully configurable.

00:07:25:08 - 00:07:26:19
So we're going to begin by

00:07:26:19 - 00:07:29:14
reviewing the configuration of our slider

00:07:30:25 - 00:07:35:08
and much of the content added to
our templates will have their own separate

00:07:35:08 - 00:07:39:10
configuration options where
these configuration options are available.

00:07:39:18 - 00:07:43:15
You'll have these little gear icons
appearing, so you'll see that our sections

00:07:43:15 - 00:07:47:01
have their own individual settings
on a per section basis.

00:07:48:03 - 00:07:49:26
We'll start off by configuring the slider

00:07:51:18 - 00:07:54:13
that brings up the separate page here.

00:07:54:13 - 00:07:59:02
So the slider is hugely configurable
with many of the general settings

00:07:59:02 - 00:08:02:05
governing all of the slides contained
within the slider

00:08:02:05 - 00:08:06:04
configuration pop up that we can see here.

00:08:06:10 - 00:08:09:27
So settings that you might see
within this screen include things like

00:08:11:03 - 00:08:12:25
animation controls.

00:08:12:25 - 00:08:15:04
So you can see how the slides

00:08:15:18 - 00:08:18:14
move from one to the next transition
from one to the next.

00:08:18:28 - 00:08:23:07
You can specify whether the moving on of
the slides is automated,

00:08:23:18 - 00:08:26:22
how fast the animation is changing speed

00:08:28:15 - 00:08:29:07
as well as this.

00:08:29:07 - 00:08:32:21
You can put the control types as well

00:08:33:00 - 00:08:36:18
so you can define
whether you've got bullet controls,

00:08:36:18 - 00:08:39:19
so whether you can jump
to a specific slide or whether you've got

00:08:39:19 - 00:08:42:27
arrow controls to the left
and right of those slides.

00:08:43:12 - 00:08:44:21
So it's quite configurable.

00:08:44:21 - 00:08:46:22
And just to show you
what these actually relate to.

00:08:48:09 - 00:08:49:17
Of course,

00:08:49:17 - 00:08:52:05
we've got automatic transitions
are fairly straightforward,

00:08:52:05 - 00:08:55:16
but you'll see how that automatically
moved from one to the next.

00:08:56:08 - 00:08:59:06
We've got our bullet transitions

00:08:59:06 - 00:09:01:09
where we can jump from one to the next

00:09:01:09 - 00:09:11:18
and we've got our arrows.

00:09:11:18 - 00:09:16:11
Once we're happy with that configuration,
we click, okay,

00:09:16:11 - 00:09:19:24
and now we want to actually jump
into the contents of our slider.

00:09:19:24 - 00:09:23:09
So I'm going to click on expand
within the slider

00:09:23:09 - 00:09:27:06
section.

00:09:28:24 - 00:09:30:29
So each of the slides
that we have specified

00:09:30:29 - 00:09:35:21
will have its own slides, specification.

00:09:35:21 - 00:09:39:04
So this operates in much the same way
as the main slider section

00:09:39:04 - 00:09:41:27
that we had detailed just a moment ago.

00:09:42:09 - 00:09:44:06
So they have their own individual settings

00:09:44:06 - 00:09:46:15
which will differ slightly from the main
section.

00:09:47:07 - 00:09:49:15
And again, we can custom define

00:09:49:15 - 00:09:54:09
the content is within each of these sites.

00:09:54:09 - 00:09:58:23
So we could modify or delete the existing
slides, but we'll leave those for now.

00:09:59:05 - 00:10:02:28
What we'll do is just add
a brand new slide to our slider

00:10:03:05 - 00:10:04:21
with this add new slide button

00:10:13:16 - 00:10:15:17
to begin adding content to our new slide.

00:10:15:18 - 00:10:21:07
We just click on the Adds Content button,
which appears at the bottom right?

00:10:21:07 - 00:10:24:23
And then we select a slide layout that
we wish to add.

00:10:25:06 - 00:10:26:06
So this is where you see

00:10:26:06 - 00:10:30:00
the differences between the slide types
that we have available.

00:10:30:00 - 00:10:33:01
So we've got one column to three
or four column,

00:10:33:21 - 00:10:37:15
custom column
or this two column image and content

00:10:37:15 - 00:10:40:07
layout,
which is the one that we're going to use.

00:10:41:12 - 00:10:45:06
So these options just control how
the information is laid out on your site.

00:10:45:19 - 00:10:48:00
Again, they're fully configurable.

00:10:48:00 - 00:10:50:12
Once you've selected an option here

00:10:50:12 - 00:10:52:23
it is just to give you

00:10:52:23 - 00:10:54:23
a general layout for the content.

00:10:54:23 - 00:10:58:28
But you're still controlling
what that content is.

00:10:59:03 - 00:11:04:04
So we'll go for two column image
and content.

00:11:04:04 - 00:11:09:22
The appropriate slide layout details
will then be added to your slide

00:11:12:01 - 00:11:13:05
The first thing we're going to do

00:11:13:05 - 00:11:15:22
is to upload an image to our slide layout.

00:11:16:06 - 00:11:19:00
We can do this by clicking
the image upload to the left hand side

00:11:21:15 - 00:11:23:14
and I'll select an appropriate image.

00:11:23:14 - 00:11:26:26
Now in my example, I'm going to select
a whites logo so you won't see it

00:11:26:26 - 00:11:30:10
in the actual upload box just because
it's the same colour as the backdrop.

00:11:30:22 - 00:11:32:11
But it is there

00:11:33:25 - 00:11:35:17
and there is a reason I've done that,
which I'll come back

00:11:35:17 - 00:11:38:16
to a little bit later on.

00:11:40:10 - 00:11:42:14
So once that image has been uploaded,
you'll notice

00:11:42:14 - 00:11:44:06
that you have the ability to download it.

00:11:44:06 - 00:11:47:10
If you wish to do so,
you can upload an alternative image

00:11:47:19 - 00:11:57:13
or you can remove the image completely.

00:11:57:27 - 00:12:01:10
Now, the reason
I've put a white logo in there or a whites

00:12:01:10 - 00:12:05:08
image in there is that I want to control
the background color of our slides

00:12:05:08 - 00:12:08:05
and I want it to
be a dark background color to

00:12:09:05 - 00:12:11:08
match the color scheme of my site.

00:12:12:16 - 00:12:15:02
So options like this,
such as the background color,

00:12:15:11 - 00:12:20:17
will be controlled by the general slide
configuration settings.

00:12:21:00 - 00:12:23:17
So if we're applying a background color

00:12:23:17 - 00:12:27:07
to a slides, that's going to apply
to everything that's on that slide.

00:12:27:07 - 00:12:30:04
So it makes sense
that it's on the actual slide level

00:12:30:18 - 00:12:34:10
rather than the slide layout levels.

00:12:35:08 - 00:12:38:28
So if I go to the configuration
settings on my actual slide itself,

00:12:40:11 - 00:12:44:19
there's loads of options available here.

00:12:44:19 - 00:12:48:18
A couple of which we want to focus on
is the background color,

00:12:49:05 - 00:12:52:02
which I'm just going to set to primary,
which will use

00:12:52:23 - 00:12:56:05
the colors
that we've specified in our appearance

00:12:56:05 - 00:12:58:21
settings,
which is covered in a different tutorial.

00:13:00:05 - 00:13:04:03
So that will just be our preconfigured
branding colours.

00:13:04:03 - 00:13:07:06
And in our case, I don't want an image
in the background of the slides,

00:13:07:07 - 00:13:10:25
although you can upload one,
you can configure where it sits,

00:13:11:03 - 00:13:14:03
what size it is, how it scales, that image

00:13:14:03 - 00:13:17:21
if necessary, various of the settings
associated with that.

00:13:18:21 - 00:13:20:27
In our case,
we don't want to have a background image,

00:13:20:27 - 00:13:28:19
so I'm just going to change that to no.

00:13:29:24 - 00:13:34:06
With that specified, I can click okay.

00:13:34:06 - 00:13:38:07
And now we want to start adding content
to our second content column.

00:13:38:18 - 00:13:41:01
So we've defined an image
with defined the background color.

00:13:41:11 - 00:13:43:23
Now it's our content
over on the right hand side.

00:13:44:21 - 00:13:47:28
And again, we can control multiple or add

00:13:47:28 - 00:13:52:06
multiple different blocks
to these this content area.

00:13:52:20 - 00:13:55:22
So it doesn't just have to be
one paragraph or one image.

00:13:56:02 - 00:13:58:17
We can add multiple different

00:13:58:17 - 00:14:04:14
elements to this content area.

00:14:04:14 - 00:14:07:02
So the things you can add,
I won't go through all of them,

00:14:07:02 - 00:14:11:16
but includes just things like a title,
subtitle, a paragraph,

00:14:11:21 - 00:14:17:03
which is allowing you the word process
to style content formatting WYSIWYG

00:14:17:09 - 00:14:18:28
which allows enhanced word process

00:14:18:28 - 00:14:23:05
to style content formatting,
including things like table

00:14:23:05 - 00:14:27:03
generation, more advanced features
than just the the paragraph input

00:14:29:03 - 00:14:29:25
buttons.

00:14:29:25 - 00:14:33:23
So clickable links, clickable buttons
where you can define

00:14:33:23 - 00:14:37:07
the URL images, lists of the files

00:14:37:07 - 00:14:40:09
and so on and so forth.

00:14:40:09 - 00:14:42:10
We're going to just focus
on a couple of these.

00:14:42:10 - 00:14:43:11
So we'll do a title.

00:14:43:11 - 00:14:44:17
First of all,

00:14:45:06 - 00:14:47:11
if I click title, the appropriate

00:14:49:02 - 00:14:52:18
fields will appear
within that particular content block

00:14:53:05 - 00:14:55:12
or I can enter my title text.

00:14:56:26 - 00:15:00:00
Now, it's worth noting
that you can still utilize tokens in here.

00:15:00:00 - 00:15:02:27
So we have discussed tokens in previous
tutorials.

00:15:03:07 - 00:15:07:16
It's where you can draw information
directly from other

00:15:07:16 - 00:15:10:27
Infigo settings rather than having to hard
code information.

00:15:11:12 - 00:15:15:28
So for example, I might want to consider
putting the name of my customer

00:15:16:01 - 00:15:17:05
on this slide. Welcome.

00:15:17:05 - 00:15:19:17
Just to give a more personal touch.

00:15:19:17 - 00:15:22:19
So if I know the name of the token,
I can write it straight in here.

00:15:23:03 - 00:15:29:28
Alternatively,
I can find them at the bottom of my page.

00:15:29:28 - 00:15:32:17
So I might go for example,
for customer dot full name

00:15:34:15 - 00:15:35:20
and I can just put that

00:15:35:20 - 00:15:47:01
straight into my title block.

00:15:47:01 - 00:15:49:23
So next I'm going to add
another content area

00:15:51:03 - 00:15:54:14
and that's going to be a paragraph
this time

00:15:58:07 - 00:15:59:21
you'll see that I've got my different

00:15:59:21 - 00:16:03:01
formatting options, as you might expect
for a some word processor,

00:16:03:29 - 00:16:06:21
you've got things such as special
characters, you've got the ability

00:16:06:21 - 00:16:10:18
to put links and images in there,
but it is fairly rudimentary,

00:16:11:19 - 00:16:13:21
so best for just

00:16:13:21 - 00:16:16:25
general contents that you need to display.

00:16:16:25 - 00:16:19:26
Not any special formatting
that you might need

00:16:19:26 - 00:16:23:03
on the average website.

00:16:23:03 - 00:16:25:04
So I'm going to put some text into here

00:16:35:25 - 00:16:38:08
and then we could format
that as we see fit.

00:16:38:08 - 00:16:42:28
Of course.

00:16:42:28 - 00:16:45:19
And we do have some additional settings
in here as well.

00:16:46:00 - 00:16:49:14
So for each of these content blocks
that we have added here,

00:16:50:03 - 00:16:52:28
you'll notice that they again
have their own individual settings.

00:16:54:09 - 00:16:57:14
And if I go into configure those,

00:16:57:21 - 00:17:01:18
we can see that we've got things
such as the style, we've got alignments,

00:17:01:18 - 00:17:04:27
information and we've got color
information in there as well.

00:17:05:12 - 00:17:06:28
Now we want to make sure that we can see

00:17:06:28 - 00:17:10:27
this text on our dark background
that we've specified.

00:17:10:27 - 00:17:13:25
So I'm just going to change the color
of that text

00:17:14:29 - 00:17:17:15
to White on both my paragraph

00:17:17:15 - 00:17:30:22
and my title.

00:17:30:22 - 00:17:34:17
And then just around this box,
I'm going to add a third piece of content

00:17:34:18 - 00:17:41:00
to this slide,
which is going to be a button.

00:17:41:00 - 00:17:43:23
Now, this is a button's content block.

00:17:43:23 - 00:17:47:01
It does give you the ability
to add multiple buttons within the one

00:17:47:01 - 00:17:50:04
content block,
but in our case, we'll just do one.

00:17:50:04 - 00:17:53:01
As an example, I can say add new button

00:17:55:19 - 00:17:58:02
and I can put in some button text

00:17:58:02 - 00:18:01:25
such as find out more.

00:18:01:25 - 00:18:13:24
So that's actually what will appear
on our storefront as the button text.

00:18:13:24 - 00:18:16:03
We can then specify the target. URL.

00:18:16:15 - 00:18:18:06
So if you know what the target URL

00:18:18:06 - 00:18:21:14
is, you can just paste it
directly into the link down here.

00:18:22:02 - 00:18:26:02
Alternatively, if you need to find it
then you can go on this target.

00:18:26:02 - 00:18:30:13
URL dropdown here
and then you can start to navigate

00:18:30:13 - 00:18:34:05
towards the link you want to create.

00:18:34:21 - 00:18:37:02
So for example, I'll find out more.

00:18:37:02 - 00:18:42:23
Button might link to a preexisting
content page called About US.

00:18:42:23 - 00:18:45:18
Now Content pages
haven't been covered yet in the series,

00:18:46:06 - 00:18:48:02
but we'll be done in the future.

00:18:48:02 - 00:18:51:01
This is just as an example.

00:18:51:01 - 00:18:54:19
So content pages are additional pages,
things like contact us

00:18:54:19 - 00:18:58:00
about us, terms and conditions,
all that kind of stuff.

00:18:58:15 - 00:19:00:09
There is a few preconfigured ones.

00:19:00:09 - 00:19:02:12
So if I go to all content pages,

00:19:03:12 - 00:19:06:01
it comes out with a search box
over on the right hand side,

00:19:06:14 - 00:19:10:11
and if I start typing in here,
it will only show me relevant entries.

00:19:11:07 - 00:19:13:15
So for example, if I start typing about

00:19:14:12 - 00:19:17:19
the only available option is about us
because it's only

00:19:17:19 - 00:19:21:13
searching for the available content pages.

00:19:21:13 - 00:19:23:00
And I could search between products

00:19:23:00 - 00:19:26:05
I've made, categories
I've made, blog entries I've made

00:19:27:09 - 00:19:29:04
and just link directly to them.

00:19:29:04 - 00:19:35:24
And of course all of these
will be covered in later tutorials.

00:19:35:24 - 00:19:38:04
So if I selects an entry,

00:19:38:24 - 00:19:41:24
you'll see that the URL is populated.

00:19:41:24 - 00:19:45:17
Now we might also want to apply
some custom styling to one of our buttons.

00:19:46:06 - 00:19:49:28
So the button we've just made,
if I go to its configuration settings,

00:19:50:28 - 00:19:54:18
I've got a button size and I've got
a button style where I can control

00:19:55:27 - 00:19:58:02
how that button is going to appear.

00:19:58:02 - 00:20:00:15
Now at the moment it's using primary,
which suggests

00:20:00:16 - 00:20:03:28
it's going to be using our primary color,
which as that's the same

00:20:03:28 - 00:20:06:16
as our slide background
it means it will not appear

00:20:07:03 - 00:20:20:24
so maybe in this case
I'll go for secondary.

00:20:20:24 - 00:20:24:10
So with all of that specified,
let's save that and go and take a look

00:20:24:10 - 00:20:28:27
on our storefront to see what impacts
that extra site has had

00:20:29:04 - 00:20:32:20
and how it actually is configured.

00:20:33:04 - 00:20:35:17
you can see now
I've got my logo on the left hand side,

00:20:36:01 - 00:20:37:10
I've got my title

00:20:37:14 - 00:20:38:09
We've got our body of

00:20:38:09 - 00:20:42:28
text and we've got our button
which has an active link

00:20:43:14 - 00:20:59:14
taking us to another page.

00:20:59:14 - 00:20:59:27
Okay.

00:20:59:27 - 00:21:03:29
So next we're going to take a closer
look at the second section

00:21:04:12 - 00:21:07:23
within the banner Editable Content BLOCK.

00:21:08:09 - 00:21:12:03
So this is the section
which controls the four column content

00:21:12:03 - 00:21:14:04
directly below our homepage slider.

00:21:15:25 - 00:21:18:03
So each of these columns
contains an image,

00:21:18:04 - 00:21:21:29
a header, sub header
and some paragraph information.

00:21:22:10 - 00:21:26:19
And the contents of each of these
is fully customizable,

00:21:26:19 - 00:21:30:17
as you would expect.

00:21:30:17 - 00:21:35:11
So I'm going to navigate back to our home
page banner editable content block,

00:21:35:26 - 00:21:39:11
and this time we're going to focus
on the four columns section

00:21:39:13 - 00:21:43:18
which we have defined.

00:21:43:18 - 00:21:46:13
So if I expand that section,

00:21:46:13 - 00:21:49:28
you'll see there I've got one available
layout which is for column

00:21:51:03 - 00:21:53:07
so I can expand that again.

00:21:53:07 - 00:21:55:09
And then you can see
there's different sections

00:21:55:09 - 00:21:59:08
for each of those four columns
and we've got full control over

00:21:59:08 - 00:22:04:01
what is contained
within each of those columns.

00:22:04:01 - 00:22:08:02
So for example, let's say our second entry
didn't need a paragraph.

00:22:08:18 - 00:22:11:12
I could get rid of that section completely

00:22:11:12 - 00:22:13:17
or I could add
a different section in there.

00:22:13:17 - 00:22:16:19
So let's say it needed a a button instead.

00:22:18:04 - 00:22:19:20
The interface for a button is the same

00:22:19:20 - 00:22:25:22
as we saw previously,

00:22:25:22 - 00:22:29:14
so I'll just select a link for this

00:22:31:20 - 00:22:33:04
and then we'll take a quick look

00:22:33:04 - 00:22:43:18
at what those modifications have done.

00:22:43:18 - 00:22:46:27
So obviously the formatting is not great
because of those changes that I've made.

00:22:47:16 - 00:22:49:24
It's very quick to do so,
but you can see that

00:22:50:13 - 00:22:54:03
the the layout is now updated
based on what I've asked for.

00:22:54:15 - 00:22:57:07
So we've got our button
instead of a paragraph

00:22:57:07 - 00:23:04:27
which takes us to a particular page.

00:23:04:27 - 00:23:08:08
Alternatively, you may want to get rid of
sections completely.

00:23:08:08 - 00:23:12:12
You may not need all of the pre
configured options that we have on here,

00:23:13:10 - 00:23:15:27
or you may want them configured
completely differently

00:23:16:11 - 00:23:17:27
and this is possible as well.

00:23:19:07 - 00:23:20:27
So if I go back to our

00:23:20:27 - 00:23:25:11
fourth column section,

00:23:25:11 - 00:23:27:16
you'll see we've got all that detail
which we've just covered.

00:23:28:00 - 00:23:31:19
But I could get rid of that
complete section from our page

00:23:32:02 - 00:23:36:23
just by getting rid
of the top level section.

00:23:37:27 - 00:23:41:10
So the full column section
and that will remove everything

00:23:41:10 - 00:23:45:03
that's contained within it.

00:23:45:03 - 00:23:49:06
So if I remove that, you see there's
only the slide section still remaining.

00:23:50:24 - 00:23:54:28
Save and refresh our storefront.

00:23:56:06 - 00:23:59:20
And you see now that that section
has completely disappeared,

00:24:00:16 - 00:24:02:24
meaning that the next section has

00:24:02:24 - 00:24:07:00
now been moved upwards.

00:24:07:00 - 00:24:11:12
And of course now that the
the colours are a little bit mismatching,

00:24:11:20 - 00:24:14:02
maybe we want those to be different colors
for different sections.

00:24:14:24 - 00:24:18:00
As we've seen in previous settings,
we could use a similar methodology

00:24:18:00 - 00:24:31:20
to control the background color
of that selection.

00:24:31:20 - 00:24:32:01
Okay.

00:24:32:01 - 00:24:36:05
So just as an example, we've

00:24:36:05 - 00:24:40:20
also got the other two content blocks
within the home page section.

00:24:41:24 - 00:24:44:13
So we'll leave our homepage banner there.

00:24:44:13 - 00:24:48:23
If I go back to editable content
and as a reminder, we've got the home page

00:24:48:23 - 00:24:53:04
above mid page content and home
page below mid page content.

00:24:53:28 - 00:24:58:09
So again, just a reminder of what
the mid page content is, that is where

00:24:58:27 - 00:25:02:07
the featured products will appear.

00:25:02:24 - 00:25:04:18
And we haven't covered featured
products yet.

00:25:04:18 - 00:25:06:12
That will be in a future tutorial.

00:25:06:12 - 00:25:08:07
That's just a reference for you.

00:25:08:07 - 00:25:11:08
The anything in the above section
will appear above it.

00:25:11:08 - 00:25:16:11
Anything in the below section will appear
below it, but those are controlled.

00:25:16:17 - 00:25:18:07
So the content of those is controlled

00:25:18:07 - 00:25:20:29
in exactly the same way
as the home page banner.

00:25:22:03 - 00:25:25:11
So let's say, for example,
we wanted to remove this section here.

00:25:25:21 - 00:25:27:09
So this is surplus to requirements.

00:25:27:09 - 00:25:31:29
Now, it's not part of our main banner
because we've already been adjusting

00:25:31:29 - 00:25:34:04
that one. It's part of our

00:25:35:26 - 00:25:36:29
above mid

00:25:36:29 - 00:25:42:00
page section.

00:25:42:00 - 00:25:45:01
So if I go into edit our above mid page

00:25:45:01 - 00:25:49:18
section content block
you can see within here

00:25:49:18 - 00:25:53:04
we have a two column content layout
and a three column

00:25:54:11 - 00:25:56:05
content layout.

00:25:56:09 - 00:25:58:06
So this will be able to column

00:25:58:06 - 00:26:04:27
and our three column,
let's say we want to just

00:26:04:27 - 00:26:08:06
change the background color of this one
and completely remove this one.

00:26:09:08 - 00:26:12:23
So if I go and finds
the two column content,

00:26:13:15 - 00:26:17:28
go to configure,

00:26:17:28 - 00:26:20:14
finds the background color

00:26:22:18 - 00:26:25:04
and edit it to something

00:26:25:04 - 00:26:27:18
relevant to my selection.

00:26:27:18 - 00:26:30:03
And then I want to completely remove
the three column

00:26:30:12 - 00:26:34:27
section.

00:26:34:27 - 00:26:36:08
I'll save that

00:26:37:20 - 00:26:40:29
and refresh our homepage

00:26:42:17 - 00:26:44:07
and you can see there
the changes we've made.

00:26:44:07 - 00:26:47:03
So the section is still there,
but the background color is not altered.

00:26:47:17 - 00:26:50:15
Of course we would need
to make further changes to the text color

00:26:50:15 - 00:26:53:13
and a knock on effect
on the rest of the page.

00:26:53:23 - 00:26:56:25
But you can see what kind of functionality
that provides to you

00:26:59:24 - 00:27:02:16
and that is basically
it on customizing your home page.

00:27:02:16 - 00:27:05:11
So with this knowledge,
you should be able to fully customize

00:27:06:04 - 00:27:08:23
the home page as you see fit the content

00:27:08:23 - 00:27:11:13
template functionality is very extensive.

00:27:11:24 - 00:27:15:14
I've only covered the core principles
in this particular tutorial.

00:27:16:06 - 00:27:18:28
If you do want to use this
and make full use of this,

00:27:18:28 - 00:27:22:02
it is recommended that you experiment
with these capabilities

00:27:22:11 - 00:27:24:24
to get a well-rounded
feel for their abilities

00:27:25:09 - 00:27:29:01
and so that you can get the very best
out of the Infigo software.

00:27:29:10 - 00:27:32:10
And what we offer.