Transcript

00:08 Hey everybody, let's introduce you to
00:10 the new Squeezebox version
00:13 three. Now version 3 has the same
00:16 classic Squeezebox look and feel. When
00:18 you hover over the title area, you get
00:20 this beautiful open and close icon. Now
00:23 this version obviously now has SVGs
00:26 where we can style the colors to be
00:28 whatever you want. You can even
00:30 customize the actual SVG used. So, if
00:34 you want to supply your own, you can
00:36 definitely do that.
00:38 Now, there's new custom animations, but
00:41 what I'm really excited about is the new
00:44 smart layout capabilities within
00:47 Squeezebox. Now, there are a lot of
00:49 different setting combinations. As you
00:51 see here, there's just a small sampling
00:53 of what you can do. Now, there are over
00:55 27 different combinations of layouts
00:58 that you can build with version 3, but
01:02 let's give you a small example on why
01:04 it's smart. Let's look at this first
01:06 example. Now, this example is actually
01:08 what Squeezebox looks like when you drag
01:10 it onto the page. The same colors, the
01:13 same look and feel. This is exactly what
01:15 you get. A beautiful accordion that just
01:19 looks great.
01:22 What you'll notice is let's look at the
01:23 round corners. You notice that we have
01:26 round corners just around the outside
01:28 because that's where it makes sense. And
01:30 when I open and close it, we only see
01:33 the round corners around the outside of
01:36 the entire
01:38 accordion. Now, let's look at this
01:40 example. When I open box number one
01:42 here, we'll notice that it looks quite
01:45 different here. Because there is no
01:48 content or background to our content
01:50 area, the round corners are applied to
01:53 the entire title
01:55 box. But when I close it, the round
01:58 corners on the bottom make it look
02:00 seamless.
02:02 That's just one example of all the
02:04 various smart rules that Squeezebox has
02:08 to always ensure that your accordians
02:11 look
02:12 fantastic. So, as you see, we have the
02:14 ability to have dividers. We can unify
02:17 our content or have it kind of outside
02:20 our content and our title
02:22 separate. We can have, as you saw,
02:24 custom SVGs. We can have gutters in
02:27 between our accordion items. And lastly,
02:30 we have the ability to control borders.
02:32 So, do we want the border around the
02:34 entire uh title or when we open it, is
02:37 it going to be around the entire unified
02:39 content
02:40 area? So, again, these are just four
02:43 examples of what you can build. There's
02:45 a lot more options that you can do to
02:48 create the exact accordion that you
02:51 want.
02:53 Now also we have the traditional kind of
02:56 FAQ layout, right? Which really has no
02:59 kind of blocked title, okay? And when we
03:02 click on this a, we'll see another
03:04 custom animation that we have uh for
03:07 Squeezebox. But this is a really great
03:09 way of having a FAQ page. And what's
03:13 nice, you'll notice this demo allows you
03:15 to have multiple open whereas up here
03:18 you can only have one open at a time.
03:21 Now another great feature of Squeezebox
03:23 is if you want to link to a particular
03:26 item you can do that. So here I have a
03:29 link on this page and if I click on that
03:30 it opens up FAQ number two. Now if this
03:34 FAQ ever sometimes with accordians the
03:37 top of it will scroll off the top of the
03:38 page. Squeezebox will always ensure that
03:41 is the top of the accordion is always
03:44 visible on page.
03:47 So, if I were to click on this link and
03:49 the FAQ opened up and it went up here,
03:51 it would scroll it down automatically to
03:53 ensure that you can start reading from
03:56 the top and you don't need to kind of
03:57 fish around and scroll up and down the
03:59 web page to find the content that you're
04:01 looking
04:02 for. Now, these links can also be
04:04 external links from other web pages. So,
04:06 if you want to link to a particular
04:08 section in your accordion from another
04:10 web page, you can do that as well.
04:14 Let's dive in and see how easy
04:16 Squeezebox is to
04:18 use. So, here is the demo file that
04:20 ships with the Squeezebox stacks. So,
04:23 you have full access to see how all
04:25 those demos that we just looked at are
04:27 built. Now, if you notice, if you look
04:29 at the Squeezebox, um, it has a really
04:32 nice feature for edit mode where you can
04:33 actually show and hide the content
04:37 within the Squeezebox content items.
04:40 Right? This allows us to kind of shrink
04:42 down edit mode so it's a little bit more
04:45 easy to use, especially if you have a
04:47 lot of content. Now, when you add
04:49 Squeezebox to the page, the settings
04:51 should be really easy to use. You notice
04:54 at the top we have various behaviors
04:55 such as open first on load, do you only
04:58 want to have a single item open at a
05:00 time? We have a lot of really great
05:02 animations available, timing. Uh then we
05:06 have the smart layout capabilities. This
05:08 is where you can turn on and off
05:10 borders, change the border color, have
05:13 gutters, butter, the border size, add
05:16 round corners, and whether or not you
05:18 want that the unified
05:20 content. Now, if you talk to a lot of
05:22 people, especially with round corners,
05:25 um you can spend a lot of time ensuring
05:28 that round corners looks great for the
05:31 exact accordion layout that you've
05:33 chosen. And again, Squeezebox does all
05:36 of that work for you and ensures that it
05:38 looks perfect no matter what setting
05:40 combinations you use
05:43 here. Moving further on, we have the
05:45 ability to customize the squeezebox
05:47 titles. So, for SEO purposes, what do
05:49 you want your title to be? Do you want
05:51 it to be an H tag or just a paragraph?
05:53 Okay, we have font size, paddings, um
05:57 text colors, and background for the
05:59 default and on hover. And you can turn
06:02 on hover colors when open. So basically,
06:05 do you want the hover colors to be the
06:07 open style as well? Um, I quite like
06:10 that. I think that is a great default to
06:12 have. Next is, um, if you have unified
06:15 content turned on, you'll also have a
06:17 background color for content and then
06:19 your padding. But if you're not using
06:22 unified, you won't have a background
06:24 option in Squeezebox because the
06:26 background of the layout or the website
06:27 that the squeeze box is in will then be
06:30 displayed behind the
06:33 content. Next is our the ability to
06:36 customize the icon. So we can, as I said
06:38 earlier, we can customize the icon
06:40 color, the size, um the animation of the
06:44 icon as it comes in. So when it opens,
06:46 do we want it to flip up? Do we want it
06:48 to rotate? or you can actually define a
06:50 custom CSS transform animation as
06:56 well. And last but not least, if you
06:59 want to create your own custom SVG, just
07:02 simply go ahead and put in your own SVG
07:04 in here, and that icon will change from
07:07 the default chevron to whatever icon
07:10 you'd like to use. And lastly, if we
07:13 look at a Squeezebox item, you'll notice
07:15 that we have a couple settings here. If
07:17 you want to configure linking to a
07:19 particular Squeezebox item, go ahead and
07:22 turn on link to item and then you'd add
07:24 your ID into here. And then essentially
07:27 to link to that, you would just do
07:28 hashtag and then your item's unique ID
07:32 and you're good to go. Now we have two
07:35 class options here. This adds to the
07:37 actual container of the item and then
07:40 you can actually have a custom class
07:42 just for the title area. This gives you
07:44 a little bit more flexibility if you
07:46 want to use swatches to actually
07:48 customize um your look and feel even
07:51 farther. Now, just to show you how easy
07:54 it is to configure squeeze box, when you
07:56 add squeezebox to the page, this is
07:58 exactly what you will see. And you
08:01 simply add click on the plus button to
08:02 add as many items as you want. What's
08:05 great about this is this allows us to
08:07 now drag and drop and change the order
08:10 of our items. something that we couldn't
08:12 do in the previous
08:13 version. Now, this model also allows us
08:16 to dynamically create squeezebox using
08:19 something like total CMS and feeds. This
08:21 gives us a super powerful way to
08:23 dynamically create our accordians based
08:26 on content that we have stored in the
08:28 CMS. Now, Squeezebox, you can add
08:30 whatever stacks you want into the
08:32 content. It does not
08:35 discriminate. So, I hope you enjoy
08:36 Squeezebox. And again, it is a super
08:39 customizable, probably the best
08:40 accordion out there right now. I can't
08:42 wait to see what you build with it.
08:50 [Music]