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