Basic and Custom Pages

Creating a Basic Page

1. Navigate to Aspen Administration → Web Builder → Basic Pages.
2. Click Add New.

3. Give your page a title.
4. Enter a URL Alias. This must always begin with a forward slash. For example: /bookclub

5. 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.

6. 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!
7. 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!
8. 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. 

9. 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.
10. Don't forget to save your changes periodically!

Custom Web Builder Pages

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: https://aspen-model.bywatersolutions.com/kidzone

---

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.

 

Adding Content to Custom Pages

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

2. 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.

Cell Options

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

Title

Layout Settings: Column 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.

 

 

 

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.

Row Options

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

Make row accordion

Row Title

Design Options

Cells

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.

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

5. 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.
6. Check the Libraries at the bottom and assign to a different library or libraries as needed.
7. Save your changes. Once you save, you'll be able to edit the page content. 

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"

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

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

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.

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 Configuration → Host 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.

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:

<p>&nbsp;</p>
<table border="0" style="width: 100%; border-collapse: collapse; background-color: #27ba2e;">
<tbody>
<tr>
<td style="width: 100%;">
<p></p>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>

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);
}
</script>

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

Ex: https://discovery.fclspa.org/WebBuilder/ResourcesList

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

block_to_insert = document.createElement( 'div' );
block_to_insert.id = '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 );
}
</script>

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

<script>
jQuery(document).ready(function() {
      if (window.location.pathname == '/music') {
$('.customAccordionRow').addClass('active');
$('.panel-collapse').addClass('in');
}
});
</script>

Automatically open menus in web resources

Use the section color in closed panel background color

<script>
jQuery(document).ready(function() {
      if (window.location.pathname == '/WebBuilder/ResourcesList') {
$('.customAccordionRow').addClass('active');
$('.panel-collapse').addClass('in');
}
});
</script>

Use the section color in open panel background color

<script>
jQuery(document).ready(function() {
      if (window.location.pathname == '/WebBuilder/ResourcesList') {
$('.panel').addClass('active');
$('.customAccordionRow').addClass('active');
$('.panel-collapse').addClass('in');
}
});
</script>