Meet your
new best friend.

Just a sample of the (42 and counting) Cornerstone elements.

A Firm Foundation.

All of Cornerstone's pages are built upon three key structural elements: Sections, Rows (or containers), and Columns. These flexible pieces are the scaffolding you'll use to create beautiful page layouts with ease.

Sections

Your Cornerstone journey begins! Sections can contain multiple rows and are used for things like background images and video.

Rows

Rows divide up content nicely. This section you’re in (the white area) has three rows and this row has three columns.

Columns

Columns are the responsive heart of Cornerstone. They allow you to evenly space content on desktops and change to fit mobile devices.

Cornerstone's structural elements are also great for rapid prototyping. Share design outlines with your clients in no time at all!

Look Sharp.

Cornerstone's Sections have an assortment of design tools to help bring your designs to life. Background options include colors, image patterns (like what you're seeing here), fullscreen images (seen below) with optional parallax, and even fullscreen video (as seen at the very beginning of this page).

We’ll Show You The Way.

Think of us as your guides on this journey we call web design.

Time To Meet The Elements.

Get to know some of the pieces you'll use to build your pages in Cornerstone.

Feature Box.

Meet the "Feature Box," one of our newest additions to the Cornerstone element family! Easily setup engaging snippets of information with a styled icon or image. See more examples below!

Diamonds are Forever

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


Bicycles are Hipster

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


Envelopes are Boring

This is where the text for your Feature Box should go. It's best to keep it short and sweet.

WordPress

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


Facebook

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


Twitter

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


Instagram

This is where the text for your Feature Box should go. It's best to keep it short and sweet.

Custom Shapes.

You've already seen the hexagon and circles above, but you can also use squares, rounded squares, and even icosikaitetragons (okay, we call that one the "badge" and it's on the end there).

Don't Be a Square

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


Be Rounded Instead

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


Or Maybe Circular

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


Okay, I Give Up

This is where the text for your Feature Box should go. It's best to keep it short and sweet.

Alignment.

With the Feature Box, you can align content horizontally to be left, right, or center. When items are set to the side, you can also vertically align them top or middle. Super flexible!

Align Content Right

This is where the text for your Feature Box should go. It's best to keep it short and sweet.

Align Content Vertically

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


Align Content Left

This is where the text for your Feature Box should go. It's best to keep it short and sweet.

Top or Middle

This is where the text for your Feature Box should go. It's best to keep it short and sweet.

Use Images.

But it doesn't just stop at icons. If you have custom images you'd prefer to use, you can utilize those instead.

Not Just for Icons

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


You Can Also Use Images

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


And Specify Their Width

This is where the text for your Feature Box should go. It's best to keep it short and sweet.

As Well as Their Shape

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


And Give Them a Border

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


And Animate Them

This is where the text for your Feature Box should go. It's best to keep it short and sweet.

Animations!

Choose from 30 different animations to utilize on your graphics. Specify how far down a user should scroll before the animation starts and a delay if desired to stack multiple elements.

Bounce In Up

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


Bounce In Down

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


Bounce In Right

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


Bounce In Left

This is where the text for your Feature Box should go. It's best to keep it short and sweet.


Plus Many More!

This is where the text for your Feature Box should go. It's best to keep it short and sweet.

Feature List.

The Feature List shortcode builds upon the Feature Box, allowing you to quickly and easily setup styled icon, image, or numbered lists with custom colors, dimensions, and animations!
  • Connector.Connector.

    Use Fun Colors

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis.

  • Connector.Connector.

    On Your Graphics

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis.

  • Connector.Connector.

    To Make Them

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis.

  • Connector.Connector.

    More Engaging!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis.


  • Connector.

    Numbered Lists

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis.

  • Connector.

    Keep Things

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis.

  • Connector.

    Nice And Tidy

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis.

  • Connector.

    For Your Users

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis.

  • Connector.

    To Follow

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis.


  • Connector.

    Use Uniform Colors

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis.

  • Connector.

    For Striking Impact

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis.

  • Connector.

    Along With Custom

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis.

  • Connector.

    Animations On Your

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis.

  • Connector.

    Graphics and Connectors

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis.

Your Audio. Your Way.

Working with audio has never been this easy. Embed content from third parties or host your media directly from your website, the choice is yours!
Optionally toggle advanced controls on Cornerstone's audio player, providing you with additional options and feedback.
Third party embeds are a snap. Simply include the audio embed element and input the embed code from your service.

Enjoy High Quality Video.

Just like audio, managing your video media in Cornerstone is a breeze. Our included player allows for self hosted video with options for advanced controls just like our audio player above, and our third party embed element supports any service you use for video.

Integrated Icons.

Cornerstone comes loaded with the Font Awesome library. The beautiful thing about icon fonts is that they look great on all screen resolutions, can be styled inline like fonts with colors and shadows, and are flexible enough to be used in other elements like buttons. Below is just a small assortment of the hundreds of icons available for you to use.




























































Plus hundreds and hundreds more...

Make Your Site More Clicky.

Who doesn't love a good button? With Cornerstone you have plenty of design choices to choose from. With multiple sizes, shapes, styles, colors, and additional features, there's no shortage of design choices to make!
Styles
Buttons have three separate styles to choose from: "real," "flat," and "transparent." These button styles can be mixed and matched throughout your designs as desired.
Shapes
Different button shapes are necessary for certain design goals. Cornerstone's buttons come with "square," "rounded," and "Pill" button shapes.
Sizes
We've got sizes for every need. Choose the right one that fits the job from mini to jumbo!
Fullwidth
Our "block" button styles expand to fit the width of their container and can be used with any size, shape, or style.
Marketing
Make your button REALLY stand out with our optional marketing circle.
Extra Info
Include additional information about the action a user is going to take with tooltips and popovers. Tooltips are great for quick context, while popovers allow you to go into a little more detail.
Icons
Include any of our icons into your button before or after your text (or even solo if you choose to do so).

Cards, Y’all.

Bring a little CSS 3D magic into your life with Cornerstone's cards! Cards serve as an engaging, interactive element, which are great for little nuggets of information or for special showcase purposes.

Flip Up

Hover over card to see the flip in action.

Neat!

Now wasn't that fun?


Flip Down

Hover over card to see the flip in action.

Neat!

Now wasn't that fun?

Flip Left

Hover over card to see the flip in action.

Neat!

Now wasn't that fun?


Flip Right

Hover over card to see the flip in action.

Neat!

Now wasn't that fun?

Try This Color.

Cornerstone's Cards provide you with complete customization of the look and feel of your card. Colors for text, icons, borders, and buttons are all available and adjustable via our point and click interface.

Have Fun

Experimenting with colors doesn't have to be hard.

With Color

Experimenting with colors doesn't have to be hard.


Have Fun

Experimenting with colors doesn't have to be hard.

With Color

Experimenting with colors doesn't have to be hard.


Have Fun

Experimenting with colors doesn't have to be hard.

With Color

Experimenting with colors doesn't have to be hard.

Beautiful Google Maps.

Cornerstone integrates with Google's Maps API, allowing you to create custom tailored maps for your website. Pick specific colors, add multiple location pins to the map if needed, specify zoom level and interaction behavior and much more!

Simplified Sliders.

Sometimes all you need is a quick and easy setup to display images to your visitors. Cornerstone's included slider element provides you with fast image management with a handful of useful configuration options.
  • Placeholder
  • Placeholder
  • Placeholder

Quantifiably Delightful.

Cornerstone comes with many elements that provide nice stylistic flourishes as users move through your content. Our skill bars and counters are great examples of this, which trigger animations as users arrive at that section of the page. See them in action below.
Elements
0
Made

Hours
0
Worked

Coffee
0
Cups

Page
0
Builder
HTML
95%
JavaScript
92%
MySQL
93%

CSS
98%
PHP
88%
Sudoku
43%
Find Creative Uses.

Utilize elements together in unique ways to showcase content in an engaging manner!

Surfboards From
$0
Add to Cart

Marketing Made Easy.

Cornerstone includes numerous elements specifically tailored for marketing and driving those extra clicks! Our Promo, Prompt, Callout, and Creative CTA elements take advantage of proven design strategies and layouts that are sure to help make your calls to action as effective as possible.
Promo Image

25% Off!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis id mauris.

Take Me There!

Promo Image

Today Only!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis id mauris.

Take Me There!

Promo Image

Learn More!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis id mauris.

Take Me There!

Don't Miss Out!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis id mauris.

Our Biggest Deal Yet!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis id mauris. Ut convallis, lacus nec ornare volutpat, velit turpis scelerisque purus, quis mollis velit purus ac massa.

Click Me!

Marketing Buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis id mauris.

Responsive Text.

In an increasingly mobile world, it's important that all aspects of your site look great on different screen sizes. Unfortunately, text is a tricky piece of the web puzzle to handle for numerous reasons. Because of this, we've included our responsive text functionality for statement pieces that need a little more TLC than other sections of your page. Easily specify your minimum and maximum font size and a compression rate and you're good to go!

Make Design Again.

Elements like our Text Type seen above are great for adding subtle stylistic touches that draw your users in. It's a great way to get creative with some dynamic copy that changes to share your message.

A Thousand Words.

We all know images are important. When working with images inline in your content, Cornerstone has no shortage of options available. Manage content from within your media library or external sources, specify design options, implement links and helpful tooltips if desired, and much more!
Example Image

Words Take Shape.

Cornerstone comes packed with plenty of elements to help format your content. From typographic elements like blockquotes and CSS text columns to structural helpers like accordions and tabs, crafting copy has never been this easy.
This is a Custom Headline

Custom headlines are perfect to utilize throughout your content as they assume your theme’s styling, but come with some extras that are helpful in certain situations, such as an “accent” control for an additional design flourish and quick text align controls.

These are CSS text columns. They are split into a 50/50 layout on larger screens, but as your web browser gets smaller, they will eventually break into one column. This provides unique layout possibilities, similar to those used in magazine publications, yet with the responsiveness necessary for modern websites. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis id mauris. Ut convallis, lacus nec ornare volutpat, velit turpis scelerisque purus, quis mollis velit purus ac massa. Fusce quis urna metus. Donec et lacus et sem lacinia cursus. Ut convallis, lacus nec ornare volutpat.
Blockquotes are easily the blockiest of all the quotes, there is no doubt about it in my mind.Quote Expert

This text is added via our “Text” element, which provides an integrated WordPress editor for easy formatting, all from within the convenience of Cornerstone’s interface. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis id mauris. Ut convallis, lacus nec ornare volutpat, velit turpis scelerisque purus, quis mollis velit purus ac massa. Fusce quis urna metus. Donec et lacus et sem lacinia cursus.

Accordions
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu.

Nature
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu.
Tabs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis id mauris. Ut convallis, lacus nec ornare volutpat, velit turpis scelerisque purus, quis mollis velit purus ac massa. Fusce quis urna metus. Donec et lacus et sem lacinia cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis id mauris. Ut convallis, lacus nec ornare volutpat, velit turpis scelerisque purus, quis mollis velit purus ac massa. Fusce quis urna metus. Donec et lacus et sem lacinia cursus.
Leo risus lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis id mauris. Ut convallis, lacus nec ornare volutpat, velit turpis scelerisque purus, quis mollis velit purus ac massa. Fusce quis urna metus. Donec et lacus et sem lacinia cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis id mauris. Ut convallis, lacus nec ornare volutpat, velit turpis scelerisque purus, quis mollis velit purus ac massa. Fusce quis urna metus. Donec et lacus et sem lacinia cursus.
Nisi ut leo risus lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis id mauris. Ut convallis, lacus nec ornare volutpat, velit turpis scelerisque purus, quis mollis velit purus ac massa. Fusce quis urna metus. Donec et lacus et sem lacinia cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium, nisi ut volutpat mollis, leo risus interdum arcu, eget facilisis quam felis id mauris. Ut convallis, lacus nec ornare volutpat, velit turpis scelerisque purus, quis mollis velit purus ac massa. Fusce quis urna metus. Donec et lacus et sem lacinia cursus.

Integrated. Intelligently.

Cornerstone seamlessly works with many industry tools both internally (our own integrations) and externally (companies adding support for Cornerstone). Add in the Themeco support experience, and you have a winning combination.
Cornerstone Integrations

By the way…

This entire page was created with Cornerstone!
Purchase