How to edit text using Cornerstone

The Cornerstone feature box - editor

Editing text on a website should be simple, and with Cornerstone it couldn’t be easier. Pretty much it goes like this:

  1. Login to the website backend.
  2. Go to the page on the website you want to edit.
  3. Click “Edit with Cornerstone”.
  4. Scroll to the section you want to edit.
  5. Click on it, make any edits, click save, and you are done.

Video: How to edit text using Cornerstone

If you prefer watching a tutorial video, this guides you through the same things you will find in this post. I recommend doing this first – it may be all you need to do. It is a little over 5 minutes long.

Step 1: Login to your site and go back to the homepage

Pretty simple. That was covered in the first tutorial.

Step 2: Click on “Edit with Cornerstone”

The page will reload. It might take some time – especially if your internet is not the fastest, or if your computer is a bit old or tired. If it keeps spinning reload the page and you’ll be fine.

the cornerstone logo spinning

Step 3: Scroll to the section you want to edit and click on it

Simple enough! What you’ll see once you’ve clicked on the text area is your sidebar populates with a different style depending on what type of element it is. Element means text, images, gallery,, video etc.

Editing text in different kinds of elements

The Text Editor

The technical stuff: The text editor is a pretty functional element with a window that changes between a WYSIWYG editor with fully customisable text and a “text” window in which you can write code. Easy to customise with CSS, as well as add images and shortcodes with buttons through the visual editor.

All you need to know: Click on any sections of text on the page and check out the sidebar. If it is an element called “Text” you’ll see something like this:

The Cornerstone headline editor

You can edit text directly in the left sidebar then click “Save at the bottom”. If the text window to edit is too small, click “Expand” at the bottom of the text-editing window and the window will resize to fit a large section of the page:

The Cornerstone text editor with an expanded window

If you prefer using the WYSIWYG visual text editor go near the top right and click the “Visual” tab.

The Cornerstone Visual Editor - Expanded

This thing is a piece of cake now. After using the Text Editor above, there’s not much work needed to do to understand how to edit text in other elements. Following are some examples.

The Headline Editor

Write the headline, set the heading level (H1 to H6, use H1 for main heading, H2 for sub-headings etc), then set how you want your headline to look.  You can choose what color text you want, and create a css class for more customisation.

The Cornerstone headline editor

The Feature Box

Now that you’ve conquered the others, I have a feeling you’ll pick it up really fast. I think from this window alone you’ll be able to see ways to effortlessly make edits and updates.

The Cornerstone faeture box editor

The Feature List

Again, simple now you know how things work.

The Cornerstone feature list editor

The Blockquote Effect

Blockquotes are always a favourite, and this one is going strong.

The Cornerstone block quote - expanded

Do you have any elements on your site I haven’t covered that you need help with? If so leave a comment below with details and I’ll add more to the tutorial!

Ready for the next step? Go the the next tutorial on how to save images for web pages and blogs using Photoshop, Gimp, and an online service.

Comments 1

  1. Pingback: Welcome to your new website | Flick Digital | Logging in for the first time

Leave a Reply

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