How To Setup Your X Theme Landing Page

Jon @ WP Templates Get Started, Tutorial

In this tutorial, I’ll be walking you through the simple steps of setting up your X Theme Landing Page which you’ve bought from WPTemplates. In 15 mins you’ll be setup and ready to go!

If you’ve found this post but want to find out more about X Theme, check out this “Introduction to X Theme and Cornerstone” blog post first, then get back here for the setup instructions.

With each landing page template download, you will have at least:

  • 1 TCO file – This is the X Theme template. This is what you load into the template manager.
  • PDF – This contains all the CSS, JS and Contact form code you need to copy + paste to make the template look as it should.
  • Images – These are just as back up as they get imported along with the template.

Step 1: Contact Forms

The best first step is to add in any contact forms that you need. For each template I use Contact Form 7. It’s a free plugin and works seamlessly with X and Pro.

If you want to use forms that are already on your site AND on the CF7 plugin, then that’s fine to do. 

Otherwise, Copy and paste the code in the PDF to create the forms needed for the template.

  1. This is the title for the form
  2. This is the code you use which replaces all the code that is there when you first add a new form.

The rest of the fields are on the mail tab and are labeled the same so it’s a simple copy and paste to get that sorted. 

For the message box, this is what you will receive, so just make sure that all the form fields are in there so that you get all the information 🙂

Step 2: Upload your template

To get to the template manager, on the left menu you’ll see X or Pro depending on the theme you have. Hover over that and you’ll see the Templates option.

Add Template Gif
Just drag it in 🙂

Once that loads, open the folder with the TCO file in it and drag it onto the left side of the template manager.

Wait for it to upload then voila! you’re set to add your page!

Step 3: Create your page

Now we are ready to add in a new page for your template!

Add New Gif

A few key things to remember here:

  • Set the template to be Blank No Container | No Header, No Footer. You can have the header and footer in, but if this is a landing page, you want to limit exit options and distractions

Once Cornerstone has loaded, you can select the new template from the load template option. Click insert and let the magic happen!

Step 4: Insert the CSS  / JS

CSS is your styling code and makes things look pretty, JS is your JavaScript which makes things work a little better.

So, once the template has loaded, you’ll see that some bits don’t look quite as they should. To fix this, go to the PDF and copy all of the code in the CSS box. There might be a fair bit, but make sure you grab it all.

Next, in Cornerstone, open the page CSS option on the left and paste in the code you just copied.

Paste CSS Gif
CSS fixes all your problems

Every thing should be looking sweet now.

Now for the JS (if there is any). This is pretty much the same step as you have just done, just click on the JS button on the left to open your JS area. Paste everything in the JS box on the PDF into here and save.

Congrats! Nearly done now!

Step 5: Add the contact forms

When you add in the template, there will be some gaps where the contact forms should be. 

In a perfect world, you should be able to click on the contact form holders and just re-select the ones that we added in step 1.

In a rush? we can do this all for you + throw in any template from the store! Check out our management plans, perfect to get you started.

Unfortunately, Cornerstone sometimes gets stuck here. Not to worry though! This is where the wire frame mode comes in!

Wireframe mode Gif

UPDATE – Skeleton mode has had it’s UI revamped, so the screen shot above will look a little different.

Here you’ll be able to see and select the Contact Form 7 elements. You can click on them and then select the correct form from the left element panel.

Easy!

Step 6: Customization

As with each template, its not going to be perfect. You’ll want to add in your logo, own fonts, and button colors. Here are the main points you want to change to personalise your template.

Adding your logo

To add your logo, on the WordPress dashboard, click on Apperance > Customise >Customise X / Pro in Theme Options > Header. Scroll down until you find the Logo – Image section

You have other options in this area too which you can play around with.

Fonts (Typography)

In this section you can set the default Header and Body fonts. X Theme comes with built in Google Fonts which gives you a huge range of options.

Button colors

Now, when you go into the buttons section, you’ll most likely find the colors set are different to the ones on the site. 

This is due to some CSS which overrides them to make them look better. 

If you do want to add in your own specific button colors, open up the CSS panel as we did in step 4. At the bottom, add in this style class:

.brand-button {
// colors go here
}

To pick your colors, use UI Gradients to get gradient backgrounds. Pick a color, click on the <> icon and copy the code. Paste this where it says // colors go here.

UI Gradient screenshot

For a flat color, use this: background: #FFFFFF;

Swap the #FFFFFF with the color you want. Find all your color codes at HTML Color Codes.

Your final class will look like this:

.brand-button {
background: #f12711;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f5af19, #f12711);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f5af19, #f12711); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

Now you can add brand-button class to the button elements class field (Click on the button element you want to add it too to load its options on the left).

Add brand-button class

You can create multiple styles this way if you want to have different colors for buttons.

Done!

That’s it! Hope this has been helpful and you got something useful out of it? Comments and feedback always welcome and if you haven’t already, grab your free pricing template!

Have A Specific Question