Picture of Adding Content to your Layouts in Content Templates | BG_CT_008

Adding Content to your Layouts in Content Templates | BG_CT_008

In this tutorial, we focus on adding content to the sections and layouts you've created within Infigo. You'll learn about the various content elements available, such as text, images, buttons, and more, each with its own set of configuration options. The tutorial demonstrates how to nest content within columns and even within other content blocks, allowing for highly customized page designs. We explore how to use blocks to create highlighted areas with unique backgrounds, further enhancing the visual appeal of your storefront. This guide provides a practical overview of building and arranging content to create engaging and well-structured web pages.

Tutorial Video Transcript

A transcript of our tutorial video, ensuring you can find exactly what you need, when you need it.

You can search this page to find the relevant time-stamp in the video. Also, this text can be used as part of the tutorial search feature.

00:00:06:01 - 00:00:06:10
Right.

00:00:06:10 - 00:00:08:19
So now we move on to content.

00:00:08:19 - 00:00:11:04
So we've laid out our section.

00:00:11:04 - 00:00:13:08
so now we're ready to put stuff in it.

00:00:13:08 - 00:00:16:10
A range of element types, are available

00:00:16:10 - 00:00:19:10
from Infigo
to place within your formatted pages.

00:00:20:01 - 00:00:25:13
So on that page I've given you,
you can find some more additional

00:00:25:17 - 00:00:29:18
rambling detail on what these different, 
element types are.

00:00:29:18 - 00:00:32:05
We won't have time to go through
every single one today,

00:00:32:05 - 00:00:35:05
but hopefully
I'll give you a little summary.

00:00:35:13 - 00:00:38:19
So if you scroll about halfway down
on this page, I've given you,

00:00:39:06 - 00:00:42:06
there'll be sections here
on each of the different

00:00:42:14 - 00:00:45:12
element types that we have available
and the sort of thing

00:00:45:12 - 00:00:48:12
you might expect from it.

00:00:49:13 - 00:00:50:28
So hopefully that's useful for you guys.

00:00:55:18 - 00:00:56:15
So as with the

00:00:56:15 - 00:01:00:07
other things that we've been working
on, each content type

00:01:00:13 - 00:01:03:13
will have its own relevant
set of configuration options.

00:01:03:13 - 00:01:06:07
Again accessed through the

00:01:06:07 - 00:01:09:07
the gear icon, the configuration menu.

00:01:09:24 - 00:01:12:20
So examples of some of the available
content types we have.

00:01:12:20 - 00:01:14:01
It covers pretty much

00:01:14:01 - 00:01:17:01
or hopefully everything that you want
to be able to put on your page.

00:01:17:20 - 00:01:20:20
that could be from basic text
inputs or paragraph.

00:01:20:28 - 00:01:22:00
It can be a Wysiwyg.

00:01:22:00 - 00:01:24:13
So what you see is what you get.

00:01:24:13 - 00:01:26:22
It can be images, it can be buttons.

00:01:26:22 - 00:01:29:14
It can be, iframe an embed.

00:01:29:14 - 00:01:32:00
It can be so many different things.

00:01:32:00 - 00:01:34:27
and we'll take a look at some of these

00:01:34:27 - 00:01:37:27
in a moment.

00:01:43:06 - 00:01:45:19
So let's utilize these custom columns
that we've made.

00:01:45:19 - 00:01:48:01
We'll start populating some content.

00:01:48:01 - 00:01:50:01
Again
we're working with the nested blocks.

00:01:50:01 - 00:01:53:01
We want to place the content
within the column.

00:01:53:04 - 00:01:56:04
So we find the actual column
that we've created.

00:01:56:04 - 00:01:58:27
Go to the Add content section
on the bottom right.

00:01:58:27 - 00:02:02:14
And then you can see
there the list of available,

00:02:04:00 - 00:02:06:18
elements that we have available.

00:02:06:18 - 00:02:09:21
Now these are a bit of a mix.

00:02:09:21 - 00:02:13:14
Some of them will be the end of the road
in terms of nested blocks.

00:02:13:23 - 00:02:16:23
So if you add something like a title

00:02:17:09 - 00:02:19:04
then you can't add anything

00:02:19:04 - 00:02:22:05
inside any additional blocks
within the title itself.

00:02:22:05 - 00:02:25:05
It's kind of it's the end of that, 
branch.

00:02:25:23 - 00:02:30:26
However, some things in here will give you
access to even more nested blocks.

00:02:31:15 - 00:02:35:15
So, for example, if I go for, let's see.

00:02:37:22 - 00:02:39:22
If I go for a block in here.

00:02:39:22 - 00:02:42:22
Now, a block is something
which might let you

00:02:43:02 - 00:02:46:02
place things inside its own separate,

00:02:47:06 - 00:02:49:23
block with a different background color
or something

00:02:49:23 - 00:02:53:07
to really draw attention
to a certain area of your web page.

00:02:53:29 - 00:02:55:04
So if I create a block,

00:02:56:08 - 00:02:57:07
I'm just going to very quickly

00:02:57:07 - 00:03:00:07
change the background color of that block
just so we can actually

00:03:01:02 - 00:03:02:21
see it.

00:03:02:21 - 00:03:04:15
Again,
that's in its configuration options.

00:03:04:15 - 00:03:06:20
There's more details on the block
on that page.

00:03:06:20 - 00:03:08:23
I've given you,

00:03:08:23 - 00:03:10:22
but then you can see once
I've added the block

00:03:10:22 - 00:03:14:21
I've got subsequent content
I can still add to that block itself.

00:03:15:29 - 00:03:17:12
So I can put additional things in here.

00:03:17:12 - 00:03:20:21
So let's say I want to put a, an image.

00:03:20:22 - 00:03:23:28
So I can upload an image directly
into the content template for example.

00:03:24:06 - 00:03:27:11
I don't have to go through CSS override
or additional content.

00:03:27:18 - 00:03:30:18
I can just upload it directly into here.

00:03:39:02 - 00:03:40:11
Let me just change that.

00:03:40:11 - 00:03:43:11
So it's going to.

00:03:44:02 - 00:03:47:02
Potentially cause problems and remind.

00:03:50:12 - 00:03:50:23
Okay.

00:03:50:23 - 00:03:52:07
So hopefully that makes sense.

00:03:52:07 - 00:03:55:16
in terms
of how these things are all nested

00:03:55:16 - 00:03:58:26
and you can build basically as many things
and whatever it is that you want in.

00:04:00:12 - 00:04:03:12
let's just take a look at that
on our actual website.

00:04:03:12 - 00:04:06:12
Before we move on, just to show

00:04:07:05 - 00:04:10:05
what we've got.

00:04:13:05 - 00:04:15:15
So I've not chosen a particularly good
color there.

00:04:15:15 - 00:04:18:15
Let me just try again.

00:04:31:10 - 00:04:32:05
There we go.

00:04:32:05 - 00:04:35:05
So you can see, for example, there
we've got our section.

00:04:35:12 - 00:04:38:15
We've got our layout contained
within the section which is controlling

00:04:38:15 - 00:04:40:05
how many columns we've got.

00:04:40:05 - 00:04:42:28
We've got our box
within one of those columns.

00:04:42:28 - 00:04:45:28
And then within the box
we've got an image.

 

Incomplete
Step by Step Guide
Search Terms

Individual Search Words

elements, widgets, blocks, embeds, visuals, inputs, titles, texts, images, buttons

Alternate Search Phrases

add page content, insert elements into page, content block types, embed content options, configure page elements, customize page content, image and text blocks, use content widgets, nested block configuration, content customization options