50+ FREE Cornerstone Block Templates



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

Cornerstone Templates Save Time

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

Free Cornerstone 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:

  1. Visit https://10xlayouts.com/blocks/
  2. Add the Block Template package to the shopping cart
  3. Enter coupon code: themeco
  4. Complete checkout process
  5. 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

Good Looking Web Design

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:

  • Headlines
  • 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”

“Order Now”

A call to action can be represented in many ways:

  • Button
  • 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:

  • Image
  • White
  • Color
  • Image
  • White
  • Color

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
  • Borders
  • Lines
  • Shadows
  • Animations

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.

50 Comments on “50+ FREE Cornerstone Block Templates”

    1. John

      I hope you enjoy the blocks, they’ve saved me hours and hours and hours of time on my own projects. If you have any questions feel free to let me know. :)

  1. Steve

    This appears to be a genuine and very reasonable effort by someone really willing to help rather than a demonstration of greed. Keep up the good work and good things will happen. Hopefully older people like myself can get some value out of X theme at long last.

    1. John

      Thanks for the kind words, Steve. I truly appreciate it.

      I’ve gotten an incredible amount of feedback over the past week about 10X Layouts and what else people want to see. And I’ve never been more excited about the future. There is so so soo much more coming, I can’t wait to share it all with the X Theme Community.

  2. Jeff K

    I have been using John’s templates for the past month as I rebuild 12 sites for a client. Having quick blocks to work with has saved me a ton of time. Plus he responds quickly to questions. Just wanted to let you all know he’s the real deal.

    1. John

      Thanks for your support, Jeff! That’s really kind of you to say. :)

      I’m so happy you’ve enjoyed my templates and found 10X Layouts a good fit for you and your clients.

    1. John

      Please, take a look. I originally created the blocks and page templates for my own business, to speed up the design process.

      And one day last summer, I was showing a few friends how fast I could build a website with the templates, and their jaws dropped. They told me I absolutely had to make the templates available online.

      6 months later, I decided to follow their advice and put together 10X Layouts. And while it took me a bit to build up the courage to share my work, the feedback has been incredible so far.

      You’ll definitely save a lot of time and headaches with them. I know I certainly have with my projects.

      If you have any questions, feel free to email me.

    1. John

      You are very welcome, Heather.

      Give the templates a try and then let me know your thoughts. I’m always looking for feedback and new ideas on what kind of templates to build next.


  3. Lee

    Thanks for the block templates John!

    Hoping to put them to good use on another site redesign.

    Really liking your tutorials too. :-)

  4. Corina Darnborough

    Such a well written comprehensive and accurate article, covering all the main design, UX and content issues I so often see neglected by so called “web designers”. Being an SEO / content strategist myself, I value the information architecture methodologies of fitting the page design to the content afterwards, and ensuring busy people can scan read by giving them clearly defined subheadings and menu structure. I’m not working with X yet but very inspired to do so soon! Thanks for the great resources and hopefully this post alone will get a few people to rethink how they work

    1. John

      Thanks for the kind words, Corina.

      It’s super easy to design something great, and then have it fall flat because the content and strategy was an afterthought. And even though I sell templates, I truly encourage everyone to develop their content first.

      Definitely give X Theme & Cornerstone a try. I made the switch last year, and now use them for all my client work. It’s so much easier and faster, and my clients love it!

  5. Michael

    Thanks a lot, John! Your tutorial is nothing less than suberb. I just downloaded the blocks and I love them already for the clean design.

    1. John

      You’re welcome, Michael. I don’t think I’ve ever had anyone tell me my tutorials are “superb”, so thanks for the compliment. :)

  6. Rui

    Hi John,

    I must say I was on verge of downloading your blocks to have a look, but you ask for personal details I’m not ready to provide like telephone number, adress which I feel are not necessary.

    It stopped me for going further, but should you change that, I would gladly have a look and maybe become a customer.

    1. John

      Hi Rui,

      Thanks for taking the time to share your thoughts.

      The Block Template package is an actual product I sell on my website for $49, and you are now able to get it for free.

      I’ve decided to create & share this coupon code with the X Theme Community because I wanted to give back. It’s meant as a gift to say “Thank You”.

      Over the past few months, I’ve had a lot of help developing the 10X Layouts concept, and I know it wouldn’t be what it is today without all the kind words, advice, and phone calls I received.

      I’m sorry you decided not to accept my gift. I appreciate your honesty, and for at least taking a look at my site.

      I wish the best of luck with your future projects.

      – John

  7. Kate

    The X-Theme guys all seem really genuine.. and free templates? That’s a lot of work, and I appreciate being able to ‘purchase’ them for free.
    Thanks John, you didn’t have to provide these at no cost, and you have anyway. I’m a fan.

    1. John

      You’re welcome, Kate. I hope you get a lot of value out of the block templates. :)

      When I first launched my site, everyone that purchased the block templates told me how much of a “life saver” they were, and how they couldn’t live without them. (since posting this free offer, I’ve since compensated these customers so no one had to pay for something that is now free).

      I truly believe these block templates are the perfect addition to Cornerstone and will significantly speed up the process of creating a good looking website. And I’m proud to be able to share my work with the entire X Theme Community.

      The feedback I’ve received so far has been incredible, and I’m really excited to create more templates for everyone.

      Thanks for taking the time to share your thoughts. If there is anything else I can do to help you, please let me know.

  8. Allison

    This is an amazingly generous gift, and the tutorials on this page are really great for those of us who are dealing with our own sites.
    Thanks so much!

    1. John

      You’re welcome, Allison.

      I hope you enjoy all the templates once you start to experiment with them. If you have any questions, feel free to email me.

  9. Nick

    Thanks for the blocks John — very generous of you — and some great tips. Even though we’ve been using X Theme for a while, there’s always more to learn.

  10. Jonathon

    Very insightful and understandable! I’m so grateful for your contribution and guidance! If even a fraction of the whole X Theme community contributed in such a way, this theme would dominate the marketplace even more than it already does!

  11. Todd

    Thanks a whole bunch. This is extremely helpful, much appreciated.

    Any plans to release these in PHP so they show up under ThemeCO blocks? Ive found other templates in there that came with X theme…this would be really helpful if we could store templates directly on the webserver and show them via dropdown.

    Thanks, again!

    1. Themeco

      Hi Todd,

      Only our own resources show under the “Themeco” section, so these would show up under the “My” section.

Leave a Reply

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