Pages in Cascade
Pages of content that you can publish on your website come in different page types.
A page is a page of content that you can publish on your website.
You will use the Edit action to access the Aggie UX page builder to make changes to an existing page.
Page Types
There are multiple page types that offer different configurations. The components available on a page are determined by the page type.
Homepage
The homepage page type should only be used for a website or microsite’s home page. This page type uses a specialized page header with a large image and the option for multiple CTAs.
Homepages cannot have sidebars and use the home page header.
Page Without Sidebar
The page without sidebar page type has the option to add all components that can appear on a page without sidebar as noted on aggieux.tamu.edu.
Pages without sidebar use either the standard page header or the landing page header. We recommend using the landing page header for pages that are linked to in a site’s primary navigation, as long as the content supports it. Otherwise, use the standard page header.
Page with Sidebar
The page with sidebar page type has the option to add all components that can appear on a page with sidebar as noted on aggieux.tamu.edu. Generally speaking, the page with sidebar page type has less options for components because components that span the full width of the page are not compatible.
Pages with sidebars always use the standard page header and can have either a sidebar menu or on-page navigation.
Page with Sidebar Menu
You can choose to display the sidebar menu on a page with sidebar. The sidebar menu is displayed on the left side of the page and is used to show a page’s sibling pages and a link back to its parent page. This option works well for pages with a lot of sibling pages you want to make it easy to navigate to.
To enable the sidebar menu, select “Sidebar Menu” under the question “What type of sidebar does this page have?” on the Edit screen.
Page with On-Page Navigation
The standard template with in-page navigation uses the standard page header and the in-page navigation sidebar option.
On-page navigation floats in the right sidebar with links to every H2 heading on the page it is on. This option works well for pages with a lot of on-page content.
To enable the in-page navigation, select “In-Page Navigation” under the question “What type of sidebar does this page have?” on the Edit screen.
How to Create a Page
- Open the location where you want the page to be located in the preview pane
- Click Add Content in the upper left corner of the Cascade navigation bar
- Click the page type you want to add: Homepage, Page With Sidebar, Page Without Sidebar, News Page or Profile Page
- Fill out the required information:
- Page Name: The folder name will be what is reflected in your site’s URL. It must:
- Be all lowercase
- Use hyphens (-) instead of spaces
- Not contain any special characters
- Placement Folder: This is the folder in which your new page will be created. It should already be correct if you followed step 1.
- Display Name: The display name is shown at the top of the page. It will be the H1 heading.
- Title: The page title is displayed in search engine results and on browser tabs. In 60 characters or fewer, describe the page using terms your target audience may search for.
- Alternative Display Name for Menus (optional): A short display name for use in navigation, including sidebar menus and breadcrumbs.
- Page Name: The folder name will be what is reflected in your site’s URL. It must:
- Click Preview Draft
- Click Submit
- Enter version comments that will be saved in the asset’s version history.
- Click Submit
Page Options
Page Metadata
Every page type has a section that can be edited to include page-specific metadata.
Page Thumbnail
This image will display in page previews in search results and social shares. By default, page previews will use the default social share image unless you upload an image to this section on a specific page.
Page Description
This text will appear in search results and social shares; please keep to fewer than 150-160 characters.
Page Header
Use the page header to customize the top portion of the page that includes the H1 heading. To edit the H1 heading, change the page’s “display name” at the top of the page builder.
The available page header display options depend on the page type.
| Page Type | Home Page Header | Landing Page Header | Standard Page Header |
|---|---|---|---|
| Homepage | Yes | No | Yes |
| Page Without Sidebar | No | Yes | Yes |
| Page With Sidebar | No | No | Yes |
Page Content / Sections
Use sections to customize how your body content is displayed on the page. Each section can hold one Aggie UX component.
You can add multiple sections by clicking the green plus sign, or remove sections by clicking the red x when visible.
How to Add a Component
- Open the desired page in the preview pane
- Click Edit
- In the desired content section, choose your desired component in the Component drop down selector
- Fill out the content fields
- Click Preview Draft
- Click Submit
- Enter version comments
- Click Submit again
Helpful Resources
Use these Photoshop templates and best practices to create high-quality, fast-loading images for Aggie UX Design System components. Each download includes cropping guides for the correct aspect ratios and sample layer sizes for export.
Use this library to see all available icons for use in Aggie UX components that support icons. To help make it easier to find icons for a specific use case, all Aggie UX icons have been divided into icon families.