So, I have a confession to make.
In my last video, I lied to you guys.
I said that all Cornerstone Elements have
an ID, Class, and Style box.
However, that's not true.
The element that lacks these options is responsive
text, and it's actually very important and
it's actually not technically a Cornerstone
element.
However, you can generate a shortcode for
it and you should be using it as much as other
Cornerstone elements.
Primarily, responsive text should only be
used on headlines.
The reason this was implemented is because
headlines and text do not scale like images
will, based on screen size.
Now, previously if we wanted to optimize a
headline for a smaller device, or different
sizes in general, we would have to create
multiple sections or multiple headlines, and
hide them for various sizes.
But, Responsive text actually makes everything
really easy.
So just to show how this thing works right
away, I've already got responsive text set
up on our services headline right here.
The best way to understand how it works is
just by dragging the window smaller and larger.
Now, you'll see with Responsive Text on, the
headline will automatically change size with
every little adjustment I make to the size
of the window.
Now, just watch as I scroll down.
It's pretty impressive.
Drag it back up...ok.
Now, let's see what it would look like if
I took off the responsive text class selector
that we have on Custom Headline.
Get rid of it.
All right.
You can see it already changed a little bit.
Now, as we minimize.
Once it gets to a small enough width, it totally
cuts off the text.
Versus, if I just copy that back in, or paste
it back in, rather, you can see, right away,
it's fixed.
So this is why responsive text is useful.
And we're going to show off how to use it.
It's actually really easy, despite seeming
confusing at first.
So I'm just gonna get rid of all of our settings
real quick.
Be right back with you guys.
Ok, so you access Responsive Text through
the Settings pane.
So I'm going to navigate to that, and press
Responsive Text.
Now, you add Responsive Text kind of like
sections.
So you're able to create individual responsive
text settings for every type of headline that
you want to edit.
So if you want to have a specific type of
responsive text for heading ones, you can
do that.
Responsive text for heading twos, you can
do that.
So, I'm going to add a new item here, and
click it.
Your title should represent the type of headline
that you're changing.
So, I'm gonna make mine...we'll call it, Responsive
H1.
Ok, then I'm gonna say, just hresponsive-1,
representing my heading one.
So, if I was gonna make one for heading two
it would be h-responsive-2.
Now, what you're doing when you create a selector
like this is essentially creating a custom
class for your elements.
So, you'd enter this into the class box, inside
of the element interface, without the period
of course, like any helper class.
Now, you also have options to control the
compression, minimum size of text and pixels,
and maximum size of text and pixels.
Now, this will take a little bit of tweaking.
I recommend going up just by small points
with compression, because it has a large effect
on the rate at which your text compresses
or expands as you drag the window up and down.
So, I recommend really just playing around
with this to figure out what works best for
you.
I found that 1.5 compression works quite often.
And the minimum size for my text, for my heading
one, I want to be 24, I don't want it to be
too small, but also I don't want it being
to large, so 72 will be the maximum.
Ok, so what I'm gonna do next is just copy
the selector, without the period, and then
select the headline that I want to add responsive
text to.
Scroll down to the class box here.
Make sure there's a space here between this
one and the other classes.
Paste that in.
And already, even inside of Cornerstone, you'll
see that my responsive text is working.
Pretty cool.
Let's just make sure that it works when we're
outside of Cornerstone.
Check it out here.
Alright...whoops.
Perfect!
Now, if I wanted to, I could add that class
to any other headline on the page.
Now, for whatever reason, you may want to
use Responsive Text outside of Cornerstone,
or just have the code for responsive text,
the way that we generate this is through the
Text Element inside of Cornerstone.
So what we do is click on this little box
here, and then go to typography, and click
Responsive Text.
And this is where you'll generate the Responsive
Text shortcode.
All the settings are pretty much the same
as they are inside of the Settings pane in
Cornerstone.
Just enter everything that you want, here,
I'm going to do it really quick.
Alright, and then press "Insert Shortcode"
and there's the code for it!
And you can just copy that and use it anywhere
that you want.
Make sure that you place the Shortcode after
the Heading code though, otherwise it won't
work.
To give a quick example of what I mean by
this, I'm going to attach Responsive Text
via code to this little text area right here.
So, if I was going to attach Responsive Text
to this Headline with code, I would have to
place it after the custom headline code closes,
so right here, is where I would put it, to
make sure that it works.
Alright guys, well thank you so much for watching.
Up next are our Headline videos, so I figured
I'd make the Responsive Text video first.
Please subscribe, rate, comment, let me know
what you guys want to see.
Really interested to hear what kind of tutorials,
what elements you guys want to hear about.
Please give me any input, feedback.
Thank you for watching, we'll see you next
time.
