Transcript

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