🗻Aspen

A Premium RapidWeaver Theme

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.

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.

How to add an Autoplay Video Banner to 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.

This tutorial requires the Stacks third party plugin.

How to use the Banner Import stack with the Aspen Theme

---

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.

How to add a custom banner image in the Aspen Theme

---

Custom Site Logo

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

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.

How to embed a responsive YouTube or Vimeo video in the Aspen Theme

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

• Copy your YouTube Embed code from here:

Step 1: Click Share > Embed

Step 2: Select desired embed options > Copy the highlighted embed code

• Copy your Vimeo Embed code from here:

Step 1: Click Share

Step 2: Select desired embed options > Copy the highlighted embed code

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.

How to add an 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.

How to use the Sidebar Split 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.

This tutorial requires the Stacks third party plugin.

How to use the Aspen sidebar import stack

---

Aspen's Split stack

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

This tutorial requires the Stacks third party plugin.

How to use the Aspen Split stack

---

Change the "Menu" button text

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

How to change the menu button text in Aspen

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.

Tutorial requires an Ecwid eCommerce account. Sign up for a free plan to get started.

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.

Tutorial requires a Cartloom eCommerce account.

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>

Replace sellername in the above snippet to match your actual Cartloom seller name.

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>

Replace sellername in the above snippet to match your actual Cartloom seller name.

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>

If you'd like to link to your eCommerce page from the above icons, replace # with the actual link to your page.

Example:

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