How To Setup Your X Theme Landing Page

In today’s tutorial, I’ll be walking you through the simple steps of setting up your X Theme Landing Page. In 15 mins you’ll be setup and ready to go!

If you want to find out more about X Theme, check out this “Introduction to X Theme and Cornerstone” blog post.

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: Add in the 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: Add 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
  • Since Gutenberg, there is no more Edit with Cornerstone button on the page. You can add that back in with the “Edit with Cornerstone button” plugin

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

Step 4: Add in the CSS

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. Onto the last step of putting in those contact forms!

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.

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

Wireframe mode Gif

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!

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!

Leave a Reply

Your email address will not be published. Required fields are marked *