X Theme 4.0 WordPress Update - New Page Builder, Responsive Design, New Features & More

NEW: Get our new Chimpbox Plugin exclusively for the X Theme http://diggable.co/chimpbox

After a long build up the 4.0 Release for the X Theme has finally arrived - but is it living up to the hype?

Purchase the X Theme: http://themeforest.net/item/x-the-theme/5871901

In this video we're going to look at a side by side comparison that walks you through building a page with X Theme version 4 vs X Theme Version 3.

Some of the features we cover in this video:

- Cornerstone, the new page builder for the X Theme
- The Unfortunate Death of Visual Composer :(
- How Cornerstone Stacks up against Visual Composer
- How to manage responsive design and visibility in the new X Theme Page Builder


Learn More at http://diggable.co

---

Closed Caption:

so theme coaches released version port
of the ex theme and right now i have a
website that i've just updated to
version four and a website that i have
not updated and we're gonna do a
side-by-side and just kind of look at
what's new
what is good what's bad and why some
people are getting kind of upset about
it so if you look over here we have two
blank pages first I have a demo page
with the new update and I have a demo
page that does not have the new update
so if we look at this on first
impression it almost looks the exact
same as before so this is the page with
version 4 and this is the page without
right so they're pretty identical you
can actually knows a few small changes
so where it says X shortcodes previously
on the new update that has changed this
little box and there's also one big new
change so over here you can see visual
and text in the previous set up in the
new setup we have something called
cornerstone and cornerstone is the new
page builder 4x team so you can see if i
click on cornerstone i can choose to
edit with cornerstone and that's
actually gonna take me to a front-end
view of the site where i can edit
everything as I'm looking at the front
of the webpage and I wasn't too sure how
he's gonna like it based off the
feedback that was getting in the form
yesterday but so far you know I don't
dislike cornerstone as much as some
people sort of made it seem like i might
the bigger issue I have is the
announcement that they made yesterday
which if you haven't heard sodium cohen
announced that they are going to do away
with visual composer and that's kind of
a bummer because if you look at this
setup right now if this was all that
changed version for they didn't announce
that they're getting rid of visual
composer I would be pretty pumped on it
i mean i can do everything that I was
doing before I still have the backend
editor' where i can add elements and i
can add a Content band and i can add a
Content band inside content band and I
can start playing around with that so
you know i like that so it's kind of
upsetting that they are I guess doing
away with the visual composer in six
months and it's pretty much left people
with the option that you can either
start using the generic visual composer
and sort of migrate your site away from
using anything customized for X with
that or you can convert everything
your websites to cornerstone so that's
what's kind of missing a lot of people
off so without further ado let's dive
into cornerstone with version 4 and
let's look at building a page
cornerstone versus building a page with
the old way
ok so now let's get into this
side-by-side comparison right here i
have cornerstone on the new version and
I have the back end page builder on the
old version so the first thing i want to
do is I want to add a section to my
webpage so all i have to do is click add
section and we have a section here in
the old version i would go to add
element and i would add a section there
and I want a three-column layout for my
first section so i'm going to go to
manage layout and i'm going to choose
the three column and similarly over here
i can just go to the three column in
visual composer so far not that
different
now I want to add another row in this
section so this is where you need to
start kind of thinking about how
sections and rows in your sections in
the layout are kind of similar but
different from the content band layout
with visual composer so right now we
have this entire area and in it we have
two rows and if i wanted to go back into
my layout and create a second section
notice how there's a space now between
these and in the second section i could
add another row and I could do one row
that's a two-column layout i could do
one row that is a three-column layout
right so now we have section 2 and we
have two rows with their own different
columns in that layout vs section warm
with euros so if i wanted to do that
with the visual composer layout i would
actually probably make this into one and
inside of that i would put more content
bands where I could do a two row and I
could do another content band and I
could do a 30 and then for my second
section I just create a separate content
and and inside of that i would add more
content bands i would act as my
individual rows so with this content man
i can do another two column layout and I
could do another content band and do you
know like it four or six if I wanted so
if you look at this we have our two
sections with two rows
each row has columns so you know it's
just the same but different where I have
section one section two
we have two rows and we have different
columns section 22 rose different
columns so really when you look at it
it's not all that different from the old
way once you start learning where things
are and how it works now say that I
wanted to set the background color for
my first section the old way i would go
to this content band that my other
content bands are in and i would open
this up and i would set the background
color that I wanted for that
so if i wanted red for my background I
would choose that and now the background
behind these content bands is going to
be read in the New way if i click here i
can just choose this and I can set the
background color that i want for this
content band right so now the background
behind the first section is going to be
read and similarly if I wanted to set
then white for the content in front of
that red background the old way i would
go into this content band and I would
set the background color for that and I
would make it white
whereas with the new way I can just
click on this and I can change the
background color white
so again you know it's the same but
different it's you know so far we
haven't seen a lot of changes from the
old way anyways just a different way of
doing things and you can kind of see how
this is going to be a little bit faster
and let you see what you're doing as
you're doing it so pretty good so far
let's look at a few more things so next
let's look at how i would add content
into these blocks the old way versus the
new way
so if i wanted to add a text box into
this content in the old way i'll click
here and i'll choose text that will open
a text box and i can type whatever I
want into that and now we have a text
box inside of this section right it's
that easy
so the new way is you know pretty
important that if i click here to see i
have all my elements and if I scroll
down to text I can just drag that into
the box and now once that updates i can
click that and i can add the text right
here and that should update
yep and I can sort of just start selling
that house
I want in this little box over here so i
want to set of that and if i want to
bring that down a little bit let's see
if it does that
ok so that's yeah it's pretty cool i
mean it's it's pretty easy and again you
can see just instantly what you're doing
and how it's going to look on the actual
page so pretty neat so now for the next
content and i want to add a different
element i can go up to this box here and
i can just open this and this will have
all of my element in it so it's look say
i want to add a counter so i'm going to
drag that in here and now we can update
our counter so I want this to be that
and we can set the counter speed we can
set you know the starting number we can
change the number color so again you
know they're just making it just so
simple for you to start editing things
and just see exactly how they're gonna
look right here on your website also
what's nice is even though it seems like
there's a lot going on here they give
you a little breadcrumb trail so you'll
never get to Los you can just follow
this right back up the rabbit hole back
are really like this section and if we
want we can always choose this top left
button and go back to the main area
where we have section 1 and section 2
and you might have noticed next ad
section there's a new thing called
templates and this is where it gets kind
of crazy and again if you are someone
who is kinda on the fence between
Squarespace and wordpress and you've got
X you're really gonna like templates if
you're someone who build websites for
restaurants or service-based businesses
you're really gonna like templates it's
just it's so easy to just plug in what
they've already built for you and then
customize it for your own thing if
building a website is something where
you're kind of like I need a website so
like we need to figure out how to do
this what's the most painless way
templates are going to make your life
really easy and yeah they're just really
simple and they were clean right
out-of-the-box so let's take a look at
templates so I'm going to get rid of
everything we've done so far and now
let's look at templates and this is
where it gets really crazy
so if we go to menu let's say your
restaurant you want to build a
restaurant page all you do is click menu
and insert and X has pretty much already
built you my entire professional web
page that you can use for your
restaurant website so if you look we
have our menu and you can just you know
drag and drop any of this where you want
it you can just enter your own text to
substitute any of these it's you know
it's so easy if I want bison burger over
here
I can't do that and bring Texas talk
over here so it's just crazy basic and
you know if if you build for a lot of
clients that are you know in these types
of businesses or if you are one of these
types of businesses and you're just
trying to get the website out of the way
this is going to be just such a
time-saver for you and of course you can
just keep adding on to this template so
you can take the template and change it
however you want or you can go back to
section and you could say okay we have
you know are basically out i want to add
another row maybe you like what they
have so far but you want to add another
menu set and sort of tweak it a little
bit for your own stuff so just duplicate
that now we have a copy of the menu part
and of course all this is completely
customizable however you want ok let's
take a look at another one of them coast
templates is now back to a blank
cornerstone builder what's going to
templates and now let's say maybe you
want a sales page so let's insert that
and now you can see X's just fill this
entire thing with just a crazy amount of
content that you can edit into your own
images content whatever you need to do
to this and of course you can just eat
whatever you want around the same way
you would do with the builder in the old
way so you know if I have you know a
custom headline and then I have a text
in the old one in this column i can just
grab it and drag it over to this column
it's still the same way in the new page
builder even though you're actually
looking at the content so I want to just
grab this and drag it over to the other
column I just do that and I can put it
above underneath whatever I want to do
so just completely customizable and if
you're looking when i scroll up through
that you might have seen some new
elements that X is added into new update
so let's look at this
that's pretty cool right and you can
easily change the background color of
this to whatever you want it to be and
what's cool is if you look at how they
set up the text it's really easy to add
your own and you can make this you know
however you want to look so I say we
have the best ice cream pizza print
tries in the world and that's going to
update to that make sure you leave a
space at the end of this and at the
beginning of this and it takes a second
to update
you see is trying to like reassessed
itself and fix the the new text that
makes sense based off what we've added
to it so now it's got pizza in there so
you can have a lot of fun with that
that's a cool feature and it's
definitely something that if you put at
the top of you know your landing page is
going to catch people's eye i just saw
this on a website the other day before x
updated and I was like how did they do
that that's so cool yeah this is it so
now you can do this in your own website
but yeah again so X just gives you all
of this content and you can do whatever
you want with it you can start moving
things around it's super easy if you
have no idea how to build a website how
to code how to customize anything they
they've just they've made it so simple
that you are going to be able to build
something awesome with this no matter
what
ok so i don't want to dig too deep into
everything going on here because we
could be here for hours but there's one
last thing that I want to look at that
is sort of a side-by-side of how you
would handle responsive design and
visibility in the older x-team versus
the new for update so in the old version
if I wanted to make something and I
didn't want it to show up on mobile what
i would do is i would create a
visibility element and I would set that
visibility element to hidden phone and
then inside that i would put the content
that i wanted to only show up for
viewers who weren't looking at my
website from a phone right so we add
some text and let's just duplicate this
you can really see it and if we go to
preview of that we're going to the page
and now we have text we just added in
the visibility element if we bring the
page down to be say the size of a phone
all the sudden it's gone right so that's
the gist of how the visibility element
worked the old rain-x now let's check
out the new way and this is pretty
awesome so let's say that you don't want
this intro section to be visible on the
phone and you don't want to be visible
on let's say a
tablet when someone looking at it from
the horizontal viewers longer so we can
go to this row and if we actually click
on this phone down in the bottom right
corner you can kind of look at your
content from the perspective of the size
screen that it's on right so you have
you know the big desktop monitor you
have laptop you have a tablet sideways
tablet up and down and then you have a
mobile device so the mobile view tablet
up-and-down tablet horizontal and the
reason that disorder caps office because
we have the sidebar so I closed that you
can see the spacing around that we have
a the laptop view and we have the
desktop view so say that I decided that
I don't want this introduction section
to be visible to people that come to my
website from a tablet when it sideways
or a mobile device
I'm not really sure why you would want
that but let's just say that was the
case so all i would have to do is choose
my row or choose this entire section and
if I scroll down here you see at the
bottom we have the option to hide based
on screen with so i can choose the
sideways tablet and I can choose mobile
and now if we look at this from the
different perspectives and we go to
sideways tablet that section disappears
if we go to the mobile device that
section disappears if we have the
vertical tablet its back and yeah it's
that easy to do
visibility in the new setup so you can
start really customizing the responsive
design and how you want your website to
display for mobile tablet and desktop
viewing so I don't want to dive too deep
into this because I can get really into
the details and get lost in the woods
and we can be playing with this for
hours but hopefully this gives you like
a simple little overview of what's
happening with the new cornerstone page
builder in the Eckstein so if you're new
to X if you are new to building websites
if you have no idea how to code if you
don't know what HTML and CSS are this is
going to make it so simple for you to
customize and build an awesome website
for yourself or for clients that you are
going to be able to do something good
with this no matter what I you know if
you're someone who's debating between
wordpress and square space and you got
the ax team you're gonna be psyched on
this if you're someone who's pretty new
to the axiom you're going to be psyched
on this so hopefully that
gives you a kind of basic sense of
what's happening with the new
cornerstone page builder