Michael David Design Support
Tutorial
01
Banner Image
The following steps describe how to add a banner image by utilizing the Resources section (Requires RapidWeaver 5) within RapidWeaver.

1. Click and drag your image in the Resources area of the project file.
2. Insert the following code in the Custom CSS box within RapidWeaver: #feature {background-image: url(%resource(my-image.jpg)%);}
3. Replace the "my-image" with the name of the image.

(Banner width is set at 960px. Banner image heights are not limited by the theme but determined by you. Recommended height is 400px for proper extra container #2 display).
02
Built-In Slideshow
To utilize Affinity's built-in responsive slideshow for any page, please follow the instructions below.

1. Click and drag your images into the Resources area of the project file. The Resources area can be found on the left hand column of RapidWeaver just below your webpages. For proper display, please ensure slideshow images have a width of 980px. The height does not require a set measurement.

(Please ensure that the name of your image is all lowercase and does not contain any spaces, characters, or symbols. Failure to do so may prevent the image from displaying upon publishing your site).

2. Please insert the following code in the sidebar area:

<div id="myExtraContent1">
<div class="flexslider">
<ul class="slides">

<li>
<img src="%resource(my-image.jpg)%" />
</li>

</ul>
</div>
</div>


3. Replace the word my-image within the code to the name of the image you would like to have as the first image for your slideshow. You have now just completed your slideshow with 1 image.

4. For each additional image you would like to add to your slideshow, you will need to add the following line of code for each image:
<li>
<img src="%resource(my-image.jpg)%" />
</li>


The code below shows the additional line of code should be placed after the first li sequence, and what your sidebar area should look for a slideshow with two images. You may continue to add images to your slideshow as needed. Please note that images will appear in corresponding order.

<div id="myExtraContent1">
<div class="flexslider">
<ul class="slides">

<li>
<img src="%resource(my-image.jpg)%" />
</li>

<li>
<img src="%resource(my-image.jpg)%" />
</li>

</ul>
</div>
</div>


5. To ensure your slideshow displays correctly, highlight the entire code in the sidebar area and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen. If this is done correctly, the entire code will have a pink highlight.

Please verify that the Slideshow On option under Slideshow Display in the Styles section of RapidWeaver has been selected. There is also an option to choose between a slideshow that will transition images with a fade-in, fade-out feature, or slider effect under Slideshow Transitions in the Style Options section.
03
Extra Content
Information on extra content and its implementation in themes can be found at the following link: http://extracontent.info/tag/rapidweaver/. Please see the Extra Content page of this preview site to see where extra content areas are placed in Affinity. Please note that the Extra Content Area 2 area must not exceed 1 line of text for proper display on smaller devices.
04
Fluid Video
Once you have embedded your video from any of the compatible media sites listed on the Fluid Video page of this preview site, highlight the code used for embedding and click on "Ignore Formatting" under Format. Your video is now set-up and ready to display appropriately on multiple devices.
05
Responsive Columns
To create responsive columns within Affinity, a 3rd party product stack is required such as Joe Workman's responsive stack layout which can be found at the following link: http://joeworkman.net/rapidweaver/stacks/responsive-layout/.
06
Social Icons
1. Insert the following code in the Sidebar area within RapidWeaver:
<a class= "social" href= "#">f</a>
2. Replace the # with the page URL of your social icon.
3. Replace the letter f with the corresponding symbol of the social icon of your choice using the chart below.
4. Highlight the entire code and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen.

(For multiple social icons, repeat the above steps for each desired icon.)
Stacks Image 261
07
New To RapidWeaver
Welcome. As you will soon discover, RapidWeaver is an incredible, easy-to-use product for building websites. The following link provides information on the basics of RapidWeaver: http://support.realmacsoftware.com/kb/basics-of-rapidweaver.