Extra-Content

Step 1: Navigate to the Sidebar Tab of the Page Inspector.

Page Info - Page Inspector

Sidebar

Step 2: Copy and Paste the code below into the text area.

1
2
3
4
5
6
<div id="myExtraContent1">
     Extra-Content above main content Here
</div>
<div id="myExtraContent2">
     Extra-Content below main content Here
</div>

Step 3: Highlight all the code & select Ignore Formatting from the Format Drop down menu (or press command + . ).

Step 4: Add your desired content to each section. Highlight everything between

1
<div id=”myExtraContent#”>

and

1
</div>

& select Ignore Formatting from the Format Drop down menu (or press command + . ).

Step 5: Preview and you are complete. Your finished code in the Sidebar should be simular to the screen shot below.

Cinema Sidebar Example

Slider Images

Step 1: Add all the images you want to use to the Resources section by clicking on the Add Resource button in the top right of the Rapidweaver window.

Add Resource

Step 2: Navigate to the Header-Header Section of the Page Inspector.

Page Info - Page Inspector

Page Info - Header

Header Header

Step 3: Copy and Paste the code below into the text area.

1
2
3
4
5
<div data-src="%resource(IMAGE1.jpg)%" data-fx="simpleFade">
     <div class="camera_caption fadeFromBottom">
          Caption here
     </div>
</div>

Step 4: Change “IMAGE1.jpg” to exactly match the name of your image in the Resources section (case sensitive)

Step 5: Change “Caption here” to your desired caption or delete the text below if you wish not to display a caption.

1
2
3
<div class=”camera_caption fadeFromBottom”>
Caption here
</div>

Step 6: Repeat steps untill you have as many photos you want to display in the slider, preview and you are complete. Your finished code in the Header-Header section should be simular to the screen shot below.

Cinema Slider Resources

Slider Transitions

Step 1: After you have added images to your slider, change the data-fxvalue to one of the values below.

‘random’
‘simpleFade’
‘curtainTopLeft’
‘curtainTopRight’
‘curtainBottomLeft’
‘curtainBottomRight’
‘curtainSliceLeft’
‘curtainSliceRight’
‘blindCurtainTopLeft’
‘blindCurtainTopRight’
‘blindCurtainBottomLeft’
‘blindCurtainBottomRight’
‘blindCurtainSliceBottom’
‘blindCurtainSliceTop’
‘stampede’
‘mosaic’
‘mosaicReverse’
‘mosaicRandom’
‘mosaicSpiral’
‘mosaicSpiralReverse’
‘topLeftBottomRight’
‘bottomRightTopLeft’
‘bottomLeftTopRight’
‘bottomLeftTopRight’
‘scrollLeft’
‘scrollRight’
‘scrollHorz’
‘scrollBottom’
‘scrollTop’

Example: data-fx=”simpleFade” would be changed to data-fx=”curtainTopRight” for a curtain transition effect.

Single Image Banner

Step 1: Add the image you want to use to the Resources section by clicking on the Add Resource button in the top right of the Rapidweaver window.

Add Resource

Step 2: Navigate to the Header-Header Section of the Page Inspector.

Page Info - Page Inspector

Page Info - Header

Header Header

Step 3: Copy and Paste the code below into the text area.

1
<img src="%resource(IMAGE.jpeg)%" alt="Banner">

Step 4: Change IMAGE.jpeg to match the name of your resource.

Preview and you are done!

Social Media Icons

Step 1: Find the Social Media Icon you want you use from the Glyph Chart below:

Cabernet 2 Glyph Chart

Step 2: Type the corresponding letter or number into your desired location.

Cabernet 2 Social Media Links

Step 3: Highlight your letter or number and select the Add Link button.

Add Link or Add Link Plus Icon

Step 4: Type in the URL to your social media page & add a new Custom Attribute Named: class with the Value: social

Link Customization

*check the Open in New Window Box if you do not want visitors to leave your page when clicking on the link

Click Set Link and you are done!

Changelog

v1.0.0 (October 5, 2012)

  • New option to adjust the maximum width of the site. Default was 1260px, now you can set it to 1024px, 960px, and even turn the maximum width off all together. (smaller max-widths make some pages look especially nice, turning it off makes the site look insane! in a good way! no max-width works great with Hang Glider stacks)
  • New option to turn off the underline that appears when you hover over the navigation menu items
  • New options to add color to the sub navigation menus (nav ul ul). You can change the color of the text as well as the hover text.
  • Other minor bug fixes