►
From YouTube: Backdrop CMS - Layouts
Description
This is an introduction to the layout system in Backdrop CMS (beginners).
For more information: https://simplo.site/posts/backdrop-cms-layouts-and-templates
A
It's
the
biggest
difference
sort
of
new
feature
built
into
a
backdrop
cms
again
for
those
coming
from
drupal,
7
think
about
layouts
as
sort
of
an
alternative
to
panels
or
the
display
suite
module.
These
are
this.
This
is
a
feature
that
allows
you
to
position
content
on
your
page
in
different
ways:
it's
pretty
powerful,
some
of
it.
Its
power
is
a
little
bit
hidden
and
we
need
to
help
expose
it
for
those
of
you
who
are
not
from
drupal.
Don't
worry
about
anything.
A
A
It's
a
collection
of
regions
that
you
can
base
a
layout
on,
so
different
layout
templates
will
have
different
assortments
of
regions
and
different
patterns.
They
might
have
a
footer
and
a
bottom
region.
They
might
have
a
left
sidebar
instead
of
a
right
sidebar.
They
might
have
another
region
above
between
the
header
and
the
top.
Each
one
of
those
would
be
a
layout
template
and
you
can
take
the
same
template
layout
template
and
make
two
different
layouts
right.
So
on
the.
A
Let
me
see
if
I
can
shrink
this
just
a
little
bit
there
we
go
on
the
left
side.
Here
we
have
a
front
page
layout
and
on
the
right
side
we
have
a
blog
page
layout.
Both
of
these
layouts
use
the
same
layout
template
right.
They
both
have
the
same
rough
regions
and
the
same
rough
patterns,
but
on
the
front
page
layout
between
the
two
different
layouts.
We
have
the
same
thing
in
the
top,
but
you'll
notice,
this
sort
of
header
region
for
the
front
page.
A
It
has
special
announcements
and
of
the
blog
page.
That's
where
you
put
your
crumbs
on
the
front
page:
that's
where
you
put
your
teasers
and
a
blog
post
and
a
teaser
is
just
a
short
snippet
about
your
blog
post.
That
will
lead
the
reader
to
click
on
it
and
read
the
entire
blog
post
and
maybe
in
the
right.
A
Sidebar
is
some
upcoming
events,
whereas
for
on
individual
blog
post
pages,
this
region
might
have
your
date
body
field
in
a
photo
and
the
right
sidebar
might
be
used
for
things
like
content,
tags,
related
links
to
related
content,
information
about
the
author
and
then
maybe
the
footer
is
the
same
on
both
of
those
pages.
So
again
we
have
the
same
layout
template
here.
Two
different
layouts.
A
A
These
are
not
front.
Front-End
users
aren't
going
to
see
that
one
of
the
most
important
things
to
understand
about
this
page
is
that
when
backdrop
goes
to
render
or
display
any
page
on
the
site
it
decides
which
layout
to
use
based
on
working
from
top
to
bottom.
On
this
page,
so
the
first
thing
it's
going
to
do
is
check
to
see.
Is
this
a
dashboard
page?
A
A
A
There
are
contributed
layouts
that
you
can
download
at
backdropcms.org,
and
you
can
see
them
here.
We
can
look
to
see
if
any
of
just
like
modules
or
themes
can
be
updated,
so
can
layouts.
So
if
there
are
updates
available
for
any
of
your
layouts,
this
is
where
you'd
find
out
about
that
and
finally,
the
templates
page.
These
are
the
layout
templates
that
are
active
on
your
site,
and
this
is
actually
one
other
difference
in
this
installation.
A
One
of
the
things
on
this
page
that
you
can
do
is
disable
certain
layouts,
such
that.
If
you're
giving
your
site
editor
your
editors,
the
ability
to
create
new
layouts
you
can,
you
can
give
them
a
choice
of
say
just
the
these
three
top
layouts,
the
boxton
boxing
full
boxton
hero,
or
we
could
decide
to
give
boxton
full
and
geary
full
that
those
are
the
two
layouts
we
want
to
make
available
to
our
editors,
so
we
could
disable
all
of
the
other
layouts.
A
A
A
A
But
within
now
this
layout
we
can
move
things
around
so,
for
example,
the
backdrop
news
block,
which
is
news
from
backdropcms.org-
might
be
something
you
really
want
to
keep
on
your
site.
But
you
don't
want
to
use
this
real
estate
in
this,
so
you
can
just
sort
of
drag
this.
Maybe
down
into
the
bottom,
we
can
save
the
layout.
A
We
go
back
to
the
dashboard
and
now
we'll
notice.
This
is
where
the
backdrop
news
was,
and
now
it's
down
here.
It's
stretched
itself
across
the
page
because
it
can
maybe
we
want
the
up
available
updates
layout
to
be
more
prominent
up
here
at
the
top.
So
again
we
can
go
back
to
the
layouts
page.
We
can
scoot
over
here
and
go
directly
to
the
dashboard
layout.
A
So
maybe
we
don't
even
want
this
available
updates
block.
So
what
we
can
do
is
just
remove
that
block.
That
block
will
still
be
available
to
us
if
we
want
to
bring
it
back
and
put
it
in
the
layout
like,
but
now
we
can
save
this
and
now
the
available
updates
block
is
completely
gone,
and
that
might
be
true
of
even
this.
A
Welcome
to
backdrop,
this
is
a
block,
that's
really
useful
for
to
to
a
new
user,
but
over
time
you
might
decide
you
just
don't
need
that
block
anymore
and
you
want
to
save
the
space.
So
again
we
go
to
our
layouts
go
to
the
dashboard
and
we
can
just
disable
the
welcome
to
backdrop
remove
that
the
blocks
always
still
available.
If
you
want
to
add
it
back,
you
can
go
to
ad
block
and
go
dashboard.
A
Save
now
we
go
to
the
dashboard
and
that
that
big
welcome
block
is
gone
and
we
jump
right
into
our
content
and
our
backdrop,
news
is
down
here
the
bottom
out
of
the
way.
Okay.
So
that's
a
good
example
of
how
we
can
move
layouts
on
a
really
simple
page:
let's
go
to
the
front
of
the
website
and
we
can
see
that
the
layout
for
this
page
is
pretty
simple.
A
A
This
is
actually
just
one
wide
column
with
teasers
or
our
articles,
and
these
teasers
stretch
all
the
way
across
within
each
one
of
these.
We
have
some
text
on
the
left
and
a
picture
on
the
right,
but
it's
just
one
wide
article
and
we
also
have
a
footer
region.
We
may
also
have
some
other
regions
that
aren't
displaying
because
they
don't
have
any
content
and
we
can
find
out
exactly
what
our
front
page
looks
out.
If
we
go
layout
home
page.
A
Here
it
is
so:
we've
got
two
blocks,
a
header
block
and
a
primary
navigation
block
in
our
header.
Then
we
have
the
this
hero
block,
which
has
the
welcome
to
simplo
hero
region,
which
has
the
welcome
to
simpler
block.
We
have
a
promoted
content
and
in
this
promoted,
content
are
the
the
blog
post
teasers
that
we
have
on
the
front
page
or
the
animal
teasers,
and
then
we
have
a
block
down
here
in
the
footer,
the
other
layout
that
we're
using
the
other
layout
that
we're
using
is
the
default
layout.
A
And
this,
if
we
look
at
this,
actually
does
have
a
sidebar
in
one
point,
but
otherwise
the
header,
the
the
top
content
bottom
and
footer.
So
in
this
one
place
we
have
two.
We
have
two
regions
and
we'll
take
a
look
at
how
this
works.
A
couple
of
things
to
note
here,
one
of
which
is
there,
is
this:
the
page
title
the
page
title
shows
up
in
this
default
spot.
We
can
actually
move
that
around
and
create
a
block
instead
of
that
and
we'll
do
that
in
a
minute.
A
A
A
The
page
title
is
up
here
at
the
top
right
above
these
tabs
and
the
breadcrumbs.
This
is
something
that
I
find
a
little
bit
unusual.
The
way
the
breadcrumbs
show
up
out
of
the
deep
the
box
down
here.
So
let's
take
a
look
and
move
some
of
these
things
around
and
what
I
am
going
to
do
is,
first
of
all,
I'm
going
to
move
the
breadcrumbs
up
to
the
top.
A
We
can
go
to
our
default
layout
there
it
is,
and
what
I
want
to
do
is
I'm
actually
not
going
to
move
well,
there's
two
things:
those
those
tabs
and
the
page
title
right
now
are
both
above
the
breadcrumbs
and
I
don't
really
want
them
up
there.
What
I,
what
I'm
going
to
do
to
get
them
below
the
breadcrumbs
is
actually
add
blocks
below
here
there
is,
we
can
go
into
the
sidebar
here.
A
I
said
I
would
put
the
title
over
there
and
if
we
type
title
there's
a
page
title
block
that's
available
to
us
and
if
I
click
on
that
and
enable
that
block,
you
might
have
noticed
that
the
the
title
that
little
title
region
that
was
kind
of
step
stood
alone
by
itself
that
just
went
away.
So
what
we've
done
is
we've
overruled
that
the
the
this
hard
coded
place
where
the
title
would
go
and
we've
replaced
that
with
a
title
block
that
appears
over
here,
there's
a
similar
thing
with
the
tabs.
A
A
And
once
again,
we
can
go
into
this
content
region
which
is
below
the
breadcrumbs
and
we
can
start
typing
tabs
and
there's
a
block
called
page
tabs
and
the
page
tabs
were
showing
up
in
kind
of
a
default
place.
It
didn't
show
you
couldn't
actually
see
where
they
were,
I'm
just
going
to
go
ahead
and
add
that
you
couldn't
see
where
they
were.
They
were
above
the
breadcrumbs.
There
was
nothing
to
show
that
here,
but
as
soon
as
I
add
the
page
tabs
down
here,
they'll
no
longer
display
up
there.
Now.
A
What
I
want
to
do
is
also
move
it
above
the
main,
the
main
page
content.
So
now
the
page
tabs
are
between
the
breadcrumbs
and
the
main
page
content
we're
going
to
save
this.
There
we
go
now
we
have
our
breadcrumbs
at
the
top.
We
have
our
tabs
below
that.
We
have
our
page
title
kind
of
off
here
on
the
side
and
here's
our
main
page
content.
A
Let's
go
back
and
say
that
we
want
a
different
layout,
so
this
this
is
our
default
layout.
That's
going
to
be
for
all
content,
basically
for
all
content
except
the
home
page
right
now.
Let's
say
we
decided
that
we
wanted
a
special
layout
for
these
animal
these
articles
and
we
have
a
content
type
called
animals.
A
A
And
we
pick
which
layout
we
want
and
the
main
thing
we're
looking
at
a
couple
of
things
which
we're
looking
for
a
layer
if
we
need
a
hero
region
and
a
hero
region
is
just
a
region
that
stretches
all
the
way
across
the
page.
If
you
want
to
do
a
background
image
that
stretches
from
side
to
side
you're
going
to
need
a
hero
region
to
put
that
in,
if
we're
also
do
we
want
any
columns
right,
let's
say
this
time
we
want
to
use,
we
want
a
column,
but
we
want
it
on
the
left.
A
A
A
A
A
There
are
some
circumstances
where
the
regions
aren't
named
very
consistently,
especially
if
you've
created
your
own
layout
and
you
upload
it,
and
you
haven't
sort
of
used
the
same
naming
scheme.
These
blocks
may
get
shuffled
around
or
all
dumped
into
one
region,
and
then
you
have
to
distribute
them,
but
in
this
case
it
did
a
pretty
good
job.
It
put
everything
roughly
where
we
want
it,
but
we're
going
to
do
a
couple
of
other
things.
With
this.
I
want
to
also
go
back
to
the
layouts
page
there.
A
We
are
and
notice
where
this
showed
up
so
now.
This
is
showing
up
on
the
layouts
page
between
the
home
page
and
the
default.
So
now,
as
backdrop
is
looking
to
see
which
layout
it
should
use
for
each
page,
the
checks
to
see
is
this
a
dashboard
nope.
Is
this
the
home
page
nope?
Is
this
an
a
node?
Is
it
a
node
page?
Yes,
it
is
a
node
page.
Then
it's
also
gonna
check
is
it
of
type
animals
if
it
is
yep?
A
A
A
We
could
also
add
a
species
or
a
habitat
or
a
country
field,
and-
and
they
would
be
part
of
of
that
content
well
with
with
layouts
with
layouts.
If
we
go
to
the
deep,
let's
just
do
this
quick.
If
we
go
to
the
default
layout
and
we
go
to
add
a
block,
I'm
going
to
type
in
tags,
there's
no
tags
block
available
for
me
or
I'm
going
to
type
in
image.
A
I
think
that's
what
it
was
called:
there's
no
image
block,
even
body.
There's
no
body
block
okay,
but
if
I
go
back
to
layouts
and
then
I
go
and
now
I
go
to
the
animals
layout,
because
this
is
a
node
layout.
I
can
come
down
here
into
the
content
and
I
can
hit
add
a
block
and
if
I
type
body
oops,
if
I
type
it
correctly
there,
I
have
a
field
body
block.
A
A
A
A
We're
doing
just
putting
a
comma
between
them,
we
can
add
more
than
one
if
there's
existing,
but
we'll
see
this
in
a
bit.
If
there's
existing
tags
they
will
show
up
and
let
you
pick
from
them,
but
we're
adding
our
first
tag.
So
there
again
so
now
my
tags
are
showing
up
over
here.
There's
the
page
title:
we've
got
one
problem,
though,
and
that
is
that
the
body
field
is
showing
up
twice
and
that's
because
it's
showing
up
as
part
of
the
regular
content
and
then
we've
added
it
separately.
A
A
Once
we
added
those
tags,
those
tags
are
also
showing
up
over
here.
The
the
link
is
showing
up
here.
These
are
all
different
fields
in
the
animal
content,
type
and
they're
all
showing
up
in
the
main
body
or
the
in
the
content
block,
and
since
we
want
to
break
it,
have
individual
control
over
individual
fields.
A
We
want
to
get
rid
of
this
main
page
content
block.
Remove
that
okay.
So
now
we
have
the
page
title:
we
have
those
tabs.
Those
are
just
administrative
things
like
the
edit
tab.
They
won't
show
up
for
regular
users
and
we
have
the
body
and
okay,
let's
go
back
to
the
take
a
look
at
this
actually
did
we
save
the
layout
already
giraffe
page
now
we
have
the
tags
over
here
we
have
giraffe,
we
have
our
body
field,
we've
lost
our
image
altogether.
Well,
the
image
was
at
the
top
of
the
page.
A
A
We
don't
need
any
kind
of
label
on
this.
None.
What
format
do
we
want
to
display
the
the
image
in
a
rendered
file?
Let's
take
a
look
at
that.
Well,
I
think
what
we
want
to
do
is
show
the
image,
and
then
we
have
different
image
styles.
By
default
with
backdrop,
so
we
can
show
a
medium,
small
or
large
image.
A
A
We
want
an
image.
We
want
no
label
for
image
style.
We
want
a
thumbnail
boom.
Linkedin
float,
nothing;
okay,
save
this
go
back
to
the
drafts
page
boom.
So
here
now,
in
the
left
column,
we've
got
a
small
thumbnail
of
the
giraffe
and
down
here
we
have
a
large
image.
So
this
gives
us
a
lot
of
power
to
take
and
move
individual
pieces
of
this
giraffe
or
this
animal
content
type
and
display
it
in
different
ways
we
want.
We
could
imagine
going
to
our
layouts
page.
A
A
A
A
A
I
think
we're
going
to
stop
just
about
here.
I
want
to
go
back
really
quickly
and
look
at
again.
This
is
under
structure
layouts
and
within.
When
you
add
a
layout
again,
you
have
the
ability
to
pick
to
name
a
layout
test,
pick
any
of
these
to
set
a
path
this.
So
this
path
could
be.
You
know
my
page.
A
A
Okay,
I
think
that
is
all
we're
going
to
cover
in
this
video.
Please
post
comments
or
questions
in
on
youtube
or
contact
me
at
simplo.site.
We
have
a
contact
form.
You
can
reach
me
here
and
either
request
additional
videos
in
the
future
or
ask
questions.
I
would
love
to
help
you
out
thanks.
So
much
for
watching
bye,.