Cornerstone Quick Tips

Video Series • June 4, 2024

Welcome to Cornerstone Quick Tips! Follow along as we show you quick and easy ways to get the most out of this powerful website builder.

Cornerstone is the website builder behind X and Pro — two of the most popular WordPress Themes in the world. X users have access to limited CS features in a separate plugin & Pro users have access to all CS features natively (no extra plugin needed).

Copy and paste everything from a tiny Element all the way to a complete Section. This is one of those quality of life features that you simply won't find in most other WordPress themes or website builders and really makes a difference once you get into your workflow. To use it, make sure the "Context Menu" is turned on in Cornerstone Preferences.

Not only can you copy and paste Elements, you can also copy and paste Element styles using the same right-click menu.

Did you know that any container in Cornerstone can be made clickable? You can even mix and match with different Elements to create a more engaging (and better converting) experience for your visitors. Let's say you want the image, headline, and button to all lead to the same place, it's as easy as one simple change!

Rounding the edges of your content and images can give a nice touch to boring old layouts. Thankfully, with Cornerstone, you have a website builder and web design tool all in one making this super easy to accomplish!

Looking to align buttons in a column? This is a common convention in website building and especially helpful if you have variable height content in something like a pricing table or feature list. This is very simple to do in Cornerstone, and in this Quick Tip, we'll show you exactly how to do it (we'll even touch on a little Flexbox).

Build better buttons with Cornerstone! In this video, learn how to use native features to create powerful buttons, hover states, and more. You can even customize how the same button appears on different devices.

Cornerstone includes a cornucopia of configuration controls for columns (say that 5 times fast), and in this video we're going to show you just a taste of what you can do with this all-important structural element.

Want your columns to grow to fill the available space? Just a click away. Want to harness the power of Flexbox for creative layouts? Just a click away. Want to split them up and leave space in between? You guessed it. Just a click away.

Looking to make your website truly unique? Cornerstone's got you covered!

With features like our advanced background controls, you can mix and match images, colors, gradients, and more to create that perfect layered look.

Managing responsive styling is very important these days. Thankfully, Cornerstone includes a great collection of native options that allow you to set up and manage your content to appear just the way you want on all devices.

Mobile first? Desktop first? We've got you covered! Follow along and learn how to get started with customized responsive styles.

Who doesn't love hidden features and cheat codes? This one may not be as popular as some from your childhood (Konami anyone?), but it will certainly help you with some layout magic for your WordPress website.

In today's tutorial, we're going to show you how to place Elements on a page without a Section or Row. You may not need to use this often, but when you do, it's a super handy feature to have in your back pocket.

You know how in real estate they say you have just a few seconds to make a first impression? It's rumored that people decide within 8 seconds whether they like a house.

It's no different with websites. Headers serve as the "first impression" to your website and are thus critically important to the liklihood that someone will navigate further into your digital home and engage with your website.

Learn how to tap into some of the many native options available in Cornerstone's dedicated Header Builder and discover how to build the perfect header for your website.

Looking to create Archive Layouts with a nested Looper Provider (while accessing a custom taxonomy)? This is the tutorial for you!

If all of these terminologies are new to you, or if you need a refresher, be sure and check out these resources on Archive Layouts and Loopers.

Conditional Logic is the secret to creating highly personalized and highly dynamic experiences on your website.

In today's tutorial, we're going to show you how to get started using this incredibley deep feature and a few of the best tips and practices for using conditional logic in WordPress.

Have you heard of a Div? Ever used one when building a website? Chances are you haven't (and haven't).

At their core, Divs are a helpful container Element that can be used for many different applications when a Row, Column, or even Grid Layout doesn't quite cut it. Learn how to work with this useful Element in your next website build.

Building a beautiful 404 page is the hallmark of any good website, and all of the best WordPress themes should include this as an option. If they don't, that is a major red flag.

In today's video, we're going to show you how to build a custom 404 page in WordPress (in about 30 seconds) using all native Cornerstone features!

This is especially helpful if you are using the Blank or Starter Stack as these are the closest to blank canvases from a design standpoint. If you are looking for a ready-made designs, be sure to check out the other Stacks: Integrity, Renew, Icon, or Ethos. They each include 404 designs that you can further customize as you see fit. You will still be using all native features just with an initial design to help you get started.

Cornerstone isn't just any website builder, and Parameters aren't just any feature. Did you know that you can take any shortcode from any tool and use it to create your own native integration in Cornerstone?

This power-user feature is available thanks to our Element Parameters, and we're going to show you exactly how to get started in this tutorial. The sky is truly the limit once you understand how everything works!

Customizing how you format date and time can help tailor content in some really creative ways, and Cornerstone gives you multiple options to do this. In today's tutorial, we're going to show you how to do so with dynamic content (and a little PHP on the side).

Don't worry though, it's super simple once you see how it all works and is yet another example of the depth offered in Cornerstone for building truly custom experiences.

Did you know you can use Cornerstone's Conditional Logic feature to create your very own on-the-fly versioning system? Test new changes, show a client a proposal, or do any number of other conditonal changes using this powerful feature.

Vertical tabs can be oh so elegant, and in this video we're going to show you step-by-step how to create your very own vertical tabs in WordPress (with a slider combo) using a mix and match approach to Cornerstone's family of Elements.

This is one of the superpowers of Cornerstone. Not only do you have tools like the Element API to create custom Elements, you also have a way to create them through combining other Elements (plus a little help from Custom Attributes).

Let's continue showcasing the power of Custom Attributes by showing you how easy it is to add Aria Labels to any Element on your page in Cornerstone.

There are a lot of accessibility features out of the box in CS, and this is yet another example of the fine tuning you can do with the most advanced website builder in WordPress.

You have multiple options for creating new Elements including Element Parameters and our Element API. But that's not all! You can also mix and match other Elements on the fly to create your own inspired implementations. Follow along as we show you just one example by creating a video lightbox.

3x2. 16x9. 4x3. Working with multiple aspect ratios can be a real challenge when building webistes (but thanks to Cornerstone — it doesn't have to be)! Discover how to re-use aspect ratios of different sizes throghout your site both quickly and easily. This will not only speed up your own site building, it is especially helpful when you are setting up new layouts or content that will be managed by other people using user permissions.

Components and Parameters allow you to not only extend the functionality of your Elements, they also allow you to extend the builder controls that manage those Elements as well. With this in mind, let's take a look at one of the most advanced examples of this in action — something we're calling Self-Looping Parameter Elements.

If you are looking for a quick way to get started with these powerful features at bleeding edge of the powerful Cornerstone Builder, we encourage you to check out Personify. Not only will you receive four custom websites designed by an award-winning digital agency, you will also receive hundreds of Custom Elements, powered by Components and Parameters, that you can use for your own personal or client websites.

Parameters can be used to extend and customize the controls on any given Element, and they can even be used to create your own Custom Elements. But did you know you can create Global Parameters to manage global settings throughout your site?

Looking to let your visitors or customers know about a new feature? Maybe the website itself is under construction? Either way, Cornerstone allows you to easily build Coming Soon pages using all native features, and in this video, we're going to show you exactly how it all works so you can create your own.

If you've ever found yourself wanting to know if you can use Cornerstone's native responsive controls for Components and Parameters, the answer is a resounding yes! Discover how to bring responsive magic to your custom Components and Parameters.

Animations are the secret sauce to giving your page that extra little polish. In today's video, we're going to zoom in on the Healine Element and show you several ways you can animate this heavy hitter with style!

Did you know there is a difference in web design between fluid text and responsive text? Totally understandable if you didn't as this is pretty in the weeds, but it is a very helpful tip to know about (you will definitely run into this when building a modern website). Thankfully, Cornerstone's got you covered!

As website builders, we should always be looking for creative ways to tell our story online, and few Elements are more helpful towards this end than Cornerstone's native Slider. Let's take a look at just a taste of how you can use this powerhouse of an Element to engage your visitors and wow your customers in style. Looking for more? We've put together an entire Course & Expansion Pack on Sliders that you do not want to miss.

Images are the backbone to your site's content, and we include a very powerful native Image Element that let's you do just about anything. But what if you find yourself needing placeholder iamges? Maybe for a client or layout or specific use-case? Follow along as we show you how to simply and easily incorporate custom placeholder images directly in Cornerstone without having to leave the builder and with no plugins required!

Flexbox allows you to manage space in and around columns and rows on your website to structure content exactly as you need. Cornerstone provides several native Flexbox settings, and we are excited to introduce gap support! In addition, we've introduced two new Pre-Fabs (H Flex and V Flex) to help you get up and running quickly.