Landing pages

On this page

Instructions

Block pages

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:

Follow accessibility guidelines to support all
visitors to pdx.edu*
Be mobile-responsive so they can look great
on every screen size
Follow PSU’s brand identity guidelines to ensure
a cohesive experience for visitors, no matter
where they are in pdx.edu

*The designs are made to be accessible, but you are still responsible for ensuring your content is accessible.

Creating a block based page

To create a block based page, go to “Content ￫ Add Content ￫ Landing Page”.

Required elements of a block-based page: Title and H1 Header Block

There are two things you need to add to a Landing or Basic page when you first create it:

You must enter the page title into the "Title" field.
You must add an H1 Header block to the top of the page.

Title field

When 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:

Page breadcrumbs
Browser tab title
Google search results

So make sure this title is accurate to the page, but also not too long.

H1 Header block

Using 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:

H1 Header: Page Title
- This is the most common option. This block displays the text written in the "Title" field, formatted as a visible page title.
H1 Header: Large Hero
- Commonly used for top-level pages (such as your homepage), this block displays the text written in the "Title" field, formatted as a visible page title set on top of a large hero image.
H1 Header: Hidden (limit use)
- This block uses the text in the "Title" field as the Heading 1 (page title), but it's invisible. This block must be used sparingly. The most common use case is when you're using the Header: Large Hero block to display multiple slides (such as we do on the http://pdx.edu homepage) and there is no visible page title.

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

Select the block you wish to add from the “Paragraph type” dropdown
Click “Add Paragraph” if it’s the first one on the page - additional blocks give you the “Add Another Paragraph” button
Complete all required fields for the paragraph, then add the next one. Fields are required if they have a red asterisk.
Keep adding your blocks until done, then preview the page. If you missed any fields, you’ll get an error message with instructions.
After previewing, select the “Back to content editing” link near the top of the page to go back to the edit page and save the page. You must save the page manually; it will not auto-save.

Each block will have different fields, depending on the block type. The most common ones are:

Block Title - Goes above the block and functions as a Header 2.
Section Text/Description - Paragraph text of some sort; they don’t all have the same text editing options as not all options (like adding images or links) are appropriate to all blocks.
URL/Link Text - This is for a Call to Action button or for a regular link.
Image - Click “Add Media” to select your media.

Blocks with multiple sections

Some 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 block

When 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 blocks

Sometimes, after previewing or saving the page you decide you need the blocks reordered. Use these instructions to do so:

To the left of each block is a set of cross-hairs
Click and drag the crosshairs up or down to move the block above or below the surrounding blocks.

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:

The blocks stack on top of each other, like you’re building a tall lego tower.
You will rarely, if ever, have a page with a single block - it just isn’t enough content.
Each block should be dedicated to a single topic. A topic can span multiple blocks, but you want to keep them focused.
Using blocks does not negate best practices. You still want focused, purposeful pages.

Cloning a page

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, 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 Types

The main blocks are divided into different categories:

H1 Header Blocks

H1 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:

H1 Header: Large Hero - Displays the page title over a large hero image. It goes on your main or top-level pages.
H1 Header: Page Title - Displays the page title. Can be used by itself, or with the Short Hero header beneath it.
H1 Header: Hidden (limit use) - Used sparingly for instances where there should be no visible title on the page. Provides an invisible H1 for search engines and screen readers, based on the page title.

Header Blocks

These 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.

Header: Large Hero - Only use at the top of the page if you're using this block as a slider with multiple slides in lieu of a visible page title (example: http://pdx.edu ), in conjunction with the "H1 Header: Hidden (limit use)". Text in this block is read as a Heading 2.
Header: Page Title - Use this for emphasis text, but not section titles. Text in this block is read as plain paragraph text.
Header: Short Hero - A narrow image that can be placed under the page title header, if desired. This can also be used elsewhere on the page.

Call To Action Blocks

Call 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:

CTA: 3 Buttons - Three colored buttons. You can select your colors from six predefined choices. The help text suggests color combinations.
CTA: 3 Images - Similar to the CTA: 3 Buttons, except each CTA also has an associated image.
CTA: 1 Button with Link Collage - Five links over images, with a single button-style CTA
CTA: Full Width Image - One large image with a single CTA

Link Group Blocks

Link Groups are for when you have multiple links to provide, but they’re mostly to direct visitors to additional information or other pages.

Link Group: 4 with Images - 4 vertical images with linked text and a small arrow beneath each. Minimum is 1, maximum 4 (they center).
Link Group: 4 with Images and Subtitles - Same as Link Group: 4 with Images, with an added subtitle. But you must have 4 (they don’t center).
Link Group: 4 Detailed Links with Images - Two images with four text sections. The text sections have a title, paragraph text, and a link.
Link Group: 8 with Images - 8+ linked images with link text beneath. In desktop view, there are 4 per row, so multiples of 4 are best.
Link Group: Links with Content - Links that have an image, linked text, and additional paragraph text for description. In desktop view, there are three per row, so multiples of three look best.
Link Group: Image Links with Paragraph - A paragraph of text on one side and 1-2 linked images with linked text on the other side.
Link Group: Quick Links - Can be with ot without images. Each one has a maximum of 7 links, but you can stack multiple quicklink blocks.
Link Group: Multiple Lists - A way to display what would otherwise be a full page of links. You have multiple tabs in which to display up to 10 links.

Carousel Blocks

Carousel blocks allow users to scroll through sections of content within a single block.

Carousel: Single Frame with Content - Each section has a large image on one side with paragraph text and an optional CTA on the other. One section displays at a time.
Carousel: Multiple Frame with Content - Each section has a vertical image with linked text on top. Multiple sections display at a time; but only one is in the foreground - that one has added description text.
Carousel: Image Gallery - Images with captions a visitor can scroll through.

Text Blocks

Text 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.

Text: 1 Column - Text that spans the width of the page.
Text: 2 Column - Two equal-width columns.
Text: 2 Column - Split Content - Same as Text: 2 Column, except one column has a grayed out background.
Text: 3 Column - Three equal-width columns.

Images and videos

You 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.

IFrames

You 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:

URL: This is the URL from the iframe itself. For example, if it's a YouTube video, on the video itself select "Embed" as the share option. Then copy the URL in the iframe code (between the quotation marks) and use that.
Width*: If you set the width to a percentage, such as 100%, it will be responsive to screens of different sizes. However, it doesn't always work perfectly, and you can't set the height to a maximum. As such, it sometimes works better to set a fixed width (usually the one in the embed code).
Height*: The heigh needs to be a fixed heigh (percentages don't work). So choose a fixed height, such as the one in the embed code.
Enable Scrollbars: If you check this, then a scrollbar will display to help someone scroll through the iframe. This is helpful if the iframe is for a document (not recommended), but leave it unchecked if the iframe is for a video or other standard content type.

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 Content

Shared content is the news and events that are syndicated throughout pdx.edu. These can be anywhere on a page (not just at the bottom).

Shared Content: Recent News - Three most recent pieces of news your site is subscribed to through Syndication.
Shared Content: News, Facebook, Twitter - Two recent news articles and the latest tweet/Facebook post from your site’s social media feeds.
Shared Content: Upcoming Events - Four upcoming events your site is subscribed to through Syndication.
Shared Content: Featured Blog - Three most recent blog posts on your site.
Shared Content: Blog, Facebook, Twitter - Two recent blog posts and the latest tweet/Facebook post from your site’s social media feeds.

Feature Blocks

Feature blocks are content highlights, to draw attention to certain information.

Feature: Content with Media - A single piece of media (video or image) with detailed paragraph text.
Feature: News Article - A specific news article you select from those on your site.
Feature: Profile - A specific event you select from those on your site.

*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 Blocks

These 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.

Social: Facebook - Pulls from social feeds associated with site.
Social: Instagram - Pulls from social feeds associated with site.
Social: Twitter - Pulls from social feeds associated with site.
Social: Social Media Icons - Displays just the (icon) links to social media feeds; these can be manually entered. Does not change social feeds associated with the site.

Custom Blocks

Custom blocks are unique blocks that you don't want to overuse.

Description

Custom: Confirmation Page - Used on the confirmation page after a form is submitted
Custom: Stats - Snapshot of five statistics; all five should always be used. Linking is optional, but if one is linked, they should all be linked.
Custom: Step Guide Item - Used to break apart a multiple step process. This block is intended to be text heavy.

Restricted blocks

There 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:

A Day in the Life: Full Page
A Day in the Life: Slider
Gallery: Featured Groups
Gallery: Featured Items Slider
Rich text editor (use the Text: 1 Column instead)
Views Reference

Templates

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 template

Editors 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:

Navigate to the Content page, then click on Moderated Content - see screenshot:
Find the template you want to use.
To the right of the template name, click “Clone"
On the new page, rename the page and save it.*

*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 templates

The 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 Templates

Your 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 Templates

Top 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 Templates

A 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 Templates

Text-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

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.

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.