Michael David Design

Escape Tutorial
Banner Image
The following steps describe how to add a banner image by utilizing the Resources section (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 1050px. Banner image heights are not limited by the theme but determined by you).
Escape requires a 3rd party product to utilize a slideshow. Escape's preview site features Superflex, an easy-to-use responsive slideshow product which can be found at the following link: http://nickcatesdesign.com/rapidweaver_stacks/index.html (Since Escape is a responsive theme, please ensure your 3rd party slideshow product is compatible with responsive themes). Once Superflex has been successfully installed, the following steps describe how to set-up your slideshow:

1. In Stacks 2, click on the cube icon located at the top left side of your screen. Scroll down until you find Superflex.
2. Simply drag Superflex to your Stacks 2 page.
3. You are now ready to drag images from your desktop to the box with the arrow pointing down.
4. Once you have placed your images within Superflex, you must un-click the Quick-Set-up Superflex setting (bottom-right) and then click on banner import and responsive banner. You are now ready to watch your responsive slideshow.

(Several customizable options are available with Superflex such as the number of images, length of time between slides, and transition types.)
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 105

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.

*Please ensure you have disabled the Consolidate CSS files under Publishing Preferences for proper functionality of the theme.