Editing text on a website should be simple, and with Cornerstone it couldn’t be easier. Pretty much it goes like this:
- Login to the website backend.
- Go to the page on the website you want to edit.
- Click “Edit with Cornerstone”.
- Scroll to the section you want to edit.
- 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.
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:
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:
If you prefer using the WYSIWYG visual text editor go near the top right and click the “Visual” tab.
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 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 Feature List
Again, simple now you know how things work.
The Blockquote Effect
Blockquotes are always a favourite, and this one is going strong.
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.