Transcript

00:09 Hey everybody. So, let's introduce you
00:11 to the new drawer
00:13 stack. So, drawers is a nononsense, just
00:16 a really simple accordion. Now, there
00:19 are a few different styles and here is a
00:21 great style. It's kind of like your
00:23 traditional accordion where you can go
00:24 ahead and have one content area open.
00:28 And what's really great with drawers is
00:31 you can actually open up any content
00:33 area with a link. Now, this can be a URL
00:36 from a different web page or a link on
00:38 the existing page, but allows you to
00:40 easily click on a link and have that
00:42 section opened. Now, in the second demo,
00:44 we see we still have kind of the the
00:46 more traditional um accordion style.
00:50 However, we have an open and close
00:51 marker, which is nice. We have custom
00:53 colors, no border. And here we have an
00:56 actual background to our content area,
00:59 which gives this kind of a more uniform
01:01 look um kind of encapsulated where each
01:04 individual item is encapsulated into
01:07 itself. Now, in this demo, you'll notice
01:09 that we have the ability to have
01:11 multiple areas open at once. So, and in
01:14 our last demo, we have just a really
01:16 simple kind of FAQ style demo where we
01:20 just have we don't really have a block
01:22 uh looking title, just kind of like a
01:25 row of questions. Um, and then when you
01:27 click on that particular question or
01:29 title, um, the content is displayed. Um,
01:32 this could be a great use of FAQs where
01:34 maybe even if you have a lot of them,
01:36 you can link to the FAQs up top. Um, so
01:39 if you have like more than a page full,
01:41 it's a really great way of clicking and
01:44 it'll actually scroll to that question
01:46 and open it for the
01:48 user. Now, here's the demo file that
01:50 ships with the drawer stack, and you'll
01:53 get all of the examples that I just
01:54 showed you. You see exactly how
01:56 everything is done. Um, but for now,
01:58 let's go ahead and create a completely
02:00 new instance. So, let's go ahead and add
02:02 the drawer stack to our
02:04 page. And this stack is really easy to
02:07 implement. If you notice, you're
02:09 probably familiar with the plus button.
02:10 Go ahead and add. And you can add as
02:12 many drawers as you want. And then for
02:14 the drawer content, you can add whatever
02:16 content you would like. So, here I've
02:18 gone ahead and added just some simple
02:20 text content, but you can really add
02:22 whatever you want. You want to add
02:23 images, entire full-blown layouts, you
02:25 can definitely do that. Now, drawers is
02:28 really nice that you can actually once
02:29 you have a lot of content in here, if
02:31 you just doubleclick, if you have that
02:33 preference set, you can go ahead and
02:35 hide the contents of that drawer. Now,
02:38 that still allows you to see the title,
02:40 but it just kind of slims down and makes
02:42 edit mode a little bit nicer to
02:45 use. Now, we're not going to dive into
02:47 all the settings. It's super simple. You
02:49 have various check boxes for features
02:51 such as showing the markers. Uh you can
02:53 have custom markers, different animation
02:55 settings, padding and background colors
02:57 for everything. Um it should be very
02:59 intuitive and easy to use.
03:03 Now in the drawer, if you want to enable
03:05 linking to a particular drawer, just go
03:07 ahead and say link to item and then this
03:09 is the unique ID that you're going to
03:11 use. Then in order to link to this
03:14 particular drawer, you just link to
03:16 hashtag and then your ID and that will
03:19 automatically link to that drawer.
03:21 There's no classes needed, no nothing.
03:23 Just use the ID in your drawer within
03:26 your links and you're done. And last but
03:29 not least, because of the way drawers
03:31 was built with this child interface, it
03:33 is really easy to to dynamically create
03:37 um drawers based off total CMS or feeds.
03:41 So this means you can create FAQs,
03:43 manage them within total CMS, and then
03:46 the entire layout will be built
03:48 dynamically just the way you like it.
03:57 [Music]