[Music]
[Music]
[Music]
partials are an incredibly powerful tool
to use When developing a website they're
fantastic for When developing large
websites that have a lot of different
components like navigation Footers and
other section that are used throughout
the website on every page they're also
fantastic for just small websites to
help you be more efficient and keep
yourself organized so the best way for
me to Define what a partial is is to
actually give an example of how they can
be used so here I am in stacks and what
I'm going to do is go ahead and throw on
a site Styles because I'm using
Foundation 6 I am going to just add a
couple of features to it I'll go ahead
and put on font awesome Swatch the
preloader Swatch and add in a Google
font
Swatch I won't set any of the settings
for now just throw some swatches on
there so you can have an example I'm
going to go ahead and just put a
background Swatch and leave it like that
okay so this is all good I'm going to
rename this page to home and I am now
going to duplicate this page page we'll
just say that this is our about us page
now I have two pages about us and home
they both have site styles on them in
this example I'm on the about us page
and I have this
background I'm going to set the
background to this maroon reddish
color okay here's my background on the
about us page now now I'm going to go to
the
homepage if I click on that background
Swatch you'll notice that the color has
not yet been set that's okay if I only
have two or three pages and I'm diligent
and can remember to update them all to
be the same I'll set the background
color for this page let's just go ahead
and make it for the body of the web page
now the website body is that reddish
color if I go to the homepage and I want
the same red color for the homepage when
I preview it it's white it's the default
color for the homepage because in the
homepage background site styles that
background Swatch isn't set to a color
let alone the body so how can we make
this more
efficient what I'm going to do is go
ahead and delete the homepage site
Styles and go to the about us Pages site
Styles once you select site Styles
you'll see at the top here you have
three options that light up partial
external and
template externals and templates will be
covered in other videos for now what
we're going to do is focus on
partials if I click the partial button
I'm taken into the partial editor over
here in the inspector instead of it
being called partial 4 I'm going to call
this site
top this can be arbitrary and you can
name it whatever you want but for my
purposes I'm just going to name it
top I'm going to tag it with the word
settings now what's cool about setting a
tag for a partial is if you come over
here to the partials panel you'll see
that I have sight top in here as I fill
this in with more partials this tag will
allow it to be organized in the panel by
that tag I'll show you that once we add
another
partial I have my partial with site
Styles in it now I'm going to back out
of this and once I click on it you'll
notice that everything is more or less
grayed out I can't change anything I'm
going to have to actually double click
on that partial to open it up and now I
can go in and actually set some
settings I have everything I need here
what I'm going to do is go back out I'm
going to select the partial again I'm
going to copy it and come over to the
hom page and paste it in now I have the
same partial on both Pages if I preview
you'll see that I have that reddish
color this is all fine and good for
small
websites makes it easy to keep yourself
organized and make changes quickly but
let's pretend that you have a website
that has I don't know 15 to 20 or even
30 pages on it and your client one day
says you know what I don't want it to be
that reddish background anymore instead
I want it to be a
gradient now you have your gradient and
then you back out you preview on the
homepage and there's your
gradient well if I come over to the
about us page and preview I see the same
gradient this is the power of the
partial you can make one change and it
can reflect across your entire
website what I'm going to do is come in
here I'm just going to collapse the site
Styles back out and I'm going to show
you another example of how to use a
partial I'll go to the homepage and
throw a pen stack on here and I'll name
it
footer okay so I'm going to throw onto
the footer a container and then I'm
going to throw on a columns
Pro we'll put a column divider in there
just to be a little fancy I'm going to
give it some padding and gutters and I'm
going to make the vertical alignment to
be middle
here is the beginning of my footer now
if I preview this obviously there's
nothing there I need to add some
content so let's say that in my footer I
just have over here company
name and then underneath that I'm going
to make a menu
I'll make this a vertical menu turn on
this detailed layout and I'm going to
add a few menu
options I'm not going to worry about
styling this or anything I know that it
doesn't look the best here in fact what
I'll do is I'll go into my site top
partial and I will change the background
to something a little more
friendly I'll make it a nice lighter
color
that way we can at least see what we're
working
with in my footer let's pretend that I
want to have the same content the
company name in this menu on every page
but in this column I want to have
different content that can be shown on
each
page I'll select this pen and turn it
into a partial I'll just go ahead and
name this footer and I'll give this a
tag of site
component I'm going to back out just so
I can show you that
organizing so I have settings and site
component tags now you can see why that
tag can be very
helpful imagine if you have 10 to 20
different partials in here you'll be
able to organize them and find them more
efficiently back to my footer I'm I'm
going to take this footer partial and
I'm going to copy it and I'm going to
paste it over here into my aboutus page
all right so I'm going to come up here
I'm going to be organized like I
normally am and go ahead and throw a pin
on
here throw sight style stack into that
pen and name this pen sight
Styles usually what I do with my sight
Styles is I don't rely on the actual
sight sight styles stack I usually put
it on the page and I will add in my
features that are going to be Global
across the website like the preloader
font awesome total CMS core or even the
background swatch for the body I'll just
keep these in sight Styles because they
pertain to the entire
project what I tend to do is collapse
that and start throwing on Swatch
palets then I name them accordingly
you know maybe I want to make these the
fonts and then here is where I will go
in and actually set the different fonts
for the
website now I can collapse that pin back
out and you'll see that it's small and
out of the way it contains everything
that I need here I have my footer on
both pages and we can see that it is
actually on both p
pages so what if on the right side of
this footer I wanted to maybe have a
unique image per page for some reason my
client wants to have a different image
on every page to kind of showcase what
that page is all about well since I have
this partial and the way we typically
think about partials is whatever you put
in here is going to be the same on every
page how can we have unique
content one really cool thing is you can
come in here and you can select the
column and there are these little pin
icons to the right if you check that or
click that pin icon you'll notice that
this little drop area appears so this
drop Stacks here is the normal one but
if you click on this one it turns it
into a partial drop area and now if I
back out you'll see that I have this
drop zone and just to show you what it
looked like before if I come in here and
make the pin blue again come back it's
gone I'm going to go back into the
partial click the pin icon back out and
now I have a drop zone where I can throw
in a picture stack if I click on the
about us page that picture stack is not
there if I wanted to I could throw in a
header stack
instead so now I have unique content per
page because of that unpinned column and
so I'm going to click on Warehouse go to
resources and unsplash
I'll just pick this image copy URL and
paste that
in I'm just going to say scale image 512
is fine and I'll Center it and now if I
preview you'll see that I have this
image with this text and if I click on
about us I have the same menu with the
header instead of the image that's a
very simple way to get unique content on
each page while having the same content
on each page p and it makes your life a
lot easier when needing to edit
something so if you didn't like the menu
items being this bluish color you could
simply come in here throw on a Swatch
palette come down to menu
Styles give it a class of footer menu
and give that class to the menu
click on menu Styles and maybe you want
to make them
white when you preview it you'll see
that your menus are now
white and if you back out and go into
the homepage they are white as well and
you didn't change anything else in the
partial now one thing to be cautious of
is if you do use this unpinned concept
if you come into the partial itself
you'll notice that your picture stack
and the header stack are not shown they
are only shown when you are actually in
edit mode on the page outside of the
partial if you come in here and you for
some reason repin that pin icon on the
column and back out you're going to lose
your drop zone and you're going to lose
your picture stack and your header stack
you need to be very very careful when
using this concept to build out your
websites and stacks
so that is partials in a
nutshell I hope you found this
interesting and useful and I hope it
makes your website building more
efficient and more fun moving forward