Slider Images

Step 1: Turn on the built in Camera slider in the Page Inspector Styles section.

Hemera Slider Size

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

Add Resource

Image sizes for site 960px width
Small: 960×200 Pixels
Medium: 960×288 Pixels
Large: 960×480 Pixels
Oversized: 960×720 Pixels

Image sizes for 1280px site width
Small: 1280×200 Pixels
Medium: 1280×384 Pixels
Large: 1280×640 Pixels
Oversized: 1280×960 Pixels

Step 3: Copy and Paste the code below into the main content editor or into the sidebar content. (If you are using Stacks, and have the Extra Content Stack copy the code below labeled Extra Content Stack).

Content or Sidebar Editor

1
2
3
4
5
<div id="myExtraContent1">
   <div class="camera_wrap" id="camera_wrap">
      <!--Paste Step 4's Code Here -->
   </div>
</div>

Extra Content Stack

1
2
3
<div class="camera_wrap" id="camera_wrap">
   <!--Paste Step 4's Code Here -->
</div>

Step 4: Copy and Paste the code below into the Extra Content & Camera wrap Div you pasted from Step 3. (Or into the Extra Content Stack if you are using stacks).

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

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

Step 6: Change “Caption here” to your desired caption or delete the entire section if you wish not to display a caption.

Delete

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

Step 7: Repeat Steps 4-6 untill you have as many photos you want to display in the slider. If you are using the main content or sidebar areas, make sure to highlight the code and select “Ignore Formatting” from the Format drop down menu. Your finished code should be simular to the screen shot below.

Hemera Sidebar Slider Images

Example Code

Content or Sidebar Editor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="myExtraContent1">
   <div class="camera_wrap" id="camera_wrap">
      <div data-src="%resource(slider-1.jpg)%" data-fx="simpleFade">
         <div class="camera_caption fadeFromBottom">
            Slide 1 Caption
         </div>
      </div>
      <div data-src="%resource(slider-2.jpg)%" data-fx="simpleFade">
         <div class="camera_caption fadeFromBottom">
            Slide 2 Caption
         </div>
      </div>
      <div data-src="%resource(slider-3.jpg)%" data-fx="simpleFade">
         <div class="camera_caption fadeFromBottom">
            Slide 3 Caption
         </div>
      </div>
   </div>
</div>

Extra Content Stack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="camera_wrap" id="camera_wrap">
   <div data-src="%resource(slider-1.jpg)%" data-fx="simpleFade">
      <div class="camera_caption fadeFromBottom">
         Slide 1 Caption
      </div>
   </div>
   <div data-src="%resource(slider-2.jpg)%" data-fx="simpleFade">
      <div class="camera_caption fadeFromBottom">
         Slide 2 Caption
      </div>
   </div>
   <div data-src="%resource(slider-3.jpg)%" data-fx="simpleFade">
      <div class="camera_caption fadeFromBottom">
         Slide 3 Caption
      </div>
   </div>
</div>

Transition Slider Effects

Step 1: After you have added images to your slider you will notice a data-fx value after the resource names. You can change the data-fx value to one of the values below to get a different transition effect.

‘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.

Extra-Content (non-Stacks page)

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

Page Info - Page Inspector

Sidebar

Note, if you are using a styled text page you may also use the Main Content editor

Step 2:

Copy and Paste the code below into the text area.

1
2
3
4
5
6
7
8
9
10
11
12
<div id="myExtraContent1">
   Extra-Content 1 content Here
</div>
<div id="myExtraContent2">
   Extra-Content 2 content Here
</div>
<div id="myExtraContent3">
   Extra-Content 3 content Here
</div>
<div id="myExtraContent4">
   Extra-Content 4 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 and & 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(or Main Content editor) should be simular to the screen shot below.

Extra Content in Sidebar

Create Button

Step 1: Type into the editor whatever you would like the button to read.

Conversa Button Text

Step 2: Highlight your text & select the Add Link button.

Add Link or Add Link Plus Icon

Step 3: Type in the URL or select where you would like the button to navigate to.

URL Destination

Step 4: Add a new Custom Attribute Named: class with the Value: button

Conversa Class Button

Click Set Link and you are done!

General Icons

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

Hemera Glyph Icons

Step 2: Copy and paste the code below into the editor and replace the @ symbol with the corrisponding letter you have chosen.

1
<span class="icon">@</span>

Step 3: You can adjust the size & color of the letter. Preview to view your changes and icon.

Tips: Add this code to your page titles to have the icons appear in your navigation menu.

Hemera Icon Glyph Screenshot

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

class social

*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!

TIPS

- Use the Format drop down menu to make the icon appear bigger or smaller.

- To add social media icons to the Header area of your page, copy and paste the code from below into the editor. You will need to change the href value to the URL(s) you want the icons to link to. Then change the letter to match the social media icon from the Glyph Chart. Once you have edited the code all you will need to do is cut and paste this code directly after the title of your site in the Setup menu.

1
2
3
4
5
6
<div class="social-links">
   <a href="http://www.facebook.com" class="social">F</a> 
   <a href="http://www.twitter.com" class="social">t</a> 
   <a href="http://feedburner.google.com/" class="social">r</a> 
   <a href="http://www.linkedin.com" class="social">l</a>
</div>

Hemera General Setting Social Media Option

Chocolat Lightbox

Step 1: Turn on Chocolat Lightbox in the Styles section of the Page Inspector.

Hemera Chocolat Lightbox Styling Options

Step 2: In order for the Lightbox to work correctly you will need the original image and a thumbnail (smaller version) of the image.

Chocolat Lightbox Large & Thumbnail Images

Step 3 Drag and drop the original image into the Resources section of RapidWeaver. Then drag and drop the thumbnail image into the place you would like the image link to display.

Hemera Chocolat Lightbox Drag & Drop

Step 4: Next, right click the thumbnail image and select Add Link. (Or click the Add link button after selecting the image)

Hemera Chocolat Lightbox Add Link

Step 5: Click on the URL drop down and select the resource from the list.

Step 6: Add a custom attribute titled class with the value lightbox and then click Set Link.

Hemera Chocolat Lightbox Add Class

Step 7: Switch to preview mode to see if it worked and you are done. To add more photos repeat Steps 3-6.