The Page Editor

The Toolbar

 
  1. Maximise editor window
  2. Insert image from PyroCMS Files area
  3. Insert file from PyroCMS Files area
  4. Insert image from external source
  5. Cut
  6. Copy
  7. Paste
  8. Paste from Word (not recommended, imports terrible formatting!!!)
  9. Undo
  10. Redo
  11. Find
  12. Replace
  13. Insert link
  14. Remove link (leaving text)
  15. Insert table
  16. Insert horizontal line
  17. Insert special character
  18. Bold
  19. Italic
  20. Underline
  21. Strikethrough
  22. Text colour
  1. Background colour
  2. Align text left
  3. Align text center
  4. Align text right
  5. Justify text (both sides)
  6. Text direction left to right
  7. Text direction right to left
  8. Format text (Headings etc)
  9. Text size
  10. Subscript
  11. Superscript
  12. Insert/remove numbered list
  13. Insert/remove bulleted list
  14. Decrease indent
  15. Increase indent
  16. Blockquote text
  17. Show Blocks
  18. Remove format
  19. Reveal HTML source (toggle)
  20. Insert Bootstrap Row/Column structure
  21. Insert PSM layout templates
  22. Insert protected email address
  23. Insert Page Anchor

Important buttons

Button

Explanation

39

The Show Blocks button is set ON by default when you open the Page Editor.  This button reveals the underlying structure of HTML elements, making it easier to see the layout.  Click the button to toggle the feature.

30

The Format Text button provides a drop-down list containing text formatting features.

Heading tags, as the name implies, are tags that are used for the creations of headings. The most important tag is the h1 heading tag, and will usually be the title of a page. Heading tags have a top-down hierarchy from h1 to h6. Heading tags do matter.

Heading tags structure your content. Normally there would be one h1 heading tag on each page, maybe a couple of h2 heading tags etc and these would all combine to form an outline of the entire document.

Don't make text larger, coloured, underlined to create a heading, that is not the correct way!  Like it or not, search engines read the pages and they look for structured content.  If you make your page content structured then the search engine "understands" the content and will rank your pages and site higher.  Higher search engine rankings means more readers!

42

The PyroCMS Bootstrap button will insert a Row/Column structure into the currently selected "container".  A "container" is a HTML element that can contain further structured content.  So at the highest level that is the page itself.  A Row/Column structure can have further columns inserted in a column.  One example why you may want this is to create a small column that contains an image.

44

The Insert Protected Email button is explained on the Email Addresses page.

45

The Insert Page Anchor button is explained on the Page Anchors page.

Editing page elements

After most page elements have been added to a page, you can still access the dialogs associated with them. 

In this image, you will see that the image has been right-clicked.  The context menu has appeared towards the bottom right allowing several options.It allows you to Cut (for a subsequent Paste operation), Copy or access Image Properties.  The Image Properties presents the pop-up dialogs that you see when inserting images.  See Images for more information about properties.

The Edit Div and Remove Div options you will see in many context menu pop-ups like this refer to the container of the object you clicked.  Use those with great caution, the effect may not be what you expect or require.  Experiment to see the effects.

 

Next:

Rows and Columns