Add or Modify Content on a Page

To make changes to a page, you must first navigate to the page you want to edit and then click the GEAR>Edit page.  

When you click on this, you will "Check Out" the file (or page) which essentially "locks" the file so that only you can make changes to the page. A file cannot be modified by more than one person at a time.  Once you are finished edit the page, it is important to Check-in/Publish the file afterwards so that others can edit it if need be.  See the Saving/Publishing Instructions page for more details on this. 

 

 

If you accidentally modifed a page, the changes can be cancelled or backed out to a previous version.  See Saving/Publishing Instructions page for details. 

 

Unable to Edit a Page or Content Editor

If you are trying to edit the page but no menu appears when you click GEAR>Edit page, there may be a checkout conflict where someone else has the file checked out.  See Issues Editing Page for details on this and how to get past it.  If it's only a section of the page that you can't edit, you may be trying to edit some queried content that is loaded from somewhere else on the website or from the content hub (see below explanation under "Page Editing Basics").

 

Page Editing Basics

Each page on a website is made up of several Web Parts but it depends on the Page Layout selected. Often included in the page layout is Page/Rollup Image & Page Content section.  See example below.  If these sections are included on your page layout, you may add content (text and images) directly into these sections.  You do not need to add a web part.  Note: If you are trying to edit something but SharePoint is not allowing you to make any changes, most likely this is because the content is being automatically "loaded" (or queried) from somewhere else like a SharePoint list.  It may also be centralized content that is managed by the district's content hub and automatically loaded/queried onto the page so edits are not allowed.  If the content needs to be modified, please submit an IT Service Request for assistance with the change.

The Content Editor is a versatile Web Part and can be used to add nearly any type of content to a page.  This includes text, images and links.  The advantage of adding a Content Editor is that you can move it to different zones on the page. You may also upload documents and images directly into the Web Part and add them to a library. 

Adding Text to a Page Content or Content Editor Web Part

Copy/Paste. When copying content from another source (a document, email, etc.), you must clear formatting.  To do so, Highlight text>Format Text Tab> Click Clear Format>Click Convert to XHTML

Formatting Text. & Mark-Up Styles  To change the font size or style, highlight the text and, on the Format Text Tab, select a Style by clicking the drop-down under Mark-Up Styles.   The Paragraph style is the default text format.  Other formatting options are available on this Tab but it is recommended that you primarily use the pre-determined styles in order to present a professional, consistently formatted website.

 

Adding Pictures to a Page Content or Content Editor Web Part

When adding a picture to a Content Editor Web Part, it is good practice to first upload the image file to the Image Library.  Be sure to take note which Image Library the file is uploaded to, including which subsite.  More details on uploading images can be found on the Document & Image Libraries page.

  1. In the Content Editor Web Part, set cursor to where the image will be inserted.
  2. Click on the Insert Tab on the Ribbon
  3. Click Picture and Select "From Sharepoint"
     
  4. Navigate to the Image Library where the picture was uploaded to.
  5. Select the image and click on "Insert"

 

Adding Website Links to a Page Content or Content Editor Web Part

Adding a link to a Content Editor Web Part helps to navigate users to another website.

  1. Highlight the text and then click on the Insert Tab on the Ribbon 
  2. Click Link and select "From Address"
  3. A box will pop up with the highlighted text listed as "Text to display".  Copy the website link's URL into the Address field and hit "OK".  For inserting links to documents, navigate to the Document Library, find the document & right click on the document.  Select Copy link location and then past this into the "Address" field.
     
  4. After pressing OK, be sure to check the URL is a valid web address with http:// or https:// is at the beginning of the url.  You may want to select "Open in new tab" if you want to keep your website open in a tab while opening a new tab for the other website.
     

 

Adding Embedded HTML Code to Content Editor Web Part

Example: Display Google Calendar

Embedding HTML Code in a Content Editor Web Part is what needs to be done to display a google calendar.  Once the Google calendar is created and customized, the HTML code that is generated from Google should be saved in a text file, "school-cal.txt," and uploaded to the Document Library in the About subsite.  By linking this text file in the Content Editor, the google calendar will be displayed with all its customizations.

  1. Click on "Add a new Web Part"
  2. Point to the Web Part and click the down arrow in the top right corner of the Web Part. Then click "Edit Web Part"
  3. In the far upper right corner of the page, the Web Part can be edited and the URL of the file will be added.  Type /About/Documents/school-cal.txt in the URL field and click OK.
  4. Publish the page to see the results.  Make sure the calendar's permissions are set to be public.

 

Adding a List or Library to the Page

Add an Apps Web Part - Document Library is the example below (as shown on page layout above)
See Add a Web Part instructions above: Select Apps Category and your list or library.
 
Change the view of your Apps Web Part
NOTE:  You must create the custom view for your webpart first.  You can create views of libraries and lists to display specific information on your page.  The Working With Lists page provides instructions on how to do this. You will need to navigate to the location where your list or library resides.
  1. Edit the Apps Web Part
  2. In the Tool Pane in the top right corner of your screen, Selected View>select your custom view from the drop-down
  3. Select the Toolbar Type.  Experiment with these to see what you like.

 

 

Embedding a Video on a Page -- Adding HTML Code to the Page

To add a google calendar, YouTube/Vimeo video, Twitter/Facebook feeds, the html code needs to be added.  Depending on where the code is coming from, this html code needs to be generated and then copied into SharePoint.

  1. Click Add a webpart>Media and Content>Script Editor>Add
  2. Copy the Embed (html) code from the application (see below details)
  3. Click Edit Snippet in the webpart>Paste the html code

  4. Click Insert
  5. Publish the page

To Obtain Embed code for You Tube video

  1. Navigate to the video
  2. Click Share>Embed>Copy html code

Obtain Embed code for Google Form

  1. Navigate to the form
  2. Click SEND>Embed icon>change width to 100%>Copy

Adding a Slideshow of Photos to a page 

This is an out-of-the-box web part that allows you to easily set up a slide show.  
  1. Create a Picture Library (GEAR>Add an app)
  2. Upload your photos.  It is recommended that photos be of similar size.
  3. Edit the page where you want to add the slideshow. Add a webpart>Picture Library Slideshow Webpart.
  4. Edit the Slideshow webpart>select the Picture Library and adjust the settings.

 

Web Part Characteristics and Modification Instructions

Web parts are inserted into a page to display the information in different ways.  How the web part appears on the page can be customized in the instructions below.  Web parts can also be moved to different web zones and ordering to provide flexibility in page layout.
 

Add a Web Part - Content Editor is the example below

1.   In page edit mode, click on the Insert Tab on the Ribbon and then click Web Part.


2. Under Categories, select a category, for example Media & Content, select the Web Part that you want to add to the page, for example Content Editor.  Select the location to add it to, for example Header and then Click Add at the far right. When you select a Web Part, information about the wb part is displayed in About the part.


3. Add your content to the web part and format the text.  You can also upload a file, insert a link or a picture. 


Edit a Web Part
While in page edit mode, point to the Web Part, click the down arrow in the top right corner of the Web Part. Then click Edit Web Part.   
 Screen Shot 2018-08-31 at 11.27.02 AM.png
Web Part Tool Panel
On the top right corner of the screen, you will see the Web Part Tool Pane where you can change views, appearance, layout and many other properties.  If you are editing a web part that was lower on the page, you may have to scroll up the see the Tool Pane.

Change the Web Part Title and/or Border
On the Tool Pane, click the + to the left of Appearance to open.  If you do not want a title for your Web Part, select None for Chrome Type.  Otherwise, change the Title and make a selection from the Chrome Type drop-down menu.



Move Web Part to another Web Zone or Change Order within a Web Zone
On the Tool Pane, click the + to the left of Layout to open.  Choose the Zone from the drop-down list.  The Zone Index determines the order of a Web Part within the Zone with "0" at the top.

Delete, Close or Minimize/Restore a Web Part

While in page edit mode, point to the Web Part, click the down arrow in the top right corner of the Web Part. Then make your selection.  

  • Minimize a Web Part to "hide" the content on the page.  Readers are still able to open it.  Restore will "unhide" the Web Part.
  • Close a Web Part to remove it from the page.  You can add it back to the page by clicking "Add a Web Part" and selecting it from the Closed Web Part Category.  Closing a web part is what is recommended for any pre-set pages in the templates.
  • Delete should not be used as each webpart has a purpose in the template.  Choose "Close" or "Minimize" instead.