Basic and Custom Pages


Basic and Custom Pages

In this section, learn how to:

  • Create a simple web page using Basic Pages
  • Create pages with more complex layouts and features using Custom Pages
  • Use a web builder page as your catalog's main page


Aspen Discovery provides a web builder at no extra cost! Best of all, you can create pages that look great with a variety of content options at your disposal with no coding knowledge whatsoever. Whether you want to create a few pages to supplement your catalog or build out your library's entire website in Aspen, we have options for you.


Example Web Builder Pages

Basic Pages

Creating a Basic Page

  1. Navigate to Aspen AdministrationWeb BuilderBasic Pages.
  2. Click Add New.


Basic Pages


  1. Give your page a title.
  2. Enter a URL Alias. This must always begin with a forward slash. For example: /bookclub
The URL alias helps create the URL where the page will be accessed. Once you've finished your page, you can view it (and link to it) by appending the URL alias to the end of your main catalog URL. For example:


  1. Enter a teaser description, if desired. If searching within web builder pages is enabled, the teaser will display as a brief description for the page within search results.


Teaser description example


  1. Next, the page contents: this is where the fun begins! In this box, you can add and format text, upload images, and more. Click here to learn more about using the text editor within Aspen's web builder!
  2. Require login to access: Only check this box if you want to restrict this page to users who are logged into Aspen Discovery. Once selected, you can even narrow down the access to specific patron types. This means you could potentially create pages that only staff have access to!
  3. Audience and Categories: Select any audiences or categories that apply to the page. If your library has enabled searching within web builder pages, the Audiences and Categories will appear as search facets patrons can use to narrow down to specific website content. 


Audience & Category Facets


The audiences and categories are completely customizable. Visit the Audiences and Categories sections of the web builder module in Aspen settings to edit, add, or delete any of the default options.


  1. Libraries: Select the library (or libraries) this page should be associated with. If no libraries are selected, you will not be able to view the page.
  2. Don't forget to save your changes periodically!
Your page is technically "live" as soon as you create it. However, no one will know about the page until you directly link to it either somewhere on Aspen or on your library website. For help with creating menu links, click here. Note that if you're linking to a web builder page anywhere else in Aspen, all you need to do is enter in the URL alias for the link. This way, even if your main catalog URL changes, your links will continue to function.
Custom Pages

Custom Web Builder Pages

Custom Pages in Aspen's web builder module start out much like basic pages. However, they allow for greater complexity and flexibility in your page's layout and offer more options for embedded content. If you're just starting out with the web builder, it may be helpful to first read the Basic Pages section, then return here.


The building blocks for custom pages are rows and cells. If you've ever worked with spreadsheet software, the concept is similar! In a custom page, you'll construct your layout first by adding rows, and then within those rows you can add cells. Let's take a look at a sample page with some outlines to help us visualize:



This page from our model site was constructed with four rows (outlined in purple). The lower two rows each have two cells within them (outlined in green). You can see the live page here:

Create a New Custom Page

If you're just starting out with the web builder, it may be helpful to first read the Basic Pages section, then return here.
  1. Navigate to Aspen Administration → Web Builder → Basic Pages.
  2. Click Add New.
  3. Give your page a title and a URL alias.
  4. At this point, you'll see a new option: Add Row. Before we can start adding rows to build our page layout, we'll need to save the page at the bottom.

Once the page is saved, you can start adding rows. These are the first building blocks for our layout.



Click the plus sign (+) in a row to add a cell; click the minus sign (-) on a on a cell or row to delete it. Click the Edit icon on a cell to edit that cell's contents. Clicking the Edit icon on a row will allow you to edit its properties.


You can also move the position of a cell or row by clicking on the directional arrows. You may need to save your changes in order for the arrows to appear.


Custom Pages - Adding Content

Adding Content to Custom Pages


Once you've created a custom page and added at least one row, you can start adding content.


  1. Click the Edit icon on a cell to edit its contents.


Edit Button on Cell


  1. The Source Type is where we can specify what content we'd like to add for this cell. By default, the source type is Text/Images which brings up the standard text editor. However, Aspen provides several options to choose from to make adding content easy.


Source Type dropdown


The available source types are:


Text/Images: The default text editor. This editor also provides the ability to directly upload and embed images within the text. For greater customization and resizing options for images, we recommend using the Text/Images source.

Basic Page: Embed an existing Basic Page created within Aspen. Once this option is selected, you'll be able to choose the desired basic page from the dropdown list.

Basic Page Teaser: Embed just the teaser description for a Basic Page.

Collection Spotlight: Embed an existing collection spotlight. Once this option is selected, you'll be able to choose the desired collection spotlight from the dropdown list. Note that in order to adjust the appearance of the collection spotlight within a custom page, you'll need to edit the spotlight and adjust its settings. Click here to learn more about collection spotlights.

Form: Embed a custom form created within Aspen's web builder module. Click here to learn more about custom forms.

Image: Embed an existing image from the Images section of the web builder module. Learn more about Images and PDFs here. If you'd like the image to link out to another page or website, enter in the URL. The image will expand to fill the size of the cell. For more advanced image editing and resizing options, you might wish to try adding an image via the Text/Images source type.

PDF: Embed an existing PDF from the PDFs section of the web builder module. Once selected, you have a choice of whether to display the PDF embedded within the cell or to display a thumbnail link to the chose PDF.

iFrame: Embed an iFrame from an external source. For the Source Info field, you only need to input the iFrame URL, not the entire iFrame code. In the Height for iFrame field, specify the height (in pixels) for the iFrame on the page.

Vimeo Video: Embed a video from Vimeo. Enter the URL for the video in the Source Info field.

YouTube Video: Embed a video from YouTube. All you need is to add the video's URL to the Source Info field. (Pasting the full embed code here will not work)

Library Hours and Locations: Embed the hours and locations information for your library. This is the same information that displays in the admin menu ( ≡ ) in the Library Hours & Location link. To learn more about how to add or edit hour and location information, visit the Library Systems and Locations page (under the Locations section).

Web Resource: Embed a single existing web resource. Web resources are added via the Web Resource section of the Web Builder module. Click here to learn more about adding web resources.
Quick Poll: Quick Polls are a way for libraries to build a simple poll to quickly engage with patrons and get a pulse on trending topics and questions. Learn More. 


Updated 2023-09-14 km bws
Custom Pages - Cell Options

Cell Options

In addition to adding content to cells, you have some extra options at your disposal.



Giving your cell a title is optional. Entering in text here will display the title above the cell content.


Layout Settings: Column Widths

Aspen's web builder uses a 12-column structure of rows and cells to build layouts. The image below illustrates how Aspen distributes the cells and re-sizes them automatically when new cells are added.


Web Builder Grid


For example, a cell with a column width of "12" will stretch across the entire row. If you add two cells to a row, each cell will be 6 columns wide.


cells with even widths



Let's say instead of 6 and 6 (50% and 50%) you'd like a layout where one cell takes up 75% of the row and the other takes up the remaining 25%. Changing the column widths for one cell to 8, and the second cell's column widths to 4, will achieve this.


uneven cells


web builder cell 8 width


The different sizes listed (Large, Medium, etc) refer to screen size. As you make your browser window smaller or larger, or if viewing Aspen on a mobile device, Aspen's layout will re-size accordingly. As you experiment with resizing web builder cells, it's a good idea to preview the adjustments on a mobile device to see how it impacts the layout at smaller sizes.


Vertical Alignment

Adjust how the cell's contents are vertically positioned within the cell.


Horizontal Justification

Adjust how the cell's text is aligned within the cell.


Make cell accordion

Checking this box will turn this cell into an "accordion," which functions as a header that expands to reveal extra content when clicked. The text you're reading right now is nested within an accordion cell! A cell title is required to use this function. Note that you can either turn individual cells into accordions, or you can adjust the Row settings to make an entire row into an accordion.


Design Options

This section will allow you to select a different color scheme for the cell. This can be nice for making certain information stand out with a colorful background. The color options are based on the primary, secondary, and tertiary background colors from your catalog's theme. Optionally, you can also check the box to invert the colors of your selection.
Custom Pages - Row Options

Row Options

To view or edit settings for a row, click the Edit icon for that row.

edit row


Make row accordion

Checking this box will turn this row into an "accordion," which functions as a header that expands to reveal extra content when clicked. A Row Title is required in order to use this function.


Row Title

Entering text here will display a title above your row's content. A title is optional unless you wish to make your row an accordion row.


Design Options

This section will allow you to select a different color scheme for the row. The color options are based on the primary, secondary, and tertiary background colors from your catalog's theme. Optionally, you can also check the box to invert the colors of your selection.



This section displays the cells within the current row. Cells can also be edited or deleted from here.

Copy a Basic or Custom Page

You can now copy web builder pages in Aspen! This allows you to easily create page "templates" that you can copy and swap out the content.

To copy a page:

  1. Head to the Web Builder module and open up Basic Pages or Custom Pages, depending on where your page lives.
  2. Edit the page you wish to copy.
  3. Click the Copy button.

  1. After hitting Copy, you'll see an informational box at the top of the new page:

  1. Before saving, it can be a good idea to give the page a new Title and a new URL Alias so it can be distinguished from the original. However, if your Aspen instance has multiple library catalogs with different libraries creating their own web builder pages, it's okay if more than one library has the same URL Alias. This means that your member libraries can all have their own /faq or /help pages without interfering with one another, as long as the different pages are assigned to different Libraries.
  2. Check the Libraries at the bottom and assign to a different library or libraries as needed.
  3. Save your changes. Once you save, you'll be able to edit the page content. 


Updated 2024-01-16 md bws
Enable Searching of Web Builder Pages

By default, users will not be able to search through web builder content you've created. If you would like to enable this:

  1. Navigate to Primary Configuration Library Systems → edit your library's settings
  2. Scroll down to find Web Builder Results and check the box for "Allow searching locally created web content"


Allow Searching Web Content


Once Aspen indexes your web builder content, you'll see a new "in Library Website" search dropdown available.


in Library Website search option



To index Web Resources and Web Builder pages, the Website Indexing module must be turned on. To turn on go to System Administration > Modules > Web Indexer > check Enabled




Updated 2023-05-30 km bws
Restricting Access to Pages

In Aspen, you can choose to restrict access to Basic and Custom Pages.

To do this click on Require login to access.

You can also Allow access without logging in while in the library.

You can also allow access to certain PTypes. This is how you would make the page only accesible to STAFF if you wanted to make an intranet or internal page.

You can also choose to allow access to patrons of certain home library locations.

Frequently Asked Questions

How do I use Aspen Discovery for my whole website?

Some of our libraries use Web Builder to replace their existing websites with Aspen or create a whole new one from scratch. Take a look at some of these awesome examples for inspiration:


Meadville Public Library

Okaloosa County Public Library

Uintah County Library


These libraries have opted to use a web builder page as their new main landing page rather than the standard browse category page. 


Make a Web Builder Page Your New Home Page


  1. After you've created your new home page in the web builder, head to Aspen Administration → Primary ConfigurationHost Information.
  2. Click Add New.
  3. Host name: enter in your library's URL with no http/https or www in front of it.
  4. Library: Select the library/library system.
  5. Location: In most cases, you can leave this at the default (-1). Only select a location if you want a specific page to become the main landing page depending on where the user is accessing your Aspen site. This also requires IP Address settings to be in effect.
  6. Default Path: Enter the URL alias for the page you want to become the new landing page.


Example settings:



Save your changes. When visiting your catalog URL, your web builder page should now display. 


We recommend using Layout settings or manually adding a menu link to make sure users can still get to the browse category page.

HTML/CSS Tips and Tricks

The Basic and Custom pages within Aspen use a WYSIWYG ("What You See Is What You Get") editor by TinyMCE

While the WYSIWYG functionality may work for many users, you also have the option to edit the HTML using the Source Code view. Click the <> icon to access and edit the source code.




Using CSS with Web Builder

Editing the source code will allow you to assign CSS IDs and classes to various elements on your pages. These elements can then be styled with CSS from your Theme settings.


Adding Extra Space

To add extra paragraph spaces between text, images, or other elements, edit the source code and add:



Adding Extra Space Between Rows

To add extra space between rows, you could add a new row and create a table or add this source code and change the background-color hex color to a color of your choice:

<table border="0" style="width: 100%; border-collapse: collapse; background-color: #27ba2e;">
<td style="width: 100%;">

Apply CSS to specific web builder pages

Add this to JavaScript Snippets:

<script type="text/javascript">
// Get url suffix and make it an html ID on custom pages
var custom_page = $("body").attr('id');
if (custom_page = "WebBuilder-PortalPage") {
var get_url_suffix = window.location.pathname;
var create_html_id = get_url_suffix.replace("/", "customPageId-");
$("#main-content").attr('id', create_html_id);

It applies only to custom pages. It takes the URL suffix (in my case /home) and makes that a unique HTML ID. It overwrites the ID of #main-content with the new ID.

Then in CSS apply the background color to this specific custom page:

#customPageId-home {background-color: #dedede;}

Insert a div on a web resources page


if (window.location.href.indexOf("ResourcesList") != -1) {
var block_to_insert ;
var container_block ;

block_to_insert = document.createElement( 'div' ); = 'power_eresource_footer' ;
block_to_insert.innerHTML = 'text goes here. Can also use html for formatting' ;

container_block = document.getElementById( 'main-content');
container_block.appendChild( block_to_insert );

Note: you need to add CSS to the theme setting if you want to style the div. In this case I used this so it wouldn’t fill the entire width of the page:

div#power_eresource_footer {
width: 80%;
margin: auto;

Automatically open menus in custom pages

Where it says ‘/music’, insert the page path

jQuery(document).ready(function() {
      if (window.location.pathname == '/music') {


Automatically open menus in web resources

Use the section color in closed panel background color

jQuery(document).ready(function() {
      if (window.location.pathname == '/WebBuilder/ResourcesList') {

Use the section color in open panel background color

jQuery(document).ready(function() {
      if (window.location.pathname == '/WebBuilder/ResourcesList') {

Updated 2024-03-21 km bws