First up, make a new page:  Pages -> Add New.

Give it a name and “Publish” it.  Then click on the “X Pro” tab (see below) and then the big “Edit with X Pro” button:

By default, that will take you to the “Content” editor, I’ll describe this below.  If you want to get adventurous, click on the “Hamburger” menu (the three bars) on the top left, and look at some of the options:

1. Home: will bring up a launcher of the menu options.  It’s a bit redundant really, but useful if you’re a graphical person I guess.
2. Theme Options: these affect the look and feel of the entire site, not just your current page.  Don’t worry, this is a “sandpit” so you can change anything you like.  I won’t go through all of the options, but here are a couple of important ones:
   • “Stacks” are like templates.  Each template will have its own set of options and these will be reflected in the second menu item (currently Renew).  Feel free to change any / all of these, you can always change them back.
   • Header and Footer will open a new menu with options to launch powerful builders.  Go for it when you feel comfortable to do so!!!
3. Templates: this is where you can set common colours and fonts for easy choice across all pages in the site.  This doesn’t actually change anything on the site, however in other areas such as the Typography section of the “Theme Options” (above) they present as easy selection options.  My suggestion – have a quick look, don’t worry too much about it.
4. Headers: another way to get into the builder that I referred to above.
5. Content: alternative way to get into the content builder.  If you use this, click on the page (on the left) that you created.
6. Footers: another way to get into the builder that I referred to above.

OK, now the fun part – building content.

Most of what I write about here is the same for the Header / Footer builders, although some of the nomenclature is a bit different.

Here’s the quick version…  To create some real content you create a section which is like a container.  Then you put a content type in it (text, image etc) and finally you customise the actual content (choosing the words or the image).

Long version:

• First up, if there’s already content on the right side of the page, don’t worry about it – this is a “sidebar” and is created separately.
• When you go into the builder (the content builder is called “Cornerstone”) you’ll see a Welcome screen.  On the left, click on “Add Section” (or look at the templates if you want!).  By default it will be called “Section 1” – creative, huh?  If you hover over the new section box on the left, you’ll see it highlighted in blue in the main part of the screen.
  • If you hover over the big empty box on the main part of the screen, you’ll see “Column” highlighted.  Move your mouse just outside of this blue box and you’ll see the actual Section.
  • You can add more sections if you want.  Visualise a long web page that might have “Services”, then “About Us” with a map, personnel and contact details… you don’t have to do this – just remember that everything in here is modular, it can be replicated.
  • Back on the left, you’ll also see icons to duplicate or delete the section.
• OK, back on the left.  If you click on the Section, the menu will change and show row options.  First, you can name the section (Intro, Main, Contact, Close…. Dogs, Mice, Cats…. whatever!).  Cornerstone has also created the first content “row” for you.  Now you have to start making real decisions: how many columns do you want?  Text or an image that goes all the way across the screen?  Two things next to each other?  You get the idea.  Choose one.  If you choose more than one column, you’ll see your choice reflected on the main page.  For now, choose two columns – you can always change it later.
• In the menu area there’s now a magnifying glass next to the Section name (Section 1, unless you changed it).  Clicking on it will bring up a bunch of options, for example you can set a background “type” – a colour or even image.  Some of the other settings won’t make sense until we’ve got some real content on the page – don’t worry about that, we’ll be back here later!
• Click “Manage Layout” and the menu will return to what we had earlier.
• In the “Row 1” box there’s another magnifying glass.  Click on it, you’ll see more options.  Click the two on/off toggles and you’ll see the “containers” on the main page shift.  These are basically margin settings.  Margins and padding can also be further adjusted further down (as they can be for the whole section, in the menu you looked at earlier).
• Click “Manage Layout” again – or click on the green “brick wall” icon at the top of the page.  You did notice that changing, right?  🙂
• You can add more rows if you want to – again, this is modular, just like Lego.  Except that you can’t stand on these and hurt your foot (Naomi just rolled her eyes).

Adding some real content – finally!

• Click the “cube” icon up near the brick wall.  This takes you to the Elements that you can add to your page.
• Browse through them – they’re alphatbetical – and then choose to add some Text (yes, the Text element).  Drag it to the main part of the screen and drop it onto one of your columns.
• You can now type text in – but first, click on “Visual” at the top of the text editor.  This allows you to format the text without using tags like <b> or <br>.

An important aside

There are some buttons in the vertical column on the very left of the screen.  At the bottom is a very important “Save” button.  Yes, its purpose is obvious.  Three buttons above this is a box with an arrow coming out of it.  Once you save your page, click this button and your page will open in a new tab so that you can see it without all the Cornerstone formatting stuff.

If you stuff something up and haven’t saved, there’s an easy way to undo it.  First, try hitting [CTRL+Z] – it works for some things but not for others.  If it doesn’t undo, then hit [F5] to reload the page.  Simple!  🙂

If you have saved, you have to manually change it back.  But remember, this is not a production site, so you can’t wreck anything!

More content editing

OK, now you should have a text element with something in it.  Try adding an “image” element to the right column.

Hint: click on the “cube”….

To select an actual image, click in the “SRC” panel on the left, where the text editor was for the previous element.  Choose one of the wonderful images that I’ve uploaded, or you can upload a new one using the “Upload…” tab at the top of the screen that opens up.

That’s it!  One row done!

What’s next?

I’m not going to give step-by-step instructions for everything.  Here are some things to do – if you get stuck or have any questions, ask!

1. Change the order of the columns – flip them around.  There are 2 or 3 ways to do this (the easiest is using the “brick wall”).
2. Add and format an accordion element.  It’s one of the more complex ones.
3. Play with margins and padding – remember you can do this for elements, columns, rows and sections!
   • You can hover over elements on the main screen and see the blue outline, then click when it reflects what you want to choose.
   • Advanced tip – click on the element and choose the column, row or section from the menu section:

A simple guide to choosing what content actually goes on the page

If I had a simple guide, I’d be rich.  There isn’t one.  Content development is arguably the most difficult part of creating a website.  What do I want to say?  How do I want to say it?  Where do I get strong images to support my message?  Do I use sliders, carousels, fancy animations… or just good old text?

Teaching you how to put a content element on the page is the easy bit.