Table of contents

Editing an existing page
Two ways of editing a page
Switching between the Classic and Page Builder editors
Using the Classic editor
Using the Page Builder editor
Page header image

Editing an existing page

1. Log in to your website.
2. Go to Pages > All Pages. A list of all the pages on the site will be displayed.
3. Click on the name of the page you want to edit.

Two ways of editing a page

With the Total theme, we now have 2 options for editing a page: the Classic Editor and the Page Builder.

The Classic Editor is the same editor we used with the previous theme and is best to use if you only need text and images on your page.

The Page Builder is new with the Total theme and allows you to add page elements like buttons, image galleries, accordians, columns, and more. Learn more in the Page Builder section below.

When you open a page to edit, you may see either one active, depending on which was used most recently on that page. The screenshots below show how each of them look:

Classic Editor view

Page Builder Editor view

Switching between the Classic and Page Builder editors

Classic to Page Builder

If you are in the Classic Editor and want to switch to the Page Builder, click the blue Backend Editor button below the page title. The content of the page will still be there, but it will now be inside a Text element.

Learn more about how to use the Page Builder.

Page Builder to Classic

If you are in the Page Builder editor and want to switch to the Classic Editor, click the blue Classic Mode button below the page title. All of the content of the page will still be there, but it will no longer be wrapped in the Page Builder elements.

Please note: If you see shortcodes in the text (shortcodes are the code surrounded by brackets that is used to enable the Page Builder), then that page was built using the Page Builder. You should switch back to the Page Builder editor so that you don’t lose important formatting and content on that page. Learn more about how to use the Page Builder elements below.

The following pages were built using the Page Builder and should not be switched to the Classic Editor:

• Board of Directors – Learn how to edit the Board of Directors page
• Photos and Videos – Learn how to edit the Photos and Videos page
• Latest News – Learn how to add a news post
• Events Calendar – Learn how to add a new event
• Volunteering

Using the Classic editor

The Classic Editor is the editor we used with the previous theme and works the same way as before.

Editing text

To edit text in the page content, click anywhere in the editor box and edit the text as you would in a text editor like MS Word. The editor buttons at the top of the editor window can be used for setting headings, adding bulleted lists, bolding, italicizing, etc.

When you are finished with your edits, click the blue Update button to publish the changes. Then go to the webpage you were editing and refresh* to make sure the changes look the way you want them.

*To refresh a page:

• click the circular arrow next to the web address at the top of the browser, or
• on the keyboard, press Ctrl/Cmd+R, or
• on the keyboard, press function key F5

Headings

Headings are good to use on any page to help organize sections of a page and make it easier to understand for the reader. Use headings rather than bolding for section titles so that the structure of the page is clear to Google and assistive technologies like screen readers.

To set text as a heading, highlight the text and click on the dropdown in the editor menu (see screenshot below).

Please note: In order to keep the page accessible for readers who use assistive technologies (like screen readers), it’s important to use the right heading structure.

The first heading on a page should always be Heading 2 (the page title is automatically set to Heading 1, so that level should never be used in the page content). The next heading level should be Heading 3, etc. Heading levels should never be skipped (for example, Heading 2 followed by Heading 4).

Adding an image to a page

Before you add an image to a page, ensure that the image is suitable for publishing to the web. Ensure that you have the right to use the image and that it is the correct size. An image need not be larger than 1000 pixels wide for uploading to your web site. You should never upload images directly taken from a camera without first resizing. Here is an easy-to-use program (Windows only) for resizing your photos, or use the image editor on your phone.

1. Go to Pages.
2. Hover over a page and click Edit.
3. Place your cursor at the location where you would like to add an image. Don’t worry, you can move your image later by dragging it.
4. Click Add Media.
5. Click Upload Files.
6. Click Select Files. Browse to your image files located on your computer.
7. Click Open. You can now set variables for your image, such as: alternative (alt) text*; alignment; size; and if you want the image to link to another page or file.
8. Click Insert into page.

*Alternative text: Alternative (alt) text is displayed if the image doesn’t load, and is used by screen readers for people with impaired vision. This text can be added in the Alt Text field when you upload an image file to the Media Library. You should add alternative text for your image in the following cases:

• The image has text in it. The alternative text should include that text.
• The image is a link. The alternative text should say where it links to.
• The content in the image is important for understanding the page, and a description is not elsewhere on the page.

If the image is purely decorative, leave the Alt Text field blank.

Adding a text link to another page or website

1. Highlight the text you want to use as the link.
2. Click the link icon in the editor bar (see screenshot below).
   

   

3. If you are linking to another website, enter the web address in the URL field that appears under the text.
   If you are linking to a page on your website, type the page name in the field that appears under the text. A list of matching pages will appear below the field. Select the page you want to link to.
4. Click the blue arrow button to set the link.

Adding and linking to a PDF

Adding a PDF (or any other document type) is very similar to adding an image.

1. Go to Pages.
2. Hover over a page and click Edit.
3. Highlight the text you would like to link to your PDF and copy it (Ctrl/Cmd+C).
4. Click Add Media.
5. Click Upload Files.
6. Click Select Files. Browse to your PDF file located on your computer.
7. Click Open.
8. Paste the link text (that you copied in step 3) into the Title text box. This becomes the text for the link to the PDF.
9. Click Insert into page.
10. It should be clear to the user that this link will open a PDF, rather than a webpage. So your link text should have ‘(PDF)’ after it. For example: Application Form (PDF)

Using the Page Builder editor

Go to the Page Builder tutorial.

Page Header Image

Using a header image

You can optionally add a header image to a page.

When editing a page:

1. Click Set featured image on the right side of the page editor.
2. Click Upload Files. (Or click the Media Library tab and select one of the existing page headers.)
3. Upload an image.
4. Select the uploaded image.
5. Click Set featured image to use it.

The image you upload should be at least 960×250 (if larger, it will be auto-cropped). If you upload an image that is less than 960 pixels wide, it will appear stretched in the header. In this case, you should provide a larger image.