Adding Images to the Slider
Step 1: 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.
Step 2: Navigate to the Header-Header Section of the Page Inspector.
Step 3: Copy and Paste the code below into the text area.
<img title="Caption text here" alt="Slider Image" src="%resource(name_of_resource.jpg)%" />
Step 4: Change name_of_resource.jpg to match the name of your resource & be sure to make sure the extension matches as well (png, jpeg, or jpg). The names are case sensitive so slide-1.jpg in the code and slide-1.JPG in the resource section would not work.
Step 5: Change the value of ‘title’ to your desired caption or delete title if you don’t wish to display a caption.
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.
Adding Content to the Promotional Boxes
Step 1: Navigate to the Sidebar Tab of the Page Inspector > Siderbar.
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"> Promo Box 1 Content Here </div> <div id="myExtraContent2"> Promo Box 2 Content Here </div> <div id="myExtraContent3"> Promo Box 3 Content Here </div> <div id="myExtraContent4"> Promo Box 4 Content Here </div>
Step 3: Highlight 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
& 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.
Social Media Icons
Step 1: Social Media Icons can be placed in the Main Content area, Sidebar, and Site Slogan. Copy and paste the code below into your desired location.
Step 2: Copy the code below and paste it between <div id=”socialMedia”> & </div>.
1 2 3 4 5
<a href="http://www.webaddresshere.com"> <span> # </span> </a>
Step 3: Find the Social Media Icon you wish you use from the Glyph Chart below.
Step 4: Type the corresponding letter in-between & .
Step 5: Replace http://www.webaddresshere.com with the address to your social media site.
Step 6: Repeat steps 3 – 5 untill you have all the icons you wish to use.
Step 7: Highlight the code & select Ignore Formatting from the Format Drop down menu (or press command + . ). Your finished results should resemble the screen shot below.
Step 1: After creating a page, double click the title to begin renaming the page.
Step 2: Type in <p> & then your desired subtitle followed by </p>. Your finished title should resemble the screenshot below.