Menu
ITS Online»Livewhale CMS Training

LiveWhale CMS Training Course

The Penn Carey Law web site is hosted in the LiveWhale Content Management System (CMS). This system makes editing the site easy as it allows content providers the ability to make page edits directly in your web browser. 

Although the CMS is very user friendly, it does require training to understand how the basic as well as advanced features work. All staff who require editing access to the web site must complete all modules in the CMS training course below before being granted access. IT Partners can request access on behalf of new users once training is complete.

ITS/Communications will also be holding monthly live sessions (over Teams) for additional training, questions/problems, and help updating your site. Please signup for a session on the Livewhale Q&A bookings page here.  Based on demand, we may add additional sessions as needed.

We understand that some users may already have advanced experience with LiveWhale. For these users, please make sure you complete the sections labeled ** as they indicate new functionality and information.

How to Login/Navigate the Dashboard

Video length: 0:58 | Click on the ↗ arrow on bottom right to view larger

Important Takeaways:

  • To login to LiveWhale, click the Site Login button at the bottom of any page or go to https://www.law.upenn.edu/livewhale. Login with your PennKey.
  • Groups are CMS modules based on your department at the Law School and you will be added to one or more CMS groups based on your web provider responsibilities.
  • Your default group will show up on the top right corner of the LiveWhale CMS toolbar or under the Content menu item, click on the group to switch to a different one if you have access to multiple groups.
  • If you only see an Events tab after you log in, or cannot switch to a specific group, email itsweb@law.upenn.edu
  • Click the blue dashboard button on the top right corner to manage events, stories, blurbs, profiles, files and images within your group.
  • On the dashboard, the blue button turns into the Go to Site button, which goes to the landing page of your group’s site.
  • View LiveWhale documentation

 

Back to Top


 

How to Edit a Page

Video length: 1:22 | Click on the ↗ arrow on bottom right to view larger

Important Takeaways:

  • Click on the Edit Page button on the top left corner of the page and then click inside the body of the page to activate the Edit toolbar.
  • The Edit toolbar is similar to a word ribbon, simply start typing within and use the formatting features as needed to update text formats.
  • Headers are under the Paragraph dropdown on the edit toolbar. Follow the correct hierarchy: Header 2 should be the first heading on the page, with header 3 as the subheading that belongs to that section etc.
  • To create a header, add your heading text and select the header type on the Paragraph dropdown. Make sure to hit enter to create a new paragraph once the header has been created.
  • Once you have made changes to the page, you can either Publish the page or choose to Save a draft of the page to keep working on content without make it visible to everyone.
  • On pages with drafts, clicking on Edit Page will allow you to choose to edit the live page, edit the draft or cancel the draft. Once you’re done editing the draft and want to make it live, click on Save and Publish.
  • li>Delete an attached draft (delete it and remove it from the Edit option fully) on a page by clicking on cancel the current draft in the pop up box. This is not recoverable, so make sure you only do so when you’re sure.


cancel current draft

  • Share drafts with your colleagues by clicking on the draft link at the bottom of the main page (Show draft preview in new window) and copy the url.
  • View LiveWhale documentation

Best Practices

  • Headers help search engines find and catalogue your page’s content. For best SEO practices, use headers in descending order.

Back to Top

Adding Images

Video length: 1:07 | Click on the ↗ arrow on bottom right to view larger

Important Takeaways:

  • To add a picture, make sure you are in the correct group and then click on the Insert Image icon on the toolbar. You can either search for a previously uploaded image in your group or shared images, or upload a new image to the group. Please make sure all images are at least 600px in width and height.

    Note: All official faculty profile images are set as shared. If you need to use a faculty image on a page, event or story, please use the Shared by other groups right dropdown menu option on the image embed window and search for the faculty name instead of uploading a new version in your own group.
  • Once an image is selected, you can change it’s dimensions to anything lower than its original size, crop the image, choose your image alignment and text wrap and add a caption.
  • A caption is required for accessibility. You can choose for it to be displayed on the page or not.
  • You can edit the inserted image by double clicking on it, or delete it by selecting it and hitting Delete on your keyboard.
  • If you are replacing an existing image, be sure to locate the image in the Image Library and select the replace option (see details below in the Image Library section). 
  • Check the Image library section on this page to learn how to set up and insert image  Galleries.
  • View LiveWhale documentation

Best Practices

  • Images that are not 600px wide will “fail” our quality checks and we’ll reach out to you to discuss a replacement image. Plus, images that have poor quality have much higher bounce rates, or a high rate of page exits in a short of amount of time.

Back to Top

Adding Links

Video length: 2:16 | Click on the ↗ arrow on bottom right to view larger

Important Takeaways:

  • To add a link, select the text you would like to link from and click on the chain icon on the toolbar. (For accessibility, avoid using words like click here or single words, the link text should be as descriptive as possible). Select your link option (external url, page in the CMS, email link, etc.)
  • To delete a link, click your cursor within the link text and then click the broken chain icon.
  • Link to a Page
    • The best option for any page links are the Link to an Outside URL option, paste the full link and uncheck the new window option if it’s a Penn Carey Law page, and check it if it’s an external webpage.
  • Link to Files
    • Other kinds of links you might want to commonly use are link to an email address and Link to one of your Files.
    • Click on choose a file and either search for the file you want to link to or upload a new file. Please note, no secure information should be uploaded to the CMS since all files can be indexed by google. However, you can add a layer of security to files by tagging them with Private-Lawonly, see the Files library section below.
  • Link to a Section within the Same Page (Anchor links)
    • Add anchor links within a page (linking to sections within the same page) by putting your cursor above the section users will jump to, add an anchor tag (the bookmark icon) and type in an ID (no spaces, no numbers as the first character).
    • Select the words you want to turn into the anchor link and select the Link to an anchor on this page option.
    • Anchors show up on the page url when clicked and can be used to distribute links that point to specific page content, without creating new pages with just that content.
    • Anchor links can not link within accordion items, they can only link to visible text sections. 

Back to Top

Adding/Editing Accordions (show/hide drawers)

Video length: 0:52 | Click on the ↗ arrow on bottom right to view larger

Important Takeaways:

  • Click on Insert and then Accordion List on the Edit toolbar to create accordion style show/hide drawers.
  • Click Tab to add new Header and Content rows (the Header rows will be the clickable text boxes that expand to show the larger Content below).
  • Right click and select Row and Add new row twice to insert a new Header and Content row in the middle of an existing list.
  • Right click and select Delete Row twice to delete an existing Header and Content row set.

Back to Top

Adding/Editing Content Layouts

Video length: 2:23 | Click on the ↗ arrow on bottom right to view larger

Important Takeaways:

  • Content Layouts are content display options that are added to a page directly and allow images and short amounts of text to be displayed in specific predesigned formats.
  • Different content layouts might be available for different page templates.
  • Check with Comms/ITS if you have any questions about usability, best practices and other concerns.
  • To add a new Content Layout type, go to Insert and then Content Layout on the Edit toolbar, select the desired option from the dropdown and click Insert.
  • Click inside any editable areas and either add an image, a heading, or text within the content layout area to populate it.
  • To delete a content layout item, click within the content layout and hit delete, or place your cursor after the content layout item and hit backspace.
  • All images uploaded for content layouts should be ideally 600px in width and height to fit different content layout options.

Back to Top


How to Manage Events

Video length: 1:25 | Click on the ↗ arrow on bottom right to view larger

Important Takeaways:

  • Events in groups show up on the public Penn Carey Law calendar and on some group pages based on tags or categories (when an event widget has been added).
  • Go to the Events tab on the dashboard and click on Add New to create an event.
  • The required fields are: title, date and time, category and contact information.
  • Add a short summary and description to make it more robust.
  • Create a repeating event series by clicking on Repeat event after you add the date and time so you can edit all events in a series together if needed.
  • Keep the event hidden with the Hidden status and publish it by switching to Live.
  • Preview any event page by clicking on Preview link on the event list page.
  • Tagging notes:
    • Pending event tag: The Pending Event tag adds an event to the planning calendar as a tentative event and keeps it off of the main Penn Carey Law calendar. (The Planning calendar is used by the Penn Carey Law Events group (PLEM)).
    • Offcampus tag: The Offcampus tag keeps an event off of the main Penn Carey Law calendar but it can be configured to appear on group sites as needed. 
    • Special Calendar Event Tags and Categories
  • View LiveWhale documentation

Back to Top

Managing RSVPs

Video length: 1:03 | Click on the ↗ arrow on bottom right to view larger

Important Takeaways:

  • To add an RSVP to an event, scroll down and check the RSVP option. This will allow you to add a form that asks for name, email, number of guests, and optional class, phone number and comments.
  • If you need to ask a brief question, you can add it in the Special instructions box
  • You can limit RSVPs by entering a number in maximum RSVP section, and enable waitlist for people beyond that number. Once RSVP and waitlist number quotas have been met, the RSVP form will disappear from the event page.
  • In order to check your event RSVPs, go to the RSVP link under the Events tab title and click on your event name.
  • View LiveWhale documentation

Back to Top


How to Manage Stories/News

Video length: 1:24 | Click on the ↗ arrow on bottom right to view larger

Important Takeaways:

  • Stories/news items show up on pages based on their tags and on how widgets are configured. There is no central page for all Penn Carey Law stories. Comms/ITS will work with you to determine where your group’s stories appear, how they’ll be displayed and which tags need to be used.
  • To create a story, go to the Stories tab on the dashboard and click on Add New
  • The required fields are title and either a full description or a story link, with optional thumbnail images and relevant tags.
  • The story description field has a text editor similar to pages where you can enter and format all of your text.
  • If the story headline is meant to link to an existing story or external webpage, click on the Link to another page option and enter the URL in the URL for news story text box.
  • You can keep the story hidden as long as you need to, and when you are ready to make it live, switch it from Hidden to Live
  • You can always preview your story by clicking on Preview link on the story list page.
  • View LiveWhale documentation

Best Practices

  • Stories are a great CMS function to use in conjunction with marketing strategies. If you are including stories in your digital outreach Comms recommends these best practices:
    • Use a strong “Call to Action” at the bottom of each story to keep users engaged and exploring the website.
    • For best SEO results, ensure that your title/headline aligns closely with the subject matter and that your header tags (<h1> <h2> etc) are used in descending order.
    • See Communications’ SEO best practices and policies for additional information.

Back to Top


How to Manage Profiles

Video length: 1:22 | Click on the ↗ arrow on bottom right to view larger

Important Takeaways:

  • Profiles are customizable data types for people or things. They usually contain an image alongside names and other identifying information. An example is the TPIC Alumni Profiles.
  • Profiles populate on pages based on groups and tags, Comms/ITS will work with you to set them up.
  • In order to edit or create new profiles, click on the Profile tab and then select the Profile type you need to add to.
  • The only required field is name but keep all content consistent across profiles within a specific profile type and add thumbnails, tags, and other content as needed.
  • Keep a profile Hidden while editing, and switch to Live to make it public.
  • View LiveWhale documentation

Back to Top


How to Manage Blurbs

Video length: 0:55 | Click on the ↗ arrow on bottom right to view larger

Important Takeaways:

  • Blurbs are bits of content that don’t fit within news, events or profiles content types.
  • They are specifically customized across groups for specific functions including FAQs, Announcements, Featured Videos and Testimonials.
  • All blurbs have precise preset formats, ITS will set them up for your group if they aren’t enabled already.
  • Click on the Blurbs tab on the dashboard, select a Blurb type to enter and start editing.
  • Make sure to follow the instructions within each blurb type very closely.
  • Keep a blurb Hidden to work on it and switch it to Live and hit Save when done.
  • Blurbs with preformatted front end components (Announcements Slider, Featured Video, Video Gallery) will have embed options under Insert > Widgets that can be added by all users.
  • View LiveWhale documentation

Sample Blurb Types:

FAQ blurb type

  • Tabbed FAQs with custom tags that create the Tab names and sub topics
    FAQs

Announcements blurb type

  • Text sliders with headings and body. These were designed to be a location for information that changes frequently or is a one-off announcement.
    Announcements

Featured Videos blurb type

  • Video galleries with captions set up with video IDs and headings 
    Featured Videos

Testimonials blurb type

  • Large quote sliders with quote headings and attribute body
    Testimonials

Back to Top


Image Library and Galleries

Video length: 2:09 | Click on the ↗ arrow on bottom right to view larger

Important Takeaways:

  • The Images tab (located on the dashboard) is the image repository for the group and contains all images uploaded on the back end or front end pages within the group.
  • All images should ideally be at least 600px in width and height for general content, and at least 800px by 600px for galleries/slideshows, and have a caption.
  • Create collections to easily view related images in group.
  • Create galleries to share images from a specific event or topic publicly.
    • Make sure to add captions on all images within the gallery and select a Cover image
    • No separate widget is needed to insert a gallery on a page, select Slideshow from the Insert dropdown menu to add a saved inline gallery.
  • Bulk add images with shared names, captions and tags.
  • Update existing images with the Replace this with a new file from your computer button instead of deleting or creating extra copies.
  • View LiveWhale documentation

Back to Top


Files Library

Video length: 2:10 | Click on the ↗ arrow on bottom right to view larger

Important Takeaways:

  • The Files library (Click Toolbox then Files) is the files repository for the group and contains all files uploaded on the back end or front end pages within the group.
  • Do not upload files that have sensitive data.
  • PennKey protect all files with any level of identifying information by adding the Private-Lawonly tag.
  • The Private-Lawonly tag will enforce a PennKey login even on direct file links.
  • Bulk add files with shared names, and tags.
  • Update existing files with the Replace this with a new file from your computer button instead of deleting or creating extra copies.
  • Be sure your files (especially PDFs) meet accessibility standards
  • View LiveWhale documentation

Back to Top


Password Protecting Pages/Files with PennKey

  • By default, all pages and files on the web site are publicly available.
  • Sensitive information should never be posted on the CMS and should instead be hosted on secured applications such as SharePoint. 
  • However, pages and files that are not sensitive, but you would prefer to limit access to Penn Carey Law users, can be configured to require a PennKey login.  

Protecting Pages: 

  • All PennKey locked pages have lawonly in the page url
    (example: https://www.law.upenn.edu/admissions/financing/continuing/lawonly/).
  • Pages can also be Hidden with the hidden status, which will allow only CMS users to view the page, but that will not make it available to PennKey users at large.
  • Alumni cannot access PennKey locked pages with their personal PennKey credentials since they are not counted as active Penn community members.
  • If you would like to password protect pages, contact itsweb@law.upenn.edu.

Protecting Files:

  • By default, all files are publicly available.
  • To password protect a file, add the tag Private-LawOnly to the file.
  • Files linked from password protected pages are not automatically secured as public users could access them if they knew the direct link or if the files were indexed by Google.
  • All files with any identifying information should be locked with the Private-LawOnly tag.

Back to Top


 

Accessibility & CMS Best Practices

Accessibility

Web accessibility is a shared, continuous responsibility for members of the Penn community involved in the development, creation, publishing, or sharing of digital resources. This includes our website as well as accessible documents such as PDFs as well as digital outreach.

  • Image captions:
    Always add captions in the caption field on images whether you’re adding thumbnails on stories/events/profiles, or adding images to pages. It will be your choice whether you display that caption or not.
  • Links:
    Create links with multiple words and avoid generic link text like “click here” or “learn more”. Make your links descriptive and multi-word.
  • Headings:
    Use headers in numerical order as much as possible
  • Legibility:
    Use text instead of inserting images of flyers/posters as a substitute for descriptions of events to avoid screenreaders missing content.
  • Files:
    Be sure your files (especially PDFs) meet accessibility standards.

CMS

  • Update files and images with new versions:
    Avoid duplication of content by using the Replace this with a new file from your computer button to update an existing image with a new version instead of uploading a new copy separately.
  • File security:
    Sensitive content should not be uploaded to the CMS as files can be easily indexed or shared if the link is public. Any file that is appropriate for the website but requires PennKey based security should have the Private-LawOnly tag added to it.
  • Naming:
    Make it easier for all users in your group to search for and reuse already uploaded content by naming images and files with proper descriptive names.

Helpful Links

Back to Top


Questions? Email websiteupdate@law.upenn.edu

Latest Tips

contact

All student/alumni email addresses will transition from @pennlaw.upenn.edu to @penncareylaw.upenn.edu over two year period

Exams

Important info on preparing your laptop for an Examplify exam.