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:
- Button link
- Call to action
- Collapsible section
- Featured content
- Image slider
- Impact stats bar
- Program contact information
- Program event list
- Program faculty/staff list
- Program resource list
- Program social media list
- Program statewide event list
- Program statewide resource list
- Program tagged content list
- Quick links bar
- Tabbed section
- Text with background
- Three-column section
- Two-column section
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:
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:
Collapsible sections work best when the content within them is fairly short, like the example above. This makes it easier for people to open and close them. This is especially important when viewing the page on a mobile device.
Share information added to the website that is relevant to your program. This can include collections, articles, news stories, etc.
Featured content can be displayed in several ways: a list, grid, featured grid, and text list. Review the program resource list to see what these designs look like.
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.
An image slider is a way to add photos to the website (e.g., pictures of program participants). On the website, click the arrows to view the next image. Most website visitors only look at the first image.
Impact stats bar
The impact stats bar is a great way to show impact information that requires very little text to explain.
Here is another example:
This is what it looks like when these fields are filled out:
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 is helpful if you want to share the same events on many or all local program pages.
Events are added to the statewide program (e.g., statewide 4-H) and can be easily displayed on the local programs (e.g., local 4-H). This design is the same as for the program event list.
Note: When displaying events within a statewide program, 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 is helpful if you want to share the same program resources on many or all local program pages.
Resources are added to a statewide program (e.g., statewide Master Gardener) and can be easily displayed on the local programs (e.g., local Master Gardener).
This displays the same as the program resource list.
Note: When displaying resources within a statewide program, 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.
A program tagged content list can be displayed in several ways: a list, grid, featured grid, and text list. Review the program resource list to see what these designs look like.
Quick links bar
Share the top things your users are looking for:
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.
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 2000px wide.
Find a photo that looks good even when most of the middle and right side is hidden. When evaluating an image, close one eye, and use your hand to cover the photo’s center and right side. Is the visible part of the picture in focus? Does the photo look good?
When you find a picture that works, add it to the website. Next, see how the image looks when the browser is narrow, wide, or in-between. Does it still look good? You have a winner!
To add a heading style, select the text and applying a Heading 2:
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.
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:
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.
Learn more about creating and editing program subpages, includes a how-to video.
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.