Website Editing Guide

The CSUMB website is managed by a collaborative effort between University Communications and Information Technology. Each department, division, and college has a section editor who is a staff member responsible for creating, updating, and removing content in their respective sections. 

This guide provides self-help to website editors.

Contents

  1. Obtaining Edit Access
  2. Direct Edit
  3. Columns
  4. Accordions
  5. Create a New Section
  6. Move a Section
  7. Add an Image Column with CTA Button (Image Grid)
  8. Add Captions to an Image
  9. Float an Image
  10. Add a Button

1. Obtaining Edit Access

  • Administrators can assign or make changes to a section editor by submitting a Website Support IT ticket.
  •  Note that new section editors will be assigned an eight-hour training they must complete in Canvas prior to being granted access to their assigned section.
  • At this time, access to edit the website is only available to section editors.  Section editors can only be assigned by an administrator. There can only be one section editor per section. Student-workers and contractors are not eligible to be section editors. 

2. Direct Edit

3. Columns

  • Columns allow you to split your content area into two, three, or four columns. 
  • Note: It is not possible to insert another content type (i.e., accordion, button, call to action) into a column.

  1. From the Site Structure, select the Section to which you want to add a column.

  2. Select the Content tab.

  3. Select the green + Add Content button on the right side of the page.

    Add Content button

  4. Select Column from the list of content types.

  5. Fill in the Name field (does not display on the page) and select the number of columns you’d like to display and the layout you want to use, from the Number of columns dropdown list.

  6. Use the TinyMCE editor to add content to the necessary column fields.

  7. Save, Save and Approve, or Publish your content.

Tip: The Name should be something specific to this piece of content so that it makes sense when you revisit the page later.

Things to Consider:  When viewed on a mobile device or narrow browser window, columns will display stacked one on top of another. Therefore, it is in the best interest of the user to refrain from referring to columns as left or right because the position is dependent on the user’s screen size.

4. Accordions

  • Accordions allow you to hide general content (i.e., text, bulleted lists, images) under a heading. The initially hidden content will display when the user selects the heading. Accordions are useful for an FAQ, further readings, or important but not critical information. Note: You cannot add another content type (i.e., columns, another accordion) to an accordion.

  1. From the Site Structure, select the Section to which you want to add a column.

  2. Select the Content tab.

  3. Select the green + Add Content button on the right side of the page.  
    Add Content button

  4. Select Accordion from the list of content types.

  5. Fill in the Name field (does not display on the page) and the Title field (accordion title or heading), and use the TinyMCE editor to add content to the Description field. The screenshot below shows an example of how an accordion appears on a page.

    Screenshot of how an accordion appears

  6. Save, Save and Approve, or Publish your content.

Tip: The Name should be something specific to this piece of content so that it makes sense when you revisit the page later.

5. Create a New Section

6. Move a Section

7. Add an Image Column with CTA Button (Image Grid)

  • Image grids from the old web content management system were converted to a new content type called "Image Column with CTA Buttons." (See screenshot below.)

Image Column with CTA Buttons example

  • The use of this content type is currently limited to University Communications administrators. If you need assistance with editing or adding an Image Column with CTA Buttons to a page, please complete a Web Editor Support Request form.

8. Add Captions to an Image

  • You can add captions to images that you insert into the TinyMCE editor by following these steps: 

  1. Double-click on the image to which you want to add a caption.

  2. In the Set media attributes dialog box, type the image caption in the caption field.

  3. Click the Ok button.

Add captions in Set media attributes dialog box

9. Float an Image

  • You can float an image that you insert into the TinyMCE editor to the left, center or right by following these steps: 

  1. Double-click on the image that you want to float.

  2. In the Set media attributes dialog box, type the location you would like to float the image (i.e., left, center, right) in the Float field.

  3. Click the Ok button.

Float an image in Set media attributes dialog box

10. Add a Button

  • You can add a button by following these steps:
  1. Navigate to the section where you would like to insert a button.
  2. Select the Content tab of the section.
  3. Select the +Add Content button.
  4. Select the Button content type.
  5. Name the content type by filling in the Name field.
  6. Fill in the Button Text field with the text you would like to be displayed on the button.
  7. If the button destination link is external (non-CSUMB), copy the URL from your browser and paste it into the Button link (external) field.
  8. If the button destination link is internal (page on the CSUMB site), select the +Add section link button and find the page in the site structure.
  9. Save or Save and Approve.

 

 

Print Article