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 1Homepage 2Top Level TemplatesTop level pages push visitors to sub-sections, so these are link and visual heavy, with some space for written content. Top Level 1Top Level 2Section Page TemplatesA balance between written content and visual impact is the main benefit of a section page. Section Page 1Section Page 2Section Page 3Section Page 4Landing 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 1Landing Page 2Landing 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 a page type built using multiple “paragraphs”. Each paragraph is pre-designed with different designs and functions; a landing page is built by stacking multiple paragraphs on the page. Visit the Paragraphs by Type page to learn more about different paragraphs and to see them in action.
On this page
Table of Contents |
---|
Expand | ||
---|---|---|
| ||
Use the admin menu to navigate to “Content → Add Content → Landing Page” to create a new landing page. A few notes:
Restricted paragraphs There are some paragraphs 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 paragraphs:
|
Expand | ||
---|---|---|
| ||
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:
Roles and what they can doThere are three main roles:
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:
Sites without these roles have only content managers who can both draft and publish. Content states and what they meanWhen 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:
*When a page is in Review, the editor cannot edit it; it must be rejected by an approver first. Workflow for Content ManagersContent managers can edit and publish pages as needed. Common ScenariosYou'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 updatingYou 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 EditorsWhen 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 ScenariosYou have content ready for reviewYou'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 editedYou 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 updatesYou 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 updatingEither 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 ApproversApprovers 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 ScenariosYou 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 publishingYour 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 updatingYou 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. |
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. 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 clicking save. |
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. |