Introducing Aspen, a ruggedly beautiful Premium RapidWeaver theme. Immerse your visitors in a captivating browsing experience with Aspen's breathtaking design. Crafted with attention to detail, Aspen offers grand video/image banners, responsive audio and video layouts, and phenomenal creative freedom, making it the perfect companion for your web building adventure.

Preview Aspen Here

Purchase Aspen Here or as part of our Premium Themes Bundle Here!

Below you will find some helpful tutorials to guide you through Aspen's features.

Aspen's Main Features

Animated Site Titles

This tutorial will show you how to add an animated site title in the Aspen Theme.

Example video snippet:

<i>My</i> <i>Custom</i> <i>Website</i>

Autoplay Video Banners

This tutorial will show you how to set up an Autoplay Video Banner using the Aspen Theme.

1. Add your compressed .mp4 video file to RapidWeaver > View > Show Site Resources (Command-4).

2. In the Inspector > General Settings tab (Option-Command-1) > enable the Slogan field.

3. Paste the autoplay video code snippet into that Slogan field:

<video autoplay playsinline muted loop="true" width="1280" height="720"><source type="video/mp4" src="%resource()%"></video>

1. Add your video filename within the resource () brackets in the above code.

Banner Import Stack

This tutorial will show you how to use the included Aspen Banner Import stack in your website.

Custom Banner Image (Site Wide)

This tutorial will show you how to add a site wide banner image to the Aspen theme.

1. In RapidWeaver, go to Settings > General, then drag and drop your image in the Banner input box.

Your custom banner will be displayed for all pages in RapidWeaver's Preview mode.

Custom Banner Images (Per Page)

This tutorial will show you how to add a per page banner image to the Aspen theme.

Custom Site Logo

This tutorial will show you how to add a custom site logo in the Aspen Theme.

Responsive Video Player

This tutorial will show you how to embed a responsive YouTube or Vimeo video player on your pages in the Aspen theme.

1. Copy the embed/share code from the video host.

• Copy your YouTube Embed code from here:

• Copy your Vimeo Embed code from here:

1. Paste the embed code in the RapidWeaver page/section where you'd like the fluid video player to appear.

• Highlight your code, select Format > Clear Formatting (Option-Command-.), then Format > Ignore Formatting (Command-.).

Your responsive video player should now show in RapidWeaver's Preview mode.

Responsive Audio Player

This tutorial will show you how to add a responsive audio player in the Aspen Theme.

1. Add your .wav or .mp3 file to the RapidWeaver Resources panel (Command-4).

2. Paste the below audio player code snippet in the RapidWeaver page/section where you'd like the audio player to appear:

<audio preload="auto" controls><source src="%resource()%" /></audio>

1. Add your audio filename within the resource () brackets in the above code.

• Highlight your code, and select Format > Ignore Formatting (Command-.).

In preview, your responsive audio player should now be displayed.

Sidebar Split feature

This tutorial will show you how to use the split sidebar feature in the Aspen theme.

Aspen's Sidebar Import Stack

This tutorial will show you how to use the sidebar import stack inside your website using the Aspen theme.

Aspen's Split stack

Tutorial showing how to use the Aspen Split stack in your next website built with the Aspen theme.

Change the "Menu" button text

This tutorial will show you how to change the "Menu" button text in RapidWeaver's Aspen theme.

To change the menu button text in the Aspen Theme, paste the below CSS code into the Inspector > HTML Code tab (Option-Command-3), > CSS sub-tab:

figure.theme header.theme .nav_btn:after{content: 'MENU';}

Once pasted, adjust the quoted 'MENU' text as needed. This will update the “Menu” button text site wide.

In the above example we changed 'MENU' to 'SUPER MENU'.

eCommerce with Aspen

Aspen comes packed with eCommerce features to help you build a successful eCommerce website. Take your online sales to new heights with Aspen, where only the sky is the limit.

Ecwid eCommerce

Ecwid is our preferred eCommerce platform and is fully compatible with Aspen. Get Ecwid for a beautiful online store to sell digital or physical products. Learn more, and sign up for a free plan.

We've put together a short three part video tutorial that goes through how to setup your Ecwid store in RapidWeaver and start selling online with ease.

1) Start Selling online with RapidWeaver and Ecwid

2) Categories & Store Customization

3) Sell Online with Stacks and Ecwid

Cartloom eCommerce

This tutorial covers the built-in Cartloom eCommerce features that come with the Aspen theme.

Aspen comes with built-in Cartloom eCommerce integration and features.

• Display a Cartloom eCommerce shopping cart icon in upper right-hand corner of your page that updates in real-time as items are added or removed from the cart.

• Import a shopping bag, shopping basket, or shopping cart icon that triggers Cartloom's View Cart function anywhere in your page layout/design.

• Import a shopping bag, shopping basket, or shopping cart icon into Aspen's designated social icon areas that link to your eCommerce page.

Interactive Shopping Cart (Upper Right Corner)

To add an interactive shopping icon that updates in real-time as items are added/removed from your shopper's cart:

1. Go to Settings > Master Style > check the Show Cartloom Cart box > adjust the Shopping Icon Size per your desire.

1. Paste the Cartloom Javascript snippet below in Settings > Code > Head:

<script type="text/javascript" id="cljs" src="https://sellername.cartloom.com/cl4/cart.js"></script>

Interactive Shopping Cart (Anywhere)

To add an interactive shopping cart icon anywhere in your site's layout/design, copy any of the below code snippets and paste it into your page's content area within RapidWeaver's Edit mode:

Shopping Bag

<a class="social-bag cartloom-viewcart" href="#"></a>

Shopping Basket

<a class="social-basket cartloom-viewcart" href="#"></a> 

Shopping Cart

<a class="social-cart cartloom-viewcart" href="#"></a>

1. Paste the below Cartloom Javascript snippet under Settings > Code > Head:

<script type="text/javascript" id="cljs" src="https://sellername.cartloom.com/cl4/cart.js"></script>

eCommerce Shopping Icons

To add a shopping icon to Aspen's designated theme areas:

1. Copy your preferred shopping icon code snippet from the below options, then go to Settings > Code > Body > and paste your code there.

Shopping Bag

<a class="social-import social-bag" href="#"></a>

Shopping Basket

<a class="social-import social-basket" href="#"></a>

Shopping Cart

<a class="social-import social-cart" href="#"></a>

<a class="social-import social-bag" href="https://www.example.com/shop/"></a>

Version 1.0.7

Fixed: Banner shifting bug when scrolling down the page.

Version 1.0.5

Fixed: 3rd level sub navigation not accessible in slide-out navigation.

Version 1.0.2

Fixed: Navigation “Menu” button and mobile navigation not accessible.

Version 1.0.1

Added: Color picker for mobile menu background.

Added: Color picker for nav title hover underline.

Added: Color picker for Banner Import links.

Added: Scroll down nav menu is less wide.

Added: Site Logo hover now shows hand cursor.

Fixed: Scroll down nav menu background flash.

Fixed: Disable Nav Parent Pages, sub pages not accessible on iOS.

Fixed: Firefox, poor performance on navigation hover.

Fixed: Main and Sub HIDE hover underlines, not working.

Version 1.0.0

Original theme release

Q: Will past purchasers of Nick's Aspen theme get support from Realmac?

A: Yes, we'll offer support to anyone that previously purchased the Aspen theme directly from Nick Cates. However, we always recommend asking css/html and site building related questions on our Community Forum. Q: I already purchased Aspen from Nick Cates, do I need to buy it again?

A: No, the Realmac version has few changes. Keep using the version you purchased. You can download the most recent version of the theme from Nick Cates, using his order lookup tool. Realmac Customers should use the Realmac order lookup tool. Q: Are there any updates or are you just taking over support?

A: No significant updates were needed for Aspen. However, if updates are required, Realmac will make those changes and publish an update. This will be available to customers that purchased directly from Realmac.

Q: The Aspen theme is fairly old, does it still work okay?

A: Yes, absolutely, it's a great theme and can produce amazing websites that look and perform great on the web. The age of this theme is reflected in the price.

Copy and paste these social icon snippets into the RapidWeaver Settings → Code → Body area. Once pasted, replace “#” with the page url to your social network.

Example 1: Importing into a designated theme social icon area:

<a class="social-youtube social-import" href="https://www.youtube.com/@realmacsoftware"></a>

Example 2: Basic icon linking without importing into a designated theme area:

<a class="social-youtube" href="https://www.youtube.com/@realmacsoftware"></a>

Example 3: Icon linking to a new external page, using “parent” rel tag:

<a class="social-youtube" target="_blank" href="https://www.youtube.com/@realmacsoftware"></a>

Icon List

About Me

<a class="social-aboutme social-import" href="#"></a>

AIM

<a class="social-aim social-import" href="#"></a>

Amazon

<a class="social-amazon social-import" href="#"></a>

Android

<a class="social-android social-import" href="#"></a>

Angie’s List

<a class="social-angie social-import" href="#"></a>

App.net

<a class="social-app-net social-import" href="#"></a>

App Store

<a class="social-app-store social-import" href="#"></a>

Bandcamp

<a class="social-bandcamp social-import" href="#"></a>

Behance

<a class="social-behance social-import" href="#"></a>

Blip

<a class="social-blip social-import" href="#"></a>

Blogger

<a class="social-blogger social-import" href="#"></a>

Comments

<a class="social-comments social-import" href="#"></a>

Delicious

<a class="social-delicious social-import" href="#"></a>

Deviant Ar

<a class="social-deviant-art social-import" href="#"></a>

Digg

<a class="social-digg social-import" href="#"></a>

Disporia

<a class="social-disporia social-import" href="#"></a>

Disqus

<a class="social-disqus social-import" href="#"></a>

Dribbble

<a class="social-dribbble social-import" href="#"></a>

Ebay

<a class="social-ebay social-import" href="#"></a>

Email

<a class="social-email social-import" href="mailto:my-email@gmail.com"></a>

Ello

<a class="social-ello social-import" href="#"></a>

Etsy

<a class="social-etsy social-import" href="#"></a>

Fab

<a class="social-fab social-import" href="#"></a>

Facebook

<a class="social-facebook social-import" href="#"></a>

Facebook Like

<a class="social-facebook-like social-import" href="#"></a>

Flickr

<a class="social-flickr social-import" href="#"></a>

Flip

<a class="social-flip social-import" href="#"></a>

Four Square

<a class="social-four-square social-import" href="#"></a>

Github

<a class="social-github social-import" href="#"></a>

Google

<a class="social-google social-import" href="#"></a>

Google Plus

<a class="social-google-plus social-import" href="#"></a>

Houzz

<a class="social-houzz social-import" href="#"></a>

Instagram

<a class="social-instagram social-import" href="#"></a>

IMDB

<a class="social-imdb social-import" href="#"></a>

iTunes

<a class="social-itunes social-import" href="#"></a>

LastFM

<a class="social-lastfm social-import" href="#"></a>

Link

<a class="social-link social-import" href="#"></a>

LinkedIn

<a class="social-linkedin social-import" href="#"></a>

Mixcloud

<a class="social-mixcloud social-import" href="#"></a>

MySpace

<a class="social-myspace social-import" href="#"></a>

Nick Cates

<a class="social-ncd social-import" href="#"></a>

Newsvine

<a class="social-newsvine social-import" href="#"></a>

Path

<a class="social-path social-import" href="#"></a>

Paypal

<a class="social-paypal social-import" href="#"></a>

Phone

<a class="social-phone social-import" href="tel:#"></a>

Picasa

<a class="social-picasa social-import" href="#"></a>

Pinterest

<a class="social-pinterest social-import" href="#"></a>

Pocket

<a class="social-pocket social-import" href="#"></a>

Pandora

<a class="social-pandora social-import" href="#"></a>

Reddit

<a class="social-reddit social-import" href="#"></a>

Reverb Nation

<a class="social-reverb-nation social-import" href="#"></a>

RSS

<a class="social-rss social-import" href="#"></a>

Skype

<a class="social-skype social-import" href="#"></a>

SoundCloud

<a class="social-soundcloud social-import" href="#"></a>

Spotify

<a class="social-spotify social-import" href="#"></a>

Stumble Upon

<a class="social-stumble-upon social-import" href="#"></a>

Strava

<a class="social-strava social-import" href="#"></a>

Trip Advisor

<a class="social-trip-advisor social-import" href="#"></a>

Tumblr

<a class="social-tumblr social-import" href="#"></a>

Typed

<a class="social-typed social-import" href="#"></a>

Twitter

<a class="social-twitter social-import" href="#"></a>

UStream

<a class="social-ustream social-import" href="#"></a>

Viddler

<a class="social-viddler social-import" href="#"></a>

Vine

<a class="social-vine social-import" href="#"></a>

Vimeo

<a class="social-vimeo social-import" href="#"></a>

VK

<a class="social-vk social-import" href="#"></a>

WordPress

<a class="social-wordpress social-import" href="#"></a>

Xing

<a class="social-xing social-import" href="#"></a>

Yahoo

<a class="social-yahoo social-import" href="#"></a>

Yelp

<a class="social-yelp social-import" href="#"></a>

YouTube

<a class="social-youtube social-import" href="#"></a>

500px

<a class="social-500 social-import" href="#"></a>

500px (alt)

<a class="social-500-alt social-import" href="#"></a>