Program pages may use page sections to display your content in different ways.

In this blog post learn about:

  • How pages are built
  • Available page sections and what they look like
  • Some great examples of how programs are using page sections

How pages are built

Each page has these standard elements:

  • Banner image (previously called hero image)
  • Page title
  • Content/body field (the short description after the page title)

After the standard elements, the design may be expanded with page sections:

 

Available page sections

These are the available page sections for program subpages:

Use a button link to point people towards their next step. An example button:

Button links look best when added after text:

Call to action

A call to action is a great way to ask people to do something (volunteer, learn more, sign up, etc.). Includes an image, title, description, and button:

Collapsible section

A collapsible section is great for FAQs. It helps people quickly scan to find answers to their questions. 

The eight questions below work well. If there are more questions, break them up into multiple collapsible sections and use headings to organize the questions. This keeps the information easy to scan.

This is what it looks like when the first question has been clicked and the answer is displayed:

Share information added to the website that is relevant to your program. This can include collections, articles, news stories, etc.

Image

By default, an image fills the content’s full width and can have a caption:

An image can be added to a two-column section. This works well for square or tall images.

An image can span the full width of the webpage. These work best if the photo is very wide and not very tall. Like this:

To see these images in action, visit the Our History page.

Image slider

An image slider can be used to add photos of program participants. Captions are optional. 


Impact stats bar

The impact stats bar is a great way to show impact information that requires very little text to explain:

Program contact information

Use on pages that would be helpful to easily see contact info (e.g., the become a member page).

To add the contact information for your program: visit the program landing page, click edit, scroll down to Step 3, and add the contact information.

Program event list 

Show events that are happening in your program.

Some of the page sections can be set to display a grey background color. This helps visually break up the page.

Program faculty/staff list

Share who is working in this program. The people listed are based on who is tagged with this program in their profiles. If you have any questions, please let us know.

Program resource list

Organize documents needed to participate in a program. Program resource lists have several ways they can display.

Learn more about program resources

Text list style for program resources

This displays as a bulleted list:

And can have a grey background:

List (search results) style for program resources

If an image isn’t provided, the website will create an image based on the attached document.

Grid (teaser cards) style for program resources

If an image isn’t provided, the website will create an image based on the attached document. This layout looks best if three or six items are being displayed.

Featured grid style for program resources

The first image in the first row displays larger than the others. This layout looks best if three or six items are being displayed.

Here is another example using the featured grid style for program resources:

Program social media list

A program social media list can be added to a one-column or two-column section. 

This two-column section has text for the left column and social media list for the right:

 

Program statewide event list

The program statewide event list is available for local programs (e.g., local 4-H). This displays the same as the program event list

Events are added to statewide programs (e.g., statewide 4-H) and can be easily displayed on the local programs (e.g., local 4-H).

Note: When displaying events for statewide programs, please use the program event list.

Program statewide resource list

The program statewide resources list is available for local programs (e.g., local Master Gardener). This displays the same as the program resource list

Resources are added to statewide programs (e.g., statewide Master Gardener) and can be easily displayed on the local programs (e.g., local Master Gardener).

Note: When displaying resources for statewide programs, please use the program resource list.

Program tagged content list

All educational content (articles, catalog publications, featured questions, educational documents, educational galleries, collections, and videos) have a program tag. You can use those tags to make a list of content to display on your program page. This list can also be narrowed by keywords.

For example, the Oregon Master Beekeeper Program could make a list and show all content with their tag. But they have so much great content, it would be a huge list. So they added keywords to the content so they could create organized lists.

Please let us know if you have any questions or would like help setting this up.

 

Share the top things your users are looking for:

 

Tabbed section

Use tabs to organize your content.

Tabbed sections should be used with caution when displaying a lot of content. Website visitors may not notice the content that changes lower down the page after a tab has been selected.

 

Text

Add basic text to the page (e.g., heading, body, links, etc.).

Text with background

A text with background has a white text box over an image. The button is optional. Images should be a minimum of of 2000px wide.

To add a heading style, select the text and applying a Heading 2

Three-column section

To set up a three-column section, first select a three-column section, then add the desired page sections.

This example has buttons in each three-column section

 

Two-column section

To set up a two-column section, first select a two-column section, then add the desired page sections.

This example uses a text and button link for both columns:

Video

By default a video will fill the full width of content. A video can also be added to a two-column, three-column or tabbed section. 

See some great examples

A well-organized and straightforward page:

A page spiced up with:

  • Impact stats bar: Showing the fantastic impact of the program
  • Text with background: The image shows volunteers in action

This page does a great job breaking up the information so it is easy to scan — and includes engaging images:

This page has a great rhythm. It has great photos, is easy to scan, and the buttons clearly describe the next steps. Calls to actions direct people to key resources.

Training materials

Learn more about creating and editing program subpages, includes a how-to video.

Get help

We’d love to give feedback on your work. Please submit a help ticket to the OSU Extension web team to get feedback on your pages or to help you get started.

 

Lately, people have been wondering how to share their recent Zoom recordings and handouts, and how to let communities know we’re still providing useful activities and resources. The website can play a part in this communication, alongside your emails, social media, newsletters and outreach to local media. We have some guidelines and examples and considerations to get you started and coordinated related to: Prepping recordings, Program pages, County pages.

County pages

The county landing page already is a spot to feature your current events, your newsletter and feature a few new pieces of content either from your county or statewide news and resources. You can also use announcements to share resources like Lincoln county.

This action of keeping your landing page fresh shows you are active. Featuring a couple pieces of new content could be done at the same time you are pulling together your newsletter.

If you have a lot of new resources, then keep your focus areas under “What we do” updated too. In addition to announcements, Lincoln county added a new focus area to encourage supporting local food, for example.

We’ve also had requests from other regions that they want one place to showcase all that’s happening across their program areas. In this case, an “Online resources and activities” focus area can be featured at the top of your What We Do section on your homepage.

Here’s an example that we will push out to counties later this week, which you can customize.

We want to elevate visibility and awareness of OSU Extension’s work with Oregon communities with particular focus on local and county-level impact and resilience in the face of COVID-19. Next week we’ll share another focus area template to help you in directing people on where to find local food, health and financial assistance too.

Program pages

Other than the event lists, program subpages are a good place to communicate with participants and volunteers in your program what new resources you have that they can do at home. The key is coordinating how these resources are added, although the design on the page can vary.

Here’s a short decision tree.

  1. Is the new resource only relevant to your local program in your county?
    1. Yes, add as a program resource to your local program group.
    2. No, see below.
  2. Is the new resource of interest to or being duplicated by other local programs in other counties?
    1. Yes, add as a statewide program resources and tag for the local county programs. This way it only needs to be updated in one place.
    2. 4-H Jackson county is an example that could be done this way since they have good resources that could be of interest to other 4-H county programs that are also adding new home activities subpages.
  3. Is the new resource of interest to other statewide programs and the general public?
    1. Work with related faculty to add through a content team as an educational material and tag for the program(s). This way it can show up on topic pages too.
    2. Oregon Master Naturalist is an example that shifted to this way.

Prepping and sharing your recordings

Content teams have shifted to giving virtual programming since the pandemic started. When giving your programming as a scheduled webinar, the recordings are posted in OSU MediaSpace within hours. You can use this recording in several ways, but there’s a few things you need to do first.

Make sure that you have informed attendees it is being recording and received the needed permissions from those attending. Please remember that recording meetings or events with youth is prohibited without express consent from their parent or guardians. See specifics on the Virtual Extension program delivery page.

To ensure we meet our ADA responsibility, please request captions for your Kaltura video, and proof and fix any issues. This will ensure the recorded content is as widely accessible as possible.

  • You may need to edit your Kaltura video to snip the beginning or end of your recording. You can find instructions here.
  • Check in if you have any branding for pre and post-production to be added.
  • Lastly you will need to share your video.

Once you have completed these steps, you can post the video on the website.

  1. Add the recording link to the event page (which can still be found by searching on the website after the event) along with any handouts. However, don’t share publicly “meetings”, especially that contain youth in the recording, on the website. See program delivery info on Zoom safety and security on our Virtual Extension website.
  2. Get the attendee list from your Zoom Oregon State report dashboard afterward and email it to them. Contact us for any questions on getting that list.
  3. Add the video on the related county focus area if the content is a webinar not meant for broader distribution (check with the appropriate content team first). See a Coos county example.
  4. See if faculty want to edit portions of the webinar to add as educational content through their content team. Visitors to the site often want quick answers not whole webinars when they find videos on the site.

You still want people to attend the program, rather than just wait to find the recording. The value of people attending the webinar live is that they can engage with you and other participants – a chance to ask questions and network. However, analytics on numbers of views of the recordings could be included in your Digital Measures reporting.

Web updates

It is important for our learners, stakeholders and funders to know that OSU Extension continues to actively serve, engage, respond and innovate during the COVID-19 pandemic—even while locations are closed and employees are working remotely.

To align with the current way we deliver services, we adjusted small but meaningful wording on the site:

  • We adjusted the emergency announcement from emphasizing we are closed to we are still here for you with related resources.
  • We made it clearer on the homepage how we are offering many online events from across the state.
  • We made sure that postponed events are now separate from active events.
  • We shared information on wearing a face covering on county sites.
  • We feature new resources on the homepage and COVID-19 topic page, like the new “Sewing cloth face coverings for beginners” educational gallery.

We also improved the speed at which you can enter and update content behind-the-scenes.

Oregon Master Naturalist is an excellent example of a statewide program using the website layout. Kudos to Jason O’Brien!

Let’s take a look:

These are some of the things we love

The landing page has:

  • A lush and inviting photo
  • Engaging information about the program.
  • Titles and text are user-friendly and help potential participants identify if they would enjoy and benefit from the program.
  • An enthusiastic testimonial video
  • Stories sharing the heart of Oregon Master Naturalist
  • Straight-forward sidebar navigation

Other pages

Become a Master Naturalist

Volunteer

  • Great impact statistics for Master Naturalist volunteers. These were added using the new “impact stats bar,” available for programs and counties.
  • Easy to find exciting volunteer project ideas

What is the cost?

  • Easy to understand the cost and financial options.

What you can do now

Review your program pages. Is there anything you can do to improve the text or images based on the example above? See instructions for updating program content.

Please contact us with any questions.


Web updates

These are some new features:

  • You can tag an event with a project. Then add a “project events list” to your page to display them.
  • You can add a “project faculty/staff list.” Contact us to add users to display on a project.
  • You can override the title of a piece of content selected for a “highlighted content item” page section.
  • You can now specify what text shows when county event lists have no events to show.

The about us section on the website has new information, including a new career opportunities page.

 

1. Reuse events from last year

Events on the Extension website automatically disappear from lists and search results once the date has passed. However, the records still exist in the system, so if an event occurs annually, you can reuse the content from the previous year. This has several benefits:

  • You can save effort now by reusing work from last year. All you need to do is update the dates (and flyer if there is one).
  • Visitors who may have bookmarked last year’s event (or find it through Google) will see current information if they visit the page again.

Instructions:

  1. Go to the group content page for the group that you originally entered the event in.
  2. If you remember the title of the event, you can search for it. Otherwise, you can select “Event” in the “Type” filter above the list of content.
  3. Once you find the previous year’s event, click the “Edit” button next to it and update the dates. This will put it back in event lists and search results.

2. Store files in Box

Box is OSU’s file storage platform. Anyone with an ONID account can store unlimited files on Box and share them with other employees or the public. Box was created specifically for file management and has many useful features, including:

  • File versioning – if the document changes each year, you can easily replace the old file with the new one without changing the link.
  • Privacy settings – you can set files up so anyone (the public) can access them, only people who know a specific password, or only people with an ONID account

Instructions:

  • There is documentation about using Box on OSU’s Box page and our Website user guide.
  • Some tips for effectively setting up files in box:
    • To share a file or folder with the public, click “Share” next to it. Then, turn on the “Enable share link” toggle. It is very important that you set the dropdown below the share link to “Anyone with the link.” Otherwise people will need to log in with an ONID to see the file.
    • There is a link near the share link box for “Link options”. This is where you can set a password to protect the file or get the “direct download” link (which allows visitors to download the file directly without seeing it in Box first).
    • Be sure to set one of your coworkers as a co-owner or editor of the file, in case you leave or otherwise can no longer access it someday.
  • When you have the “share link” for the file, create a program resource and select “External website” as the resource type. This will give you a field to paste the link.

3. Break up long pages

If you have long pages that are difficult to scan, there are options to make it a little easier: page section settings and nested pages.

Page sections:

For most page sections, you can configure:

  • Background color (alternating background colors is a good way to break up the page)
  • List style (you can make lists more condensed by using a “Text list” style, which doesn’t display images with items in the list)
  • Section id (you can use section IDs to create a “table of contents” at the top of the page that links to sections further down)

Instructions:

  1. Edit the page
  2. At the top of where page sections are configured on the edit screen, there are two tabs: “Content” and “Settings”
  3. When you switch to the settings tab, you can configure options for each section

Nested pages:

One of the best ways to help a long page is to break it up into several shorter pages. Then, to prevent the sidebar from getting unwieldy, you can nest the new pages under the original, so they only appear in the sidebar when the parent is selected.

Instructions:

  1. Go to any program page that shows the sidebar and click the “Reorder Pages” button at the bottom.
  2. On the next screen, you can drag the pages into any order you want. To nest one page under another, drag it under and to the right. When you’re done, click “Save order”.

4. Look at peers for ideas

One of the best ways for you to get ideas for your own pages is to look at pages from programs similar to yours. Here are some programs that have been set up with some of the website’s new design features and serve as good examples:

5. Think about all your audiences

Programs produce content for many audiences, including:

  • Prospective members
  • Current members
  • Volunteers/leaders
  • Program faculty/staff

It is, in general, usually best to organize content according to audience, and depending on what audiences your program serves, we may recommend options outside of the Extension website for content (e.g. the Extension Employee Intranet or an OSU WordPress blog).

Another audience that all programs have but that often gets overlooked is the general public. There are many reasons why the public would be interested in content produced by a program, including:

  • They utilize the services provided by program volunteers (e.g. MG plant clinics)
  • They are affected by the program’s outcomes or impacts
  • They want to learn the information taught to program participants, but for whatever reason can’t participate themselves

However, visitors often perceive program pages as being only for active participants in a program. So, if you produce program-related content for the general public, make sure it can be found through topic and county pages, where the general public is more likely to look.

With more than one way to add a program application to the Extension website – as an announcement, a program resource, an event, or text on a sub-page – how does one decide the best approach? One case example could help give insight into this question.

We took a closer look at 16 Master Gardener training programs* that had an electronic application (printable PDF or online form) linked from the website to see the audience’s actions.

What did we find?

  • Application links were seen more than 10,000 times and were clicked/downloaded nearly 2,000 times. This is a good 20% conversion rate (i.e. the number who downloaded or clicked on the application, divided by the number who viewed it).
  • Among the Master Gardener programs, 8 uploaded the application and 7 linked to it (1 did both). The applications available for download performed better.**
  • Only one program put a direct link to the application on their main program landing page, but they didn’t have higher success in conversion rate than anyone else.
  • However, programs that had an “announcement” showing on their main program landing page had higher average conversion rates. We could interpret this to mean that people who are specifically looking for applications with the intent to fill them out, find them through announcements.

  • Links to applications that were shown on a sub-page (usually the “How to Join” page) were seen more often than those that were only shown in an announcement or event. We could interpret this to mean that people who are not yet decided about applying or who are learning about it for the first time, find it through the sub-page menus.

Recommendation

Add the file or link to the application as a “program resource” that displays on a “How to Join” sub-page. Then create an announcement that references that program resource or the page itself.

Do you have other questions that you want to see if analytics can answer about your audiences? Get in touch with the web team to ask your question.

 

* The remaining Master Gardener programs asked visitors to get in touch with a person to apply or receive application materials, so these need to be tracked off-line.
**It would be useful for all the programs to see how many people actually submitted applications once they clicked to an online form or downloaded a PDF application. In the future digital strategy, online forms may be preferable for ease of processing and tracking applications.