On this page
| Table of Contents |
|---|
Instructions
| Expand | ||
|---|---|---|
| ||
Video Walkthrough You can check out a video walkthrough that covers adding a homepage, using templates, and the basics of adding and removing blocks. NOTE: the video does not mention adding the H1 Header block as that was a recent update. For those instructions, refer to the H1 Header Block instructions on this page or watch the H1 Header video. What are block based pages?Most of your pages will be modular, or block based. This system allows you to easily create attractive page designs that are accessible and support PSU’s brand identity. Modular pages are built the same way you would build something with legos. You have pre-built pieces that you’ll combine to create the finished product. One piece by itself isn’t enough - you want multiple so it looks finished. In our system, these pieces might be called “blocks”, “paragraphs”, or “widgets”, but they all mean the same thing. What are the benefits of the blocks?Each block was designed to:
*The designs are made to be accessible, but you are still responsible for ensuring your content is accessible. Creating a block based pageTo create a block based page, go to “Content ￫ Add Content ￫ Landing Page”. Required elements of a block-based page: Title and H1 Header BlockThere are two things you need to add to a Landing or Basic page when you first create it:
Title fieldWhen you first add a Landing Page, you’ll see a field for “title” in the top-left corner of the page. Depending on your H1 Header block choices this title may or may not display on the page, but is always important. The default Title field displays in the:
So make sure this title is accurate to the page, but also not too long. H1 Header blockUsing the instructions for Adding a block, you must add an H1 Header block to the top of your page. There are three different H1 Header blocks available:
For all of these blocks, you do not enter text into the block itself. The text is pulled from the Title field. Watch the H1 Header video or refer to the Header Block Update blog post for information on updating pages that are missing the H1 Header block. Be aware that the H1 Header blocks will not display the title text when previewing a page. It will look as if there is no text entered. The page must be saved for the text to display. Adding a block
Each block will have different fields, depending on the block type. The most common ones are:
Blocks with multiple sectionsSome blocks have multiple sections, but not a set number of sections. For these ones, you may need to manually add additional sections, if desired. If you have a block with a variable number of sections, near the bottom of the block will be a button with an option to add more content. For example, it might say “Add CTA Text Block”. This is separate from the paragraph dropdown; it’s a single button. You might need to play around with it a bit to get used to adding different sections and what that does. This is why we suggest previewing before saving, that way you get a chance to test it out. You can also remove sections by clicking the “Remove” button in the top right corner of a particular section, and reorder sections using the crosshairs (just like you do to reorder blocks). Deleting a blockWhen editing your landing page, there is a button in the top-right corner of each block. If the block is collapsed, it will say "Edit". If the block is expanded (to edit), it will sat "Collapse". Click the drop-down arrow on the right side of that button, and choose "Remove". The button will now say "Confirm Removal". Click that. The block is now removed and you can continue editing or save your page. Reordering blocksSometimes, after previewing or saving the page you decide you need the blocks reordered. Use these instructions to do so:
This is difficult when actively editing the blocks, because the edit fields are so large. However, after previewing a landing page, there’s an option in the top right of each block to “Collapse” the block. This closes the editing fields and makes them easier to reorder. Things to think about:
Cloning a pageAfter a page has been saved, you can "clone" it to copy the page. This is helpful if you like the basic style of the page you just made, and want to reuse the same blocks (with new content, of course). To clone a page, just click "Clone" to the right of the "Edit" tab for a page. The page it takes you to will look identical to your current page (that's the point). However, when you save it, it will be a new copy. As such make sure to change the page title before clicking save. Different Block TypesThe main blocks are divided into different categories: H1 Header BlocksH1 Header blocks are required on every page. You must have one H1 Header Block, and it should be at the top of the page. There are three types of header blocks:
Header BlocksThese blocks are our former Header blocks, which have been replaced with the H1 Header blocks (which are more accessible and functional for search engines). These blocks can be used anywhere on a page, depending on how you want the page to appear.
Call To Action BlocksCall to Actions (CTAs) are a specific type of link. They’re meant to have your visitor do something that benefits you. For example: registering, completing a survey, or donating to your program. The Call to Action blocks are:
Link Group BlocksLink Groups are for when you have multiple links to provide, but they’re mostly to direct visitors to additional information or other pages.
Carousel BlocksCarousel blocks allow users to scroll through sections of content within a single block.
Text BlocksText blocks are literally that: a block with a focus on text content. You can add links and images to most of them, but certain things (like tables) should only be added to the Text: 1 Column because of size challenges.
Images and videosYou can add images using the Image Entity Embed and videos using the Video Entity Embed. However, you cannot resize an image or video. As such, you have to upload a custom image for this specific use, and videos will be what they will be. Generally, we recommend using other blocks to add images and videos. It’s just easier, and that way you know they’ll look right on screens of different sizes, since the blocks were built to be responsive. Videos can be added to the Header: Large Hero and Feature: Content with Media blocks. IFramesYou are able to add iframes to text blocks. They're useful for things like embedding Google Calendars and YouTube videos. However, it is your responsibility to ensure the content in the iframe is accessible according to WCAG2.0 Guidelines and PSU Policy. For guidance on that, you can reach out to the IT Accessibility Coordinator. Basic instructions for adding iframes are included here, however there as specific instructions for using iframes to add a Google Calendar. For those instructions, review the Embedding Google Calendars documentation. To embed an iframe, make sure you're editing the text block you want to add it to and click the IFrame button in the editing toolbar (it looks like a world). In the popup, you'll enter the pertinent details of the iframe:
All other sections are optional. The ones listed are the minimum of what you'll need to use an iframe. *You'll want to play around with the height and width (previewing/saving the page) to see what works. Don't forget to resize your screen and view it on a phone to see what happens on different screen sizes. Shared ContentShared content is the news and events that are syndicated throughout pdx.edu. These can be anywhere on a page (not just at the bottom).
Feature BlocksFeature blocks are content highlights, to draw attention to certain information.
*News and Events need to be on your site by subscribing to them through Syndication. You’ll just need to type in the news/event title to select it. Social BlocksThese blocks display recent social media activity. By default, your site is assigned to PSU’s official social media channels. However, your Site Owner can update these if your department has their own.
Custom BlocksCustom blocks are unique blocks that you don't want to overuse. Description
Restricted blocksThere are some blocks that show up as an option to use, but they are tied to a content type not currently activated on any site. As such, you will get an error when trying to add them. Do not use these blocks:
|
| Expand | ||
|---|---|---|
| ||
What are templates?Sometimes it’s challenging to look at a blank page and think about what blocks you want to use. Might even feel overwhelming. As such, you have templates available to use as starting points for your pages. These templates can be modified (adding and removing blocks) to customize, or be used as is. Once a template has been copied, anyone with edit access to your site can edit and update the copied template. The copy of the template can be found on the Content page. You can use the Training Site to see each template in action. Using a templateEditors and content managers can clone a template to make a functional copy for use. They can clone as many as they like, as many times as they like, and anyone can use the cloned copies. To clone a template:
*You can also make modifications to the page now, or after saving. The new page is the same as any other Landing Page you create. The only difference is it has pre-selected blocks you can remove or add to. Do remember, the content in these blocks needs to be updated; you do not want placeholder text and images on your pages. The templatesThe templates are divided between four types, with general intentions for each one. However, you can use the templates as you need/want to; use them in a way that works for your site. Homepage TemplatesYour homepage is your most valuable page, so these are designed to visual impact while providing space for written content. Homepage 1
Homepage 2
Top Level TemplatesTop level pages push visitors to sub-sections, so these are link and visual heavy, with some space for written content. Top Level 1
Top Level 2
Section Page TemplatesA balance between written content and visual impact is the main benefit of a section page. Section Page 1
Section Page 2
Section Page 3
Section Page 4
Landing Page TemplatesText-heavy, a landing page template is for large amounts of written content. But we still want these pages to look attractive and well laid out. Landing Page 1
Landing Page 2
Landing Page 3
|
...
| title | Publishing landing pages |
|---|
What is workflow?
Workflow is a way for sites to have an approval process when adding or updating website content.
All sites have workflow, however it only directly impacts sites with editor/approver roles. Sites with all content managers won't notice workflow so much. Common use cases for sites with editor/approver roles are:
Sites with a single staff member that oversees the site, but multiple student employees who actually update the content.
Sites with shared governance among many departments, but they want to ensure only the content that belongs to each department is being edited by that department.
Roles and what they can do
There are three main roles:
Editor - Drafts changes but cannot publish them; has a symbiotic relationship with the approver role.
Approver - Publishes changes but cannot draft modifications; has a symbiotic relationship to the editor role.
Content Manager - Can both draft and publish changes, but cannot approve content submitted for review.
An editor can only be an editor. However, if an approver needs to also draft new content, they can be a content manager AND approver.
In a site with editor/approver roles:
An editor drafts new content or revisions to existing content, then submits it for review. They cannot publish the content.
The approver then approves the content and publishes it, or returns the content to the editor for revision. They cannot edit the content.
Sites without these roles have only content managers who can both draft and publish.
Content states and what they mean
When drafting new content, you can select which state you want the content to be in. This generally only applies to Landing Pages, but could apply to other content types in the future.
Not every role has access to all the states; what they have access to is dependent on what they can do within their role:
Draft - Unpublished content that can be edited. Only available to Content Managers and Editors.
Review* - Submits a draft for approval. Only available to Editors; Content Managers don’t need this since they can publish their own content.
Published - Will be to external visitors when the site goes live. Only available to Content Managers and Approvers.
Archived - Essentially means to un-publish an existing page so it's no longer publicly visible. Use this if the information on the page is still valuable to keep, or will be reused later. Alternatively, you can delete a page to remove it forever.
*When a page is in Review, the editor cannot edit it; it must be rejected by an approver first.
Workflow for Content Managers
Content managers can edit and publish pages as needed.
Common Scenarios
You're ready to publish a page that's in "Draft"
You've been working on a page and are ready to publish it (or publish the changes you made to it).
Fix: Change the moderation state to "Published".
A published page needs updating
You were reviewing the site and came to the determination that one of the published pages needs updates.
Fix: Change the page's moderation state to "Draft" and make the needed changes. This will not affect the published page until the updates are published. When you're ready for that to happen, change the moderation state to "Published" and the new version will replace the original.
Workflow for Editors
When working on content, it will always change to the "Draft" moderation state. If the page is already published, the "Draft" version can be edited while the last published version is still live to the public. That way you can make updates and get them approved without impacting your site visitors.
Common Scenarios
You have content ready for review
You've edited a page and are ready for your approver to publish it. It's in the "Review" state.
Fix: Tell your publisher in person or over phone/email that you have a page ready for approval. There is no automated notification.
Your approver said they don't have the ability to publish a page you edited
You drafted changes to a page and told your approver it's ready. But they said the system isn't giving them the option to publish it.
Fix: Check the moderation state. If it's in "Draft" your approver cannot publish the page. Change the moderation state to "Review", then ask your approver to check again.
Your approver told you a page you submitted for review needs more updates
You submitted a page to your approver already, but they came back and said it needs more updates.
Fix: If it's still in the "Review" moderation state, change it to "Draft" and make the updates. If it's already in the "Draft" moderation state, go ahead and make the updates. When done, change the state back to "Review" and notify your approver.
A published page needs updating
Either you or your approver was reviewing the site and came to the determination that one of the published pages needs updates.
Fix: Change the page's moderation state to "Draft" and make the needed changes. This will not affect the published page until the updates are published by your approver. When you're ready for that to happen, change the moderation state to "Review" and tell your approver it's ready.
Workflow for Approvers
Approvers can only work with content when they're in the "Review" moderation state.
You can see content and it's moderation state by going to "Content" then clicking on "Moderated Content" (just above the content filtering options on the page). You can only publish pages with a moderation state of "Review".
Common Scenarios
You need to approve content that's still in "Draft"
Your editor has drafted changes to a page and said it's ready for your approval, but the moderation state is still "Draft". So you don't have the ability to publish the page.
Fix: Talk to your editor (in person or through phone/email) and ask them to change the workflow state to "Review".
You need to approve content that's in "Review"
Your editor has drafted changes to a page and said it's ready for your approval. The page looks good so you need to publish it.
Fix: When looking at the page (while logged in to the site) there is a dropdown under "Change to". Select "Published" and click "Apply".
The updates your editor made require revisions before publishing
Your editor has drafted changes to a page and said it's ready for your approval. It's in the "Review" moderation state. The page needs a few updates, though, before publishing.
Fix: When looking at the page (while logged in to the site) there is a dropdown under "Change to". Select "Draft" and click "Apply". Let your editor know they have changes to make; there is no automated notification.
A published page needs updating
You were reviewing your site and realized there's a page that needs updates.
...
Most of your site’s pages will be “Landing Pages”. This is the most customizable page type, built using multiple “paragraph blocks”. Each paragraph block is pre-designed with different layouts and content options. There are, however, pre-formatted page types available to you as well.
...
Table of Contents
...
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
Any content added to a pdx.edu site must be accessible to users with disabilities and follow appropriate legal guidelines. Additional information can be found in PSU’s Digital Accessibility, Digital Privacy, and Copyright policies. |
Landing Pages
Use the admin menu to navigate to “Content ￫ Add Content ￫ Landing Page” to create a new landing page. Visit the Getting Started guide for more detailed instructions on building a landing page.
To edit an existing landing page, navigate to the page you want to edit then select “Edit” from the menu of options near the top of the page.
All landing pages must have the Title field completed and an H1 Header paragraph block added at the top of the page. Adding those should always be your first step in creating a new landing page.
Add new paragraph blocks by choosing the paragraph block you want from the Paragraph type dropdown, then selecting Add Paragraph. Reference our sample paragraph blocks.
Not all paragraph blocks use the same fields; some have image options while others allow for text and links. Use the paragraph blocks that meet your style and content needs.
Different paragraph blocks have different requirements; you must complete all required fields to save or preview a page.
Some paragraph blocks have multiple sections that can be added. For those, an additional button will appear that allows you to add more sections; some paragraph blocks have a required number of sections you must add to save the page.
Reorder paragraph blocks by selecting and dragging the crosshairs to the left of each paragraph block.
Delete paragraph blocks by selecting the drop-down arrow to the right of the paragraph block (next to where it says Collapse or Edit and choosing Remove). Confirm your choice.
| Expand | ||
|---|---|---|
| ||
There are some paragraph blocks that show up as an option to use, but they are tied to a content type that might not be active on your site. As such, you will get an error when trying to add them. Unless told otherwise, do not use these paragraph blocks:
|
| Expand | ||
|---|---|---|
| ||
After a page has been saved, you can "clone" it to copy the page. This is helpful if you like the basic style of the page you just made, and want to reuse the same blocks (with new content, of course). To clone a page, select "Clone" to the right of the "Edit" tab for a page. You will only have access to this option after a page is saved. The page it takes you to will look identical to your current page. However, when you save it, it will be a new copy. As such make sure to change the page title before selecting save. |
Page Statuses and What They mean
Landing pages have different statuses, which impact who can view and interact with these pages. Additionally, you will have different publishing abilities depending on your role in your site:
Content Manager - Drafts and publishes page updates. Can also approve content submitted for review.
Editor - Drafts changes and submits them for review by a Content Manager.
Current page status | Content Managers can change it to… | Editors can change it to… | Publicly visible |
|---|---|---|---|
Draft |
|
| No |
Review |
|
| No |
Published |
| Yes | |
Archived |
|
| No |
| Anchor | ||||
|---|---|---|---|---|
|
| Anchor | ||||
|---|---|---|---|---|
|
| Expand | ||
|---|---|---|
| ||
You have content ready for review You've edited a page and are ready for your Content Manager to publish it. It's in the "Review" state. Fix: Tell your Content Manager in person, via chat, or over the phone/email that you have a page ready for approval. There is no automated notification. Your Content Manager said they don't have the ability to publish a page you edited You drafted changes to a page and told your Content Manager it was ready, but they said the system isn't giving them the option to publish it. Fix: Check the moderation state. If it's in "Draft" your Content Manager cannot publish the page. Change the moderation state to "Review", then ask your Content Manager to check again. Your Content Manager told you a page you submitted for review needs more updates You submitted a page to your Content Manager already, but they came back and said it needs more updates. Fix: If it's still in the "Review" moderation state, change it to "Draft" and make the updates. If it's already in the "Draft" moderation state, go ahead and make the updates. When done, change the state back to "Review" and notify your Content Manager. A published page needs updating Either you or your approver was reviewing the site and came to the determination that one of the published pages needs updates. Fix: Change the page's moderation state to "Draft" and make the needed changes. This will not affect the published page until the updates are published by your approver. When you're ready for that to happen, change the moderation state to "Review" and tell your approver it's ready. |
| Expand | ||
|---|---|---|
| ||
You need to approve content that's still in "Draft" Your editor has drafted changes to a page and said it's ready for your approval, but the moderation state is still "Draft". So you don't have the ability to publish the page. Fix: Talk to your editor (in person or through phone/email/chat) and ask them to change the workflow state to "Review". You need to approve content that's in "Review" Your editor has drafted changes to a page and said it's ready for your approval. The page looks good so you need to publish it. Fix: When looking at the page (while logged in to the site) there is a dropdown under "Change to". Choose "Published" and select "Apply". The updates your editor made require revisions before publishing Your editor has drafted changes to a page and said it's ready for your approval. It's in the "Review" moderation state. The page needs a few updates, though, before publishing. Fix: When looking at the page (while logged in to the site) there is a dropdown under "Change to". Choose "Draft" then select "Apply". Let your editor know they have changes to make; there is no automated notification. A published page needs updating You were reviewing your site and realized there's a page that needs updates. Fix: Tell your editor about the needed updates so they can make them. You will need to approve the changes after the updates are made. |
Pre-Formatted Pages
Not all pages are landing pages; there are some special content types that are fully templated. Not everyone has access to all these content types; if there is one you think would suit your purposes, submit a support request.
Contact Page
Only editable by the Site Owner for a given site. If you are the Site Owner, use the Contact Page instructions for further guidance.
Department Listing
Available on all sites. If you have a group of departments under your site, you can use the automatically generated “departments” page to list them in a pre-structured format.
The URL for the page is pdx.edu/SITE/departments (replace SITE with your site’s URL).
| Expand | ||
|---|---|---|
| ||
The page is automatically completed with department content types. Use these instructions to make a department:
|
Blog Pages
Available by request. A blog page looks similar to a new article, but where a news article can be built in syndication and imported to one or more sites, a blog is built directly on a site and cannot be shared between sites. Additionally, blog articles will not display in your news listing.
The URL for the page is pdx.edu/SITE/blog (replace SITE with your site’s URL).
| Expand | ||
|---|---|---|
| ||
Step 1: Make a blog taxonomyThe blog taxonomy is the list of terms (tags) visitors use to filter your blog articles. Follow these instructions to create new taxonomy terms:
Step 2: Make a blog article
|
Campus Building Page
Available by request. A campus building page is a templated content type that should only be built on the Buildings Site. On that site, building pages can be searched and filtered using taxonomy terms to help interested parties find the information they need to help them navigate PSU and its physical spaces.
The URL for the page is pdx.edu/web-training/campus-buildings (replace SITE with your site’s URL).
| Expand | ||
|---|---|---|
| ||
There are two main steps to making a campus building page: building the taxonomy and making the page. Step 1: Apply campus building taxonomyTaxonomy is the list of terms (tags) visitors use to filter your campus building pages. There are two taxonomies used for the campus buildings pages: Facility Features and Department. Follow these instructions to create new taxonomy terms:
Step 2: Make the campus buildings page
Form FieldsName: The actual name of the building. There is a separate section for the building code, so this should be the actual name (such as "Richard and Maurine Neuberger Center"). Address: This appears above the map. Hint: This displays the exact text you enter, so plan ahead of time how you want addresses to appear (just street address vs. street, city vs street, city, state, etc). Image: Select Add Media to select an image to add. Review the images documentation for more information. Building Location: In the Enter a location text box, start typing an address. Keep typing until the correct one appears, then select that address. About the Building: This is a basic text entry field with "About the Building" as a visible title. Plan ahead of time what kind of content you want in this area. Building Occupants: This is a basic text entry field with "Building Occupants" as a visible title. The planned design just listed occupants with each one linked to the department's site. It will likely duplicate the Campus Building - Department taxonomy for this page. Building Features: This is a basic text entry field with "Building Features" as a visible title. The content will be similar to the Campus Building - Facility Features taxonomy for this page. Plan ahead of time what kind of content you want in this area and how descriptive you would like to be. Building Maps: These are PDFs of floorplans and other relevant internal maps. You can add more than one (once you add one, the option to add another appears). Hint: The title of the uploaded document is what displays for visitors. As such, you want to make sure the title of the uploaded document is user-friendly (i.e. Floorplan-SMSU is better than SMSU-All Plans_6). Building Details: This is a basic text entry field with "Building Details" as a visible title. Plan ahead of time what kind of content you want in this area. Building Code: The actual building code (i.e. RMNC). This is used in the search and filtering area; it is not visible on the page itself. Department: This pulls from the Campus Building - Department taxonomy. Start typing a taxonomy term (it has to have already been made), and a list of options will appear. This does not actually display on the page itself, it's only used in search and filtering. Facility Features: This pulls from the Campus Building - Facility Features taxonomy. Start typing a taxonomy term (it has to have already been made), and a list of options will appear. This does not actually display on the page itself, it's only used in search and filtering. |
Gallery Page
Available by request. A gallery is a grouping of items that all have something in common. Each site can have a single overarching gallery, in which there are multiple groups. Each group then has multiple items within the group. When determining your gallery, it’s important to consider how you plan to group your items since the groupings have to stay consistent on your site.
The URL for the page is pdx.edu/SITE/gallery (replace SITE with your site’s URL).
| Expand | ||
|---|---|---|
| ||
Planning is the most important step when creating your gallery. As such, your first step is to determine your grouping strategy. For that, it’s easier to work backward. Ask yourself: What kind of items am I going to group? For example:
Once you know what kind of items you want to group, you’ll need to figure out how you plan to group them. Ask yourself: What’s the most logical way for my items to be grouped? For example:
If you’re not sure how to plan this, feel free to reach out to the Web Communications team for strategy suggestions. Keep in mind, though, that each gallery needs more than one group, and each group needs more than one item. Ideally, you would have a minimum of 20 items to group in your gallery. Once you have a planned strategy and know what kind of items you want to group, follow these instructions to create your gallery. |
| Expand | ||
|---|---|---|
| ||
Only Specialty Content Managers can make Gallery and Portfolio content. The Web Communications Team works directly with sites to establish this content type; if you're interested in establishing a gallery on your site, please reach out to help-webteam@pdx.edu so we can discuss if this is a good solution for your content. After making arrangements with the Web Communications Team, your Site Owner can change the title of the gallery page, which can be viewed at pdx.edu/site-name/gallery. Please note: this does not change the URL of the Gallery page, just the title that displays at the top of the page. |
| Expand | ||
|---|---|---|
| ||
Since each item is associated with its respective group, you have to make your groups before you make your items. To make your group:
|
| Expand | ||
|---|---|---|
| ||
After your group has been created, you can start creating items to add to that group. To create an item:
|
| Expand | ||
|---|---|---|
| ||
Each item should have one or more tags associated with it. This is separate from the groups in that these tags are topical and used to help visitors find projects from different groups that have similar topics. This is an area where you’ll want to consider strategy. Tags should not be so granular in topic that only one or two items will apply to them. Rather, you’ll want general tags that many items can be associated with. Suggestions for terms include: “Piano”, “Mixed Media”, “Award Winners”, or “Senior Projects”. To view existing terms and create a new one:
|
Items for Sale
Available by request. An item-for-sale page is a templated content type that allows you to build a database of different products for sale that can be searched and filtered using taxonomy terms. This content type was made explicitly for the Surplus site.
The URL for the page is pdx.edu/SITE/items-for-sale (replace SITE with your site’s URL).
| Expand | ||
|---|---|---|
| ||
There are two main steps to making an item for sale page: building the taxonomy and making the page. Step 1: Apply item for sale taxonomyTaxonomy is the list of terms (tags) visitors use to filter your item for sale pages. Follow these instructions to create new taxonomy terms:
Step 2: Make the item for sale page
Form Fields
|
Related Support Content
| Filter by label (Content by label) | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|