X Theme Cornerstone tutorial]

X Theme Cornerstone: How To Build A Lead Magnet Landing Page

X Theme Tutorial - The Landing Page

Chris Schwartze
June 2nd, 2017

Two years ago, I bought the WordPress X Theme from Themeforest and included in their package was a WordPress page builder called Cornerstone.

Usually, I’m not so fond of page builders (we’ve probably all been there) but this one was a true game changer and quickly became my go-to when building new websites for clients (hence my decision on writing an in-depth X Theme Cornerstone 101)

I’m currently working for a startup called Heroic Academy, which is a record label and artist management agency. One of my first assignments was revamping some of the older websites to focus on attracting new leads.

This quickly reminded me of why Cornerstone is so powerful and that it’s a perfect tool for building landing pages and sales pages.

Digital marketing goes hand in hand with designing landing pages and if you’re not familiar — this a whole new world, and trust me, it’s a big world. It’s easy to get lost in the magic of data-driven case studies, endless marketing tricks for 2016 and how to run A/B tests like Amazon.

My advice is, don’t worry too much about all of that until you reach a point where your website drives a significant amount of monthly traffic.

Now driving traffic is hard, but getting a visitor on your landing page to convert to a lead or even a sale, might be even harder. Well, it’s your lucky day! You’ve come to the right place — let’s optimize for that, shall we?

What you’ll learn in this X Theme Cornerstone 101

In this X Theme Cornerstone tutorial, I’m going to run you through, step by step on how you can build your own landing page in Cornerstone and WordPress. You can check out a live demo here. (Sidenote: Some fonts changed because I changed my overall design of this website)

Things we also touch upon

  • What a landing page can do for you.
  • Lead nurturing and lead magnets.
  • Basic elements of a landing page
  • Your customer’s journey and their pain points.
  • X Theme Cornerstone spacing helpers
  • Basic CSS

What is Cornerstone?

Cornerstone is a collection of shortcodes which can be used to build out complex page layouts with near endless customizability.

X Theme Cornerstone takes these integrated shortcodes and alongside them a simple, streamlined, drag and drop front end interface, allowing users of all experience levels to take full control of their page layouts.

View a complete list of shortcodes here

In this article I’m assuming you’re already familiar with X Theme & Cornerstone —if not, no worries— the knowledge base is probably the best place to start. If you’re looking to buy the X Theme Cornerstone for WordPress, you can do so here (yes that’s an affiliate link).

Why I use Cornerstone

  • For outlines, I’m not tied to just Photoshop anymore, doing this in X Theme Cornerstone is easy once you get the hang of it.
  • All edits you make happen in real time while you view your exact WordPress site as it looks on the front end (including live code editing).
  • Cornerstone is included with the WordPress X Theme and that package is a one-time purchase. Other landing page builders such as LeadPages charge a monthly fee. (which of course has it perks too).
  • X Theme forum has excellent support, and a very active community on Facebook. Seriously, this is one of the reasons I love their theme so much.
  • The option to export pages and elements gives us the ability to build our own library.
  • You don’t necessarily need to know CSS (however I do recommend learning the basics).
  • The benefit of a clean, clutter-free interface.

What can a landing page do for me?

A landing page increases the chance of converting targeted visitors to your website into leads (which eventually leads to more sales).

To increase the odds of converting these visitors, landing pages usually contain a lead magnet, which in essence is an irresistible piece of value in exchange for contact information (usually a first name and email).

Unbounce says: a standalone web page distinct from your main website that has been designed for a single focused objective.

Cool, I got an email, now what?

With that email you just collected you can build up trust, friendship and get the visitor more familiar with your brand. This is also called Lead nurturing, a term often used in digital marketing. With this in mind, you just got a little closer to the rule of seven.

If you want to learn more about lead nurturing, here are some articles I recommend checking out:

The visitor’s journey

Before you dive in head first, I make a common practice to ask myself these questions to get a better understanding of the end goal of the landing page. Questions like these force you to step in the mind of the visitor.

Try to really define and envision what their journey will be once they ‘land’ on your landing page for the first time.

  1. What are my customer’s pain points?
  2. How can I get my customers closer to their goals without asking for their money straight away?
  3. What are the benefits of my product/service?
  4. Is there a way to convey my product/service into a story? People love stories — as long as it’s authentic.
  5. Do I have anything that I can use as a lead magnet? Maybe a cheat sheet, eBook or free consultancy call?
  6. Age, gender, location, hobbies, and all that jazz.

Basic elements of a landing page

Now let’s think of a few basic elements that you can include in your page. For this article, I’m going to K.I.S.S — which means Keep It Stupid Simple. (If there’s demand: there’s probably going to be a part two anyway)

A couple things come to mind:

  • A landing page should only serve one single purpose and that is let users perform one single action.
  • We need to provide a seamless user experience: think visual friendly, and clutter free.
  • Real testimonials (please never fake this and yes for this article I’m faking them).
  • We need to get to the point and align all elements of our page with the goal we have in mind (remember that one single action?).
  • Contrasting colors for all call to actions, most of the time these are the buttons.
  • If possible: include partner brands to increase trust.
  • A form where users can opt-in.

Building the landing page with X Theme Cornerstone

Your page might look different than mine because we have different settings in the Customizer.

You can import my settings in your X Theme by clicking on Appearance in the WordPress dashboard, click on Customize and find your way to Custom. Now copy and paste the CSS from customizer.css inside the workfiles folder into your own global css.

Warning: Depending on your CSS some results may vary. Double-check if you don’t have any double entries.

Once you’re done, click on ‘Pages’ in the WordPress sidebar. Create a new page (assuming you know this) with the template: Blank – No Container | No Header, No Footer
Creating a new page in the WordPress X Theme
Give your page any title. Hit Publish and the page will refresh, click on Edit with Cornerstone. Boom, we’re ready to roll — let’s build this bad boy!

Section 1: Above the fold (call to action)

Go ahead and create a new section and split the rows into two columns. The left side is going to contain a strong headline, our key benefits and the CTA (call to action).
Whereas the right column will contain a visual of what the user is ‘obtaining’ once he decides to take our bait.

Always make sure your lead magnet contains actual value. Don’t trick anyone into giving their email, people will hate you — a lot.

Splitting up a section in Cornerstone
First, we got to establish a good headline. Explaining how to write (sales) copy goes beyond the scope of this article but hey, feel free to Google this.

Here are some basic guidelines:

  • Be specific, get to the point.
  • Be concise
  • Focus on the one thing that gets your ‘prospects’ closer to their goal.
  • Quickly reflect the expectations of the visitor

Here’s our main headline: Tons of free handcrafted Cornerstone elements created to increase your web creating speed.

And our key benefits:

  1. Easily customizable, no coding required.
  2. Beautiful pricing tables and testimonials.
  3. CSS Snippets swipe file for the X Theme

Feel free to use these and define your own copy later. Let’s start by searching Custom Headline in the Elements library and dragging it into the left column. Set the Heading level to H1 and Looks Like to H3.

Custom headline settings in Cornerstone
Let’s set the margin of this headline to mvm (medium vertical margin) by using one of the class helpers that’s under the hood of X (love this). In the Custom Headline menu scroll down to Class and type: mvm. Don’t forget to copy in the main headline that we’ve established earlier.

Open up the Elements library again and look for Icon List, drag the fellow right under our new headline. Let’s be a little bit more aggressive and change the text styling in Custom CSS under Settings in X Theme Cornerstone. This is the snippet I’ve used:

.x-ul-icons {
color: rgb(21, 21, 21);
font-size: 18px;
font-family: "Roboto",sans-serif;
}

Much better! Go ahead and copy / paste the Key benefits into the icon list and pick some fancy icons.

Icon list element in Cornerstone
Let’s also drag in a button. This is going to be our main call to action. The button probably looks great already because of the CSS that’s been added in our Global Custom CSS in the Customizer a few steps back. Feel free to check that out and adjust where you think necessary.

In case you missed it, you can download the settings and work files here:

Next, we’ll show a picture of the actual lead magnet or something that gets close. Find the Image element in the library and drag it to the right column, click and upload your image.

My image does not really align with the copy on the left side and we can easily change that with margin: 55px 0 0 0; however this will also push the image down on other devices.

Luckily, our friends over at Theme.co created a solution for this called: Gap. Basically, it’s like Margin but you can decide on which devices it will trigger. It’s in the library, go check it out and put it to use if necessary.

Cornerstone gap element for spacing on different devices
Now go to the section that holds our two columns. You can do that by clicking the white space above the column. To create a little bit more white space, set the padding from 45px to 95px.

In the same window, scroll to the top and click on Manage layout, hit the magnifying glass icon and make sure the Marginless columns is set to On — this will bring our columns a bit closer together.

Here’s what I got so far, pretty neat right?

Finished landing page section in Cornerstone

Section 2: Testimonials

Moving on, we’re going to build a Testimonials section. Create a new section in the X Theme Cornerstone with rgb(246, 246, 246) as the background color and Text align set to center.

Split up this section in 3 equal columns and drag an image in the left column. Also, drag in a Custom Headline and two Text elements right under that image.

Cornerstone skeleton view columns
Now let’s give these elements some classes. This comes in handy because we are going to have more than just one testimonial and this will ensure that the browser does not have to load the same CSS over and over again.

A term often used in software engineering is DRY — which means don’t repeat yourself — and is aimed at reducing repetition of information.

You can call these classes whatever you want but make sure you’re able to read your code later on.

Here are my classes for the testimonial section:

  • Image element: testimonialPhoto
  • Custom Headline: testimonialTitle
  • Text element 1: testimonialSub
  • Text element 2: testimonialStory

For the image I’m going to use a 100 x 100 px headshot. Remember that we assigned a class to this element? We can call the class inside the Custom CSS like so:

.testimonialPhoto {
  margin: 0;
  border-radius: 100px;
}

The margin is set to zero because the Image element creates unnecessary space at the bottom. The border radius creates a circle.

The Custom Headline is obviously the name of the person. The testimonial title looks fine but the spacing seems to be a bit off. Let’s fix this with some CSS:

.testimonialTitle {
  margin: 20px 0 0 0;
  font-size: 22px;
}

Creating the testimonial section in Cornerstone
Boom, you got it! Nice job so far. The first Text element is meant to show some important details of the person in question. Here’s the CSS I’ve used:

.testimonialSub {
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 12px;
  margin: 5px 0 0 0;
}

And the last Text element contains the actual testimonial of the user.

.testimonialStory {
  font-size: 15px;
}

I’ve added an extra class to the last Text element called phl which stands for Padding horizontal large, which will squeeze the testimonial horizontally.

Cornerstone testimonials section
You can now easily duplicate the first column to the second and last column and we’ve now got a full testimonial section.

But wait there’s more. Let’s add a section title to make it really clear that these are testimonials.

Again, we’re using a Custom headline with a Heading level of H2 and the style for the headline looks like this: margin: 0 0 50px 0; To wrap up our testimonials, select the section and change the top and bottom padding to 3%.

Cornerstone testimonials section with 3 columns

Take a deep breath we’re not finished yet…

Section 3: About the author

Visitors want to know who they’re dealing with, and of course, they have the right to know that. We can make this more personal by creating a new section called About the author.

Create a section and give it any class. I’ve used about as my class. Remember that one of the first things we styled in our CSS was the key benefits list in our Above the fold section? Let’s also get it a solid border of 1 pixel with the color rgba(0, 0, 0, 0.09).

Let’s add the class we just assigned to our new section and group them together like so:

.x-ul-icons, .about {
color: rgb(21, 21, 21);
font-size: 18px;
font-family: "Roboto",sans-serif;
}

Beautiful.

If we look at our first section of our landing page the text is aligned to the left. It makes sense to align our new section’s text to the right so that these sections alternate — see example in the image below.

Alternating text on the landing page

In the left column, insert an image and text element. Assign a class to the image called author and group it together with testimonialPhoto. This again will create a circled image. Feel free to upload your best headshot!

I repeated the same process for the Text element under the image — I called the class authorSub and merged it with testimonialStory. This element will contain something short like Author, digital marketer or Web design and avid coder.  And of course, your name.

In the right column, we have our biography — which needs to be short and personal (bonus points if it’s funny and has an edge ). To spice it up a little, I added a 1 pixel line below the text and copied the Custom headline from the testimonials section and use the following CSS in the Style option: margin: 8px 0 15px 0;

Here’s what I ended up with for this section.

About the author section in Cornerstone

Section 4: Second call to action

Our last section of this X Theme Cornerstone tutorial will simply contain a variant of our first section and will repeat the main call to action. In comparison with the other sections this should be easy.

Here’s a hint, I selected the Custom column layout and created 3 unequal columns.

Building a call to action with a custom headline and button

Wrapping up

I hope you learned something new today. As I said earlier, the plan was to keep it simple and actionable. Remember to compress your images with TinyPNG before uploading them to your WordPress, this will increase page speed tremendously.

To view a live example of this walkthrough, click here. (Sidenote: Some fonts changed because I changed my overall design of this website)

If you have any questions, drop them in the comments — I’m more then happy to help out.

Also, if you’re interested in more Cornerstone templates, we just released Essentials, a huge library of 70 handcrafted blocks and pages.