Editor Overview

Most of the work you will be doing on the website is done through the Editor. It works much the same as any word processor, with the added capability to work with website code.

This page is an overview of what the icons and buttons do, and can be used as a handy reference page. How we actually use them will be explained as we go through the guide pages.

Editor OverviewIn this guide, we will be assuming you are adding a new page. You will be greeted with a screen that looks like this screenshot.

As explained in “Using the Guides”, if you open two browser windows side-by-side, you will be able to read this guide while seeing the full sized image in the other window.

Functions by Number
Let’s go through each icon and button by number:

  1. This is simply letting you know what you are doing while in the editor.
  2. Here you add the name of your page, for example “Home” or “Contact”. It will also be what shows as the heading when you open the page, just as this one shows “Editor Overview”.
  3. This is the website address of your new page, and will automatically be generated by clicking on the blank space under the box in #2.
  4. This button is used when you want to insert an image you uploaded earlier into your page.
  5. Pretty self-explanatory, you can highlight a piece of text and make it bold, italic or both.
  6. Creates a bulleted or numbered list. What you are reading now is a numbered list.
  7. This is used if you want to include some text as a quote from someone. It will create a special effect so it is obvious to readers that it is a quote.
  8. These set how some or all of your text on your page is aligned; left, centered, or right.
  9. These two buttons are for creating or deleting links (hyperlinks) to another page or website, etc.
  10. This is a special button used to create the “Read More” link in posts. Since you can’t make posts here, you don’t need to use it.
  11. This button toggles the second row of buttons on or off. If you are only seeing one row of buttons, click this to open the second row.
  12. This button enables you to change the colour of any piece of text. The arrow will open a dropdown list of basic colours, with the option to choose a custom one.
  13. These are your indent buttons, and are used if you want to add, increase or decrease the indent of a piece of text.
  14. These are your Undo and Redo buttons. Good if you just made a mistake, but going back too far can cause some unexpected results.
  15. Down the bottom of your screen is where you choose whether or not to allow visitors to post comments on your page. I suggest you do, it makes visitors feel they can engage with you. You have total control over any comments posted.
  16. In the Page Attributes panel, you select here the top level page. For Town Owners, it will be your “Home” page as shown there.
  17. Pages are ordered, starting from 0. Your Home page will be 0 and your Contact page 1. So your next page would be 2, as shown there. All this does is organize your pages in a tree when you click on “All Pages” in the Admin Panel. It makes it easier for you to see how your pages are interconnected.
  18. By default, the editor opens in “Visual” mode, which means what you see is similar to what your page will actually look like.
  19. If you want to edit the raw website code (HTML) you can use this button. Normally you would not need to do that.
  20. Clicking on this button will temporarily hide everything else from your screen, enabling you to work in the editor without distraction.

I have only given you a run down on what each button is for, not how to actually use it. We will learn that as we go further into the guides.

You may have noticed there are no buttons for using tables. Tables do not resize well when used on handheld devices, so WordPress does not allow them by default.


Leave a comment

+ 1 = 6