Active page layouts in Sitecore
Most pages on the CCBC website are built using a template that we call our "typical page." The typical page template has a basic structure, but we have many ways in which we can configure it.In addition, we have a series of specialized templates that we use as needed. Some of them have a specific purpose while others just offer a different style/functionality to that of our typical template. Explore all specialized templates below.
Home
A specialized, dynamic template built with an array of renderings that is only used for the CCBC homepage.
Features include:
Features include:
- Large rotating carousel – maximum of 4 high-quality images to promote CCBC; each slide includes a title and caption that link off to the page or article with more information.
- Upcoming events rendering – populates with current events that have been tagged with an image. Events drop-off as they pass.
- Headlines rendering – displays the 5 most recent news articles; this can be manually manipulated by editing the date of the article.
- This content is managed by Media Relations.
- Twitter feed – displays content in real time from the official CCBC Twitter account.
- ‘Connect with CCBC’ rendering – can be manually configured to display YouTube videos as well as the featured blogger –typically updated weekly.
Three column
Comprised of a wide left-column and a single right column, totaling in three columns, this template is currently used for Get Started, Connect with CCBC and Get Started with Financial Aid.
Features include:
Features include:
- Main content area
- Two columns - blocks of content featuring an image icon, description copy and links to relevant pages.
- Ability to feature body copy, orange border block, carousel image or video that stretches across both columns.
- Right rail can be configured with a variety of renderings including events, contact information, CTAs (call to action), social media feed, images, and videos.
Blocks
Specialized template comprised of a large rotating carousel image gallery and blocks of content.
Blocks are limited to three in a row. Each block features title, image, brief description, and link to the page with more information. Blocks act as the navigation for the main areas in this section.
The carousel rendering is the full length of the page with a subtitle and copy featured to the left of the images. Typically, the carousel features four images. If needed, we can add a title and caption to each image.
Blocks are limited to three in a row. Each block features title, image, brief description, and link to the page with more information. Blocks act as the navigation for the main areas in this section.
The carousel rendering is the full length of the page with a subtitle and copy featured to the left of the images. Typically, the carousel features four images. If needed, we can add a title and caption to each image.
Large carousel
A two-column template that features a large image. The left column is reserved for the left navigation, which dynamically lists the child pages (main sections) within that area of the website.
Then we have the “wide” right column. This features a carousel image(s) that spans the full width of this column. The content of the page is broken up into two smaller columns, with the right rail featuring CTAs, video, contact info., etc.
Then we have the “wide” right column. This features a carousel image(s) that spans the full width of this column. The content of the page is broken up into two smaller columns, with the right rail featuring CTAs, video, contact info., etc.
Newsroom landing page
A two-column template featuring a large image, press releases and other publications that mention CCBC. The carousel usually features three news articles including a lead to the full article. Newsroom content is managed by Media Relations.
‘Recent Press Releases’ rendering is date driven featuring items marked with a date in chronological order. Press releases can be manually edited to change the order. A max of five releases can be featured. Tags indicated on each item will display results for any press release with that specific tag. The ‘more press releases’ option generates a listing of all published press releases.
‘CCBC in the news’ is a rendering which displays specific articles as noted when editing in Sitecore. These are external publications about the college. As with press release, it is date driven, chronological order, featuring a maximum of five articles.
This template also features an orange border block to showcase CCBC’s internal publications. The right rail (right column) can feature a wide array of renderings such as events, contact info, social media feeds, CTAs and videos.
‘Recent Press Releases’ rendering is date driven featuring items marked with a date in chronological order. Press releases can be manually edited to change the order. A max of five releases can be featured. Tags indicated on each item will display results for any press release with that specific tag. The ‘more press releases’ option generates a listing of all published press releases.
‘CCBC in the news’ is a rendering which displays specific articles as noted when editing in Sitecore. These are external publications about the college. As with press release, it is date driven, chronological order, featuring a maximum of five articles.
This template also features an orange border block to showcase CCBC’s internal publications. The right rail (right column) can feature a wide array of renderings such as events, contact info, social media feeds, CTAs and videos.
News detail page
We have two templates that are used for news items (content is managed by Media Relations). One is for news articles – these are internal news publications and external “CCBC in the news.” The other template is reserved for press releases.
The news article template is two columns – a wide left-column and smaller right column. Left column features the text copy of the article as well as tags for additional articles with the same tag. In this column, we can also feature other renderings like an orange border block, accordion, or video. The right column is generated dynamically and comprised of related news articles.
The press release template is like the news article with a wide left-column and smaller right column. The copy for the press release as well as tags associated with it, are in the left column. The right column can be utilized to display an image.
The news article template is two columns – a wide left-column and smaller right column. Left column features the text copy of the article as well as tags for additional articles with the same tag. In this column, we can also feature other renderings like an orange border block, accordion, or video. The right column is generated dynamically and comprised of related news articles.
The press release template is like the news article with a wide left-column and smaller right column. The copy for the press release as well as tags associated with it, are in the left column. The right column can be utilized to display an image.
Event landing page
This template exclusively displays all published events in Sitecore. You can access this page from the homepage and it displays all upcoming events. However, you have the ability to narrow your search based on the day/week/month, location or you can utilize the search to locate an event.
In order to see events for a specific date,
In order to see events for a specific date,
Event detail page
Two-column template featuring information about the event in the left column; while the right column displays a list with links to other/similar events. Contributors submits events to the Web Team using the event submission form.
Select events can be designated to appear on the homepage. They must have an image. Using the tags feature on events, we can display event renderings on most CCBC pages which then provide the date, title, time, location and link to the detail page. This template is structured similar to a news article.
Select events can be designated to appear on the homepage. They must have an image. Using the tags feature on events, we can display event renderings on most CCBC pages which then provide the date, title, time, location and link to the detail page. This template is structured similar to a news article.
Program/certificate detail page
These pages are created dynamically from programs and certificates that are active in acalog. If the program is not in acalog, it will not display on the public facing website.
This template is three columns: left column to return to your search or the program and course finder landing page, middle column displays all of the content from acalog, and the right column which displays an array of CTAs.
‘Apply to CCBC’ and ‘Request more info’ CTAs are displayed on all credit program pages. ‘Register Online’ and ‘Find a career coach’ are displayed on all continuing education certificates. This feature was configured in Sitecore manually by an admin.
‘Program related pages’ and ‘Other programs like this’ are unique to each program but configured manually by an admin.
This template is three columns: left column to return to your search or the program and course finder landing page, middle column displays all of the content from acalog, and the right column which displays an array of CTAs.
‘Apply to CCBC’ and ‘Request more info’ CTAs are displayed on all credit program pages. ‘Register Online’ and ‘Find a career coach’ are displayed on all continuing education certificates. This feature was configured in Sitecore manually by an admin.
‘Program related pages’ and ‘Other programs like this’ are unique to each program but configured manually by an admin.
Program and Course Finder
Page that only displays search results for programs and courses. Programs are displayed with the title, CRN, credits, prerequisites, intro sentence and link to the program detail page. You have the ability to narrow your choices in real time with options in the left column or you can type in the search box.
Course detail page
These pages are created dynamically from courses entered in Banner.
Each course detail page is three columns (like the program page) displaying the course title, description, prerequisites, cost and credits if applicable. If a course is available, a table will appear with an option to register for the available sections offered for the course. Here you can quickly view the day/time/location/number of seats available for each class. If a class is full, the table row will be grayed out indicate “full.”
If a course is not being offered that semester, instead of a table a message will display alerting a user no classes are available at this time.
Each course detail page is three columns (like the program page) displaying the course title, description, prerequisites, cost and credits if applicable. If a course is available, a table will appear with an option to register for the available sections offered for the course. Here you can quickly view the day/time/location/number of seats available for each class. If a class is full, the table row will be grayed out indicate “full.”
If a course is not being offered that semester, instead of a table a message will display alerting a user no classes are available at this time.
Employee directory
Listing of all current faculty and staff in the form of a responsive table. Content is generated from data entered into the employee modules in Banner (managed by Human Resources). The data is also synced with Active Directory.
Life enrichment search
Specialized search that generates only life enrichment courses. This template also features:
- A large rotating carousel
- Unique menu to narrow search results
- Right column that can display multiple renders such as CTAs, images, video, custom HTML (example: ‘Take a class for fun’ tag cloud)
General site search
Two column template that displays results based on the keyword(s) entered in the search box. Left column features an option to choose search options. Right column is wide and displays the page title (with a link) and the page description entered in the search engine data.
Browsable program list
A custom-made template which uses our program data from Acalog to create a dynamic list of degree, certificate and workforce certification programs. Users can easily navigate and filter available programs by degree, credit certificate or continuing education workforce certificate.
Sitecore forms
We use a module called Web Form for Marketers (WFFM) in order to place custom built forms on a typical page template. These forms can be used to collect data mainly as a contact method, a way to capture leads, or gathering feedback. Forms in Sitecore are unfortunately not secure and the Web Team has a process in place for contributors to request a form.