Wordpress Section Types RAINBOW DISTRICT SCHOOL BOARD WORDPRESS GUIDELINES

Size: px

Start display at page:

Download "Wordpress Section Types RAINBOW DISTRICT SCHOOL BOARD WORDPRESS GUIDELINES"

Sharyl Fox
5 years ago
Views:

1 Wordpress Section Types RAINBOW DISTRICT SCHOOL BOARD WORDPRESS GUIDELINES OCTOBER 2016

2 Table of Contents Summary...1 Menu Structure & Pages...2 Navigating Pages...3 Text Block...4 Resource Listings...7 Program Listings...9 Full-Width Media...10 Image with Caption & Text with Image...11 Image with Caption...12 Text with Image...13 Media Gallery...14 Contact Listings...15

3 SUMMARY Summary Wordpress is a content management system (CMS) which includes a powerful web editor that makes updating and adding content simple and straight forward. The back end of the website is where content such as text, images and documents can be uploaded and formatted to appear neatly and organized on the publicly viewed side of the site, which we refer to as the front end. To login to the back end of your website, go to your site s homepage and add the suffix /wp-admin at the end of the web address. For example, if your web address is rainbowschools.ca, you ll want to input the following: rainbowschools.ca/wp-admin. Once on the login screen, you ll have to enter the username and password that were supplied to you by a site or network administrator. Every page on your website is made up of Section Types. In the back end of your website, you ll have the ability to add, delete and reorganize sections. When updated, these changes will be reflected on the front end of the website. This document outlines all of the different section types that can be formatted, and how to correctly use them. On the Edit Page screen in the back end, there is a blue button titled Add Section. Click this button to reveal a menu of different section types. The following guide should be used to determine what section types to use to house what kind of content. After learning about all the section types, every user will be able to add the necessary information, pictures and documents to the desired page, with full organizational ability. 1

WORDPRESS BASICS WORDPRESS BASICS MENU STRUCTURE & PAGES Once logged into the back end, you will notice a vertical

You can access all of the pages on your website from here, add new ones, reorder existing pages and even search for a

Menu Structure Main menu items appearing in the navigation bar of the website will appear in the back end without any

Order in sidebar menu The sidebar menu allows users to navigate pages within a certain section of the site (in this

4 WORDPRESS BASICS WORDPRESS BASICS MENU STRUCTURE & PAGES Once logged into the back end, you will notice a vertical black sidebar menu. Within that menu, you will find Pages. You can access all of the pages on your website from here, add new ones, reorder existing pages and even search for a specific page title. Menu Structure Main menu items appearing in the navigation bar of the website will appear in the back end without any dashes before the page title. Subpages are identified with one dash next to the page titles. Order in sidebar menu The sidebar menu allows users to navigate pages within a certain section of the site (in this case, Policies). The order of these items on the front end are dictated by the order in the back end. To reorder these pages, simply click and hold anywhere in the blank space next to the page title and drag the page up or down until the desired order is achieved then release the click to drop the page in place. 2

WORDPRESS BASICS WORDPRESS BASICS NAVIGATING PAGES You can access any page by clicking

Once you ve clicked on an individual page, you ll see all the sections that make up

Update Button The blue Update button located at the top right of the page in the

Reordering sections within a page To change the order of sections within a page, click

reordering. Add Section Button Every page is made up of Section Types.

sections. When updated, these changes will be reflected on the front end of the site.

5 WORDPRESS BASICS WORDPRESS BASICS NAVIGATING PAGES You can access any page by clicking the page s title from the Pages landing screen (as seen on the previous page). Once you ve clicked on an individual page, you ll see all the sections that make up that specific page. Some important elements are highlighted below. Update Button The blue Update button located at the top right of the page in the Publish widget must be clicked in order for any updates to the page to be saved. Reordering sections within a page To change the order of sections within a page, click and drag the area next to the section title and move above or below other sections in the desired order. To make this easier, you can click in this space once to minimize the section before reordering. Add Section Button Every page is made up of Section Types. In the back end of the site, you have the ability to add, delete and reorganize sections. When updated, these changes will be reflected on the front end of the site. On the Edit Page or Add Page screens in the back end, there is a blue button titled Add Section. Click this button to reveal a menu of different section types. The ones that should be used will be covered in the following pages. 3

6 1 TEXT BLOCK The "Text Block" will be the most commonly used section type throughout the site. There are several options to help format written content so it appears neat and organized on the front end of the site. The following pages describe how to achieve the formatting types present in the image below. 4

7 1 TEXT BLOCK Within this section type you will have the ability to create headings, subheadings, bulleted lists and numbered lists to efficiently organize written content. Main Headings Main headings are used for the title of the page. To create this style, highlight desired text and choose Heading 3 under the Formats drop-down menu. Sub-headings Sub-headings are used to organize content into sections. To create this style, highlight desired text and choose Heading 4 under the Formats drop-down menu. Body Text Body text will be the main content on a page. To create this style, highlight desired text and ensure no heading type is selected under the Formats drop-down menu. Bolded Text Bolded text can be used as a sub-sub-heading or to emphasize content. To create this style, highlight desired text and click the B button. Bulleted List To create a bulleted list, separate each list item with an extra line space, highlight the text, and select the bullet button. The text editor will automatically delete the extra line spaces. 5

1 TEXT BLOCK There are numerous options for formatting text within the text block section type. Here are two more ways you can organize written content.

8 1 TEXT BLOCK There are numerous options for formatting text within the text block section type. Here are two more ways you can organize written content. Block Quotes Block quotes add emphasis by creating indented text and adding a blue line along the paragraph. To create this style, highlight desired text and click the button. Emphasized Text Emphasized text can be used to draw attention to a certain block of text. To create this style, choose Emphasized Text under the Formats drop-down menu. Dividers Some pages require lots of content. To help divide sections and organize information, you can use the Divider section type to separate other section types. It will appear as a thin gray line on the front end of the site. There are no fields to fill in for this section type. Just click Add Section, choose Divider, and click and drag to place it between the section types you want to divide. 6

9 RESOURCE LISTINGS RESOURCE LISTINGS The image below displays the three ways you can organize PDFs or other documents using the Resource Listings section type. The following page outlines when and how to use these variations of the section type. 7

10 RESOURCE LISTINGS RESOURCE LISTINGS The "Resource Listings section type is used for uploading PDFs or other documents to the site. There are three variations in the back end for organizing PDFs or documents so they are appropriately arranged on the front end. You have the option of labeling the PDFs, giving the section a title, and even writing a short description to appear above the PDFs. The PDFs can be viewed by the site s visitors with a click of a button, giving them the option to download them as well. Title + Description You may choose to give the block of PDFs a title, for organizational purposes. Enter it into the field labeled Heading. You can also add a description in the Description field. Callouts Version If you have 3 or less PDFs, the callout version is the recommended option. It can be selected under the drop-down menu labeled Style. Compact List Version If you have more than 3 PDFs, the compact list version is the option that should be used. It can be selected under the drop-down menu labeled Style. Meeting Minutes Version For meeting minutes and agendas, the meeting minutes version allows you to upload two documents on the same line. Select this option under the Style drop-down menu. Document Title You will have the ability to give the uploaded PDFs custom titles that appear on the front end of the website. Enter the desired title into the Label field. 8

11 PROGRAM LISTINGS PROGRAM LISTINGS The Program Listings section type makes it easy to organize and visually identify external and internal links, eliminating the need for embedded text links that often get lost within large blocks of text and hinder accessibility. This section type will make it clear to a visitor that what they are clicking will either open a new tab (for external links), or take them to a different page on your website (for internal links). Title + Description Optionally add a title and/or description to this section type. Enter the title into the field labeled Heading and the description into the Description field. Links Enter the title of the link into the field labeled Program Name. In the Add Link drop-down menu, you can choose to link to an internal page or any external webpage. If the internal option is chosen, the drop-down menu labeled Link will allow you to pick which internal page you wish to link to. If the external option is chosen, you may copy-paste any webpage URL into this field. If you wish to link multiple sub-links below it, you can choose the option None under the Add Link drop-down; no external link will appear next to the title. (Note the example image). Sub-links If there are multiple sub-links of the same genre as the main link, you may add them by clicking the Add Topic Button. Adding Multiple Main Links Click the Add Program button to add multiple links to external or internal sources. Follow the same steps as 2 and 3. 9

We recommend using this section type for video primarily; there are other better options for images, outlined in the following pages.

12 FULL-WIDTH MEDIA FULL-WIDTH MEDIA The Full-Width Media section type allows you to add a full-width image or video within the content of a page. It is to be used to highlight a single image or video. We recommend using this section type for video primarily; there are other better options for images, outlined in the following pages. Image Option Choose the Image option under the drop-down menu labeled Media Type and upload the desired image. Note there is not an option to caption or title the image within this section type (refer to the next page if a caption is required.) Video Option Choose the Video option under the drop-down menu labeled Media Type and paste the desired YouTube video s URL into the field labeled Enter URL. 10

The first section type, Image with Caption, allows the addition of a caption to a

13 IMAGE WITH CAPTION & TEXT WITH IMAGE IMAGE WITH CAPTION & TEXT WITH IMAGE These two section types allow the user to add images within a page. The first section type, Image with Caption, allows the addition of a caption to a full-width image. The Text with Image section type allows the inclusion of smaller images within body text. 11

14 IMAGE WITH CAPTION IMAGE WITH CAPTION Use the Image with Caption section type to achieve a full-with image with an italicized caption. The caption can be up to two lines long and should succinctly describe the image it is associated with. Image Upload desired image by clicking Add Image button. Caption Optionally add a caption to the image. 12

TEXT WITH IMAGE TEXT WITH IMAGE Use the Text with Image section type to achieve images within a text block. You have the option to add a title to the desired image. A caption is mandatory to add.

15 TEXT WITH IMAGE TEXT WITH IMAGE Use the Text with Image section type to achieve images within a text block. You have the option to add a title to the desired image. A caption is mandatory to add. You can sandwich this section type between two Text Block section types to break up large amounts of text. Title Optionally add a title to this text block. Do not add the title if a seamless transition between the Text Block section type and this section type is desired. Body Text Add body text that will appear next to the image in the Content field. Ensure there is not too much content, or it will run much longer than the image. Image Upload the desired image into the field labeled Image. Position Choose either Floated Left or Floated Right under the drop-down menu labeled Image Position to align the image to the left or the right of text. Caption You must add a caption into the field labeled Image Caption for the section type to be complete. Restrict this caption to one sentence whenever possible. 13

MEDIA GALLERY MEDIA GALLERY This section type allows you to display multiple images and videos, with the functionality of toggling between images and videos.

16 MEDIA GALLERY MEDIA GALLERY This section type allows you to display multiple images and videos, with the functionality of toggling between images and videos. The process of adding a video is a bit hidden, but is quite simple once explained. The media gallery will be displayed with the title Media Gallery on the front end of the site. Adding Images Import images into the media gallery by clicking on the button labeled Add to Gallery. Adding Video Firstly, you must choose an image that you wish to appear as the thumbnail for the video. Note the example in the front end; there is a light white play button over the image. Upload the desired image into the back end as you would a regular image. Once it is in the gallery, click on the image to reveal a sidebar that will open beside it. Check off the box next to the label Has Video?, and a field will expand labeled Media URL. Paste the desired YouTube or Vimeo video s URL into the field and the video will appear below (note the example). All videos must be uploaded to YouTube or Vimeo in order to work with this section type. 14

MEDIA GALLERY CONTACT LISTINGS - STEP 1 This section type allows you to display contacts from your school, anywhere on the website.

Adding this section is a two-step process which first involves adding Contacts in the back end of the site.

Add New Contacts First, click Contacts in the sidebar menu of Wordpress. The screen to the left is what you will see with the existing contacts for your school displayed. Click the Add New button.

17 MEDIA GALLERY CONTACT LISTINGS - STEP 1 This section type allows you to display contacts from your school, anywhere on the website. You have the option to show a more substantial layout which includes a photo of the contact, or a basic text layout which displays basic contact information. Adding this section is a two-step process which first involves adding Contacts in the back end of the site. Once you have all of your contacts in, you can pick and choose which ones you want to use on the different pages of your website. Add New Contacts First, click Contacts in the sidebar menu of Wordpress. The screen to the left is what you will see with the existing contacts for your school displayed. Click the Add New button. Add New Contacts When adding new contacts, the only field that is mandatory is the title field and this is where you will place the contact s name such as Mr. Smith. You then have the option to include a title or job description, upload an image of the contact, add phone and fax numbers, , and a class website. Image Once the relevant fields are filled, click the blue Publish button. Your new contact will be added to your Contacts database, as seen in the above image. 15

MEDIA GALLERY CONTACT LISTINGS - STEP 2 Once you have a comprehensive list of contacts added to your contacts database, you can now place them on any page of your website using the Contact Listings

The logical place for the Contact Listings section type is the Staff page on your site, but it can also be used if you want to display contacts who are associated with a certain program or activity,

Use this selector to determine how your contacts will display on the site. Add your Contacts Click anywhere in the field under the Contacts label.

18 MEDIA GALLERY CONTACT LISTINGS - STEP 2 Once you have a comprehensive list of contacts added to your contacts database, you can now place them on any page of your website using the Contact Listings section type. The logical place for the Contact Listings section type is the Staff page on your site, but it can also be used if you want to display contacts who are associated with a certain program or activity, for example. Add Contact Listings Using this section type, you have the option to display a simple layout, or an extended layout, which includes a photo. Use this selector to determine how your contacts will display on the site. Add your Contacts Click anywhere in the field under the Contacts label. A list will be dynamically populated based on the Contacts you ve added as per the instructions on the previous page. You may also start typing the contacts name to filter down to the name you want to add. Repeat this process for all of the names you want to add under this Contact Listing. You can easily reorder contacts my clicking and dragging the names to the desired location. If you want to remove the contact, simply click the x to the left of the contact s name. To break up the listings by department, include a heading in the optional field and add a new Contact Listing for every department you want to include. 16

19 Questions? Get in touch.

Somerville College WordPress user manual. 7th October 2015

Somerville College WordPress user manual 7th October 05 0 INDEX YOUR SITE IMAGES FORMS THE MENU 4 4 5 0 YOUR SITE The Content Management System The Somerville website has been built using the WordPress