Hey guys!
Nick here.
Welcome to our Cornerstone introduction video.
We're just going to be going over the brief
details on this one.
We've got more in depth videos coming up so,
enjoy!
Cornerstone has two aspects the Editor Area
and the Preview Area.
The editor is where you make all your site's
customizations, while the preview area just
displays those customizations.
Although being much larger, the preview area
really doesn't do much other than help you
select elements on the page and figure out
how your elements are going to lay out.
In one of Cornerstone's newest updates they
added skeletal view, which allows you to view
the page without any of the visuals.
This is a really good way to get the framework
of your site before you start customizing
all of your elements.
OK, so we're going to start out with the editor.
The very first tab on the editor is the layout
tab.
This is where you basically customize the
backbone of your site.
In this tab you'll handle the sections, rows
and columns.
You can also manage templates here as well.
As a new user to Cornerstone, I highly recommend
inserting all of the Themeco blocks and pages
into your site and studying the elements and
how they're customized to figure out how to
use them.
The most useful thing that I found when I
was starting out with Cornerstone was that
you can import any of Themeco's provided demos
and then open them up and study them inside
of Cornerstone's editor and get an understanding
of how they work.
I mean, these all come free so there's really
no reason not to import them and study them.
Don't forget that you can make templates out
of anything in Cornerstone if you have it
imported.
So don't be afraid to you know, pull some
of your demo content into your own site and
edit it to your liking.
Honestly, if you're a new web designer and
you're using X Theme, you can build a completely
professional looking site without knowing
anything, really, just using the demo content,
and the Themeco provided blocks.
Alright, so the next section of the editor
we're going to be covering is the Elements
tab.
This is a library of elements that come with
Cornerstone.
These are used just by clicking and dragging
them on to the page.
As you can see here, as you click and drag,
that places where you can drop the elements
are highlighted.
Now, There are a few elements that you can't
access through the Elements library here.
And the way that we get access to those is
through using the text element.
We're just gonna drop that on the page, and
what you do is you click on this "Insert Shortcodes"
icon here.
It's just a black box.
Pull that up, and that'll give you access
to all of the shortcodes and you can just
click on any one of them and edit it to what
you want it to look like and what that'll
do is generate a shortcode for you once you
click "Insert Shortcode" at the bottom of
the page.
So, I'm just gonna use the pullquote, because
that's an example of one that's not in the
library.
And, I'm just gonna say, "this is a pullquote"...perfect...
and citing myself, of course.
And what you do is you click on the little
"insert shortcode" button down here, and boom,
you've got the code generated.
And you can just use that anywhere in your
site, if you don't want to have to use the
elements interface.
This is really, really useful if you want
to, you know, expand your website, throughout,
without having to use Cornerstone all the
time.
We have a video series coming up where we
go in depth on every single element individually
so keep an eye on our channel for that.
Also, on our site, visualicity.com, we plan
on having a page for every element too, in
case you're not the video type and you'd prefer
to see it in article form.
The third section is the inspector window.
This is where you make all of your element's
individual adjustments.
If you select an element on the page, it'll
automatically highlight it inside the inspector
window, as well as displaying the name of
the element at the top.
It'll also show you a breadcrumb navigation
that allows you to easily switch between columns,
rows, and sections.
As I said before, this is the section where
you're going to make all of your element's
individual customizations.
Each element will have different options just
based on what it is.
The one thing that is congruent between all
the elements, is the ID, class, and style
options down here.
For now I'm just gonna move on over to the
settings tab.
Despite being simply labelled "Settings",
this is actually a really useful tab, right
here.
This is where you can add custom CSS to the
page individually with the built in code editor,
which highlights all your code.
Makes things really, really simple.
Also, you can add custom JavaScript here as
well.
I mean, this is awesome, and like I said,
it only affects the page individually that
you're working on.
It won't affect any other page.
You also have the ability to edit things that
previously, you could only edit in Wordpress
dashboard like the title.
You can change it from being a draft, or published.
You can allow comments, select a parent page
and even change a page template.
This is a prime example of how Themeco is
trying to save us time in our editing process.
We found the next tab to be extremely useful.
It's the X specific Settings tab.
This is where you can change body classes.
You can also add a custom index title to one
of the Wordpress index pages.
An example of a Wordpress index page would
be the blog page.
So, for instance, if you want to change your
blog page to tutorials, like we did, then
this is where you would do that.
You can also disable the page title for custom
designs if you want more of them to actually
build your page and you don't need the page
title there.
You can also activate your one page navigation
here by choosing the "One Page Navigation"
menu you'd like to use.
Down here you're able to enter background
image URLs.
You can enter multiple URLs by separating
them with commas.
You're also able add image fade, and image
duration, and what this does is creates a
slideshow for your images just in case you
want to create a non-static background.
This can really add an extra visual layer
to your site.
The next tab is super useful, and that's "Responsive
Text".
What this does is creates a selector that
you can add to any text element on your website,
and that will make that text element responsive
to the device, and the devices eyes that's
viewing it.
You're able to change the compression, which
will change the rate at which your text compresses.
You're able to change the minimum size that
your text will shrink down to, and also the
maximum size, just in case you don't want
it going over or under a specific size, you
know, just based on what your website looks
like.
And, lastly, you have an option to easily
navigate to the customizer.
Ok, so it's time to move on to the bottom
part of the editor.
I'm gonna start with the collapse button and
it does exactly what it says it does, and
that's collapse the page so you can view it
fully.
The next button is the navigation button,
at least that's what I like to call it.
And this gives you quick navigation to the
Wordpress dashboard, or the ability to view
the page outside of Cornerstone, which can
be useful.
This is another part of Themeco's attempt
to make everything quickly accessible inside
of Cornerstone.
The next option is this little "i" icon.
And if you enable that, it will display a
little text box explaining the various customization
options inside of Cornerstone.
And this is super useful when you're starting
out, and I recommend having this activated
so you can figure out exactly what everything
does.
The next option, which is one of the newer
integrations in Cornerstone, at least, when
this video was recorded, is "Skeletal view".
And one thing I forgot to mention earlier
about skeletal view is that, in the bottom
right hand corner, there's a little preview
window that will highlight the elements that
you're hovering over in skeletal view.
This is really helpful for figuring out exactly
what you're looking at on the page.
The next button is the "Device viewer", which
is this little, phone button right here.
And what this allows you to do is view what
your website will look like on various common
device sizes.
This is super useful for customizing for the
outputting device and it's a great tool for
any web developer.
Finally, there's this last button, which is
the "save" button.
When you click that, you'll get some positive
reinforcement, which is always nice.
Alright guys, well, thank you for watching,
be sure to subscribe and stay tuned for our
next videos.
We've got a lot of Cornerstone tutorials coming
up so, be on the look out for that.
Thanks again for watching, we'll see you next
time!
