Use your “Play Page” to learn the tools, experiment, play. Use this “Editor Tips” page as a reference if you mess up your own play page. Do not play on any play page but your own.

This play page is saved as “Private” (see the “Visibility” button right sidebar near the top so the public cannot view if search engines find the page. You can also set it as a “Draft” or you can password protect it using this “Visibility” button.

Questions/concerns?

Discuss

• Your WYSIWYG toolbar
  Your toolbar above has standard editing icons. In other words, it is a WYSIWYG text editor (“What You See Is What You Get”).
  • The top row, at the left side of the row, has the “Add Media” button and the “[  ]” (column shortcodes) icon.
  • The top row, at the right side, has two tabs: “Visual” and “Text.” You will do your work in the Visual editor. The Text editor is where you can see the HTML code.
  • The second row has “B” for bold, I for italics, etc. The last icon in that row looks like a computer keyboard. That’s called the “Toolbar Toggle”. Toggle (click on it) on an off and you will see that another row of icons appears/disappears. Don’t forget this because occasionally you will go to edit a page and the bottom row of editor icons might not be there. Just toggle the Toolbar Toggle icon to get it to appear.
• “Image Maps” plugin installed to handle the special “clubs graphic.” See bottom of this editor window for more information.

This is paragraph font.

This is paragraph font in bold.

This is paragraph font in italics.

Click the “Preview” button near the top of the right sidebar to see what you page looks like prior to saving it (“Update” button). NOTE: Never edit in the preview window because its editor does not contain your updates.

This “Visual Editor” does not show an exact view of what your edits look like on the website (i.e., browser view). To see what the following headings look like in the browser, you need to click the Preview button near the top of the right sidebar.  Do it now to see what I mean.

This is “Heading 1”

This is “Heading 2”

This is “Heading 3”

This is “Heading 4”

This is “Heading 5”

This is “Heading 6”

This is “Paragraph” text

Inserting images (“Add Media” icon at top of toolbar)

The following is an example of asymmetrical columns (4/5 and 1/5) with pictures inserted into each column. The pic on the left is set to “align left” so the text wraps around it. The pic on the right is set to “align center” so the text goes beneath it. The pic on the left has a 1-pixel border. Click on the pics and they enlarge AND start an interactive slide show of the two pics shown.

Put your cursor at the start of a paragraph then click “Add Media” at the top of the toolbar. It opens your media library so you can select an image. When you select an image a window opens that gives you options in its right sidebar. Experiment so you can learn the various options.

This picture is aligned to the left (“Align Left.” That put the picture at the left of the paragraph and the text wraps on the right side. If you “Align Center” the picture will be at the top center of the paragraph with all the text below it. “Align Right” puts the picture at the right side of the paragraph with the text wrapping on the left.

Notice I added a “Caption” to the picture. I did this when I was selecting the options for the picture but you can add a caption or change the alignment later if desired. To make changes, simply mouseover the picture and a small menu appears. Click on the “pencil” icon and this will open an editor window for that picture.

How to create a “gallery”

To insert a gallery, put the cursor on a page in the place where you want the gallery to appear. Then click “Add Media” button just above your visual-editor toolbar. A your media library will open. Click “Create Gallery” in the top left corner. Another window opens. Select the pictures you want in the gallery by clicking on each one. Then click “Create Gallery” in the bottom right corner.  Your gallery editor window opens again. Now you can add or delete or arrange your pictures. Now decide how many columns you want in your gallery grid. When satisfied, click “insert gallery” in the bottom right corner.

To edit the gallery after it is on the web page, mouseover the gallery and a menu will open. Click the pencil. In the gallery editor, you can add, delete and rearrange the pics (drag and drop).

Menu management

After you create and publish a new page, you have to put it on the navigation menu in the desired location. Mouseover “Appearance” in the dashboard editor at the left and click on “Menus.” You can arrange the menu by using the drag and drop feature. You can modify each tab in the menu or remove a tab by clicking on the small black triangle on the tab in question.

How to set Featured Image in header

The “Featured Image” tool is located at the bottom of the right sidebar of the editor.

How to create more than one column

The following is an example of two columns

To set columns, you use “column shortcodes.” Look at the toolbar above beside the button that says “Add Media’ you will see a square brackets icon:  [  ]  Click on it to set the desired column. Columns must equal 1. In other words, if you want two columns, each 1/2 a page wide, then select “one half” for the first column and “one half last” for the second column.  For three columns, select “one third” for the first column, select “one third” again for the second column, and select “one third last” for the third column.

The following is an example of three columns

The following is an example of four columns

The following is an example of three columns but …

1. the first column is only 1/4 of the page wide on the left side of the page,
2. the second column is twice as wide (1/2 page wide) and located in the center of the page, and
3. the third column is 1/4 of the page wide on the right side.

You can play with the size and arrangement of the columns but remember, the total must always equal 1 (1/4 + 1/2 + 1/4 = 1) or (1/5 +4/5 = 1) etc.

Yoast SEO (search engine optimization)

See the heading below: “Yoast SEO.” This is a plugin we installed to enable you to quickly/easily optimize each web page so search engines will find it.

To learn how to work with this plugin, simply put your cursor on the purple colored question mark and Help center text below. Also, note each section of has a grey circle with question mark in it … just look to the right side of each section below. Click on the question marks for instructions and links to more instructions.

Image Maps (to handle Kathy’s special “clubs graphic”)

• added a plugin that allows you to add image maps (an image with areas that can be clicked)
• added your image
• added 5 zones

here is HOWTO for future use: https://wordpress.org/plugins/imagemapper/#installation

see the page: http://crgbeta.ourcommunityworks.org/our-5-clubs/

Note #1: The title (text) will disappear when it goes public (the plugin doesn’t hide private titles). It would be better not to have the title inside the image and not to hide the text title, but it was that way in your image. You can redo if you wish or you can leave it as it is.

Note #2: The graphic automatically sizes to whatever space is available. Use column shortcodes to set the size of the space in which you want to insert the graphic; i.e., the graphic expands to occupy whatever space it occupies.)

Example2:  Wreath occupies center 2/3’s of page with no text on either side. If you want text on one or both sides, simply insert the text where I have put the html “space code” ( ).

Example3: Full Page (to occupy the full page, just insert the image without adding any column shortcodes)