Classic Manual
  • Welcome to RapidWeaver
  • Purchasing RapidWeaver
  • Licensing and Activation
  • Subscription FAQ
  • General FAQ
  • 📖User Manual
    • Installing and Activating RapidWeaver
    • Getting Started with RapidWeaver
    • Project Window
    • Preferences
    • Page Types
      • Blog
      • Contact Form
      • File Sharing
      • HTML
      • iFrame
      • Markdown
      • Offsite Page
      • Photo Album
      • Sitemap
      • Styled Text
    • Publishing
      • Publish to a Web Server
      • Publishing to Your Mac
      • Publishing to Chillidog
      • Multiple Publishing Destinations
      • How to fix Publishing Issues
        • Upload Logs
        • Upload Errors
    • Features
      • Health Check
      • Live Browser Preview
      • Privacy
      • Project Backup
      • Macros (Advanced)
      • Resource Browser
      • Simulator
      • Site Badge
      • Themes
    • Keyboard Shortcuts
    • How to
      • Update License Key in RWC
      • Share Your Project File
      • Upgrade Projects
      • Add Google Analytics
      • Improve Search with SEO
      • Embed a YouTube Video
      • Embed a Vimeo Video
      • Edit an .htaccess File
      • Build an Online Store
      • Edit Your Website Online (CMS)
      • Create a Members Area Using Sitelok
    • Troubleshooting
      • How to fix "Couldn't obtain plugin principle class"
      • How to Diagnose an Issue
      • How to Report a Bug
      • How to Locate Your Addons and Preferences
      • How to Send or Share Your Project (moved)
    • Resources
  • 🧩Addons
    • What are Addons?
    • Premium Themes
      • 🗻Aspen
        • Aspen FAQ
        • Social Icons
        • Aspen Version History
      • 🦸Marvel
        • Marvel FAQ
        • Social Icons
        • Marvel Version History
      • 👑Royale
        • Royale FAQ
        • Social Icons
        • Royale Version History
  • 👷Developers
    • Addon Overview
    • Themes
      • Theme Introduction
      • Theme Syntax Tags
      • Theme.plist Syntax
      • Theme Info.plist
    • Plugins
      • Plugin SDK
    • Marketplace Developer Guide
  • 📁Legal
    • Acknowledgements
    • Subscription Terms of Service
    • Privacy Policy
    • EULA
Powered by GitBook
On this page
  • Marvel's Main Features
  • Theme Presets
  • Mixed Media Banners
  • Custom Banner Image (Site Wide)
  • Custom Banner Image (Per Page)
  • Custom HTML5 Video Banner (Per Page)
  • Custom YouTube/Vimeo Video Banner (Per Page)
  • Custom Velvet Video Banner (Per Page)
  • Custom SuperFlex 3 Slideshow Banner (Per Page)
  • Responsive Video Player
  • Responsive Audio Player
  • Featured Navigation Links
  • Create Line Breaks in Marvel
  • Create Link Arrows in Marvel
  • Upper Right – Mobile Menu Button
  • Marvel's Split Stack
  • eCommerce with Marvel
  • Ecwid eCommerce
  • Cartloom eCommerce
  • Interactive Shopping Cart (Upper Right Corner)
  • Interactive Shopping Cart (Anywhere)
  • eCommerce Shopping Icons

Was this helpful?

Export as PDF
  1. Addons
  2. Premium Themes

Marvel

A Premium RapidWeaver Theme

PreviousAspen Version HistoryNextMarvel FAQ

Last updated 1 year ago

Was this helpful?

Introducing Marvel, a Premium RapidWeaver theme that's truly EPIC! Unleash your creativity with Marvel's built-in features including edge-to-edge page sections, a drag-and-drop image/video banner area, and a super slide out navigation panel that's responsive across all devices. With its customizable features, responsive design, and stunning styles, Marvel is the ultimate choice for those looking to create websites that are out of this world!

or as part of our !

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


Marvel's Main Features

Theme Presets

Site Wide

Go to Master Style > select desired theme style from the Theme Styles dropdown menu.

Per Page


Mixed Media Banners

Below are the different banner options available in RapidWeaver's Premium Marvel theme and tutorials on how to add them.

Custom Banner Image (Site Wide)

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

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

Custom Banner Image (Per Page)

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

Custom HTML5 Video Banner (Per Page)

This tutorial will show you how to add an HTML5 Video Banner to your pages in the Marvel theme.

<video loop muted autoplay class="feature"><source src="%resource(my_video.mp4)%" type="video/mp4"></video>
  • Replace “my_video” with the name of your video file (no spaces).

In preview, your HTML5 video should now be playing!

Custom YouTube/Vimeo Video Banner (Per Page)

This tutorial will show you how to embed a YouTube or Vimeo video banner to the Marvel theme.

  1. Copy your YouTube or Vimeo embed code. Usually you can find this by clicking the "Share" button located on the video's page. Below is an example for Vimeo.

  • Add class="feature" to the iframe tag.

In preview, your YouTube or Vimeo video should now be displayed!

Custom Velvet Video Banner (Per Page)

This tutorial will show you how to embed a Velvet Video banner in the Marvel theme.

  1. In edit mode, place your intended Velvet banner video, as the first Velvet stack in the page order.

In preview, your Velvet Video banner should now be displayed!

Custom SuperFlex 3 Slideshow Banner (Per Page)

This tutorial will show you how to add a SuperFlex 3 slideshow banner to the Marvel theme.

  1. In your SuperFlex 3 stack settings, enable the Import option.

In preview, your SuperFlex 3 slideshow banner should now be displayed!


Responsive Video Player

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

  1. Copy your YouTube or Vimeo embed code. Usually you can find this by clicking the "Share" button located on the video's page. Below is an example for YouTube.

  1. Paste the embed code into the content edit area.

In preview, your responsive video should now be displayed.


Responsive Audio Player

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

  1. 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>
  • Add your audio filename within the resource () brackets in the above code.

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


Featured Navigation Links

This tutorial will show you how to create featured navigation menu links in the Marvel theme.

  1. Single-click a page link (left panel) to edit the page title.

  2. Paste the below code snippet in front of the page title.

<i></i>

When in preview mode, you should now see your featured desktop navigation links.


Create Line Breaks in Marvel

This tutorial will show you how to create line breaks on your pages in the Marvel theme.

<hr>

Create Link Arrows in Marvel

This tutorial will show you how to create link arrows on your pages in the Marvel theme.

  1. To style links with forward arrow icons, highlight the text you'd like make a link, then select the link icon.

  1. Add a Custom Attribute, give it the name “class”, and value “social-forward”. Finally click the "Set Link" button.

In RapidWeaver's preview mode you will now see those link arrows next to the links you set.


Upper Right – Mobile Menu Button

This tutorial will show you how to move the mobile menu button that is displayed on mobile devices when viewing your Marvel theme built website.

  1. The below custom css will make the mobile menu button appear in the upper right corner of a mobile device. Paste the below code snippet in Settings > Code > CSS.

@media screen and (max-width: 800px) { .menu_stick { top: 0;bottom: auto; } .slideout.menu_btn { top: 20px; bottom: auto; } }

Marvel's Split Stack

This tutorial will show you how to create an “edge to edge” section with Marvel's Split stack.

When downloading Marvel, in the folder you’ll find the Marvel Split stack, double-click the stack to install. Using a Stacks page, you can drag in the Marvel Split stack to create an “edge to edge” section within the main content area.

* NOTE: After using the Split stack, all following content MUST be contained within Split stacks to avoid layout issues.

* NOTE: Make sure you select matching Text, Header, and Link colors in your Marvel Split stack's settings so that they match your selected colors for these theme elements.


eCommerce with Marvel

Marvel comes packed with eCommerce features to help you build a successful eCommerce website. Give your customers an EPIC online shopping experience with Marvel.

Ecwid eCommerce

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 Marvel theme.

Marvel 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 Marvel'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.

  1. Paste the below Cartloom Javascript snippet 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 Marvel'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>

Use the theme styles as shown on the . You can set Marvel's theme style site wide, or per page.

Select page title from left hand menu > go to Inspector > Page Styles () > uncheck Use Master Style box > select theme style from Theme Styles dropdown menu.

Select page you'd like to add custom banner image to from left hand menu > go to Inspector > General Settings (), then drag and drop your image in the Override Site Banner input box.

Add your .mp4 video to the RapidWeaver Resources panel ().

Go to Inspector > Page Sidebar (), and add the below video snippet:

Highlight your code, go to Format > Clear Formatting (), then Format > Ignore Formatting ().

Go to Inspector > Page Styles () > uncheck "Use Master Style" box > Banner – Type, choose HTML or Embed Video.

4. Drop in a fall back image banner by following the above guide, just in case some browsers or devices don't support HTML5 video.

Go to Inspector > Page Sidebar (), then paste your YouTube or Vimeo embed code snippet.

Highlight your code, go to Format > Clear Formatting (), then Format > Ignore Formatting ().

Go to Inspector > Page Styles ()> uncheck "Use Master Style" box > Banner – Type, choose HTML or Embed Video.

This tutorial requires the third party plugin.

Velvet was a stack from Nick Cates Design. It is now being sold by .

Go to Inspector > Page Styles () > under Theme Tools section, uncheck Load Responsive Tools.

Go to Inspector > Page Styles () > Banner – Type, choose Velvet (Import First Video).

This tutorial requires the third party plugin.

SuperFlex 3 was a stack from Nick Cates Design. It is now being sold by .

Go to Inspector > Page Styles () > Banner – Type, choose SuperFlex 3 (Import).

Highlight your code, go to Format > Clear Formatting (), then Format > Ignore Formatting ().

Add your .wav or .mp3 file to the RapidWeaver Resources panel ().

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

Paste the below code into your content area to create a line break, then highlight your code and go to Format > Ignore Formatting ().

This tutorial requires the third party plugin.

* NOTE: Split stack use is not compatible with using layout sidebar option. In the Inspector > Page Styles () > Sidebar Content - Position > “Hide” must be chosen from the dropdown menu.

Ecwid is our preferred eCommerce platform and is fully compatible with Marvel. Get Ecwid for a beautiful online store to sell digital or physical products. .

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

Tutorial requires a account.

🧩
🦸
Marvel preview site
Option-Command-5
Option-Command-1
Command-4
Option-Command-2
Option-Command-.
Command-.
Option-Command-5
Option-Command-2
Option-Command-.
Command-.
Option-Command-5
Stacks
Weaver's Space
Option-Command-5
Option-Command-5
Stacks
Weaver's Space
Option-Command-5
Option-Command-.
Command-.
Command-4
Command-.
Command-.
Stacks
Option-Command-5
Learn more, and sign up for a free plan
Ecwid eCommerce account
Cartloom eCommerce
Custom Banner (Per Page)
Preview Marvel Here
Purchase Marvel Here
Premium Themes Bundle Here
Marvel for RapidWeaver, a Premium RapidWeaver Theme
Marvel's Mixed Media Banners
How to set Marvel's Theme Style site wide
How to set Marvel's theme Style per page
Add a site wide custom banner image in RapidWeaver's Marvel theme
Add a unique banner image per page in RapidWeaver's Marvel theme
Add your .mp4 video file to RapidWeaver's resources
Add the HTML5 Video Banner Code Snippet
In Page Inspector uncheck the "Use Master Theme" box, then select HTML5 or Embed Video from the Banner - Type dropdown
You should now see your HTML5 banner video playing in RapidWeaver's preview mode
How to add featured navigation links in Marvel
Add the <hr> tag to your content area where you'd like to create the line break
Your line breaks will be visable in RapidWeaver's preview mode
How to move Marvel's Menu Button
How to move Marvel's Menu Button
Create an “edge to edge” section with Marvel's Split stack.
Create an “edge to edge” section with Marvel's Split stack.