Meet John Nemz of 10XLayouts and the amazing gift he has in store for you. As we prepare for Cornerstone’s standalone release in the next few days, we are excited to share the most in-depth Cornerstone tutorial and giveaway to date in our Customer Spotlight series. Take it away, John…
The Cornerstone Page Builder has revolutionized the way we build websites. I know that sounds like a bold statement, but it’s true.
Never before has it been so easy to launch a professional website in just a few hours. What you visualize can be created with drag and drop ease.
You don’t need to know how to code. You don’t need to be a highly trained developer. And you definitely don’t need to have built a website before.
All it takes is the commitment to set aside a few hours of uninterrupted time, and to keep working until your site is complete. And if this is your first time using X Theme & Cornerstone, add in an extra hour to read through the documentation and watch a few of the training videos.
Here is X Theme’s documentation.
It’s important to understand how everything works before you start building your site. Many beginners never learn the shortcuts that save time and reduce their inevitable frustrations, mostly because they’re in a hurry to get started.
So make sure you do this before moving forward.
Cornerstone templates save you time and effort
One of the most powerful features of Cornerstone is the ability to export and import page layouts.
If you build a lot of websites, this allows you to create a library of Cornerstone Blocks and Page Templates that you can reuse for future projects. Not only does this significantly reduce the amount of time it takes to launch a new website, but it minimizes most of the repetitive tasks involved in the web design process. This means you make more profit on each project, even if your client has a small budget.
If you are new to web design and are building your first website with X Theme & Cornerstone, being able to import these Blocks & Page Layouts will allow you to skip 90% of the work involved. Once these templates are uploaded, all you have to do is modify the text, colors, and images to match your business. That’s it!
Make life even easier with these 50 FREE block templates
My website, 10X Layouts, provides Cornerstone users like you, with over 100 pre-designed Blocks and Page Templates. You don’t have to build anything on your own.
I give you everything you need to get a running start and launch your website by the end of the day, if you want.
Building up 10X Layouts has been quite the journey and there are not enough words to express my gratitude and appreciation for all the emails, comments, and Skype calls the X Theme Community has made to help me develop the concept. I couldn’t have done it without all of your help!
To say Thank You, I’d like to give you free access to 50 of my Cornerstone Block Templates. It’s 100% FREE, and there is no catch.
Here’s what to do:
- Visit https://10xlayouts.com/blocks/
- Add the Block Template package to the shopping cart
- Enter coupon code: themeco
- Complete checkout process
- Download the 50 blocks
And if you decide you want to save even more time by using my premium Cornerstone Page Templates for your website or agency, you can use the same coupon (themeco) to get a discount.
How to make each page look like a million bucks
Whether you use my Cornerstone templates or build each web page from scratch, following these 8 steps will ensure your site looks professional and gets you more customers.
Step 1: Define the purpose of the page
The absolute most important step of the web design process is deciding why that page is needed and what you want the visitor to do after viewing that page.
Here are a few common objectives:
- Click a button
- Send you an email
- Pick up the phone and call you
- Join your email list
- Download a file
- Order a product or service
Only after setting the objective for that web page will you be able to determine the type of content to include on that page, and know how best to structure that page.
Video Tutorial: Defining the purpose of your page
Step 2: Keep it simple
As you create your content, always remember: less is more.
You first instinct will be to include every bit of information you can possibly think of for your business, product, or service. This is a mistake because your visitor doesn’t care about all that.
You’re visitors care about their problem and how you can solve that problem for them.
So cut out all the fluff, and explain what needs to be explained in the most simple and straightforward way possible. Remember, your page has a specific objective. Think about how you can achieve that objective in as few steps as possible.
Video Tutorial: Keeping your page simple
Step 3: Maintain a visual hierarchy
An organized web page is a successful web page. There are very few people that will read every word on your website. Most will scan your page first to get a general idea of what that page is about, then read only the sections they’re most interested in.
Knowing this, it’s your responsibility to structure the content of your page so that it’s easy to scan and read. Your visitor should be able to quickly understand what you’re offering and see separated sections instead of 1 giant block of text.
Think about the importance of each section of content and how you can best represent its level of importance.
Some common signals of importance include:
- Font Size
- Font Color
- Line Breaks
Video Tutorial: Maintain a visual hierarchy in Cornerstone
Step 4: Create your call-to-action
What is the single most important thing you want your visitor to do while on your page? Think back to step 1 and the objective of your page.
If you want your visitor to take action, you need to tell them what to do. This message also needs to stand out, and get to the point fast.
“Complete the form below to schedule your free consultation”
“Sign up for a free trial today”
A call to action can be represented in many ways:
- Contact Form
- Pricing Table
- Phone Number
- Registration Box
Decide which one makes most sense for objective, and then add it to your page.
Video Tutorial: Create your call to action in Cornerstone
Step 5: Adjust spacing and include plenty of white space
Allowing the visitor to easily consume your content is extremely important. It doesn’t matter how cool the website looks if it’s not easy to read.
Modifying the padding and margins of each element will help you maintain consistency throughout the page and make it easy on your visitor.
Lots of white space is good here. We don’t want the visitor to feel cluttered or anxious because there is so much stuff thrown at them all at once. They should be able to take their time and scroll down the page at a leisurely pace.
All of this white space may look weird to you at first, but that’s okay. Take a look at some of the largest companies and see how they incorporate white space into their designs. All of them do, it’s just a matter of how much: a lot or a whole lot.
There are several ways to adjust spacing with Cornerstone:
- Font and element padding & margins
- Row and column padding & margins
- Gap elements to adjust mobile responsive spacing
Here is Themeco’s CSS Class Index, scroll down to the bottom to see the Spacing Helpers.
Video Tutorial: Adjusting spacing in Cornerstone
Step 6: Add meaningful graphics
A picture is worth a thousand words. When it comes to your website, the imagery you select will make or break your site. High quality, relevant graphics are the quickest way to establish trust and provide visitors with a professional experience.
Cheesy stock photos and grainy images instantly reduce your credibility and portray you as a scammer or unskilled business owner.
Clear photos that accurately represent your business, products, and services show that you are a legitimate business and can fulfill your customer’s needs.
Naturally, real photos of your business, team, product, and service are the best. However, when you are getting started, you may need to use a stock photo. If you are including background images in your design, stock photos work well because the background can be more generic.
Here are a few of my recommendations for stock photos:
As you browse these images, look for ones that look real and not like a typical stock photo. Weird poses, awkward gestures, people that are too beautiful, and white backgrounds all say “fake”.
If you select stock graphics and icons, make sure that they all have a similar, modern style. If the graphic is really shiny and looks like it’s from the 90’s, don’t use it! Those are the types of graphics the “get rich quick” people use, and you want to stay far away from those.
Before you upload any graphic to your website, optimize it for the web:
- Reduce dimensions of the image to the maximum it will display as (i.e. 1200 px, 960 px, 600 px, etc)
- Change the format of images that don’t have a transparent background to .JPG
- Compress the image so that it’s under 100kb, if possible
Here are a few tools to optimize your images:
Taking these steps to optimize your graphics will ensure your site loads quickly for all visitors no matter if they are using their computer, tablet, or phone.
Video Tutorial: How to optimize graphics for the internet
Step 7: Add color & contrast
Once the overall layout of your page has been completed, it’s time to start adding color.
If you don’t already have a color scheme for your brand, you can use several online tools to find colors that look good together.
Here are a few tools that will help you choose a color palette:
Once you’ve selected your color palette, you can start adding the colors to your page buttons, fonts, and section backgrounds.
As you edit the color scheme of the page, don’t forget to incorporate contrast to visually highlight what’s important and to breakup sections.
To make something stand out, there needs to be contrasting colors (i.e. dark vs light). Otherwise, everything will blur together and your reader’s eyes will glaze over. They won’t know what to look at.
So you wouldn’t want to have a pink button on a red background. The colors are too similar and they blend together. Instead, you could use a white or green button to make it stand out.
And when it comes to background colors, I like to alternate every other or every third section to have contrast. So the first section may have a background image, the second may have a white background, and the third may have a solid color. Then it would repeat with another background image or a white background.
Here’s a quick example:
One of the most common mistakes you’ll see online is the use of a different background image for each section with no whitespace or contrasting color in between. While it’s become a popular fad, it’s too visually stimulating and tires the eye.
Balance is key indicator of quality design, and you should strive to incorporate as much balance as possible into your web page. Too much of any one thing is never good.
Video Tutorial: Adding color with Cornerstone
Step 8: Style the design
Your web page is nearly complete.
Now that everything is functional and looks professional, it’s time to add some extra flair to make the design pop.
Here are a few ways to give your design a little boost:
- Unique fonts
Remember, simple is often better. Don’t get carried away adding too many shadows, animations, etc because it will just distract your visitor. And it may even start reducing your credibility by becoming cheesy.
If in doubt, leave it out.
Video Tutorial: Adding style with Cornerstone
Get started today!
With X Theme & Cornerstone, there has never been an easier way to produce a professional website for your business.
And if you want to speed up the design process, don’t forget to download my 50 Cornerstone Block Templates for FREE by using the coupon code: themeco. (This coupon code also provides a discount if you decide to use the Cornerstone Page Templates).
What are you waiting for? Open up Cornerstone and start building the website you’ve always wanted to build!
Wow! A big thanks to John for this incredible gift to the Themeco community! Cornerstone has a very bright future thanks in part to the incredible generosity of many wonderful customers like John. We look forward to seeing all the beautiful pages you build with Cornerstone and hope this resource is helpful along the way.
Are you interested in possibly being part of a future Themeco Customer Spotlight? We’re looking for awesome people doing great things with X or Cornerstone. If that’s you, we’d love to hear from you.