Transcript

00:00 come on
00:10 hey guys so in this video we're going to
00:11 be looking at the clipboard
00:13 functionality that is baked into the
00:15 foundation button stack
00:17 currently this functionality is added to
00:20 just the foundation button just the
00:22 normal button and let's have a look at
00:25 how easy this is to do
00:27 so when you add a button stack to the
00:29 page you'll see that there is a function
00:31 where you can set the type to copy to
00:34 clipboard
00:35 now when you use this you can
00:36 essentially just type in whatever text
00:38 you want here and when the button is
00:41 clicked that text will be added to the
00:43 clipboard
00:45 so to demo this I'm just going to go
00:47 ahead and click this button and I have
00:48 this text area here just so we can paste
00:50 it in there
00:51 and voila you see we can paste
00:55 and just to show you this copy text
00:57 setting can actually take in HTML so
01:00 here we have an example where I put in a
01:02 ton of quasi-complex HTML and if we go
01:06 ahead and preview this I can click copy
01:08 HTML and as you see it is directly onto
01:11 my clipboard
01:13 now this might look intimidating if you
01:15 want to like paste in HTML here while
01:18 this does work there is a simpler
01:20 solution
01:21 and there's also a new setting for copy
01:24 template to clipboard
01:27 and you see when we select this we have
01:28 a container ID that we can use so what
01:31 is this all about
01:33 so on this page I have a container
01:37 and there's a few things we need to do
01:39 to set up and now this is just a normal
01:41 Foundation 6 container
01:44 and there's a few things we needed to do
01:45 we need to set the HTML tag to beat
01:47 template
01:49 we need to set the sizing to be no
01:51 wrapper
01:52 and then we set our anchor ID to be
01:55 whatever we want the ID of this template
01:57 to be
01:59 the ID that you set here needs to match
02:02 the ID that you set inside of the button
02:05 then essentially you can now build your
02:08 layout with whatever Stacks you want
02:12 and then when I click on the copy HTML
02:15 it'll actually copy the contents of this
02:18 container template
02:21 and what's great is whatever you add
02:23 inside of the template container
02:26 will not actually be displayed on the
02:28 page so here we see that this preview
02:31 looks identical I do not actually see
02:34 any of my templated content and neither
02:36 will Google or any search engines
02:39 however if I go ahead and click the copy
02:42 HTML button
02:43 and I paste you'll see that I actually
02:46 get the full HTML of that templated
02:50 container onto my clipboard
02:54 now you now you might be thinking why
02:56 would I ever want to do this
02:58 so let's show you a real life use case
03:00 example
03:02 so now this demo project is available to
03:05 download on the foundation product page
03:07 and we're going to look at the clipboard
03:09 plus total CMS template
03:12 page
03:14 so here's a use case where I have a
03:17 couple buttons
03:18 where we're actually going to copy
03:20 potentially a two column layout a three
03:22 column layout and a button
03:25 and down here I have the same things I
03:27 have a container built out for a two
03:29 column layout container for a three
03:31 column layout and a container for a
03:33 button
03:34 and up here I have a total CMS text
03:37 admin area
03:38 um set to be a style text editor
03:41 now one thing you're going to want to do
03:43 is in the admin core you're going to
03:45 want to make sure that you set up the
03:46 HTML button to display for hip wig
03:50 let's play around so here we are I've
03:52 previewed the page you'll see that I
03:54 have three buttons here to copy my
03:56 templates I can go ahead and maybe let's
03:58 add in some text
04:00 okay and
04:02 um let's say I want to be able to let's
04:04 do two lines of text okay and let's say
04:07 maybe I want to have a button right here
04:10 so I can do is I can copy the temp the
04:13 button template just by clicking that
04:16 and then let's go ahead and I'm going to
04:18 go into code View and what I'm going to
04:20 do is I'm just going to paste in
04:23 um what we have here I'm going to go
04:25 ahead and let's exit code View and I now
04:27 I have my button
04:29 right really great and now this is a
04:31 link button and I can go ahead and edit
04:34 this link and I can edit the URL and the
04:36 button text right
04:38 um link to URL okay and then I can put
04:41 in my URL let's do like
04:44 Weaver space
04:47 okay
04:50 we can open in a new tab if you want
04:51 click update and there we go I mean so
04:54 now I have full control over that button
04:56 using the native hip wig controls pretty
04:59 slick
05:01 now what if I wanted to have a two
05:03 column layout I'm going to go ahead and
05:04 click the copy to column and then I'm
05:06 going to go into here and let's say
05:10 maybe after this first paragraph I want
05:12 to put in a two column layout so I'm
05:14 going to paste that in there let's exit
05:16 code View and now I have my two column
05:19 layout that I can then you know
05:21 um
05:25 I can go ahead and edit that
05:27 column one column two and we can edit
05:29 all this text right
05:31 I could do the same thing with a three
05:33 column layout so maybe below this I want
05:34 to have a three column so let's go ahead
05:36 and I will do uh copy my three column
05:39 layout and uh maybe actually where all
05:42 this is I just want to paste in my three
05:44 column and let's exit
05:46 and now I have there we go I have a
05:49 full-blown text a two column some more
05:52 text and a three column and then my
05:54 button right so this is a really
05:56 powerful way to take kind of hip wig and
06:00 total CMS really to the next level using
06:02 this copy to clipboard functionality
06:04 there's all kinds of things you can do
06:05 maybe you have a templates button that
06:08 launches the light box where you can
06:09 then copy you know click on various
06:12 buttons that will copy the template
06:14 um all kinds of layouts but the core
06:17 concept is the same we we build out some
06:19 templates we copy those templates and
06:21 then we can then add those templated
06:23 layouts and edit the content directly
06:26 inside hip wig
06:28 now I strongly urge if you like this
06:30 kind of this concept of integrating HTML
06:33 and templates inside of hip wig go to
06:35 our YouTube channel and in the live tab
06:38 or you can search
06:39 um there's a video that I did a few
06:41 months ago from my recording here called
06:43 Advanced style text in total CMS
06:46 and this is a great video that goes more
06:49 into depth of what we're doing right now
06:51 with hip wig so definitely check out
06:54 that video
06:55 um I implemented this copy to clipboard
06:58 functionality kind of after I did that
07:00 video because I thought it was a really
07:02 genius way to copy these templates and
07:06 allow your customers the access need
07:08 give you them the ability to create
07:10 different layouts and content within hip
07:12 wig