# 5. Page Templates

<span style="font-weight: 300;">We’re going to outline some page structure ideas in templates for you to use when creating pages, based on the content you have. Determine which kind of page aligns most with the content you have, and recreate it in your CMS with the recommended patterns.</span>

### <span style="color: #cc092f;">**How to determine your page template**</span>

<span style="font-weight: 300;">Page templates allow the user to have a consistent experience across the site, and makes it easier for us to build out pages according to user expectations. The following questions can help you determine which page template you should select. </span>

**Is this page at the first hierarchical level of the site?**

<span style="font-weight: 300;">If yes, use the</span> [**Top-Level Landing Page**](#bkmrk-top-level-landing-pa)<span style="font-weight: 300;"> template.</span>

**Is this page providing an overview for a range of programs, services, or opportunities?**

<span style="font-weight: 300;">If yes, use the </span>[**Guide Page**](#bkmrk-guide-page)<span style="font-weight: 300;"> template.</span>

**Is this page introducing one specific department, office, or group that is relevant to prospective or current students?**

<span style="font-weight: 300;">If yes, use the </span>[**Overview Page**](#bkmrk-overview-page)<span style="font-weight: 300;"> template.</span>

**Is this page sharing detailed information about one topic?**

<span style="font-weight: 300;">If yes, use the </span>[**Basic Page**](#bkmrk-basic-page)<span style="font-weight: 300;"> template.</span>

**Is this page sharing curated resources for a specific audience?**

<span style="font-weight: 300;">If yes, use the </span>[**Curated Page**](#bkmrk-curated-page)<span style="font-weight: 300;"> template.</span>

**If none of the questions above seem to apply**<span style="font-weight: 300;"> to the page you’re working on, go with the </span>[**Basic Page**](https://kb.astate.edu/books/a-state-website-governance/page/5-page-templates#bkmrk-basic-page) <span style="font-weight: 300;">template. You may always modify or add to these templates to make them fit user needs better.</span>

### <span style="color: #cc092f;">**Templates**</span>

#### **<span style="color: #000000;">Top-Level Landing Page</span>**

<table border="1" id="bkmrk-purpose-a-high-impac" style="height: 1138px; width: 100%; border-collapse: collapse;"><tbody><tr style="height: 29px;"><td style="width: 28.2716%; height: 10px; vertical-align: top;">**Purpose**</td><td style="width: 38.395%; height: 10px; vertical-align: top;">A high-impact page that prioritizes imagery &amp; linking deeper into the site.</td><td rowspan="6" style="width: 33.3333%; height: 1138px; vertical-align: top;">[![Templates1.png](https://kb.astate.edu/uploads/images/gallery/2025-06/scaled-1680-/templates1.png)](https://kb.astate.edu/uploads/images/gallery/2025-06/templates1.png)</td></tr><tr style="height: 28px;"><td style="width: 28.2716%; height: 28px; vertical-align: top;">**Content**</td><td style="width: 38.395%; height: 28px; vertical-align: top;">Include imagery, videos, testimonials, and CTAs.</td></tr><tr style="height: 29px;"><td style="width: 28.2716%; height: 29px; vertical-align: top;">**Suggested Patterns**</td><td style="width: 38.395%; height: 29px; vertical-align: top;">Photo Collage, Image List, WYSIWYG, CTA Bar, Outcomes Feature, Contact</td></tr><tr style="height: 29px;"><td style="width: 28.2716%; vertical-align: top; height: 29px; border-style: none;"> </td><td style="width: 38.395%; vertical-align: top; height: 29px; border-style: none;"> </td></tr><tr style="height: 29px;"><td style="width: 28.2716%; vertical-align: top; height: 29px; border-style: none;"> </td><td style="width: 38.395%; vertical-align: top; height: 29px; border-style: none;"> </td></tr><tr style="height: 1013px;"><td style="width: 28.2716%; vertical-align: top; border-style: none; height: 1013px;"> </td><td style="width: 38.395%; vertical-align: top; border-style: none; height: 1013px;"> </td></tr></tbody></table>

#### **Guide Page**

<table border="1" id="bkmrk-purpose-a-scannable-" style="height: 1138px; width: 100%; border-collapse: collapse;"><tbody><tr style="height: 29px;"><td style="width: 28.2716%; height: 10px; vertical-align: top;">**Purpose**</td><td style="width: 38.395%; height: 10px; vertical-align: top;">A scannable page that gives high-level overviews for a range of options, presenting each option equally.</td><td rowspan="6" style="width: 33.3333%; height: 1138px; vertical-align: top;">[![Templates2.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/templates2.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/templates2.png)</td></tr><tr style="height: 28px;"><td style="width: 28.2716%; height: 28px; vertical-align: top;">**Content**</td><td style="width: 38.395%; height: 28px; vertical-align: top;">Include consistent links and an overview of how to compare options.</td></tr><tr style="height: 29px;"><td style="width: 28.2716%; height: 29px; vertical-align: top;">**Suggested Patterns**</td><td style="width: 38.395%; height: 29px; vertical-align: top;">3 Column, Stats + Photo, Accordion, Directory Embed, Contact</td></tr><tr style="height: 29px;"><td style="width: 28.2716%; vertical-align: top; height: 29px; border-style: none;"> </td><td style="width: 38.395%; vertical-align: top; height: 29px; border-style: none;"> </td></tr><tr style="height: 29px;"><td style="width: 28.2716%; vertical-align: top; height: 29px; border-style: none;"> </td><td style="width: 38.395%; vertical-align: top; height: 29px; border-style: none;"> </td></tr><tr style="height: 1013px;"><td style="width: 28.2716%; vertical-align: top; border-style: none; height: 1013px;"> </td><td style="width: 38.395%; vertical-align: top; border-style: none; height: 1013px;"> </td></tr></tbody></table>

#### **Overview Page**

<table border="1" id="bkmrk-purpose-a-scannable--0" style="height: 1138px; width: 100%; border-collapse: collapse;"><tbody><tr style="height: 29px;"><td style="width: 28.2716%; height: 10px; vertical-align: top;">**Purpose**</td><td style="width: 38.395%; height: 10px; vertical-align: top;">A scannable page that introduces one specific offering, department, group, or service.</td><td rowspan="6" style="width: 33.3333%; height: 1138px; vertical-align: top;">[![Templates3-A.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/templates3-a.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/templates3-a.png)</td></tr><tr style="height: 28px;"><td style="width: 28.2716%; height: 28px; vertical-align: top;">**Content**</td><td style="width: 38.395%; height: 28px; vertical-align: top;">Primarily text content, with some stories or imagery included for visual variety.</td></tr><tr style="height: 29px;"><td style="width: 28.2716%; height: 29px; vertical-align: top;">**Suggested Patterns**</td><td style="width: 38.395%; height: 29px; vertical-align: top;">Image List, Carousel, WYSIWYG, News 3-Up, Contact</td></tr><tr style="height: 29px;"><td style="width: 28.2716%; vertical-align: top; height: 29px; border-style: none;"> </td><td style="width: 38.395%; vertical-align: top; height: 29px; border-style: none;"> </td></tr><tr style="height: 29px;"><td style="width: 28.2716%; vertical-align: top; height: 29px; border-style: none;"> </td><td style="width: 38.395%; vertical-align: top; height: 29px; border-style: none;"> </td></tr><tr style="height: 1013px;"><td style="width: 28.2716%; vertical-align: top; border-style: none; height: 1013px;"> </td><td style="width: 38.395%; vertical-align: top; border-style: none; height: 1013px;"> </td></tr></tbody></table>

#### **Basic Page**

<table border="1" id="bkmrk-purpose-a-succinct%2C-" style="height: 1138px; width: 100%; border-collapse: collapse;"><tbody><tr style="height: 29px;"><td style="width: 28.2716%; height: 10px; vertical-align: top;">**Purpose**</td><td style="width: 38.395%; height: 10px; vertical-align: top;">A succinct, primarily informational page which describes one topic in detail.</td><td rowspan="6" style="width: 33.3333%; height: 1138px; vertical-align: top;">[![Templates4-Basic.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/templates4-basic.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/templates4-basic.png)</td></tr><tr style="height: 28px;"><td style="width: 28.2716%; height: 28px; vertical-align: top;">**Content**</td><td style="width: 38.395%; height: 28px; vertical-align: top;">Text content with images or lists as needed.</td></tr><tr style="height: 29px;"><td style="width: 28.2716%; height: 29px; vertical-align: top;">**Suggested Patterns**</td><td style="width: 38.395%; height: 29px; vertical-align: top;">WYSIWYG, 2 Column, Quote, Accordion</td></tr><tr style="height: 29px;"><td style="width: 28.2716%; vertical-align: top; height: 29px; border-style: none;"> </td><td style="width: 38.395%; vertical-align: top; height: 29px; border-style: none;"> </td></tr><tr style="height: 29px;"><td style="width: 28.2716%; vertical-align: top; height: 29px; border-style: none;"> </td><td style="width: 38.395%; vertical-align: top; height: 29px; border-style: none;"> </td></tr><tr style="height: 1013px;"><td style="width: 28.2716%; vertical-align: top; border-style: none; height: 1013px;"> </td><td style="width: 38.395%; vertical-align: top; border-style: none; height: 1013px;"> </td></tr></tbody></table>

#### **Curated Page**

<table border="1" id="bkmrk-purpose-a-page-gathe" style="height: 1137px; width: 100%; border-collapse: collapse;"><tbody><tr style="height: 29px;"><td style="width: 28.2716%; height: 10px; vertical-align: top;">**Purpose**</td><td style="width: 38.395%; height: 10px; vertical-align: top;">A page gathering a range of helpful links and resources for one specific audience.</td><td rowspan="6" style="width: 33.3333%; height: 1137px; vertical-align: top;">[![Templates5-Curated.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/templates5-curated.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/templates5-curated.png)</td></tr><tr style="height: 28px;"><td style="width: 28.2716%; height: 27px; vertical-align: top;">**Content**</td><td style="width: 38.395%; height: 27px; vertical-align: top;">Lists of links, with and without images, and callouts for specific pieces of information that users should know.</td></tr><tr style="height: 29px;"><td style="width: 28.2716%; height: 29px; vertical-align: top;">**Suggested Patterns**</td><td style="width: 38.395%; height: 29px; vertical-align: top;">2 Column, Accordion, News 3-Up, Calendar 3-Up, Contact</td></tr><tr style="height: 29px;"><td style="width: 28.2716%; vertical-align: top; height: 29px; border-style: none;"> </td><td style="width: 38.395%; vertical-align: top; height: 29px; border-style: none;"> </td></tr><tr style="height: 29px;"><td style="width: 28.2716%; vertical-align: top; height: 29px; border-style: none;"> </td><td style="width: 38.395%; vertical-align: top; height: 29px; border-style: none;"> </td></tr><tr style="height: 1013px;"><td style="width: 28.2716%; vertical-align: top; border-style: none; height: 1013px;"> </td><td style="width: 38.395%; vertical-align: top; border-style: none; height: 1013px;"> </td></tr></tbody></table>