The Subpage Listing component lets you add a page directory to a web page which displays links to all the pages and outbound links in a certain section of your website. This directory uses page names and summaries to introduce and link off to those pages.
If you add, remove or make changes to pages or outbound links under the vertical or parent pages linked in a subpage listing, these changes will automatically be reflected in the subpage listing.
Example of a Subpage Listing component
Here is an example of what a subpage listing on a property tax parent page could look like. There is a box for each child page that includes the page title and summary and links to the page.
Add a subpage listing
To add a Subpage Listing component to a page, you need to:
- Navigate to the page you'd like to add a subpage listing to
- Select the 'Add content' button under the 'Main content' area of the page 'Content' tab
- This will open the 'Add content' slide-out panel
- From here, select the 'Subpage Listing' component
- Under the 'Content' section next to 'Link to listing', select 'Add'
- Select 'Add Link'
- Select the link to the internal page you want to use for the subpage listing. For example, you would select the "Property Taxes" page if you want to display links and summaries to all of the pages that fall under Property Taxes in your website menu.
- Select 'Submit'
- Repeat these steps for any other pages you want to create subpage listings for. If you choose more than one page, tabs will appear to switch between page listings
- Select 'Submit' to complete the process
Please note
If you would just like to link the page names and not include the page summaries, you can leave the summary field blank on each page.
Subpage listing settings
You can adjust the look and layout of your subpage listing through the settings tab. To access the settings, select the 'Settings' tab located at the top of the 'Subpage Listing' slide-out panel.
Review each of the Subpage Listing component settings to learn more.
Design and layout
Item text position
Choose how you would like the title and summary for each page listing to be displayed. You can have the title and summary appear above, below, next to or over top of the page summary image, if one has been selected. If there is no page summary image, then there will simply be text boxes for each page in the subpage listing.
Background colour
If you would like to add a background colour for each page in the subpage listing, turn on the 'Add background colour' toggle. Below, next to 'Background colour', select the colour you'd like to use. You can also add a background colour behind all of the pages in the subpage listing with the 'Content colours' setting.
Colour options
The colour options are based on the design of your website. You may be able to change the design colours depending on your Govstack plan. To get access to the website design features, speak with your GHD Digital Account Executive.
Items per row
Choose how many pages you would like each row of the subpage listing to display. You may want to provide more space for pages with longer summaries and images. Experiment with different items per row to find the look you like best.
Item heading size
With the 'Item heading size' and 'Item secondary heading size' settings, choose how large you want the headings (and subheadings, if applicable) to be for each page in the subpage listing.
Item text alignment
Next to 'Item text alignment', select how you want the headings and summaries for each page in the subpage listing to be aligned. We recommend left aligning most content to be the most accessible for North American audiences.
Remove item spacing
A subpage listing will automatically add space between each page listed. If you would like to remove this spacing, turn on the 'Remove item spacing' toggle.
Hide current page from list
When creating a subpage listing it is possible to place the listing on a page that appears in the listing. This duplication can be confusing to site visitors. Setting this option to 'Yes' removes the current page from the list.
Hide image
Even if a page has an image added to its summary, you can choose not to display the image in the subpage listing. To do this, turn on the 'Hide image' toggle.
Image style
In the 'Image style' setting, you can choose which shape you want the images in the subpage listing to be.
If you select 'Original', then your images will appear with their original ratios on the page. Keep in mind that different images may have different ratios, so the subpage listing may display images of different shapes if you select this option.
If you select one of the ratio options, then all the images in the subpage listing will display in that ratio. The first number in each ratio represents the width while the second number represents the height. For example, a 2:1 image would be twice as wide as it is high.
If your images are cropped oddly or don't look the way you want them to after adjusting the image style, you may need to change their focal point so that they crop properly when changing the image ratio. Learn how to change the focal point of an image in your gallery in the 'Media' tab in the Govstack main menu.
Box pad
After you select an image style in the 'Image style' settings, your subpage listing images will automatically be cropped to match your selection. However, you may prefer to have your images retain their original ratios while still having a consistent ratio display. To do this, turn on the 'Box pad' toggle to add padding around images to match the image style you have selected.
Pages to display
Next to 'Pages to display', you can select how many of the child pages from the parent page link you have chosen you want to display in the subpage listing. Leaving this field blank will limit the list to 10 pages. To show all pages enter a number equal to or higher than the total pages in the target directory.
Enable random order'
You can set up the subpage listing to list all the child pages in the order they appear under their parent page, or you can have them appear in a random order every time a user visits the page. If you would like the pages to appear in random order in the subpage listing, turn on the 'Enable random order' toggle.
We recommend keeping the original order to make it easier for users to navigate through your website. Typically, pages should be listed in alphabetical order and match the order they appear in the side menu.
Enable carousel
You can set up your subpage listing to display in carousel mode where it displays pages in a single row and cycles through them at regular defined intervals. To have your subpage listing display in a carousel, turn on the 'Enable carousel' toggle.
Allow users to scroll through a carousel
If you want users to be able to scroll through a subpage listing carousel themselves, rather than waiting for it to auto-scroll, you can either:
- Add left and right arrow buttons that users can select to move through the carousel. To do this, turn on the 'Show arrows' toggle
- Add clickable dots below the carousel gallery that users can select to view any page in the subpage listing. To do this, turn on the 'Show dots' toggle
Set the carousel rotation speed
Next to 'Auto rotate speed', use the slider to choose how often the carousel will automatically rotate pages. You can choose anywhere between one and 10 seconds.
Tab style
f you select multiple directories in the content settings they will be displayed using tabs to separate the page lists.
This setting determines the style of the tab separator used.
The 4 available styles are:
Basic
Button
Underline
Line through
Column widths
These settings will be available only if the component is contained within a split component.
Using the 'Column Width' sliders you can set the width of the component in split components. The slider allows for column widths from 1 to 12. A minimum width of 2 is recommended.
The total width settings for 'Split Section 1' and 'Split Section 2' should equal 12. If the sum of 'Split Section 1' and 'Split Section 2' is greater than 12, your split content will appear on two rows.
Separate options are available for desktop and tablet size screens. On mobile screens split components switch to a single column.
Animation
Animate
You can add animation to the component by selecting the 'Animate' toggle. Once the 'Animate' toggle is selected, you'll have the option to customize the:
- Animation style
- Animation delay (seconds)
- Animation duration (seconds)
Animation style
From the 'Animation style' dropdown menu, select the type of animation you'd like to add to the accordion. There are a variety of different animation options in the following categories:
- Attention Seekers
- Bouncing Entrances
- Fading Entrances
- Flippers
- Light Speed
- Rotating Entrances
- Sliding Entrances
- Zoom Entrances
- Specials
We recommend testing out a variety of animation styles to select the one you like the most.
Please note
Animation styles can cause accessibility issues for some users visiting your website. For example, some users may experience motion sickness when viewing animated elements on your website.
Animation delay
Using the 'Animation delay' slider select the time in seconds that you'd like to delay the animation.
Please note
Animation delay can cause accessibility issues for some users visiting your website. Certain animation styles and delays can combine to make your animated component invisible to screen readers. Please test your animations to make sure they are accessible.
Animation duration
You can select how long you'd like the animation to last on the component by using the 'Animation duration' slider. Select the number of seconds you'd like the animation to continue on the public website.
Advanced
Name
In the 'Name' field you can give a unique name to the component. This will make it easier to differentiate between components, both on your page as well as in your clipboard.
Anchor name
You can create an anchor link that will link a user directly to the top of this component.
When linking to this page add the anchor to the "Anchor / querystring" field in the "Select link" dialogue box. The link will then jump to the top of the target component rather than to the top of the page.
Note that anchor names are case sensitive. For best results use lowercase characters, numbers, and dashes only. Avoid spaces and special characters.
Custom classes
In the 'Custom classes' field, you can add any custom CSS classes you may have. Custom CSS classes can be found in the Design node under the 'CSS' tab in the backend of Govstack.
If you'd like to add more than one custom class, you'll need to leave a space between each class.
Please note
Depending on your Govstack plan, you may not be able to access the Design node in the backend. If you'd like to be able to add custom CSS and get access to the website design, contact your GHD Digital Account Executive.
We cannot guarantee that future updates to Govstack will not break or negatively impact custom CSS.
Additional styles
You can select additional styles to the component, including:
- Spacing
- Visibility
- Design
Spacing
You can remove the spacing around the component by selecting one of the following options:
- Remove spacing
- Remove spacing top only
- Remove spacing bottom only
Visibility
You can customize the visibility of the component. Select one of the following options:
- Hide on all screens
- Hide on extra small screens
- Hide on small screens
- Hide on medium screens
- Hide on large screens
- Hide on extra large screens
Design
Select one of the following options if you'd like to customize the design of the component:
- Show shadows - this will add a shadow effect to the component. Note that by default most Govstack websites do not have shadows. You can add these in the Design node
- Sticky - the component will stay on the screen even as users scroll down the page
Hide from website
Turn on the 'Hide from website' toggle if you'd like to hide this component from the web page.
Add a summary to a page
Learn how to add a summary to a page that your subpage listing can use to provide a brief introduction for the pages listed in with the Subpage Listing component.
Preview and publish changes
Once you've added a subpage listing to your page, make sure to preview and publish the page to complete the process.