Marvel
Below you'll find some useful tips on using the Marvel theme.
Paste the code below into your content area to create a line break. Highlight your code and apply “Format > Ignore Formatting”.
<hr>
To style links with forward arrow icons, click a link to open the link panel, add a Custom Attribute, give it the name “class”, and value “social-forward”.
In RapidWeaver, go Settings → General, then drag and drop your image in the Banner input box.
- 1.Go Inspector > Sidebar, paste YouTube or Vimeo embed/share snippet.
- 1.Highlight your code, go Format > Clear, then Format > Ignore.
- 2.Add class=”feature” to the iframe tag.
- 3.Go Inspector > Styles > Banner – Type, choose HTML or Embed Video.
- 1.In preview, your HTML5 video should now be playing!
1. Double click a page link (left panel) to edit the page title.
2. Paste the snippet below in front of the page title.
<i></i>
When in preview mode, you should now see your featured desktop navigation links!
1. Add your .mp4 video to the RapidWeaver Resources panel.
2. Go Inspector > Sidebar, add the video snippet below.
<video loop muted autoplay class="feature"><source src="%resource(my_video.mp4)%" type="video/mp4"></video>
• Highlight your code, go Format > Clear, then Format > Ignore.
• Change “my_video” to your video title (no spaces).
3. Go Inspector > Styles > Banner – Type, choose HTML or Embed Video.
In preview, your HTML5 video should now be playing!
4. Drop in a fall back image banner, just incase some browsers or devices don't support HTML5 video.
Here’s some custom css to make the mobile menu button appear in the upper right corner of a mobile device. Paste the code below in Settings > Code > CSS.
@media screen and (max-width: 800px) { .menu_stick { top: 0;bottom: auto; } .slideout.menu_btn { top: 20px; bottom: auto; } }
In RapidWeaver, go “View > Page Inspector > General”, then drag and drop your image in the Override Site Banner input box.
Convert embedded video links from YouTube or Vimeo, to responsive video playback.
1. Copy the embed/share code from the video host.
2. Paste the embed code into the content edit area.
3. Highlight your code, go Format > Clear, then Format > Ignore.
In preview, your video should now be ready!
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. Add split section style within the stack settings panel.
* NOTE: After using the Split stack, all following content MUST be contained within Split stacks to avoid layout issues.
* NOTE: Split stack use is not compatible with using layout sidebar option. In the Inspector > Styles > Sidebar, “Hide” must be chosen.
Use the theme styles as shown on the Marvel preview site. You access these by going Inspector > Styles > Theme Styles, and choosing a preset title.
1. In edit mode, place your intended Velvet banner video, as the first Velvet stack in the page order.
2. Go Styles > Theme Tools, then disableLoad Responsive Tools.
3. Go Inspector > Styles > Banner – Type, choose Velvet (Import First Video).
In preview, your Velvet video banner should now be ready!
Last modified 10mo ago