Introduction to X Theme and Cornerstone 2019

Jon @ WP Templates Get Started, Tutorial

This X Theme demo will give you a quick overview of the front and back end of X and how it works with WordPress. I’ll go through some of the key features so you will know if X Theme is the right choice for you or if you just want some tips on how to use it.

This walk-through style demo video runs through the essentials you need to know to get started using X Theme and it’s page builder, Cornerstone. It runs through all the theme settings such as the Template Manager, Validation, Fonts and Colors and Headers and Footers (available in Pro).

X Theme have been working on huge changes throughout 2019 and the Cornerstone page builder has undergone some huge updates. New layout options, new style options, a whole new look and feel to the editor sections on the left. 

Themeco, the creators of X Theme, have been doing some great video tutorials which are also worth a look for some more advanced techniques: Theme Co YouTube Channel

Details in the video are still relevant, but some of the look and feel will be different if you have recently updated to the latest version.

Links mentioned in the Video tutorial:

…for those that prefer to skim through tutorials, here is the X Theme demo overview.

Validation

Get your validation code from the email sent through from the Envato market. If you go through our basic set up this will all be taken care of for you.

A license will give you access to all future updates and access to the additional plugins that X Theme partners with.

Settings

Edit some basic settings to change the users that can edit with Cornerstone or the types of post that the Cornerstone page builder is available on. Don’t forget to click update on the top left to save your settings change!

Cornerstone – X Theme’s page builder

This loads your current pages and posts (you can change these in the X Global Settings area). Click the edit button to load the page in Cornerstone on the right then edit away!

Cornerstone is a front-end, drag and drop, page builder. It Makes building new pages really easy. You can just hover over the section you want to edit, click it, then the options will appear on the left panel.

X Theme Demo Gif

Overview of Cornerstone X Theme demo

Once all the option open up on the left panel of the element you just selected, you can edit settings, edit text, edit colors, add in CSS classes or write in custom CSS straight to that element in the elements customize section.

You can even save sections or whole pages in by saving them as templates. X theme allows you to manage all of these in the Template Manager (next section) so that you can use them on new pages, saving you an enormous amount of time.

For videos on all the classic elements, check them out on our YouTube channel.

Cornerstone editor left menu details

On the left of your screen in the Cornerstone editor you’ll see an icon menu consisting of:

  • CSS
  • JS
  • Skeleton Mode
  • History
  • Controls position
  • Popout controls
  • Hide controls
  • Responsive settings
  • Load current page
  • Settings 
  • Save

CSS

This is where you can add page specific CSS. Any CSS added here will only load when this page loads. If you want to add CSS globally, head to Appearance > Customiser > X Theme Options > CSS

JS

Exactly as the CSS, this is page specific. Jquery is already loaded by default in X Theme, but you will need to wrap that code with the standard document ready wrapper. Copy and paste the below to get started.

jQuery(function($){
$(document).ready(function(){

// Add your jQuery code here.

});
});

Skeleton mode

Skeleton Mode - Cornerstone X Theme

This is especially useful when trying to select tricky elements, such as Classic Embedded Video

Quick tip – Click on an easy element, near the one you are trying to get, then click on the skeleton mode. This way the skeleton mode popup will load with the area you are looking at.

You’ll also notice copy and delete icons when you hover. These are useful on columns. If you want to delete or copy everything in a column, do it via the skeleton mode.

History

Since the time you load the page, you’ll now get a detailed change log of everything that you’ve done. Very useful if you mess things up!

Controls position, pop out controls and hide controls

Does exactly what you think it does. You can either have the control panel on the bottom or the left of the page. You can also pop out the controls to see the full width page and have access to edit elements.

The hide controls button hides the controls. Click it again to show them again. 

Responsive settings

Here you’ll see options drop down which allow you to switch screen width so that you can preview your site on mobile or tablet view. It also shows you the exact cut off points that X Theme uses in CSS. 

/* MOBILE */
@media only screen and (max-width: 767px) {
  .specific-style-for-screens-up-to-767px {
    margin-bottom:5%;
  }
}

You can use the code above in any CSS section to target specific screen sizes. Just change the max-width number to the width you want to target. For example, the snippet above will target every screen size under 767px wide.

For more useful snippets, check out the specific X Theme snippets page.

Load current page

This will load the current page in a new tab. Remember to save your work to see it live.

Settings

This will give you the current page settings + some global ones with Fonts and Colours.

  • Preferences – This is where you can turn on Advanced mode (to get more editing options on elements), Dynamic content (which allows you pull through attributes from the page and any advanced custom fields you have added to the page / post), Rich text default (for text elements), UI preferences, help text and control navigation.
  • Colors – Check below for more details.
  • Fonts – Check below for more details.
  • Page Settings – Change the template, parent page, if comments are allowed, title and if the page / post is published or draft. You will also get all the SEO options and extra settings that X Theme allow you.

X Theme Templates

The update from the older versions is epic. You can see all of the templates you have, hide ones you don’t need or delete them. This is also the place to go to load in any templates that you have purchased or downloaded from WP Templates.

Template Manager from X Theme

Global Blocks

This is a recent addition to X theme. I won’t go into it too much in this demo tutorial, but basically this allows you to create a block that is updated everywhere where it’s used. For example, if you have a promotion that you want to put all over the site, use a global block. For more information, check out the global blocks tutorial video.

You’ll create it once in the Global Blocks area, then add it as an element on your pages. If you need to update the promotion with dates or a winner then you’ll only need to do it once. It’ll get updated automatically all over your site.

Colors

Another handy feature. Set all of your brand colors here to save you from copy and pasting the HEX code or RGBA values each time.

UPDATE: They have updated this option to be in (on individual pages) theme options > settings icon.

Fonts

Same again with fonts. Also useful to limit the number of fonts seen in the font options. Just add your brand fonts and pick the ones that keep your brand perfect and keep your designers happy!

UPDATE: They have updated this option to be in (on individual pages) theme options > settings icon.

Options

Preview of the options

All of your X Theme and general layout options. I’d recommend to pick a stack that you are happy with and just edit pages as you go instead of tweaking too many settings here… but that’s just me. If you love to tweak, this is the section for you!

Header and Footer – Pro only

One of the biggest questions that I get asked is “What is the difference between X and Pro?”

The answer is header and footer customization. If you are a beginner then I would recommend just using X for now and then progressing to Pro after you are comfortable with how the theme works.

Customizing your headers and footers are a “nice to have” addition to your website theme tools. 

Check out all the stacks at the X Theme demo site.

I hope you enjoyed this X Theme demo and tutorial. If you have questions regarding the article then feel free to get in touch through the contact form.

Some FAQs