Transcript

00:05 hey everybody this joke man and today in
00:08 this video we're gonna look over the new
00:10 toggle stack that came in total CMS
00:13 version 1.1 and it's a very simple stack
00:16 it's essentially toggling content on or
00:18 off and it's done via a nice beautiful
00:21 little toggle switch that we have grown
00:24 to learn to use using iOS and iPhones
00:27 and all that stuff right so let's jump
00:30 in and see how easy it is to use so here
00:34 we are inside the total CMOS demo file
00:36 and we're gonna see a really simple
00:38 example here okay here I have a section
00:41 on the content page that says total
00:43 toggle the toggle is turned on okay and
00:46 if we go over to the admin page inside
00:49 this project you'll see that we have a
00:51 total toggle section and we have a nice
00:53 little switch here and the currently
00:56 this switch is turned on and if we were
00:58 to turn this off as you see we have a
01:01 nice little switch animation I could
01:02 turn it on again and I can turn it off
01:04 again okay
01:06 but now I've turned it off okay and
01:08 let's go ahead and look at our content
01:10 page again so if I scroll down on the
01:13 content page if you remember that total
01:15 toggle section was right above the feed
01:17 list and it's not there right now
01:19 because I've actually toggled that
01:21 entire content area off if we were to
01:25 look at the Edit area for the admin
01:28 toggle stack the one that actually
01:29 contains the switch will see that this
01:32 setup is really simple we have our CMS
01:34 ID which I have it currently set to
01:36 toggle right we can define the different
01:39 types of stuff buttons that we want do
01:42 we want a round button do we want a
01:43 normal square button or a rounded square
01:46 button okay we have various things we
01:49 can have a tiny button we can have a
01:51 large button okay so it's really up to
01:53 you in terms of this style now the style
01:57 option here allows us if you're using
01:59 foundation to actually leverage a lot of
02:02 the swatches and styles already defined
02:05 inside site Styles okay however you can
02:08 also choose custom and this will allow
02:10 you to choose three different colors
02:12 that are used
02:13 style the switch and of course we have
02:16 an alignment option for left right and
02:18 center really the toggle stack is really
02:22 simple it's just turning something on or
02:25 off now I've decided not to have a
02:28 placeholder text for the toggle because
02:30 I thought it was easy enough to add a
02:31 paragraph or some text to the stack um
02:34 and I wanted to be able to have more
02:36 flexible maybe you wanted the text on
02:38 the left or the right inside of a
02:40 two-column stack with your toggle okay
02:42 so I didn't add a placeholder into this
02:45 stack on purpose because I wanted to be
02:47 flexible since the switch is such a
02:50 small amount of content maybe he wanted
02:53 text on top or maybe you wanted it on
02:55 bottom or you want it on the left or the
02:56 right via a column stack so if you do
02:59 want to label which you probably do want
03:01 one to label it right just use a
03:04 paragraph or text stack to be able to do
03:07 that now if we look at the content side
03:10 of the toggle stack and we look at the
03:12 actual edit mode you'll notice here that
03:16 the settings are very simple we have our
03:19 CMS ID which should match up with the
03:21 CMS ID on the admin side and that's it
03:24 whatever you place inside the toggle
03:26 stack will get toggled on or off it can
03:30 contain anything you want as you see
03:32 here I have a column stack with some
03:34 headers and some text right you could
03:36 have a three column stack you could put
03:38 whatever you want inside here and it
03:40 will not be displayed on the web page
03:43 now what's important is the toggle
03:45 content is never even downloaded to the
03:49 browser it's not just set to be
03:52 displayed or hidden okay the actual
03:54 content is never loaded on the web page
03:57 so that's very powerful now you'll
04:01 notice inside the toggle settings there
04:02 is also a setting to show different
04:04 content when the toggle is off this
04:09 gives you two options so you can show
04:11 content when it's off and show different
04:13 content when it's on and as you see it's
04:16 just a generic stacks drop zone area so
04:19 you can really add whatever content that
04:21 you want into the toggle stack
04:24 that's crazy simple right I mean toggle
04:27 stick is easy
04:28 toggle something on or off right and
04:31 again you can have different content for
04:32 on and off as well this can be used for
04:35 so many different things right I mean
04:37 the use cases are so much like you want
04:41 your customer wheel to turn on and off
04:43 holiday messages or in-store messages or
04:48 whatever right it's just an easy way to
04:50 toggle things on and off maybe for you
04:52 as an admin if you have a let's say a
04:55 super admin page that your customer
04:57 doesn't know about you can turn stuff on
04:59 and off for them inside their admin area
05:02 right um just some ideas right just some
05:06 things that you can use to UM show stuff
05:10 not only maybe on the web site maybe on
05:12 your admin page as well right so I hope
05:15 you use the toggle stack I hope you like
05:17 it hope it makes your your lives a
05:19 little bit simpler so thanks for
05:21 watching everybody
05:28 you"}]