Skip to main content

CMS Training Exercise Instructions

Welcome to the CMS training exercise. This exercise will familiarize you with the basics of working in the CMS and the importance of creating accessible content.

To complete this exercise, you will need three things:

  1. Access to the CMS - specifically the Sandbox Training site. This is where you will create a new folder and page. If you do not have access yet, email wts@ucsd.edu to request it.
  2. Access to the UCSD network or the Campus VPN (using a two-step login option). Both the CMS itself and staged (non-public) pages have these requirements. Contact the IT Service Desk if you need assistance with your VPN.
  3. The instructions on this page.

You will access the CMS through your web browser. As these instructions are also in your web browser, we suggest that you open two windows or tabs, one for the CMS and one for these instructions.

Throughout these instructions you will find callout boxes like this one:

These links provide further reading on relevant topics. Feel free to follow and bookmark them. Note that all links on this page will open in the same window. If you prefer to open the link in a new window or tab, you can use a right-click option (or equivalent) in your browser to do so. Keeping links opening in the same window by default is one of the many ways we can keep our content ADA accessible.

The templates that the CMS uses helps your site to score high on accessibility and usability ratings, but templates can't enforce all the rules. You, in your role as a Subject Matter Expert (SME), are responsible for following best practices to keep your web content accessible and user friendly. 

Make your page

Get started by clicking open the first drawer "Log in to the CMS."

Log in to the CMS

  1. First, make sure you are on the VPN. You’ll need to use the “Group: 2-Step Secured – allthruucsd” VPN setting.

  2. In your browser (recommended browsers), go to https://cms.ucsd.edu and sign in using your Active Directory (AD) account. We recommend keeping this page open in one browser or tab, and the CMS open in another.

  3. In the upper-left corner click in the Go to a Site box and choose Sandbox from the slide-out menu

    Go to a site
    After you complete your training and have been approved for access, this is where you will select your site(s) to work in.

Create a new folder for your page

As you move around the CMS, you should be aware of the difference between navigating to assets (folders, pages, files, etc.) and selecting them.
  1. In the left navigation window, click on the training folder. You should see a number of sub-folders appear under training. These folders belong to others who have taken the CMS training. You are navigating the site, but you haven’t selected anything yet. Note that nothing in the main window has changed. 

    training

    To select the training folder, hover your mouse over the training folder and a > symbol will appear to the right of the folder name. Click on the > symbol. You have now selected that folder and will see the contents of that folder in the main window – not just in the left window.

    Important: Make sure you have selected the training folder by looking at the main window. You should see “Folder: CMS Training Pages” at the top, followed by the breadcrumbs: “Sandbox / training”

    If you do not see this, then you have not actually selected the training folder. Don’t click on training (which is just navigating around the site). You need to click on the > symbol.

    Selecting the training folder will let you place your new folder inside the training folder (otherwise your folder will be in the wrong location). Correct locations are very important in the CMS because the location in the CMS corresponds to the URL (web address) on the live site.

  2. Click on the Add Content button add content button at the top of the window and select Folder.

    add content

  3. Replace “base-folder” in the Folder Name field with yourlastname-yourfirstname (for example, doe-jane).

    Important: Notice the Folder Name is all lowercase with no spaces. Folder and Page Names should always follow this convention as it’s what appears in the URL. Failure to do so can result in pages not being found and an inability to redirect traffic from the bad URLs. 

    Learn more about Folder and Page Names
  4. Click the blue Submit button in the top right.

    A Spell Check screen may pop up. If it does, click the blue button with the check mark to close it.

    spell check
  5. Click on the Edit button in the top right of the screen:

    edit button

    Your screen should now look something like this:

    metadata fields

  6. Fill in the metadata fields:
    Display Name: Enter your name (for example, Jane Doe). This will show up in the site navigation (breadcrumbs and left navigation).
    Title: Enter the same name.
    Summary: Type “This is my first page for the campus CMS training site.”
    Note that uppercase letters and spaces are permitted in all three fields here.

    Learn more about these metadata fields
  7. Click the Submit button in the top right

    You may get the Spell Check pop up again. Correct any issues as needed and click the checkbox when finished. You may get a pop-up dialog box that says something like:

    pop up

    If you do see this, click on the X to close it. There isn't a reason to publish an empty folder. Once you create a page for the folder, you will publish it. 

Create a new page

  1. After creating your folder, you will have the folder selected. You can see it highlighted in the left window, and you should see "Folder: Your Name" at the top of the main window. Most of the main window will be blank, because there isn't anything in your folder.

    It is important to pay attention to where you are in the site structure when you add new content, as this will determine where the new content is placed.

  2. Click on the Add Content add content button button, scroll down and select Page – Article. 

    page article

  3. The other options represent other resources like folders, files or images or other page templates. Page – Article is the most frequently used template. Different sites will have different templates available to them

    Learn more about CMS Templates:
  4. The new Page – Article template will appear.

  5. Type into the fields as shown here (remove the text automatically generated by the template):

    Page Name: index (Note: Page names should conform to the no uppercase, no spaces convention as this will be part of the site URL. If you capitalize ‘index’ your page will not publish properly.)
    Display Name: Web Accessibility Page
    Title: Your Name’s Web Accessibility Page (for example: Jane Doe’s Web Accessibility Page)
    Summary: This is my first CMS page.
    Author: Type in your name, for example: Jane Doe

    type fields

    Notice this Page Name is “index” because every folder in the CMS has to have one “home page” named “index.” This automatically becomes the landing page for the folder.

    The two most important things when creating a new page are:

    Every folder must have an index page (the system name is all lowercase ‘index’).
    Every system name (page name) should be all lowercase with dashes instead of spaces.

    Learn more about page names and how they should be formatted: Choosing System Names in CMS
  6. Now click on the Preview Draft button: preview draft button

    You should now be looking at a screen like this:

    preview screen

  7. You may get a pop-up dialog box asking if you want to Submit the draft. You can click submit there or click on the Submit button in the top right. You’ll get a dialog box like this:

    submit dialog

    You can enter text in the Comment field if you want. You’ll see something by default, such as “First version.” Click on the Submit button. (You could also click on the Check Content & Submit button. This includes spell-check and link checker, which you can explore on your own.)

  8. Your new page has now been submitted to the CMS. You must submit your page to the CMS in order for any other CMS users to be able to see it (if it is a new page) or see your most recent edits. 

    We recommend submitting your changes to the CMS at the end of each working session. If you forget to submit your changes, and later come back to work more on the page, you may inadvertently overwrite your previous work. If multiple people are working on a page, it is important that everyone submits their changes so someone else doesn't overwrite their work.

    You will be prompted to submit your changes throughout this exercise, but you may do so at other times as well (if you need to step away from the exercise and return later, for example).

Basic CMS Workflow: Edit, Preview, Submit, Publish

Once you have a page in the CMS, either a new one you created, or an existing page you need to update, most of your basic workflow will be: Edit > Preview Draft > Submit > Publish

  • Edit - Create new content or modify exhibiting content on your page
  • Preview Draft - See a preview of how your content will display 
  • Submit - 'Save' your update to the CMS
  • Publish - Make the content visible outside the CMS

You already have experience with Preview Draft and Submit when you created your page. Now we'll do a simple Edit, Preview Draft and Submit again, and then Publish. 

  1. You should still be on your page from the previous section. If you aren;t, you'll need to navigate back to your page.
    Click on the Edit button (first option in the top right): Edit button

  2. The Edit screen will now display. This is the same screen you saw when you created your page. The Edit screen is organized vertically, and the parts of the corresponding page you are working on are labeled.

    First, you'll see the metadata that you have already entered (Display Name, Title, Summary, Author).

    As you scroll down, you'll see the name of the template (in this case 'Two-Column,' which is the old name for the 'Article' template). There is a toggle to show or hide advanced options. These won't be covered in this training.

    Next is a section called Left Blocks. The various parts of the page are organized into blocks. Content in Left Blocks will appear underneath the left navigation menu. You will not use these in this exercise. Different page templates will have different blocks in them. Pay attention to the names of the blocks so you know what section of the page you are editing.

    After Left Blocks you will see Middle Blocks. This is the main content area of the page and where the majority of your content edits will be done.

    Under Middle Blocks, there is a toggle for "Content to Use:" either WYSIWYG or Shared Blocks.

    Make sure WYSIWYG is selected. You will see a text editor that should be familiar to you from programs like Word or other word processors.

    Middle Blocks

  3. In the WYSIWYG type your name.

  4. Next, Preview and Submit your page just as you did when you created it:

    Click on the Preview Draft button: preview draft

    You may notice a pop-up box at the bottom of the screen letting you know that your draft has been saved.

    pop up draft saved

    You should see a preview of your page, which just has your name on it. 

    A draft is only visible to your account in the CMS. Before you can publish a page, you must Submit Submitting a page will also make it visible to other users in the CMS.

  5. Click on Submit. A dialog box will appear. You can add comments on what you have changed (this is useful if multiple people are working on the same page). Click the white Submit button to Submit your work to the CMS or click Check Content & Submit to have the CMS check your spelling and links first.

    submit button

    For this exercise, you can just click on the white Submit

    You may see a pop-up at the bottom of the page confirming the submission and asking if you want to publish your page. Once you are more comfortable with the CMS, you can use this shortcut. Ignore it for now.

    pop up publish

  6. Publishing is the interface between the CMS and the live site. Changes you make in the CMS can’t be seen outside of the CMS until you publish them.

  7. Click on the Publish button

    publish button

    The publish page dialog box will open. The first time you open this, you may not see the publish setting. Click on View Publish Settings to expand the settings.

     publish setting

    You should now see an expanded dialog box with both Delivery and Staging destinations checked. By default you’ll publish to the Delivery (live) site as well as the staged site. If you just want to publish to the staged site, un-check the Delivery checkbox.

    In this case, we are only publishing to stage. Publishing to stage is useful when you want someone to review your content before making it live. Users will need to be on the UCSD network or using the “Group: 2-Step Secured – allthruucsd” VPN setting to see a page published to stage.

    checked delivery

  8. Uncheck Delivery so you don’t publish your training page live for the whole world to see.

    unchecked delivery

  9. Click the Publish button in the top right:

    A dialog box will appear asking if you want to view the Publish queue. For now, ignore this. This link will take you to a queue of jobs being published from the CMS. You can look to see when your job publishes (individual pages will usually publish quickly, large folders will take more time), but you’ll need to remember to navigate back to the page you’re working on to make any further edits.

    pop up view queue

  10. See your published page.

    In the top right of the screen, click on the three dots and More button.

    More button

  11. Click the very last option: Live. This will open a new window in your browser. The URL will match the file path of your page. You should see a URL that follows the pattern:
    https://sandbox.ucsd.edu/training/yourlastname-yourfirstname/index.html

    If you don't see this pattern, then you have either named your folder or page incorrectly, or you have created them in the wrong place.

    This link should not work. You should see an error in your browser. This is because the 'Live' button in the CMS links to the live page (published to delivery), but you published to stage only. To see your staged page, add stage- in front of sandbox.ucsd.edu in your browser's URL box.

    This creates a URL that follows the pattern:
    https://stage-sandbox.ucsd.edu/training/yourlastname-yourfirstname/index.html

  12. Press enter and you should see a page with your name on it.

    If you don't immediately see your page, try refreshing your browser. If you still don't see it, see "troubleshooting," below.

    As a general rule, you should be publishing to stage, or stage and delivery. There are very few cases where you should publish only to delivery.

    For the rest of this exercise you will publish to stage only.

    Learn more about Publishing

Troubleshooting

If your page isn’t publishing correctly, check that:

  1. Your page is named ‘index’ with no capitalization and no trailing space.
  2. Your folder is named in the format ‘yourlastname-yourfirstname’ with no capitalization or spaces.
  3. Your folder is located inside the ‘training’ folder.

To fix (a) or (b), see the instructions for changing a system name and republish.

To fix (c), you will need to move your folder and then republish.

Add Text and Basic Formatting

You can now create and publish a page. In this section, you will learn how to add and format text in the CMS. Download this text file to use for your page:  

Sandbox Exercise Text (txt file)

The text file has no formatting included in it. This makes it an ideal starting point for adding content to a page.

Be careful copy-pasting from a word processing program into the CMS. Word processors can have hidden formatting that results in extra spacing or text formatting. Don’t paste images into the CMS. We’ll learn how to add an image later.

Writing and formatting text for the Web is different than for print. Expect to edit and reformat text that originally comes from print (Word files, PDF flyers, etc.) or other forms (like presentation slides).

Learn more about  Writing for the Web
  1. Return to your page in the CMS and click on the Edit button.

  2. Scroll down so you can see Middle Blocks section. Under Content to Use, make sure that the button for WYSIWYG is selected. You should see your name from where you previously typed it in.

  3. Delete your name and paste in the text from the Sandbox Exercise Text file.

    You should see the plain text in the WYSIWYG editor now and can now start formatting the text.

  4. First we will give the entire text some basic formatting to make it easier to read (and easier to work with). Select all the text in the WYSIWYG (you can place your cursor in the WYSIWYG text box and use Ctrl+A as a shortcut).

  5. Now, with the text still selected, click on the following menus in the WYSIWYG: Formats > Blocks > Paragraph

    Paragraph formatting

    Note that there is a second option for this, but it takes one more step. If you clicked on Format instead of Formats, you can use Format > Formats > Blocks > Paragraph to achieve the same formatting.

    The text should be now be formatted with padding between each line. Paragraph formatting should be your default when you are working in the CMS. Your text should now look like this:

     Plain text screenshot

    Learn more about the WYSIWYG formatting options.

Let's see how things look so far.

Preview and Submit your page, just as you did before. 

Publish your page to stage. If you need a reminder for this step, take a look at the "Basic CMS Workflow" section, above.

Use More > Live to look at your published page (remember to add stage- before sandbox.ucsd.edu in your browser).

If you don't see your new content on the page, you may need to refresh your browser. Web browsers often keep old versions of pages in their cache so they load more quickly in the future. This is helpful in general, but not when you are checking for updates. Get in the habit of refreshing your published pages after publishing. It may take multiple refreshes to see the change.

You should see the new content on your page. Informative, but it doesn't look very appealing or easy to scan through. Next we'll add in our headings to address that.

Headings

Headings provide important organizational and summary information for users, search engines, and screen readers. They are not just decorative text. 

Every page in the CMS should have exactly one H1 or “Heading 1” line that acts as the title of the page. This heading should concisely describe the page content. The heading acts as the most important keyword or key phrase to improve Search Engine Optimization (SEO).

  1. Select the words “My Web Accessibility Page” and then click on the Format drop-down menu in the WYSIWYG tools area choose Headings and select Heading 1 (also available from upper menu: Format > Formats > Headings > Heading 1):
    Heading 1

    After clicking on Heading 1 you should now see the words “My Web Accessibility Page” formatted something like this:

    After Click

    Headings will automatically create spacing around them. Do not use the enter key to create additional lines of space under a heading. This will create empty heading tags which are bad for search engines and screen readers.

  2. Page titles should be unique in a given site. Since many users will be making a training page, you should distinguish your page from theirs. Change the “My” in the newly formatted title to “Your Name’s.” This will help us know that we are looking at your page. Unique page titles also help produce better search results.

    Note: If you will be editing pages in Blink, the Heading 1 of the page will be automatically generated from the “Title” field. Do not add an additional Heading 1.

  3. Now let’s format the H2 headings that designate the subheadings on the page. These subheadings are important because they improve search results and improve readability by breaking up large blocks of text.

    First, select the words “Importance of Web Accessibility.” Then pop open the drop-down Formats menu in the tools area and select Heading 2

    Heading 2

    It should now look like this:

    After Click Heading 2

  4. Do the same (format as Heading 2) for the lines that have the words:

    Screen Readers
    Additional Benefits
    Resources

  5. Sometimes you will want to create subheadings to further organize your content. Under resources, there are two sub-topics:

    University of California
    Electronic Accessibility in the News

    Select each of these and format them as Heading 3. You should never skip heading levels as this can interfere with search results.

    Headings should be short and clearly introduce the following content. They generally shouldn't be full sentences, and shouldn't be the content itself (for example, a link can be considered page content - a heading could introduce a group of links, but shouldn't be a link itself). Keep this in mind when you are later asked to add your own headings to this page. 

    Learn more about headings

For the remainder of these sections, you can decide if you want to Preview your draft and Submit your changes at the end, or continue working through the next section. You won't be prompted to do this again until the end of the exercise. If you need to take a break, you should Preview and Submit your changes.

Lists


Now we’re going to turn the list of things you can do to help screen readers into a bulleted list.

  1. Make sure you are editing your page and in the Middle Block WYSIWYG where you've been working.

  2. In the WYSIWYG select the text of this list of actions:

    Using headings
    Having informative link text
    Opening links in the same window (i.e. don’t open a new window)
    Including descriptive alt text for images
    Using standardized site organization

    and click on the Bullet list Bullet List icon button in the tools area. This will format the list.

    Your content should now look something like this:

    Format Bullet

    You can also make numbered lists. If you have text that uses numbered items, you should format them as a numbered list (instead of typing the numbers or letters in the text). Using the actual numbered list function helps screen readers interpret the text. This page is using numbered lists throughout the text.

Style Guide

You will often be given text to add to a webpage that was originally formatted for another use (PDF flyer, printed handbook, etc.). You should be aware of the best practices for writing for the web and be able to modify the styling of the text without changing the meaning.

Here is a simple example based on the UC San Diego Style Guide. Our style mostly follows The Associated Press (AP) Stylebook, but includes entries unique to UC San Diego. Follow the style guide to ensure consistent and professional content throughout UC San Diego sites.

Go to the Style Guide (We recommend that you bookmark this page for future reference.)

  1. Make sure you are editing your page and in the Middle Block WYSIWYG where you've been working.

  2. Open the "T" drawer by clicking on it. Go to the entry for “times of day.” Note how the style guide uses “a.m.” and “p.m.” with a space after the numeral. Our current page uses “AM” and “PM” with no space (see the last text on the page).

  3. Edit your page to follow UC San Diego style for times of day. Following the style guide will also prevent these times from appearing in the CMS spell check.

Learn more about Writing for the Web

Links

The ability to link to other content is a crucial ingredient of most web pages. We will review the best practices for links, and the two types of links you can use in the CMS.

It is important to keep links informative and predictable. Always use text that makes it clear where a link will take the user. Don’t use text like “click here” (it isn’t informative by itself). If a link will take a user to a document instead of another webpage, that link should be marked with the document type. Links should not open in a new window except in very limited circumstances.

Links should behave predictably across UC San Diego websites.

Learn more about Best Practices for Links

There are two kinds of links in the CMS: internal and external.

Internal links are links that go to other resources (usually pages or files) in your CMS site. Normally, if a page is renamed or moved, it will break links to that page (because the location in the CMS is what creates the URL, or web address). If the link is an internal link, the CMS can track these links and repair them when the page gets republished (this is one reason Blink is republished every weekend). Always use internal links for links within your own site.

External links are for links to resources outside of your CMS site.

We’ll start with an internal link to a file.
  1. Make sure you are editing your page and in the Middle Block WYSIWYG where you've been working.

  2. Use your mouse to select the words “Information Technology Accessibility Policy (PDF)” in the “Resources” section (note that we want to include the “(PDF)” in the link text).

  3. While the text is still selected, click on the chain link icon Link icon to pop up the Insert/edit link dialog box:

    The box next to Internal will be checked by default.

  4. Next to Link Source, Click on the Choose File, Page, or Link box to open the file chooser.

    link pop up

  5. Click on Browse

    Now you are going to navigate to and select a file within the CMS.

    You can see your current location from the breadcrumb trail: Sandbox / training / yourlastname-yourfirstname. The breadcrumb trail is made of links to folders in this site. Click on Sandbox to go to the top level of the site.

    browse links

    From here you can scroll down and see the next level of folders in the site. The folder you are in is white (like Sandbox) – this folder is open. Other folders are closed, and are yellow. To open a folder, click on the folder name.

  6. Open the folder named ‘_files’ by clicking on the folder name.

    link files

  7. There are multiple files in this folder, but we want the one named ‘policy.pdf’ Click on the radio button next to ‘policy.pdf’ to select it.

    link pdf

  8. Click Choose in the upper right corner.

  9. You will return to the Insert/edit link window. Click OK

  10. You will see that the text for ‘Information Technology Accessibility Policy (PDF)’ is a light blue and if you hover your mouse over it, it will become underlined. You have added the link!

    Learn more about the File Chooser

    This example was a link to a file. You can also create an internal link to another page.

  11. Add an internal link to the campus CMS page in the Sandbox site. Follow the steps above with the following differences:

  12. Find the text “campus CMS” on your page (you can use ctrl+f in most browsers). Highlight it and click the link button to open the file chooser. This time, navigate to the page Sandbox/cms/index and add the link. Click Choose.

    click choose

Now we’ll add two kinds of external links.

  1. First, let’s create an email link. Select the text “wts@ucsd.edu” towards the end of the text content.

  2. Click on the chain link icon and click the external link checkbox. Type “mailto:wts@ucsd.edu” into the Link field (remove the pre-filled https://).

    Make sure you include ‘mailto:’ for email links.

  3. Click the OK button. You’ll see the email address has automatically formatted as a link.

    external link

  4. Now we'll create links to External pages. Select the words “Web Content Accessibility Guidelines (WCAG) 2.0” in the third paragraph and then click on the chain link icon  to pop up the insert link dialog box.

  5. Click the checkbox next to “External.”

  6. In the Link field, type or copy-paste the URL: https://www.w3.org/TR/2008/REC-WCAG20-20081211/ (replace the pre-filled https://)

    Note: If you copy and paste a link from a Word or similar document, be sure to double check for (and remove) any hidden spaces at the beginning or end of the link. They will break the link.

  7. Click OK to finish the link.

    click ok

  8. Repeat this process for the following text and links:

    “screen reader in use”  https://www.youtube.com/watch?v=q_ATY9gimOM

    “UCOP Electronic Accessibility” https://www.ucop.edu/electronic-accessibility/

  9. Sometimes you’ll have text that is a URL. Generally, these should be converted into link text that can be easily ready by a human. This also makes them easier to scan and easier for screen reader users to listen to. It is much easier to read and hear something like “New York Times article” than “https://www.nytimes.com/2017/10/11/nyregion/college-websites-disabled.html.”

    In the WYSIWYG, select the text https://www.nytimes.com/2017/10/11/nyregion/college-websites-disabled.html

  10. Copy the link text (Ctrl-C)

  11. With the text still selected (you may need to select it again), click on the chain link icon to pop up the insert link dialog box.

  12. Click the checkbox next to “External.” Paste the copied URL into the Link field.

    Paste copied URL into link field

  13. The Text to Display field also has the URL. Edit this field to a readable phrase that lets the user know where the link is leading to. This could be the article title, or a short description. Do not use any variations of ‘click here.’ ‘Click here’ is not informative and it is not accessible.

    text to display

  14. Click OK to finish the link.

  15. Double check that the link text is readable and not a URL.

  16. Repeat this process for https://www.d.umn.edu/~lcarlson/atteam/lawsuits.html

Learn more about links in the CMS

Image

Now we’ll add an image to your page. Images are great for setting the mood for your text content. It is important that images are set up properly so screen readers and search engines know how to interpret them. 

  1. Make sure you are editing your page and in the Middle Block WYSIWYG where you've been working.

  2. Position your cursor just after the text: Importance of Web Accessibility and click on the Insert/Edit Image icon edit image buttonin the tools area.

    Where you place your cursor is where the image will be placed. You should see the insert/edit image dialog box:

    Choose file

  3. Next to Image Source, click on the Choose File button to open the file chooser (just like for other internal links). You can choose a recently viewed image, or a starred image (if you previously starred one), or browse to an image, or upload an image.

    Learn more about these options for the File Chooser
  4. For this exercise, click on the Browse tab.

  5. In the breadcrumbs list ( Sandbox / training /yourlastname-yourfirstname ) click on Sandbox to navigate to the root folder.

    browse sandbox

  6. Open the _images folder and find the “library-doors.jpg” image.  Select the image by clicking on the radio button.

    library doors

  7. Click on the Choose button.

  8. You should now be back at the dialog box. Type the words “Geisel Library entrance” into the Image description field. You must always add an image description for accessibility reasons.

    image description

  9. Now click the Ok button.

  10. You should now see the image in the WYSIWYG, but we still need to make sure the text flows around it properly. Click on the image in the WYSIWYG to select it.

  11. Click the Insert/Edit Image icon edit image button

  12. In the bottom of the dialog box, under Styling, CSS Classes, select Right. Click Ok. The image will now be positioned to the right of the text.

    right style

    In this exercise we are not covering how to add images that aren't already in the CMS. See our documentation on Blink to learn how to do this.

Learn more about Working with Images

Module

Modules are pre-formatted blocks that you can add to a page to help direct a user's attention.

Somewhat like an image, modules are items that are separate from pages, but can be added to a page. A single module (or image) can be used by multiple pages. Unlike images, modules are designed in the CMS. For this exercise, we will add a pre-existing module to your page.

To learn more about modules, including the different types and how to create them, see Module Best Practices.

 

  1. Make sure you are editing your page.

    Modules don’t get added to the WYSIWYG like images do. Instead, each module needs to be in a separate block. So far, you have been adding content to a single Middle Block. Now let’s add a second Middle Block.

  2. Scroll until you can see the section called Middle Blocks. Add a new Middle Blocks section by clicking the green + to the right of Middle Blocks.
    plus middle block

    After you add the Middle Blocks section, some new information will appear next to the green + . You can see that there are two Middle Blocks and you can use the arrows to reorder them, or the red X to remove a Middle Block. Mouse over any additional icons to learn what they do. You should also see options to "drag" and "move to the bottom"

     reorder blocks 

  3. Scroll down to the second Middle Blocks section (where the WYSIWYG is empty).

    empty block
    Note: You should also see a "2/2" to the left of the words "Middle Blocks." This will help you navigate the page.

  4. Under Content to Use: select Shared Block.

    shared block

  5. The WYSIWYG is now replaced with a file chooser. Use the File chooser to select the shared block located at “_modules/top-tips-cta”

    top tips cta

    This works just like navigating to an internal link. Go to the Browse tab. Click on “Sandbox” in the breadcrumbs to get to the top folder of the site. Then click on the _modules folder. Then click on top-tips-cta. Then click Choose.

    Learn more about the File Chooser
  6. Preview your page and scroll down to the bottom and see what the module you added looks like.

  7. Submit your changes to the CMS.

Finishing Touches

Now that you can see how your page looks, you should see if there are any improvements you can make so the page content is easier to scan. Find where you can add the following (these are not marked in the jane-doe example page, you need to use your judgement):

  • Two places where a subheading would be useful (you may need add new text or reword existing text to make good headings)
  • Two places where a bulleted list would be helpful

Once you have made these changes, publish your page to stage again.

Submit Your Training Exercise for Review

Complete the training exercise review form to request a review of your training page. 

Your CMS training is not complete until we review your page and confirm your new CMS access.

Questions?

Contact wts@ucsd.edu